Tempo Total de Bloqueio

O Tempo Total de Bloqueio (TBT - Total Blocking Time) é uma das métricas monitorada na seção Desempenho do relatório Lighthouse. Cada métrica captura algum aspecto da velocidade de carregamento da página.

O Lighthouse apresenta a métrica TBT em segundos:

# O que o TBT mede

O TBT mede a quantidade total de tempo que uma página fica bloqueada para responder à entrada do usuário, como cliques do mouse, toques na tela ou pressionar de teclas. A soma é calculada adicionando a parte do bloqueio de todas as tarefas longas entre First Contentful Paint, renderização do primeiro conteúdo, e Time to Interactive, tempo até interativa. Qualquer tarefa executada por mais de 50 ms é uma tarefa longa. A quantidade de tempo após 50 ms é a parte do bloqueio. Por exemplo, se o Lighthouse detecta uma tarefa de 70 ms, a porção de bloqueio seria de 20 ms.

# Como o Lighthouse determina sua pontuação TBT

Sua pontuação TBT é uma comparação entre o tempo TBT de sua página e os tempos TBT para os 10.000 principais sites quando carregados em dispositivos móveis. Os principais dados do site incluem páginas 404.

Esta tabela mostra como interpretar sua pontuação TBT:

# Como melhorar sua pontuação TBT

Veja O que está causando minhas longas tarefas? para aprender a diagnosticar a causa raiz de tarefas longas com o painel Desempenho do Chrome DevTools.

Em geral, as causas mais comuns das tarefas longas são:

• Carregamento, análise ou execução desnecessária de JavaScript. Ao analisar seu código no painel Desempenho, você pode descobrir que o thread principal está fazendo um trabalho que não é realmente necessário para carregar a página. Reduzir as cargas úteis do JavaScript com divisão de código, remover código não utilizado ou carregar de forma eficiente o JavaScript de terceiros deve melhorar sua pontuação TBT.
• Declarações de JavaScript ineficientes. Por exemplo, depois de analisar seu 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 deve melhorar sua pontuação TBT.

# How to improve your overall Performance score

Unless you have a specific reason for focusing on a particular metric, it's usually better to focus on improving your overall Performance score.

Use the Opportunities section of your Lighthouse report to determine which improvements will have the most value for your page. The more significant the opportunity, the greater the effect it will have on your Performance score. For example, the Lighthouse screenshot below shows that eliminating render-blocking resources will yield the biggest improvement:

See the Performance audits landing page to learn how to address the opportunities identified in your Lighthouse report.

# Recursos

• Código fonte para auditoria de Total Blocking Time (tempo total de bloqueio)
• As longas tarefas de JavaScript estão atrasando seu Time to Interactive (tempo até interativa)?
• First Contentful Paint (primeira renderização de conteúdo)
• Time to Interactive (tempo até interativa)
• Reduza os payloads do JavaScript com divisão de código
• Remova o código não utilizado
• Carregue com eficiência recursos de terceiros
• Carregue com eficiência recursos de terceiros