Tempo Total de Bloqueio

Published on Updated on

Translated to: English, Español, 한국어, 中文, Pусский, 日本語

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:

Uma captura de tela da auditoria do Tempo Total de Bloqueio do Lighthouse

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:

Tempo TBT
(em milissegundos)
Codificação por cores
0–300Verde (rápido)
300-600Laranja (moderado)
Mais de 600Vermelho (lento)

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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.

Carregamento, análise ou execução desnecessários de JavaScript costumam ser uma oportunidade muito maior para melhorias na maioria dos sites.

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:

Lighthouse: Opportunities section

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

Recursos

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.