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, 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 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 de 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 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 5 | 155 | 105 |
| Tempo total de bloqueio | 345 milissegundos | |
Qual é a relação entre a TBT e a INP?
O TBT antecede a INP e é útil como indicador de problemas de INP, principalmente em ambientes de laboratório em que é mais difícil medir o parâmetro. No entanto, o TBT pode sinalizar problemas em potencial que talvez não existam para os usuários, se eles não interagirem 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 dos problemas reais de resposta que os usuários enfrentam. O TBT pode ser uma métrica substituta do INP no laboratório, mas não substitui o INP por si só.
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 espalhadas por 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 única tarefa de 10 segundos teria 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
O TBT é uma métrica que precisa ser medida no laboratório. A melhor maneira de medir o TBT é executar uma auditoria de desempenho do Lighthouse no seu site. Consulte a documentação do Lighthouse sobre TBT para saber mais 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 consultar a mais recente API Long Animations Frame no campo se você quiser ir além de uma única interação INP.
Ferramentas do laboratório
Qual é uma boa pontuação da 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, já que o uso do TBT é uma métrica substituta do INP no laboratório, já que normalmente ele não pode ser medido com precisão. Portanto, para melhorar a TBT, consulte nossas orientações sobre como otimizar a INP.
Se você estiver analisando especificamente a TBT, execute uma auditoria de desempenho do Lighthouse e preste atenção em 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: