Como otimizar Web Vitals com Lighthouse

<p>- Medir os Core Web Vitals<br /> - Encontrar o elemento do Largest Contentful Paint <br /> - Fazer preload para melhorar o LCP <br /> - Encontrar os elementos que afetam o Cumulative Layout Shift <br /> → imagens sem tamanho definido<br /> → anúncios<br /> → animações non-composited <br /> - Fazer debugging de First Input Delay / Total Blocking Time / Long Tasks</p>

[alstjr7375]

<p>Método relacionado de otimização de imagens<br /> https://smashingmagazine.com/2021/04/… /> <br /> Tweet com o resumo<br /> https://twitter.com/addyosmani/status/1388031656355794945</p>;

[xguru]

<p>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<br /> - Core Web Vitals<br /> → LCP : Largest Contentful Paint<br /> → FID : First Input Delay<br /> → CLS : Cumulative Layout Shift<br /> <br /> Lançamento do Lighthouse 6.0 https://pt.news.hada.io/topic?id=2122<br /> → Adição das métricas LCP, CLS e TBT<br /> <br /> O que é Cumulative Layout Shift (CLS)? https://pt.news.hada.io/topic?id=1697<br /> → 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.<br /> → Um indicador de desempenho centrado no usuário que verifica a instabilidade visual que pode induzir o usuário a clicar por engano</p>