O tempo para interação (TTI) é uma métrica de laboratório para medir a capacidade de resposta ao carregamento. Ele ajuda a identificar casos em que uma página parece interativa, mas não é. Um TTI rápido ajuda a garantir que a página seja usável.
O que é TTI?
A métrica TTI mede o tempo desde o início do carregamento da página até o carregamento dos sub-recursos principais e é capaz de responder de forma confiável e rápida à entrada do usuário.
Para calcular o TTI com base em um rastreamento de performance de uma página da Web, siga estas etapas:
- Comece pela First Contentful Paint (FCP).
- Procure uma janela de inatividade de pelo menos cinco segundos, em que janela de inatividade é definida como: sem tarefas longas e sem mais de duas solicitações GET de rede em andamento.
- Procurar a última tarefa longa antes da janela silenciosa, parando no FCP se nenhuma tarefa longa for encontrada.
- O TTI é o horário de término da última tarefa longa antes da janela de inatividade (ou o mesmo valor da FCP se nenhuma tarefa longa for encontrada).
O diagrama a seguir ajuda a visualizar as etapas acima:
Historicamente, os desenvolvedores otimizaram as páginas para tempos de renderização rápidos, às vezes em detrimento do TTI.
Técnicas como a renderização do lado do servidor (SSR) podem levar a cenários em que uma página parece interativa (ou seja, links e botões estão visíveis na tela), mas não é realmente interativa porque a linha de execução principal está bloqueada ou porque o código JavaScript que controla esses elementos não foi carregado.
Quando os usuários tentam interagir com uma página que parece interativa, mas não é, eles provavelmente vão responder de uma destas duas maneiras:
- Na melhor das hipóteses, o usuário vai ficar irritado porque a página demora para responder.
- Na pior das hipóteses, eles vão presumir que a página está corrompida e provavelmente vão sair. Eles podem até perder a confiança no valor da sua marca.
Para evitar esse problema, faça o possível para minimizar a diferença entre FCP e TTI. E nos casos em que há uma diferença perceptível, deixe claro por meio de indicadores visuais que os componentes na página ainda não são interativos.
Como medir o TTI
O TTI é uma métrica que é melhor medida no laboratório. A melhor maneira de medir o TTI é executar uma auditoria de desempenho do Lighthouse no seu site. Consulte a documentação do Lighthouse sobre TTI para saber mais sobre o uso.
Ferramentas de laboratório
Qual é uma boa pontuação de TTI?
Para oferecer uma boa experiência ao usuário, os sites devem ter um tempo de interatividade inferior a 5 segundos quando testados em um hardware de dispositivo móvel médio.
Para saber como o TTI da sua página afeta a pontuação de desempenho do Lighthouse, consulte Como o Lighthouse determina sua pontuação de TTI.
Como melhorar o TTI
Para saber como melhorar o TTI de um site específico, execute uma auditoria de desempenho do Lighthouse e preste atenção às oportunidades específicas sugeridas pela auditoria.
Para saber como melhorar o TTI em geral (para qualquer site), consulte os seguintes guias de performance:
- Minificar JavaScript
- Pré-conectar às origens necessárias
- Pré-carregar solicitações de chave
- Reduzir o impacto de códigos de terceiros
- Reduzir a profundidade de solicitações críticas
- Reduzir o tempo de execução do JavaScript
- Minimize o trabalho da linha de execução principal
- Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos