Novidades do Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

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 11 já está disponível na linha de comando pelo npm, no Chrome Canary e no PageSpeed Insights. Ele vai ser lançado no Chrome Stable no Chrome 118.

Confira a lista completa de mudanças no registro de alterações da versão 11.0.

Atualizações da categoria de acessibilidade

As atualizações de categoria incluem novas auditorias automatizadas, ponderação aprimorada e auditorias manuais priorizadas para ajudar os desenvolvedores a tornar os sites mais acessíveis.

Novas auditorias e ponderação

Desde o Lighthouse 10.0, 13 novas auditorias de acessibilidade foram adicionadas:

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

Além das novas auditorias, os pesos de todas as auditorias foram atualizados para corresponder melhor aos níveis de impacto da regra aXe. Consulte a documentação sobre a pontuação de acessibilidade do Lighthouse para saber mais detalhes sobre as novas auditorias e pesos.

Visibilidade da auditoria manual

O Lighthouse sempre incluiu algumas auditorias manuais que não podem ser testadas automaticamente, mas que ainda são incluídas como uma lista de verificação para verificar funcionalidades importantes. A seção de auditoria manual agora é expandida automaticamente quando todas as auditorias automatizadas são aprovadas.

Um relatório do Lighthouse mostrando as auditorias manuais na categoria de acessibilidade expandida

Isso enfatiza que passar em todas as auditorias automatizadas e receber uma pontuação de 100 em acessibilidade não garante que a página auditada seja acessível. O teste manual ainda é importante. As auditorias manuais também foram reordenadas para começar com as verificações mais acessíveis.

Mudanças nas auditorias atuais

Interaction to Next Paint (INP)

A INP não é mais experimental. Por isso, a métrica foi movida de experimental-interaction-to-next-paint para interaction-to-next-paint.

Service workers

Um service worker não é mais necessário para que uma página possa ser instalada como um PWA no Chrome. Por isso, a verificação service-worker foi removida da categoria de PWA do Lighthouse.

Resumo do recurso

A auditoria resource-summary foi removida do relatório do Lighthouse. As estatísticas de solicitações de rede ainda podem ser compiladas usando a auditoria oculta network-requests:

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

Navegação legada

A flag --legacy-navigation da CLI, a função legacyNavigation() na API Node e a caixa de seleção "Navegação legada" no painel do DevTools foram removidas. Isso conclui uma transição de anos na infraestrutura do Lighthouse para oferecer suporte aos fluxos do usuário.

Executar o Lighthouse

O Lighthouse está disponível no Chrome DevTools, no npm (como um módulo do Node e uma ferramenta de CLI) e como uma extensão do navegador (no Chrome e no Firefox). Ele também é usado 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 11 do Lighthouse ou qualquer outro assunto relacionado ao Lighthouse: