Cómo optimizar Web Vitals con Lighthouse

<p>- Medir Core Web Vitals<br /> - Encontrar el elemento de Largest Contentful Paint <br /> - Hacer preload para mejorar el LCP <br /> - Encontrar los elementos que afectan el Cumulative Layout Shift <br /> → imágenes sin tamaño definido<br /> → anuncios<br /> → animaciones non-composited <br /> - Depurar First Input Delay / Total Blocking Time / Long Tasks</p>

[alstjr7375]

<p>Método relacionado para optimizar imágenes<br /> https://smashingmagazine.com/2021/04/… /> <br /> Tuit de resumen<br /> https://twitter.com/addyosmani/status/1388031656355794945</p>;

[xguru]

<p>Google incorpora métricas de experiencia de página (Page Experience) en el ranking de resultados de búsqueda https://es.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 /> Lanzamiento de Lighthouse 6.0 https://es.news.hada.io/topic?id=2122<br /> → se agregaron las métricas LCP, CLS y TBT<br /> <br /> ¿Qué es Cumulative Layout Shift (CLS)? https://es.news.hada.io/topic?id=1697<br /> → mide cuánto cambia el diseño de una página web debido a la carga lenta de imágenes/anuncios, operaciones asíncronas y cambios dinámicos del DOM, entre otros<br /> → métrica de rendimiento centrada en el usuario que revisa la inestabilidad visual que puede provocar clics erróneos por parte del usuario</p>