Time to Interactive (TTI)
O que é TTI? #
A métrica TTI mede o tempo desde o início do carregamento da página até o carregamento de seus principais sub-recursos e é capaz de responder de forma confiável e rápida à entrada do usuário.
Para calcular a TTI com base num rastreamento de desempenho de uma página da web, siga as etapas a seguir:
- Comece com a First Contentful Paint (FCP).
- Pesquise para frente no tempo por uma janela silenciosa de pelo menos cinco segundos, onde a janela silenciosa é definida como: nenhuma tarefa longa e não mais do que duas solicitações GET de rede durante a carga.
- Pesquise para trás pela última tarefa longa antes da janela silenciosa, parando na FCP se nenhuma tarefa longa for encontrada.
- A TTI é o tempo de término da última tarefa longa antes da janela silenciosa (ou o mesmo valor que a FCP se nenhuma tarefa longa for encontrada).
O diagrama a seguir deve ajudar a visualizar as etapas acima:
Historicamente, os desenvolvedores otimizavam as páginas para tempos de renderização rápidos, muitas vezes às custas da TTI.
Técnicas como a renderização lado-servidor (SSR) podem levar a cenários em que uma página parece interativa (ou seja, links e botões são visíveis na tela), mas não é de fato interativa porque a thread principal está bloqueado ou porque o código JavaScript que controla esses elementos ainda não foi carregado.
Quando os usuários tentam interagir com uma página que parece interativa, mas na verdade não é, eles provavelmente responderão de uma destas duas maneiras:
- Na melhor das hipóteses, ficarão incomodados porque a página demora para responder.
- Na pior das hipóteses, eles presumirão que a página está quebrada e provavelmente irão embora. Eles podem até perder a confiança no valor da sua marca.
Para evitar esse problema, faça todos os esforços para minimizar a diferença entre a FCP e a TTI. E nos casos em que exista uma diferença perceptível, deixe claro por meio de indicadores visuais que os componentes de sua página ainda não são interativos.
Como medir TTI #
A TTI é uma métrica que é idealmente medida em laboratório. A melhor maneira de medir a TTI é executar uma auditoria de desempenho do Lighthouse no seu site. Consulte a documentação do Lighthouse sobre TTI para obter detalhes de uso.
Ferramentas de laboratório #
O que é uma boa pontuação de TTI? #
Para garantir uma boa experiência ao usuário, os sites devem se esforçar para ter um tempo de interação de menos de 5 segundos quando testados num hardware móvel típico.
Para obter detalhes sobre como a TTI da sua página afeta sua pontuação de desempenho no Lighthouse, consulte Como o Lighthouse determina sua pontuação TTI
Como melhorar a TTI #
Para aprender como melhorar a TTI para um site específico, você pode executar uma auditoria de desempenho do Lighthouse e prestar atenção a quaisquer oportunidades específicas que a auditoria sugerir.
Para saber como melhorar a TTI em geral (para qualquer site), consulte os seguintes guias de desempenho:
- Minifique o JavaScript
- Pré-conecte a origens necessárias
- Pré-carregue solicitações importantes
- Reduza o impacto do código de terceiros
- Minimize a profundidade de solicitações críticas
- Reduza o tempo de execução do JavaScript
- Minimize o trabalho da thread principal
- Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos