Cómo mejorar el LCP de tu web: la guía centrada en imágenes

El LCP (Largest Contentful Paint) mide cuándo se ha pintado en pantalla el elemento más grande del área visible: normalmente una fotografía de portada, un banner de producto o un bloque de texto extenso. Es uno de los tres Core Web Vitals que Google usa como señal de experiencia de usuario, y en la práctica el 70% de los problemas de LCP tienen su origen en imágenes mal optimizadas.

Paso 1: identifica qué elemento es tu LCP

Abre PageSpeed Insights, introduce la URL y busca la sección «Diagnóstico». La herramienta te indica directamente el elemento que marca el LCP y su tamaño. Si es una imagen (lo habitual), el plan de acción está claro.

También puedes verlo en las pestañas de Chrome: DevTools → Performance → grabar carga → seleccionar el evento «Largest Contentful Paint» en el timeline.

Paso 2: reduce los bytes que hay que descargar

Es la intervención con mejor ratio esfuerzo/resultado:

• Convierte a WebP con calidad 80. En fotografías de portada es normal lograr 60-75% menos peso que el JPG original. Puedes hacerlo por lotes en el conversor de este sitio.
• Reduce las dimensiones al tamaño real de renderizado. Un banner mostrado a 1440 px no necesita 4000 px.
• Sirve el tamaño adecuado con srcset para que un móvil no descargue la versión de escritorio.

Paso 3: da prioridad a la imagen del LCP

El mayor error habitual es aplicar loading="lazy" a la imagen principal. La carga diferida retrasa su descarga y empeora el LCP de forma directa. Regla sencilla:

• Imagen del LCP («above the fold»): loading="eager" + fetchpriority="high".
• Resto de imágenes fuera de pantalla: loading="lazy".

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Descripción del banner"
       width="1440" height="810"
       fetchpriority="high" loading="eager">
</picture>

Paso 4: evita los saltos de layout

Si el contenedor de la imagen no tiene dimensiones declaradas, el navegador no reserva espacio y el contenido salta al llegar la imagen. Eso no solo afecta al CLS: provoca re-renderizados que retrasan la percepción de carga. Declara siempre width y height, o fija la relación de aspecto con CSS (aspect-ratio).

Paso 5: acelera el resto de la cadena

Una imagen ligera sigue tardando si el servidor responde tarde o los recursos críticos compiten por la conexión. Complementos recomendables:

• Activa la compresión y el caché del servidor (gzip o Brotli, Cache-Control con cadenas largas para recursos con hash).
• Preconecta con el dominio que sirve las imágenes y precarga la del LCP: <link rel="preload" as="image">.
• Retrasa scripts de terceros (chat, widgets, mapas de calor) que bloquean el hilo principal durante los primeros segundos.
• Usa un CDN para servir las imágenes desde un nodo cercano al usuario.

Errores frecuentes

• Medir solo en escritorio. Google evalúa el LCP en móvil con conexión simulada; optimiza siempre pensando en 4G.
• Confundir LCP con FCP. First Contentful Paint marca el primer píxel pintado; el LCP espera al elemento más grande.
• Comprimir en exceso. Un LCP excelente con una imagen ilegible empeora la experiencia real.
• No re-medir tras los cambios. Vuelve a ejecutar PageSpeed Insights y, si es posible, comprueba los datos de campo (CrUX) en Search Console tras algunas semanas.

Checklist rápida

1. Identificar el elemento LCP en PageSpeed Insights.
2. Convertirlo a WebP al 80% y al tamaño de renderizado.
3. Declarar width/height y añadir fetchpriority="high".
4. Aplicar lazy loading solo al resto de imágenes.
5. Re-medir y comparar antes/después.

Si quieres seguir aprendiendo, consulta cómo convertir JPG a WebP sin perder calidad, WebP vs AVIF, optimización de imágenes en tiendas online o la guía de tamaño y peso ideal de las imágenes.