O que é TBT?
A métrica "Tempo de bloqueio total" (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 evitar a capacidade de resposta da entrada.
Por padrão, o Lighthouse para de monitorar o TBT após o Tempo para interação da página (TTI), assim como algumas outras ferramentas de laboratório que medem o carregamento da página. Consulte Como o TBT se relaciona com o TTI?.
A linha de execução principal é considerada "bloqueada" sempre que há uma tarefa longa, ou seja, uma tarefa 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 terá que esperar a conclusão da tarefa antes de responder.
Se a tarefa for longa o suficiente (acima de 50 milissegundos), é provável que o usuário perceba o atraso e a página pareça lenta ou quebrada.
O tempo de bloqueio de uma determinada tarefa longa é a duração dela em excesso de 50 milissegundos. O tempo de bloqueio total de uma página é a soma do tempo de bloqueio de cada tarefa longa que ocorre após a FCP no período medido (normalmente 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 mostrada na imagem anterior tem cinco tarefas, sendo que três são Long Tasks porque a duração delas excede 50 milissegundos. O diagrama a seguir 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 |
| Terceira tarefa | 35 | 0 |
| Tarefa quatro | 30 | 0 |
| Tarefa cinco | 155 | 105 |
| Tempo total de bloqueio | 345 milissegundos | |
Qual é a relação entre a TBT e a INP?
O TBT é anterior ao INP e é útil como um indicador de problemas de INP, principalmente no ambiente de laboratório, em que medir o INP é mais difícil. No entanto, o TBT pode sinalizar possíveis problemas que não afetam os usuários, caso eles não interajam naquele momento. Além disso, ele pode não detectar problemas causados por interações quando medido no ambiente de laboratório. Recomendamos medir o INP no campo como uma medida de problemas reais de resposta que os usuários enfrentam. A TBT pode ser uma métrica de proxy razoável para a INP no laboratório, mas não substitui a INP.
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 medem tradicionalmente os carregamentos de página, incluindo o Lighthouse, o TBT foi medido até o TTI porque ajuda a quantificar a gravidade de quanto uma página é não interativa antes de se tornar confiávelmente interativa. No entanto, o TBT também pode continuar sendo medido após o carregamento da página e, portanto, além do TTI, por exemplo, no modo de período do Lighthouse.
O TTI considera uma página "confiável e interativa" se a linha de execução principal não tiver tarefas longas por pelo menos cinco segundos. Isso significa que três tarefas de 51 ms distribuídas em 10 segundos podem adiar o TTI tanto quanto uma única tarefa de 10 segundos, mas esses dois cenários seriam muito diferentes para um usuário que tenta interagir com a página.
No primeiro caso, três tarefas de 51 ms teriam um TBT de 3 milissegundos. Já uma única tarefa de 10 segundos teria um TBT de 9.950 milissegundos. O valor maior de TBT no segundo caso quantifica a experiência pior.
Esse exemplo mostra por que a TBT é geralmente uma métrica melhor do que a TTI, já que é menos propensa a valores fora da curva. Isso acontece mesmo quando o TTI é usado como o endpoint do TBT.
Como medir o TBT
O TBT é uma métrica que 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 a TBT para saber mais detalhes sobre o uso.
É possível medir o TBT no campo, mas não recomendamos isso, porque a interação do usuário pode afetar o TBT da página de maneiras que levam a muita variação nos seus relatórios. Em vez disso, recomendamos usar a API Long Animations Frame mais recente se você quiser ir além de uma única interação de INP.
Ferramentas de laboratório
Qual é uma boa pontuação de TBT?
Para oferecer uma boa experiência ao usuário, os sites precisam ter um tempo de bloqueio total inferior a 200 milissegundos quando testados em hardware móvel médio.
Para saber como o TBT da sua página afeta a pontuação de desempenho do Lighthouse, consulte Como o Lighthouse determina sua pontuação de TBT.
Como melhorar o TBT
Em geral, recomendamos otimizar para INP em vez de TBT, porque o TBT é uma métrica de proxy para INP no laboratório, em que a INP geralmente não pode ser medida com precisão. Portanto, para melhorar a TBT, consulte nossas orientações sobre como otimizar a INP.
Se você está procurando especificamente o TBT, pode executar uma auditoria de desempenho do Lighthouse e prestar atenção às oportunidades específicas sugeridas pela auditoria.
Em geral, melhorar o TBT de um site envolve reduzir a quantidade de scripts de bloqueio, o que significa otimizar os scripts para que sejam menos bloqueadores ou reduzir a quantidade de scripts no geral. Consulte os seguintes guias de performance: