O que é TBT (Total Blocking Time)?
O TBT mede quanto tempo a página ficou incapaz de responder a cliques e toques por causa de tarefas longas de JavaScript. A métrica, também chamada de Total Blocking Time ou Tempo Total de Bloqueio, aparece em relatórios de laboratório do Lighthouse e do PageSpeed Insights.
O navegador executa JavaScript em uma única thread principal. Enquanto uma tarefa roda ali, nada mais acontece: o clique do usuário entra na fila e espera. O TBT chama de tarefa longa qualquer execução acima de 50 milissegundos e contabiliza apenas o excedente desse limite.
O TBT nasceu como proxy de laboratório para a experiência real de interatividade. Sensores de campo dependem de usuários reais interagindo, e o TBT reproduz o problema em ambiente controlado, o que permite testar antes do deploy.
Como calcular o TBT?
TBT = soma de (duração de cada tarefa longa menos 50ms), para tarefas acima de 50msSiga o cálculo com um exemplo. Uma página carrega e, na janela entre o primeiro conteúdo pintado e a interatividade, o navegador executa quatro tarefas: 40ms, 120ms, 90ms e 250ms.
- Descarte a tarefa de 40ms, que fica abaixo do limite de 50ms.
- Calcule a parte bloqueante de cada tarefa longa: 120 menos 50 é 70ms; 90 menos 50 é 40ms; 250 menos 50 é 200ms.
- Some tudo: 70 + 40 + 200 = 310ms de TBT.
O resultado significa que o usuário teria enfrentado 310 milissegundos de página congelada naquela janela. Na prática, ninguém calcula isso à mão: o Lighthouse e o PageSpeed Insights fazem a conta e listam as tarefas longas por origem.
TBT vs outras métricas de performance: qual a diferença?
| Métrica | O que mede | Quando usar |
|---|---|---|
| TBT | Tempo de thread principal bloqueada em laboratório | Ao diagnosticar peso de JavaScript antes do deploy |
| INP | Atraso real de resposta às interações do usuário | Ao medir experiência de campo com usuários reais |
| LCP | Tempo até pintar o maior elemento visível | Ao avaliar percepção de carregamento |
| CLS | Deslocamento inesperado de layout durante o carregamento | Ao investigar elementos que pulam na tela |
Veredito: o TBT é a métrica de laboratório que você usa para achar a causa, e o INP é a métrica de campo que mostra se o problema chegou ao usuário.
Exemplos de uso
Um e-commerce percebe taxa de rejeição alta no mobile. O Lighthouse aponta TBT de 900ms, causado por três scripts de chat, mapa de calor e teste A/B carregando juntos. O time move dois deles para carregamento posterior e o TBT cai.
Um site institucional em WordPress soma TBT de 620ms por causa de um construtor de páginas que injeta JavaScript em toda página. A equipe remove o script das páginas que não usam o recurso.
Valores de referência
O Lighthouse classifica o TBT medido em condições de mobile simulado nas seguintes faixas:
| Faixa | TBT | Leitura |
|---|---|---|
| Bom | Até 200ms | A página responde rápido ao usuário |
| Precisa melhorar | Entre 200ms e 600ms | Há travamentos perceptíveis |
| Ruim | Acima de 600ms | A página congela de forma clara |
Erros comuns
- Comparar TBT de máquinas diferentes: a métrica depende da CPU e da simulação usada no teste.
- Tratar o TBT como métrica de campo, quando o dado real de interatividade vem do INP.
- Somar scripts de terceiros sem medir o custo de cada um na thread principal.
- Otimizar imagens para melhorar TBT, já que o gargalo aqui é JavaScript, não peso de mídia.
Perguntas frequentes sobre TBT
O TBT afeta o ranqueamento no Google?
O TBT em si não entra como fator de ranqueamento. Ele é uma métrica de laboratório usada para diagnóstico. O que o Google considera na avaliação de experiência de página é o dado de campo de interatividade, e o TBT serve como ferramenta para chegar lá antes.
Como reduzir o TBT de um site?
Reduza e adie JavaScript. Remova scripts de terceiros que não geram valor, carregue os restantes depois da interação, quebre tarefas longas em pedaços menores e evite executar código pesado durante o carregamento. O painel de performance do Chrome DevTools mostra quais funções ocupam a thread.
Qual a diferença entre TBT e tempo de carregamento?
Tempo de carregamento mede quando a página termina de montar. O TBT mede quanto tempo, dentro desse processo, a página ficou sem responder a cliques. Uma página pode carregar rápido e ainda assim ter TBT alto, deixando o usuário clicando sem retorno.