Lighthouse 6.0

Lighthouse para quem não conhece ele é o sistema de auditorias de performance, acessibilidade, SEO e PWA dentro do Chrome Dev tools. Também com a possibilidade de instalação no Firefox através de extensão e com NPM.

Nesse mês de maio foi anunciado a versão 6.0 do Lighthouse, que estará disponível na versão 84 do Chrome. Essa nova versão contém as seguintes melhorias:

• Novas métricas
• Atualização da pontuação referente a performance
• Novas auditorias sobre JavaScript não utilizado e Acessibilidade
• Atualização do CI
• Agora a aba Audits mudou para Lighthouse
• Mudanças na emulação mobile
• Performance Budget

Novas métricas

Novas métricas são relacionadas ao core web vitals, elas têm um intuito de traduzir a experiência do usuário com relação à performance.

Largest Contentful Paint(LCP)

Maior pintura com conteúdo é uma medida da experiência de carregamento percebida. Ele marca o ponto durante o carregamento da página quando o conteúdo principal foi carregado e é visível para o usuário. O LCP é um complemento importante para First Contentful Paint(FCP), que captura apenas o início da experiência de carregamento.

Cumulative Layout Shift (CLS)

Deslocamento cumulativo de layout é uma medida da estabilidade visual. Quantifica quanto o conteúdo de uma página muda visualmente. Uma pontuação baixa no CLS é um sinal para os desenvolvedores de que os seus usuários não estão passando por mudanças indevidas de conteúdo.

Total Blocking Time(TBT)

Tempo total de bloqueio quantifica a capacidade de resposta de carga, medindo a quantidade total de tempo em que o encadeamento principal foi bloqueado por tempo suficiente para impedir a capacidade de resposta da entrada. O TBT mede a quantidade total de tempo entre a FCP e tempo de interação.

Atualização de pontuação de Performance

A pontuação de performance é baseado nas seguintes métricas:

• First Contentful Paint – 15%
• Speed Index – 15%
• Lagest Contentful Paint – 25%
• Time to Interactive – 15%
• Total Blocking – 25%
• Cumulative Layout Shift – 5%

Lighthouse CI

No último Chrome Dev Summit foi anunciado CI, um CLI em node de código aberto que realiza auditoria trazendo os resultados do Lighthouse para terminal de linha de comando. Agora Lighthouse tem suporte nativo de vários provedores de integração continua(CI), incluindo Travis, Circle, Gitlab e Github actions.

Para instalar o lighthouse CLI no seu terminal de linha de comando execute o seguinte código:

npm install -g lighthouse

Após instalado você pode realizar auditorias rodando o seguinte comando:

lighthouse https://www.example.com --viewCode language: JavaScript (javascript)

O post completo sobre o lançamento você confere aqui: https://web.dev/lighthouse-whats-new-6.0/