Como otimizar Web Vitals com Lighthouse

 (web.dev)
8 pontos por xguru 2021-05-15 | 2 comentários | Compartilhar no WhatsApp

  • Medir os Core Web Vitals

  • Encontrar o elemento do Largest Contentful Paint

  • Fazer preload para melhorar o LCP

  • Encontrar os elementos que afetam o Cumulative Layout Shift

→ imagens sem tamanho definido

→ anúncios

→ animações non-composited

  • Fazer debugging de First Input Delay / Total Blocking Time / Long Tasks

Leituras relacionadas

2 comentários

 
alstjr7375 2021-05-15

Método relacionado de otimização de imagens

https://smashingmagazine.com/2021/04/…

Tweet com o resumo

https://twitter.com/addyosmani/status/1388031656355794945
 
xguru 2021-05-15

Google, introdução dos indicadores de Experiência da Página (Page Experience) no ranking dos resultados de busca https://pt.news.hada.io/topic?id=2197

  • Core Web Vitals

→ LCP : Largest Contentful Paint

→ FID : First Input Delay

→ CLS : Cumulative Layout Shift

Lançamento do Lighthouse 6.0 https://pt.news.hada.io/topic?id=2122

→ Adição das métricas LCP, CLS e TBT

O que é Cumulative Layout Shift (CLS)? https://pt.news.hada.io/topic?id=1697

→ Mede o quanto o layout de uma página web muda devido ao carregamento lento de imagens/anúncios, operações assíncronas, alterações dinâmicas no DOM etc.

→ Um indicador de desempenho centrado no usuário que verifica a instabilidade visual que pode induzir o usuário a clicar por engano