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 de nó e uma CLI) ou como uma extensão do navegador (no Chrome e no Firefox). Ela é a base de muitos serviços do Google, como web.dev/measure e PageSpeed Insights.

O Lighthouse 8.4 está disponível imediatamente na linha de comando e no Chrome Canary. Ela chegará ao Chrome Stable no Chrome 95 e ficará disponível no PageSpeed Insights em até 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 imagens de Largest Contentful Paint

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 priorizá-la para download imediato. Um estudo recente sobre carregamento lento no WordPress descobriu que a LCP pode melhorar em até 15% em alguns sites se as imagens na janela de visualização inicial não forem carregadas lentamente.

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

O Lighthouse agora detecta se o elemento da LCP era uma imagem de carregamento lento e recomenda a remoção do atributo loading.

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 First Input Delay

A auditoria viewport faz parte da categoria "Práticas recomendadas" há anos, mas a seção 8.4 também aceita essa recomendação na categoria "Performance".

Muitos navegadores para dispositivos móveis têm suporte ao recurso "Toque duas vezes para aplicar zoom" para permitir que os usuários ampliem facilmente conteúdo não projetado para uma tela de dispositivo móvel, ou seja, conteúdo sem uma <meta name="viewport"> explícita para dispositivos móveis. Na prática, isso significa que o navegador precisa esperar até 300 ms após o toque do usuário para ver se ocorre um segundo toque e, durante esse tempo, 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 de janela de visualização de dispositivos móveis em um relatório do Lighthouse

Em um estudo recente com 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 e apresentavam falha na FID. Como resultado, a seção de desempenho do Lighthouse agora vai recomendar a adição de uma janela de visualização como a seguinte, caso nenhuma seja 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.

Como entrar em contato com a equipe do Lighthouse

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