Novidades do Lighthouse 10

Brendan Kenny
Brendan Kenny

O Lighthouse é uma ferramenta de auditoria de sites que ajuda os desenvolvedores com oportunidades e diagnósticos para melhorar a experiência do usuário nos sites deles.

O Lighthouse 10 está disponível imediatamente na linha de comando pelo npm e no Chrome Canary. Ela será lançada na versão estável do Chrome 112 e no PageSpeed Insights nas próximas semanas.

Alterações de pontuação

A conhecida métrica Time to Interactive (TTI) está sendo removida no Lighthouse 10, concluindo o processo de descontinuação iniciado no Lighthouse 8. O peso de 10% da pontuação de TTI está mudando para Cumulative Layout Shift (CLS), que agora conta com 25% da pontuação de desempenho geral.

O TTI marca um ponto no tempo, mas a forma como está definido o torna muito sensível a solicitações de rede atípicas e tarefas longas. Em geral, a Maior exibição de conteúdo (LCP) e o Índice de velocidade são heurísticas melhores para o conteúdo de uma página que parece estar carregado do que a contagem de solicitações de rede ativas. O tempo total de bloqueio (TBT, na sigla em inglês) lida com tarefas longas e a disponibilidade da linha de execução principal de maneira mais robusta e, embora não seja um proxy direto, tende a se correlacionar melhor com as Core Web Vitals medidas em campo.

O peso maior da CLS é incidental à remoção da TTI, mas reflete melhor sua importância como uma métrica principal da Web e, idealmente, aumentará o foco em sites que ainda fazem mudanças desnecessárias no layout.

Esperamos que isso melhore as pontuações de desempenho da maioria das páginas, já que a maioria delas tende a ter uma pontuação melhor na CLS do que no TTI. Em uma análise de 13 milhões de carregamentos de página na execução mais recente do HTTP Archive, 90% dessas páginas teriam uma melhoria na pontuação de desempenho do Lighthouse, com 50% delas apresentando uma melhoria de desempenho superior a 5 pontos.

Um medidor de pontuação do Lighthouse, dividido pelas métricas (FCP, SI, LCP, TBT e CLS) que compõem a pontuação total

Se por algum motivo você ainda precisar do valor de TTI do Lighthouse (em uma declaração de CI, por exemplo), ele ainda estará disponível inalterado na saída JSON do Lighthouse, apenas com peso 0 da pontuação e oculto no relatório HTML. Qualquer acesso com script do valor JSON continuará funcionando sem alterações.

Novas auditorias

O Lighthouse 10 traz uma nova auditoria de desempenho e uma mudança significativa para outra.

Cache de avanço e retorno

O cache de avanço e retorno (bfcache) é uma das ferramentas mais eficientes disponíveis para melhorar o desempenho de páginas para usuários reais. Além do cache normal do navegador, uma página carregada do bfcache restaura o layout e o estado de execução quase instantaneamente, ignorando, em grande parte, toda a atividade de carregamento de página e mostrando sua página aos usuários imediatamente, à medida que eles navegam para trás e para frente no histórico.

No entanto, existem algumas maneiras de uma página impedir que o navegador restaure uma página do bfcache. A nova auditoria do Lighthouse sai da página de teste e volta novamente para testar se é compatível com bfcache e lista os motivos em caso de falha.

Exemplo de resultado da auditoria bfcache, listando falhas devido a uma conexão IndexDB aberta e descarregue os gerenciadores na página

Consulte os documentos de auditoria do bfcache para mais informações.

Entradas que impedem colar

A antiga auditoria de práticas recomendadas "Permite que os usuários colem dados em campos de senha" foi ampliada para verificar se é possível colar em qualquer campo de entrada (que não seja somente leitura). Para a maioria dos sites, impedir colar é uma experiência do usuário negativa e impede fluxos de trabalho legítimos de segurança e acessibilidade.

A nova auditoria agora se chama "Permite que os usuários colem dados nos campos de entrada" (paste-preventing-inputs).

Usuários do nó

Se você usa o Lighthouse como uma biblioteca de nós, talvez precise considerar algumas alterações interruptivas programáticas nesta versão. Veja todos os detalhes no registro de alterações 10.0.

O Lighthouse 10 também é fornecido com declarações de tipo TypeScript completas. Agora qualquer item importado de lighthouse vai ser digitado, o que será muito útil se você estiver criando um script para fluxos de usuários do Lighthouse.

Um script de nó importando o Lighthouse como uma função, demonstrando que o objeto de opções transmitido para a função agora tem tipo verificado pelo TypeScript

Teste os tipos e entre em contato se tiver problemas para usá-los.

Farol em execução

O Lighthouse está disponível no Chrome DevTools, no NPM (como um módulo do Node e como uma ferramenta de CLI) e como uma extensão do navegador (no Chrome e no Firefox). Ela também é usada em vários serviços do Google, incluindo o PageSpeed Insights.

Para testar a CLI do Node do Lighthouse, use os seguintes comandos:

npm install -g lighthouse
lighthouse https://www.example.com --view

Entre em contato com a equipe do Lighthouse

Para discutir os novos recursos, mudanças na versão do Lighthouse 10 ou qualquer outra coisa relacionada ao Lighthouse: