Cómo optimizar Web Vitals con Lighthouse

 (web.dev)
8 puntos por xguru 2021-05-15 | 2 comentarios | Compartir por WhatsApp

  • Medir Core Web Vitals

  • Encontrar el elemento de Largest Contentful Paint

  • Hacer preload para mejorar el LCP

  • Encontrar los elementos que afectan el Cumulative Layout Shift

→ imágenes sin tamaño definido

→ anuncios

→ animaciones non-composited

  • Depurar First Input Delay / Total Blocking Time / Long Tasks

Lecturas relacionadas

2 comentarios

 
alstjr7375 2021-05-15

Método relacionado para optimizar imágenes

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

Tuit de resumen

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

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

  • Core Web Vitals

→ LCP : Largest Contentful Paint

→ FID : First Input Delay

→ CLS : Cumulative Layout Shift

Lanzamiento de Lighthouse 6.0 https://es.news.hada.io/topic?id=2122

→ se agregaron las métricas LCP, CLS y TBT

¿Qué es Cumulative Layout Shift (CLS)? https://es.news.hada.io/topic?id=1697

→ 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

→ métrica de rendimiento centrada en el usuario que revisa la inestabilidad visual que puede provocar clics erróneos por parte del usuario