Categorias
Web

Lighthouse 6.0

Lighthouse para quem não conhece ele é o sistema de auditorias de performance, accessibilidade, 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 auditoria sobre JavaScript não utilizado e Acessibilidade
  • Atualização no Lighthouse CI
  • Agora a aba Audits mudou para Lighthouse
  • Mudanças na emulação mobile
  • Performance Budget

Novas métricas

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 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 o Lighthouse 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 em seu terminal de linha de comando execute o seguinte código:

npm install -g lighthouse

Depois de instalado você pode realizar auditorias rodando o seguinte comado:

lighthouse https://www.example.com --view

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *