Novidades do Lighthouse 9.0

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 9.0 está disponível imediatamente na linha de comando, no Chrome Canary e no PageSpeed Insights. Ele estará na versão estável do Chrome 98.

Mudanças na API

A maioria dos usuários não deve se deparar com alterações interruptivas no fluxo de trabalho com essa versão. Se você realizar auditorias personalizadas do Lighthouse ou usar ferramentas que dependem de detalhes no JSON do relatório do Lighthouse, pode haver algumas mudanças interruptivas na versão 9.0 das quais você precisa estar ciente.

Veja a lista completa de alterações no registro de alterações da 9.0.

Lighthouse para fluxos de usuários

O Lighthouse tem uma nova API de fluxo do usuário que permite realizar testes de laboratório a qualquer momento durante a vida útil de uma página.

O Puppeteer é usado para criar scripts de carregamentos de páginas e acionar interações sintéticas do usuário, e o Lighthouse pode ser invocado de várias maneiras para capturar insights importantes durante essas interações. Isso significa que o desempenho pode ser medido durante o carregamento da página e durante as interações com a página.

Um relatório de fluxo do usuário do Lighthouse, que inclui várias etapas de carregamento e interação com um site, e resultados de auditoria do Lighthouse para cada etapa

Para mais informações, consulte o tutorial sobre os fluxos de usuários do Lighthouse e as amostras de código.

Atualização do relatório

O relatório do Lighthouse foi atualizado para melhorar a legibilidade e deixar mais clara a fonte e a forma de geração do relatório.

Uma captura de tela final foi incorporada na parte de cima do relatório para mostrar rapidamente se a página testada foi carregada corretamente e está no formato esperado.

Um relatório do Lighthouse 9.0 que lista as principais métricas de performance com mais destaque e incorpora uma captura de tela da aparência final da página.

As informações resumidas na parte inferior do relatório também foram reformuladas para comunicar melhor como o Lighthouse foi executado e o relatório coletado.

A seção de configurações atualizada do relatório do Lighthouse, que agora tem resumos de itens como quando a página foi capturada, o tipo de emulação de página usado e a versão do Chrome em que o teste foi executado.

Para ver o novo relatório em ação, teste o Lighthouse 9.0 ou acesse este exemplo de relatório.

Um problema comum de acessibilidade é quando os itens que deveriam ser exclusivos em uma página não são. Por exemplo, quando o ID referenciado em um atributo aria-labelledby é usado em vários elementos.

O Lighthouse sempre alertou sobre essa situação, mas listava apenas a primeira instância de um elemento com um ID repetido, o que muitas vezes causava confusão, porque alguns usuários supunham que ele mostrava todos os elementos que causavam o problema. Como o Lighthouse só estava mostrando um único elemento, a equipe supôs que fosse um bug que o único elemento estava sendo sinalizado como duplicado.

No Lighthouse 9.0, todos os elementos que compartilham esse ID agora estão listados:

Uma auditoria do Lighthouse para "Todos os elementos focalizáveis precisam ter um "id" exclusivo, mostrando dois elementos, ambos com o mesmo "id"

Esses "nós relacionados" é fornecida por axe-core, por isso também pode aparecer em outras auditorias de acessibilidade.

Para mais informações, consulte o problema ao coletar relatórios de usuários e a solicitação de envio de implementação.

Em execução no Lighthouse

O Lighthouse está disponível no Chrome DevTools, no npm (como um módulo Node e uma CLI) e 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.

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 falar sobre os novos recursos, as mudanças da versão 9.0 ou qualquer outro assunto relacionado ao Lighthouse: