Total Blocking Time (TBT)
O que é TBT? #
A métrica Total Blocking Time (TBT) mede a quantidade total de tempo entre a First Contentful Paint (FCP) e a Time to Interactive (TTI) em que a thread principal foi bloqueado por tempo suficiente para evitar a responsividade da entrada.
A thread principal é considerada "bloqueada" sempre que houver uma tarefa longa rodando, ou seja, uma tarefa que é executada na thread principal por mais de 50 milissegundos (ms). Dizemos que a thread principal está "bloqueada" porque o navegador não pode interromper uma tarefa em andamento. Assim, no caso em que um usuário interage com a página no meio de uma tarefa longa, o navegador precisa aguardar que a tarefa termine antes que ele possa responder.
Se a tarefa for longa o suficiente (por exemplo, qualquer coisa acima de 50 ms), é provável que o usuário sinta o atraso e perceba a página como lenta ou instável.
O tempo de bloqueio de uma determinada tarefa longa é sua duração superior a 50 ms. E o tempo total de bloqueio de uma página é a soma dos tempos de bloqueio de cada tarefa longa que ocorre entre a FCP e a TTI.
Por exemplo, considere o seguinte diagrama da thread principal do navegador durante o carregamento da página:
A linha do tempo acima possui cinco tarefas, três das quais são Tarefas Longas porque sua duração excede 50 ms. O diagrama a seguir mostra o tempo de bloqueio para cada uma das tarefas longas:
Portanto, embora o tempo total gasto na execução de tarefas na thread principal seja de 560 ms, apenas 345 ms desse tempo são considerados tempo de bloqueio.
| Duração da tarefa | Tempo de bloqueio da tarefa | |
|---|---|---|
| Tarefa um | 250 ms | 200 ms |
| Tarefa dois | 90 ms | 40 ms |
| Tarefa três | 35 ms | 0 ms |
| Tarefa quatro | 30 ms | 0 ms |
| Tarefa cinco | 155 ms | 105 ms |
| Tempo Total de Bloqueio | 345 ms | |
Como a TBT se relaciona com a TTI? #
A TBT é uma ótima métrica complementar para a TTI porque ajuda a quantificar o nível de não-interatividade de uma página antes que ela se torne interativa de forma confiável.
A TTI considera uma página "confiavelmente interativa" se a thread principal estiver livre de tarefas longas por pelo menos cinco segundos. Isto significa que três tarefas de 51 ms espalhadas por 10 segundos podem atrasar a TTI em até uma única tarefa de 10 segundosmas esses dois cenários seriam percebidos de forma muito diferente para um usuário tentando interagir com a página.
No primeiro caso, três tarefas de 51 ms teriam uma TBT de 3 ms. Enquanto uma tarefa única de 10 segundos de duração teria uma TBT de 9.950 ms. O maior valor da TBT no segundo caso quantifica a experiência pior.
Como medir a TBT #
TBT é uma métrica que deve ser medida em laboratório. A melhor maneira de medir a TBT é executar uma auditoria de desempenho do Lighthouse no seu site. Consulte a documentação do Lighthouse sobre TBT para obter detalhes de uso.
Ferramentas de laboratório #
O que é uma boa pontuação TBT? #
Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma Total Blocking Time de menos de 300 milissegundos quando testados em um hardware móvel típico.
Para obter detalhes sobre como a TBT da sua página afeta sua pontuação de desempenho no Lighthouse, consulte Como o Lighthouse determina sua pontuação TBT
Como melhorar a TBT #
Para aprender como melhorar a TBT para um site específico, você pode executar uma auditoria de desempenho do Lighthouse e prestar atenção a quaisquer oportunidades específicas que a auditoria sugerir.
Para aprender como melhorar a TBT em geral (para qualquer site), consulte os seguintes guias de desempenho:
- Reduza o impacto do código de terceiros
- Reduza o tempo de execução do JavaScript
- Minimize o trabalho da thread principal
- Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos