Imágenes y Core Web Vitals: LCP, CLS, INP

Desde 2021, Google utiliza los Core Web Vitals como señal de posicionamiento en los resultados de búsqueda. Las imágenes tienen un impacto directo y significativo en las tres métricas. Comprender esta relación es esencial para cualquier trabajo de SEO u optimización web.

¿Qué son los Core Web Vitals?

Los Core Web Vitals son tres métricas de experiencia de usuario medidas por Google:

• LCP (Largest Contentful Paint): cuánto tarda en renderizarse el elemento visible más grande. Generalmente es una imagen.
• CLS (Cumulative Layout Shift): cuánto se desplaza inesperadamente el diseño de la página. Las imágenes sin dimensiones son una causa principal.
• INP (Interaction to Next Paint): capacidad de respuesta a las interacciones del usuario. Las imágenes pesadas pueden afectarlo indirectamente.

LCP: la métrica más afectada por las imágenes

En el 70–80 % de las páginas, el elemento LCP es una imagen, normalmente un banner hero, una foto destacada o una imagen de producto. Google espera que el LCP sea inferior a 2,5 segundos. Problemas habituales de LCP relacionados con imágenes:

1. La imagen LCP tiene carga diferida

El error más perjudicial. Añadir loading="lazy" a tu imagen hero retrasa su descubrimiento y descarga.

<!-- Incorrecto: retrasa el LCP -->
<img src="hero.jpg" loading="lazy">

<!-- Correcto: cargar de inmediato -->
<img src="hero.jpg" loading="eager">

2. La imagen LCP no está precargada

El navegador descubre la imagen LCP solo al analizar el HTML. Una pista de precarga hace que el navegador la obtenga antes:

<link rel="preload" as="image" href="hero.avif" type="image/avif">

3. La imagen LCP es demasiado pesada

Una imagen hero de 1 MB siempre producirá un LCP deficiente en conexiones móviles. Objetivo: menos de 200 KB para un hero de ancho completo a 1200 px, usando AVIF o WebP.

4. La imagen LCP se sirve sin CDN

Servir imágenes desde un único servidor de origen añade latencia para los usuarios distantes. Un CDN reduce el Time to First Byte (TTFB) de las imágenes, mejorando directamente el LCP.

CLS: imágenes sin dimensiones

Cuando un navegador no conoce las dimensiones de una imagen antes de cargarla, no puede reservar espacio en el diseño. La imagen se carga y empuja el contenido hacia abajo, eso es un desplazamiento de diseño. La solución es sencilla:

<!-- Incorrecto: sin dimensiones, causa CLS -->
<img src="foto.jpg" alt="...">

<!-- Correcto: las dimensiones evitan el desplazamiento de diseño -->
<img src="foto.jpg" alt="..." width="800" height="600">

También puedes usar CSS aspect-ratio para lograr el mismo efecto cuando no puedes fijar las dimensiones en el código:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Medir el impacto de las imágenes en los Core Web Vitals

Usa estas herramientas para identificar qué imágenes están perjudicando tus puntuaciones:

• Google Search Console: el informe de Core Web Vitals muestra páginas con puntuaciones deficientes a partir de datos de usuarios reales
• PageSpeed Insights: identifica el elemento LCP, muestra oportunidades de "Dimensionar imágenes correctamente" y "Servir imágenes en formatos de próxima generación"
• Chrome DevTools → pestaña Performance: la vista de cascada muestra cuándo se obtiene y pinta cada imagen
• Lighthouse: integrado en Chrome DevTools, señala oportunidades específicas de optimización de imágenes

Lista de verificación de imágenes para Core Web Vitals