Cómo arreglar el Largest Contentful Paint
De las tres Core Web Vitals, LCP es la que más sitios suspenden, y en la mayoría de páginas el elemento medido es una imagen. Eso la hace especialmente fácil de arreglar.
Qué mide realmente el LCP
Largest Contentful Paint es el tiempo desde el inicio de la navegación hasta que el elemento visible más grande termina de renderizarse. No cuando la página empieza a aparecer, ni cuando todo ha cargado: exactamente cuando lo más grande del viewport está listo.
Los umbrales de Google: bueno por debajo de 2,5 segundos, mejorable hasta 4 segundos, deficiente por encima. La cifra que cuenta es el percentil 75 de visitantes reales, así que una cuarta parte de tu tráfico puede ir más lento y aun así apruebas.
Primero, encuentra el elemento
No optimices a ciegas. Abre las DevTools de Chrome, ejecuta un informe de Lighthouse y mira la entrada de LCP: nombra el elemento exacto.
Nueve de cada diez veces es una cabecera, una foto de producto o la imagen de un artículo. De vez en cuando es un bloque grande de texto, y entonces la solución es otra distinta: el LCP de texto suele ser cuestión de carga de fuentes, no de imágenes.
Consulta también el informe de Core Web Vitals de Search Console, que usa datos de visitantes reales en lugar de una ejecución de laboratorio. Ambos se contradicen a menudo, y los datos de campo son los que afectan al posicionamiento.
Las soluciones, por orden
1. Reduce el peso de la imagen. Redimensiona a las dimensiones mostradas, convierte a WebP, comprime a calidad 75. Suele bastar por sí solo y recorta el archivo en torno a un 90 %.
2. Nunca la cargues en diferido. loading="lazy" en tu imagen LCP retrasa justo lo que se está midiendo. Usa fetchpriority="high" en su lugar.
3. Precárgala. Un <link rel="preload" as="image"> en el head inicia la descarga antes de que el analizador llegue a la etiqueta.
4. Elimina lo que bloquea el renderizado. La imagen no puede pintarse hasta que se haya analizado el CSS. Las hojas de estilo bloqueantes y los scripts síncronos en el head retrasan todo lo que va detrás.
Cosas que parecen soluciones y no lo son
- Solo un CDN. Reduce la latencia, no los bytes. Una imagen de 4 MB sigue pesando 4 MB, servida algo más cerca.
- Un marcador de posición o skeleton. Hace que la espera parezca más corta, pero no cambia cuándo se renderiza el elemento real. El LCP no se mueve.
- Cargar todo en diferido. Ayuda al resto de la página y perjudica al LCP si se aplica a la cabecera.
- Un plugin de caché. Ayuda a los visitantes recurrentes. El LCP se mide sobre todo en primeras visitas.
Un objetivo realista
Una cabecera a 1920px, en WebP y calidad 75, pesa entre 150 y 250 KB. En una conexión móvil normal llega cómodamente dentro del presupuesto de 2,5 segundos y deja margen para todo lo demás.