O tempo total de bloqueio (TBT, na sigla em inglês) é uma das métricas monitoradas na seção Desempenho do relatório do Lighthouse. Cada métrica captura algum aspecto da velocidade de carregamento da página.
O relatório do Lighthouse mostra o TBT em milissegundos:
O que o TBT mede
O TBT mede o tempo total em que uma página fica bloqueada para responder à entrada do usuário, como cliques do mouse, toques na tela ou pressionamento do teclado. A soma é calculada adicionando a parte de bloqueio de todas as tarefas longas entre a Primeira exibição de conteúdo e o Tempo até a interação. Qualquer tarefa executada por mais de 50 ms é considerada longa. O período após 50 ms é a parte de bloqueio. Por exemplo, se o Lighthouse detectar uma tarefa de 70 ms, a parte de bloqueio será de 20 ms.
Como o Lighthouse determina sua pontuação de TBT
Sua pontuação de TBT é uma comparação entre o tempo de TBT da sua página e o tempo de TBT multiplicado por milhões de sites reais quando carregados em dispositivos móveis. Consulte Como as pontuações de métricas são determinadas para saber como os limites de pontuação do Lighthouse são definidos.
Esta tabela mostra como interpretar sua pontuação de TBT:
| Tempo de TBT (em milissegundos) |
Codificação por cores |
|---|---|
| 0 a 200 | Verde (rápido) |
| 200-600 | Laranja (moderado) |
| Mais de 600 | Vermelho (lento) |
Como melhorar sua pontuação de TBT
Consulte O que está causando minhas tarefas longas? para aprender a diagnosticar a causa raiz de tarefas longas com o painel "Desempenho" do Chrome DevTools.
Em geral, as causas mais comuns de tarefas longas são:
- Carregamento, análise ou execução desnecessários de JavaScript. Ao analisar seu código no painel de desempenho, você pode descobrir que a linha de execução principal está realizando um trabalho que não é realmente necessário para carregar a página. Reduzir os payloads do JavaScript com divisão de código, remover códigos não utilizados ou carregar JavaScript de terceiros com eficiência deve melhorar sua pontuação de TBT.
- Instruções JavaScript ineficientes. Por exemplo, depois de analisar o código no painel "Desempenho", suponha
que você veja uma chamada para
document.querySelectorAll('a')que retorna 2.000 nós. Refatorar seu código para usar um seletor mais específico que retorna apenas 10 nós melhora sua pontuação de TBT.
Como melhorar sua pontuação de performance geral
A menos que você tenha um motivo específico para focar em determinada métrica, geralmente é melhor se concentrar em melhorar sua pontuação de desempenho geral.
Use a seção Oportunidades do relatório do Lighthouse para determinar quais melhorias terão mais valor para sua página. Quanto mais significativa for a oportunidade, maior será o efeito dela na sua pontuação de desempenho. Por exemplo, a captura de tela do Lighthouse abaixo mostra que eliminar os recursos de bloqueio de renderização gera a maior melhoria:
Consulte a página de destino de auditorias de desempenho para saber como aproveitar as oportunidades identificadas no seu relatório do Lighthouse.
Recursos
- Código-fonte da auditoria de Tempo total de bloqueio
- Tarefas longas de JavaScript estão atrasando o tempo para interação da página?
- Otimizar a latência na primeira entrada
- Primeira exibição de conteúdo
- Tempo para interação da página
- Reduzir payloads de JavaScript com divisão de código
- Remover código não usado
- Carregar recursos de terceiros com eficiência