Desde 2021, Google usa los Core Web Vitals como factor de posicionamiento oficial. Estas métricas miden la experiencia real del usuario al cargar tu página — y las imágenes son el factor que más las afecta. Si tu sitio tiene mala puntuación en PageSpeed, las imágenes son probablemente la causa principal.
Los Core Web Vitals son tres métricas definidas por Google para medir la calidad de la experiencia de usuario en una página web:
| Métrica | Bueno | Mejorable | Malo |
|---|---|---|---|
| LCP | < 2.5s | 2.5–4s | > 4s |
| CLS | < 0.1 | 0.1–0.25 | > 0.25 |
| INP | < 200ms | 200–500ms | > 500ms |
El LCP mide cuánto tarda en aparecer el elemento más grande de la página — y en la mayoría de páginas ese elemento es una imagen (el hero, el banner principal o la imagen destacada de un artículo).
Las causas más comunes de un LCP malo relacionadas con imágenes:
1. Comprime y convierte a WebP: El primer paso siempre. Una imagen hero de 2 MB debe bajar a menos de 200 KB.
Reduce el peso de tus imágenes hasta un 90% en segundos, directamente en el navegador.
⚡ Comprimir gratis2. Usa fetchpriority="high" en el hero:
<img src="hero.webp" alt="..." fetchpriority="high" />3. Añade un preload en el head para el hero:
<link rel="preload" as="image" href="hero.webp" />4. Nunca uses loading="lazy" en la imagen hero. El lazy loading es para imágenes fuera del viewport inicial, no para la principal.
El CLS mide cuánto se mueve el contenido de forma inesperada mientras la página carga. Cuando una imagen carga sin que el browser sepa su tamaño de antemano, empuja el texto hacia abajo — ese salto es CLS.
La solución es simple: siempre define width y height en tus imágenes. El browser reserva el espacio antes de que la imagen cargue.
<!-- MAL: el browser no sabe el espacio que ocupa -->
<img src="producto.webp" alt="Producto" />
<!-- BIEN: el browser reserva el espacio exacto -->
<img src="producto.webp" alt="Producto" width="800" height="600" />Si usas CSS para hacer las imágenes responsivas (max-width: 100%), los atributos width/height siguen siendo necesarios — el browser usa la proporción para calcular el espacio reservado aunque el tamaño visual cambie.
Tip: en WordPress, desde la versión 5.5, las imágenes insertas automáticamente incluyen width y height. Si tienes imágenes antiguas sin estos atributos, el plugin Image Attributes Pro puede añadirlos en bulk.
El INP (sucesor del FID desde marzo 2024) mide la capacidad de respuesta de la página a las interacciones del usuario. Las imágenes pueden afectarlo de forma indirecta:
Ve a pagespeed.web.dev e introduce tu URL. En la sección "Oportunidades" verás exactamente qué imágenes están causando problemas y cuánto tiempo podrías ahorrar.
Abre DevTools → pestaña Lighthouse → ejecuta un análisis. En la sección "Diagnostics" verás imágenes sin dimensiones, imágenes con lazy loading incorrecto y formatos no optimizados.
webpagetest.org ofrece análisis más detallados incluyendo filmstrip de carga y waterfall de recursos. Útil para identificar qué imagen específica está bloqueando el LCP.
Dato real: según Google, pasar de "Malo" a "Bueno" en Core Web Vitals puede reducir la tasa de rebote entre un 24% y un 35% y mejorar las conversiones entre un 3% y un 8%. Las imágenes son el punto de partida más impactante.
Comprime tus imágenes gratis en segundos. Sin registro.
⚡ Usar ComprimirPro ahora