Cómo Reducir el LCP por Debajo de 2.5s con Optimización de Imágenes

Tu LCP probablemente es una imagen

Largest Contentful Paint mide cuánto tiempo tarda el elemento visible más grande de tu página en terminar de renderizarse. En la mayoría de los sitios web, ese elemento es una imagen — un banner hero, una foto de producto o una imagen de fondo.

Google considera que el LCP es "bueno" cuando está por debajo de 2.5 segundos, "necesita mejora" entre 2.5-4 segundos, y "pobre" por encima de 4 segundos. A partir de 2026, aproximadamente el 34% de los sitios web no cumplen este umbral, y las imágenes son la causa principal.

La buena noticia: la optimización de imágenes es la reparación de mayor impacto que puedes hacer. Una sola imagen hero bien optimizada puede reducir tu LCP en 1-3 segundos.

Paso 1: Encuentra tu elemento LCP

Antes de optimizar cualquier cosa, necesitas saber qué elemento es realmente tu LCP. No adivines.

Usando Chrome DevTools:

Abre DevTools (F12)
Ve a la pestaña Performance
Haz clic en el botón de grabar, recarga la página y luego detén la grabación
Busca el marcador "LCP" en la línea de tiempo — destaca el elemento exacto

Para obtener una guía detallada sobre el uso de Chrome DevTools para el análisis de rendimiento, consulta la documentación oficial de Chrome.

Usando PageSpeed Insights: Ingresa tu URL en pagespeed.web.dev. Desplázate hasta la sección "Diagnostics" y encuentra "Largest Contentful Paint element." Te indica exactamente qué es.

En la mayoría de los casos, es uno de estos: una imagen hero/banner, una imagen destacada de producto, una imagen de fondo establecida vía CSS, o un bloque de texto grande (menos común).

Verifica tanto móvil como escritorio — tu elemento LCP podría ser diferente en cada uno. Móvil típicamente tiene un LCP peor debido a conexiones más lentas y cachés más pequeños.

Paso 2: Optimiza la imagen LCP

Una vez que sepas qué imagen es el elemento LCP, optimízala agresivamente.

Comprímela

Conviértela a WebP con calidad 75-85. Esto por sí solo reduce el tamaño del archivo en un 25-34% comparado con JPEG, sin ninguna diferencia visible de calidad.

Para una imagen hero típica (1200×600), deberías apuntar a menos de 100KB. Si tu imagen hero supera los 200KB, hay margen de mejora.

Redimenziónala

Sirve exactamente las dimensiones que necesitas. Si tu hero se muestra a 1200px de ancho en escritorio y 400px en móvil, no sirvas un original de 3000px a todos.

<img
  src="/hero-1200.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 480px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Hero"
  width="1200"
  height="600"
  loading="eager"
  fetchpriority="high"
/>

Paso 3: Entrega más rápido

Incluso una imagen perfectamente comprimida puede tener un LCP lento si la entrega es lenta.

Precarga la imagen LCP

Agrega esto a tu <head>. Le indica al navegador que comience a descargar la imagen inmediatamente, incluso antes de que analice el CSS:

<link
  rel="preload"
  as="image"
  href="/hero-1200.webp"
  fetchpriority="high"
  type="image/webp"
/>

Evita imágenes de fondo CSS para LCP

Si tu elemento LCP está establecido vía background-image en CSS, el navegador no puede descubrirlo hasta que el CSS se analice y aplique. Múevalo a una etiqueta <img> con fetchpriority="high" en su lugar.

Usa un CDN

Servir imágenes desde un CDN reduce la latencia sirviendo desde la ubicación geográfica más cercana. La mayoría de proveedores de hosting (Vercel, Cloudflare, Netlify) incluyen CDN por defecto.

Habilita la compresión

Asegúrate de que tu servidor envíe imágenes con los encabezados de compresión apropiados:

Content-Encoding: br  (Brotli, preferido)
Content-Encoding: gzip  (alternativa)
Cache-Control: public, max-age=31536000, immutable

La directiva de caché immutable indica a los navegadores que el archivo no cambiará, evitando solicitudes de revalidación innecesarias.

Paso 4: No bloquees el renderizado

Tu imagen carga rápido, pero otros recursos podrían estar bloqueándola.

Difierre JavaScript no crítico

Cada script que bloquea el renderizado retrasa tu LCP. Mueve los scripts no críticos a defer o async:

<!-- Render-blocking (malo para LCP) -->
<script src="/analytics.js"></script>

<!-- Non-blocking (bueno para LCP) -->
<script src="/analytics.js" defer></script>

En línea CSS crítico

Si tus estilos above-the-fold están en una hoja de estilos externa, el navegador tiene que descargarla y analizarla antes de renderizar cualquier cosa. En línea el CSS crítico para la sección hero directamente en etiquetas <style>.

Errores comunes que matan el LCP

Lazy loading de la imagen LCP. El atributo loading="lazy" indica al navegador que de priorice la imagen. Nunca lo uses en tu elemento LCP. Usa loading="eager" en su lugar (o omite el atributo completamente, ya que eager es el predeterminado).

Usar un carrusel/slider como hero. Los carruseles a menudo cargan JavaScript antes de renderizar la primera imagen, añadiendo un retraso innecesario. Una imagen hero estática con buena compresión siempre será más rápida.

Servir desde un origen diferente. Si tu imagen está en images.example.com pero tu página está en example.com, el navegador necesita una búsqueda DNS adicional y handshake TLS. Usa el mismo origen o preconnect:

<link rel="preconnect" href="https://images.example.com" />

Midiendo la mejora

Después de hacer cambios, prueba nuevamente:

Ejecuta PageSpeed Insights 3 veces y promedia los resultados (los puntajes de laboratorio varían entre ejecuciones)
Verifica los datos del Chrome UX Report en Search Console (estos son datos de usuario reales, y lo que Google realmente usa para clasificaciones)
Monitorea durante 28 días — los datos de CrUX se basan en una ventana móvil de 28 días

Para más detalles sobre umbrales de LCP y técnicas de medición, consulta la documentación de LCP de Google.

Objetivo: LCP por debajo de 2.5s en móvil con una conexión 3G lenta. Si logras eso, estás en buena forma para cualquier velocidad de conexión.

Comprime tu imagen LCP ahora

Convierte a WebP y redimensiona en segundos — gratis, en tu navegador, sin subidas.

Get Started