Latência de entrada estimada

A latência de entrada estimada é uma das seis métricas rastreadas na seção Desempenho do relatório do Lighthouse. Cada métrica captura algum aspecto da velocidade de carregamento da página.

Os relatórios do Lighthouse mostram a latência estimada de entrada em milissegundos:

Captura de tela da auditoria de latência de entrada estimada do Lighthouse

O que a latência de entrada estimada mede

A latência de entrada estimada é uma estimativa de quanto tempo o app leva para responder à entrada do usuário durante a janela de carregamento de página mais movimentada de cinco segundos. O tempo dessa auditoria é da Primeira exibição significativa até o final do rastro, que é aproximadamente 5 segundos após o Tempo para interação da página. Se a latência for maior que 50 ms, o app poderá ser considerado lento.

O modelo de desempenho RAIL recomenda que os apps respondam à entrada do usuário em até 100 ms, enquanto a pontuação desejada de latência de entrada estimada do Lighthouse é de 50 ms. Por quê? O Lighthouse usa uma métrica de proxy, ou seja, disponibilidade da linha de execução principal, para medir a qualidade da resposta do app à entrada do usuário.

O Lighthouse presume que seu app precisa de 50 ms para responder completamente à entrada do usuário, desde a execução de JavaScript até a pintura física dos novos pixels na tela. Se a linha de execução principal ficar indisponível por 50 ms ou mais, não resta tempo suficiente para o app concluir a resposta.

Cerca de 90% dos usuários vão ter a quantidade de latência de entrada informada pelo Lighthouse ou menos. 10% dos usuários podem esperar uma latência maior.

Como melhorar a pontuação de latência de entrada estimada

Para que o app responda à entrada do usuário com mais rapidez, otimize a forma como o código é executado no navegador. Confira a série de técnicas descritas na página Desempenho de renderização do Google. Essas dicas variam de descarregamento de computação a web workers para liberar a linha de execução principal até a refatoração de seletores de CSS para executar menos cálculos e o uso de propriedades CSS que minimizam a quantidade de operações que exigem muito do navegador.

Como medir a latência de entrada estimada manualmente

Para medir a latência de entrada estimada manualmente, faça uma gravação com a linha do tempo do Chrome DevTools. Consulte Fazer menos trabalho da linha de execução principal para conferir um exemplo do fluxo de trabalho. A ideia básica é iniciar uma gravação, executar a entrada do usuário que você quer medir, interromper a gravação e analisar o Flame Chart para garantir que todos os estágios do pipeline de pixels sejam concluídos em 50 ms.

Recursos