O que é TBT?
A métrica de tempo total de bloqueio (TBT, na sigla em inglês) mede o tempo total após a First Contentful Paint (FCP) em que a linha de execução principal foi bloqueada por tempo suficiente para impedir a capacidade de resposta da entrada.
Por padrão, o Lighthouse interrompe o monitoramento do TBT após o Time to Interactive (TTI), assim como algumas outras ferramentas de laboratório que medem o carregamento da página. Consulte Como o TBT se relaciona com TTI?.
A linha de execução principal é considerada "bloqueada" sempre que há uma tarefa longa executada na linha de execução principal por mais de 50 milissegundos. Dizemos que a linha de execução principal está "bloqueada" porque o navegador não pode interromper uma tarefa em andamento. Portanto, se um usuário interagir com a página no meio de uma tarefa longa, o navegador precisará aguardar a conclusão da tarefa antes de responder.
Se a tarefa for longa o suficiente (algo acima de 50 milissegundos), é provável que o usuário perceba o atraso e consuma a página como lenta ou com falhas.
O tempo de bloqueio de uma determinada tarefa longa é a duração que excede 50 milissegundos. O tempo total de bloqueio de uma página é a soma do tempo de bloqueio de cada tarefa longa que ocorre após a FCP no período medido. Em geral, o TTI para ferramentas de carregamento de página ou o tempo de rastreamento total para outras ferramentas.
Por exemplo, considere o diagrama a seguir da linha de execução principal do navegador durante o carregamento da página:
A linha do tempo retratada na imagem anterior tem cinco tarefas, três delas são tarefas longas, porque a duração excede 50 milissegundos. O próximo diagrama mostra o tempo de bloqueio de cada uma das tarefas longas:
Portanto, embora o tempo total gasto na execução de tarefas na linha de execução principal seja de 560 milissegundos, apenas 345 milissegundos desse tempo são considerados tempo de bloqueio.
| Duração da tarefa (milissegundos) | Tempo de bloqueio de tarefas (milissegundos) | |
|---|---|---|
| Tarefa 1 | 250 | 200 |
| Tarefa 2 | 90 | 40 |
| Tarefa 3 | 35 | 0 |
| Tarefa 4 | 30 | 0 |
| Tarefa 5 | 155 | 105 |
| Tempo total de bloqueio | 345 milissegundos | |
Qual é a relação entre o TBT e o TTI?
O TBT é medido ao longo de um período. Para algumas ferramentas de laboratório que tradicionalmente medem o carregamento de página, incluindo o Lighthouse, o TBT foi medido até a TTI porque ajuda a quantificar a gravidade da não interação de uma página antes que ela se torne interativa de forma confiável. No entanto, o TBT também pode continuar sendo medido após o carregamento da página e além do TTI, por exemplo, no modo de período do Lighthouse.
A TTI considera uma página "confiávelmente interativa" quando a linha de execução principal não tem tarefas longas por pelo menos cinco segundos. Isso significa que três tarefas de 51 ms distribuídas ao longo de 10 segundos podem atrasar o TTI tanto quanto uma tarefa de 10 segundos, mas esses dois cenários seriam muito diferentes para um usuário tentando interagir com a página.
No primeiro caso, três tarefas de 51 ms teriam um TBT de 3 milissegundos. Já uma tarefa de 10 segundos tem um TBT de 9.950 milissegundos. O maior valor da TBT no segundo caso quantifica a experiência ruim.
Este exemplo mostra por que o TBT costuma ser uma métrica melhor do que o TTI, já que é menos propenso a outliers. Isso ocorre até mesmo quando o TTI é usado como endpoint para o TBT.
Como medir o TBT
A métrica TBT precisa ser medida no laboratório. A melhor maneira de medir o TBT é realizar uma auditoria de desempenho do Lighthouse no seu site. Consulte a documentação do Lighthouse sobre TBT para ver detalhes de uso.
Ferramentas do laboratório
Qual é uma boa pontuação da TBT?
Para oferecer uma boa experiência ao usuário, os sites devem ter um tempo de bloqueio total inferior a 200 milissegundos quando testados em hardware móvel médio.
Para detalhes sobre como o TBT da sua página afeta a pontuação de desempenho do Lighthouse, consulte Como o Lighthouse determina sua pontuação do TBT
Como melhorar o TBT
Para saber como melhorar o TBT de um site específico, faça uma auditoria de desempenho do Lighthouse e preste atenção em oportunidades específicas sugeridas pela auditoria.
Para saber como melhorar o TBT em geral (para qualquer site), consulte os seguintes guias de desempenho: