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.

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

Alterações de pontuação

A renomada métrica Time To Interactive (TTI) está sendo removida do Lighthouse 10, o que conclui 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 será responsável por 25% da pontuação geral de desempenho.

O TTI marca um momento específico, mas a forma como ele é definido o torna muito sensível a solicitações de rede atípicas e tarefas longas. A Maior exibição de conteúdo (LCP, na sigla em inglês) e o Índice de velocidade geralmente são heurísticas melhores para a sensação de carregamento do conteúdo de uma página do que uma contagem de solicitações de rede ativas. Tempo total de bloqueio (TBT, na sigla em inglês): lida com tarefas longas e a disponibilidade da linha de execução principal com mais eficiência e, embora não seja um proxy direto, tende a se correlacionar melhor com as Core Web Vitals, conforme medido em campo.

O aumento do peso do CLS é incidental à remoção do TTI, mas reflete melhor sua importância como Core Web Vitals e aumentará o foco para sites que ainda fazem mudanças desnecessárias de layout.

Esperamos que isso melhore a maioria das páginas desempenho, pois a maioria das páginas tende a pontuar melhor na CLS do que na TTI. Em uma análise de 13 milhões de carregamentos de página na última execução do HTTP Archive, 90% dessas páginas teriam uma melhoria na pontuação de desempenho do Lighthouse, e 50% delas notaram uma melhoria de desempenho de mais de 5 pontos.

Um medidor de pontuação do Lighthouse, detalhado 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 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 a ponderação de pontuação 0 e oculto no relatório HTML. Qualquer acesso com script do valor JSON vai continuar funcionando sem mudanças.

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 uma página para usuários reais. Além do cache normal do navegador, uma página carregada do bfcache restaurará 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 imediatamente aos usuários enquanto eles navegam pelo histórico.

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

Um exemplo de resultado da auditoria do bfcache, listando falhas devido a uma conexão aberta do IndexDB e descarregando gerenciadores na página

Confira os documentos da auditoria do bfcache para mais informações.

Entradas que impedem a ação de colar

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

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

Usuários do nó

Se você usa o Lighthouse como uma biblioteca Node, talvez precise considerar algumas alterações interruptivas programáticas nesta versão. Consulte o registro de alterações 10.0 para ver todos os detalhes.

O Lighthouse 10 também vem com declarações de tipo completas do TypeScript. Qualquer item importado de lighthouse agora precisa ser digitado, o que é muito útil se você estiver criando scripts para fluxos de usuários do Lighthouse.

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

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

Em execução no Lighthouse

O Lighthouse está disponível no Chrome DevTools, no npm (como um módulo Node e uma ferramenta da 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, as mudanças na versão do Lighthouse 10 ou qualquer outro item relacionado a ele: