Novidades do Lighthouse 8.4

Brendan Kenny
Brendan Kenny
O Lighthouse é uma ferramenta automatizada de auditoria de sites que ajuda os desenvolvedores com oportunidades e diagnósticos para melhorar a experiência do usuário nos sites. Ela está disponível no Chrome DevTools, no npm (como um módulo do Node e como uma CLI) ou como uma extensão do navegador (no Chrome e no Firefox). Ela é usada em muitos serviços do Google, incluindo o web.dev/measure e o PageSpeed Insights.

O Lighthouse 8.4 está disponível imediatamente na linha de comando e no Chrome Canary. Ela será lançada no Chrome Stable no Chrome 95 e estará disponível no PageSpeed Insights em uma semana.

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

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

Confira a lista completa de alterações no registro de alterações 8.4.

Novas auditorias

Não carregar lentamente as imagens da Maior exibição de conteúdo

O carregamento lento de imagens pode ser uma maneira eficaz de adiar imagens fora da tela para que elas não interfiram no carregamento do conteúdo acima da dobra.

No entanto, se o elemento LCP de uma página for uma imagem, o carregamento lento poderá ter um efeito negativo significativo na LCP. O navegador pode colocar a imagem na fila e buscar outros recursos primeiro, em vez de priorizar a imagem para download imediato. Um estudo recente sobre carregamento lento no WordPress (link em inglês) descobriu que a LCP pode melhorar até 15% em alguns sites quando as imagens na janela de visualização inicial não são carregadas dessa forma.

Auditoria de LCP de carregamento lento em um relatório do Lighthouse

O Lighthouse agora detectará se o elemento da LCP era uma imagem de carregamento lento e recomendará a remoção do atributo loading dele.

Para mais informações, consulte a proposta inicial e a solicitação de envio de implementação.

Defina uma janela de visualização para dispositivos móveis para melhorar a latência na primeira entrada

A auditoria viewport faz parte da categoria de práticas recomendadas há anos, mas a 8.4 também aceita essa orientação na categoria de performance.

Muitos navegadores de dispositivos móveis são compatíveis com o recurso de "toque duplo para aplicar zoom" a fim de permitir que os usuários ampliem facilmente o conteúdo não projetado para uma tela de dispositivo móvel, ou seja, conteúdo sem um <meta name="viewport"> explícito de dispositivo móvel. Na prática, isso significa que o navegador precisa esperar até 300 ms após um toque do usuário para ver se ocorrerá um segundo toque e, durante esse período, a página não consegue responder ao toque inicial. Isso se traduz em uma FID com falha de várias centenas de milissegundos.

Auditoria da janela de visualização para dispositivos móveis em um relatório do Lighthouse

Em um estudo recente de dados do HTTP Archive, mais da metade dos sites que receberam uma pontuação de 90 ou mais no Lighthouse, mas falharam em pelo menos uma Core Web Vitals, não tinham uma janela de visualização para dispositivos móveis definida e não apresentavam falhas na FID. Por isso, a seção de desempenho do Lighthouse recomenda adicionar uma janela de visualização como a seguinte se nenhuma for encontrada:

<meta name="viewport" content="width=device-width">

Para mais detalhes, consulte o problema da proposta e a solicitação de envio de implementação.

Entrar em contato com a equipe do Lighthouse

Para falar sobre os novos recursos, as mudanças na versão 8.4 ou qualquer outro relacionado ao Lighthouse: