Los Core Web Vitals son un conjunto de métricas definidas por Google para medir la experiencia de usuario de una página web. Desde 2021, estas métricas forman parte de las señales de clasificación de Google — lo que significa que una puntuación baja puede penalizar tu posicionamiento. Las imágenes son uno de los principales factores que influyen en estas puntuaciones, para bien o para mal.
Las tres métricas Core Web Vitals
Google mide tres dimensiones de la experiencia de usuario a través de los Core Web Vitals:
| Métrica | Lo que mide | Umbral "Bueno" | Umbral "Necesita mejora" |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Tiempo de carga del elemento visible más grande | ≤ 2,5 segundos | 2,5 a 4 segundos |
| INP (Interaction to Next Paint) | Capacidad de respuesta a las interacciones del usuario | ≤ 200 ms | 200 a 500 ms |
| CLS (Cumulative Layout Shift) | Estabilidad visual del diseño | ≤ 0,1 | 0,1 a 0,25 |
LCP e imágenes: la relación directa
El LCP (Largest Contentful Paint) mide el tiempo necesario para mostrar el elemento visible más grande en la ventana del navegador. En la gran mayoría de las páginas web, este elemento es una imagen — imagen hero, banner principal, foto de producto. Una imagen pesada o mal cargada es por tanto directamente responsable de una mala puntuación LCP.
Para mejorar el LCP relacionado con imágenes:
- Usar formatos modernos: WebP y AVIF son significativamente más ligeros que JPEG y PNG a calidad visual equivalente
- Precargar la imagen LCP: añade una etiqueta <link rel="preload"> en el <head> para forzar al navegador a cargar la imagen hero con prioridad
- Evitar el lazy loading en la imagen LCP: nunca apliques loading="lazy" a la imagen que será tu LCP — esto retrasa exactamente lo que Google mide
- Servir imágenes desde un CDN: la proximidad geográfica del servidor reduce el Time to First Byte (TTFB) que impacta directamente en el LCP
- Dimensionar correctamente las imágenes: nunca sirvas una imagen de 3000px de ancho para una visualización de 800px
Bueno saber: puedes identificar qué imagen constituye tu LCP mediante las herramientas PageSpeed Insights o Chrome DevTools (pestaña Rendimiento → haz clic en el marcador LCP). Esta identificación es el primer paso indispensable antes de cualquier optimización.
CLS e imágenes: los desplazamientos de diseño
El CLS (Cumulative Layout Shift) mide los desplazamientos inesperados del diseño durante la carga. Las imágenes sin dimensiones definidas son una de las causas más frecuentes de una mala puntuación CLS: el navegador no conoce el tamaño de la imagen antes de que se cargue, lo que provoca un "salto" de la página cuando aparece.
La solución es simple y universal: siempre especifica los atributos width y height en las etiquetas img. Esto permite al navegador reservar el espacio exacto necesario antes incluso de que se descargue la imagen.
INP e imágenes: un impacto indirecto
El INP (Interaction to Next Paint) mide la capacidad de respuesta de la página a las interacciones del usuario (clics, entradas). Las imágenes no impactan directamente en el INP, pero imágenes muy pesadas que monopolizan el hilo principal del navegador pueden degradar indirectamente esta métrica bloqueando el procesamiento de eventos JavaScript.
La decodificación de imágenes voluminosas (PNG de varios megabytes, TIFF de alta resolución) puede provocar bloqueos del hilo principal. El atributo decoding="async" permite diferir esta decodificación para no bloquear las interacciones.
Buenas prácticas de imágenes para los Core Web Vitals
- Formato: usa WebP o AVIF para todas las imágenes de contenido
- Dimensiones: especifica siempre width y height en todas las etiquetas img
- Lazy loading: usa loading="lazy" en todas las imágenes fuera de pantalla, excepto la imagen LCP
- Preload: precarga únicamente la imagen LCP con <link rel="preload" as="image">
- Imágenes responsive: usa el atributo srcset para servir el tamaño adecuado para cada resolución de pantalla
- Compresión: comprime todas las imágenes con una herramienta como Squoosh, Sharp o ImageMagick antes de subirlas
- CDN: aloja tus imágenes en un CDN para reducir la latencia de carga geográfica
Bueno saber: Google PageSpeed Insights y Lighthouse son las herramientas de referencia para medir tus Core Web Vitals e identificar imágenes problemáticas. Google Search Console también ofrece un informe de Core Web Vitals basado en datos reales de tus visitantes (CrUX — Chrome User Experience Report), más fiable que las pruebas de laboratorio para evaluar la experiencia real de tus usuarios.