Core Web Vitals: cómo afectan las imágenes al LCP y al CLS (y cómo solucionarlo)
Cuando una página se siente lenta, el culpable suele ser una imagen grande cerca de la parte superior. Los Core Web Vitals te dan cifras para ello, y las correcciones en las imágenes suelen mover esas cifras más que casi cualquier otra cosa. Esta guía explica qué se mide, qué ralentiza las imágenes y cómo arreglarlo.
Qué miden LCP y CLS
Largest Contentful Paint (LCP) es el tiempo que tarda en aparecer el elemento visible más grande, muy a menudo una imagen de cabecera. Google considera bueno un LCP de 2,5 segundos o menos, y malo uno superior a 4 segundos.
Cumulative Layout Shift (CLS) mide cuánto salta la página mientras carga. Una puntuación de 0,1 o menos se considera buena. Las imágenes que llegan sin espacio reservado empujan el texto hacia abajo y son una causa clásica de cambios de diseño.
Ambos se miden con visitantes reales, y los umbrales se aplican a la mayoría de tus visitas y no a una única prueba, así que busca un margen cómodo.
Por qué las imágenes suelen ser la causa
Las imágenes son grandes, el navegador las descubre solo después de leer el HTML y pueden llegar tarde. Los problemas más comunes son:
- Archivos sobredimensionados. Una imagen de cabecera de 3 MB tarda mucho en descargarse en un móvil.
- Formatos antiguos. JPG y PNG pesan más que WebP o AVIF con la misma calidad.
- Descubrimiento tardío. Si la imagen se define con JavaScript o está oculta en un fondo CSS, el navegador la encuentra más tarde.
- Carga diferida en el lugar equivocado. Decirle al navegador que espere para cargar la imagen más importante es justo lo contrario de lo que quieres.
- Dimensiones ausentes. Sin
widthyheight, la página no puede reservar espacio, lo que provoca cambios de diseño.
Encuentra primero tu imagen LCP
Ejecuta la página en PageSpeed Insights o Lighthouse y abre la sección de LCP, que indica el elemento exacto. Las herramientas para desarrolladores de Chrome también lo marcan en el panel Rendimiento. Corrige esa imagen antes de tocar nada más, porque mejorar otras imágenes no cambiará la cifra.
Si el elemento LCP es texto y no una imagen, el trabajo con las imágenes no ayudará en esa página y deberías mirar las fuentes y la velocidad del servidor.
Soluciones comparadas: por dónde empezar
| Solución | Esfuerzo | Impacto habitual |
|---|---|---|
| Redimensionar y comprimir la imagen LCP | Bajo | Alto, a menudo la mayor mejora individual |
| Pasar a WebP o AVIF | Bajo a medio | Medio a alto |
| Quitar la carga diferida de la imagen LCP | Bajo | Medio |
Añadir fetchpriority="high" | Bajo | Medio |
| Servir desde una CDN con caché larga | Medio | Medio, sobre todo para visitantes lejanos |
Empieza por la parte superior de la tabla. Las tres primeras suelen llevar minutos y aportan la mayor parte de la mejora.
Paso a paso: corrige la imagen LCP
- 1Identifica el elemento con PageSpeed Insights o Lighthouse.
- 2Redimensiónalo al mayor tamaño con el que realmente se muestra. Redimensionar y comprimir hace el cambio de tamaño y la compresión en un paso, y la guía de tamaños ideales indica objetivos razonables.
- 3Comprímelo. Comprimir imagen puede apuntar a un tamaño objetivo, por ejemplo 200 KB para una imagen de cabecera. Una imagen de 3 MB reducida a 200 KB puede cambiar la puntuación de forma drástica.
- 4Usa un formato moderno. Convierte con PNG a WebP o JPG a WebP, y mantén un formato de respaldo. La guía para pasar a WebP explica cómo.
- 5Asegúrate de que está en el HTML como un elemento
img, para que el navegador lo encuentre pronto. - 6Quítale
loading="lazy"y añadefetchpriority="high". - 7Vuelve a medir y confirma que el tiempo de LCP ha bajado.
Paso a paso: evita los saltos de diseño
- 1Añade los atributos
widthyheighta todas las imágenes, o define unaspect-ratioen CSS, para que el navegador reserve el espacio correcto antes de que llegue el archivo. - 2Reserva espacio para el contenido que llega tarde, como banners, contenido incrustado y anuncios, con una altura mínima fija.
- 3Evita insertar contenido encima de lo que el visitante está leyendo, salvo que sea una respuesta a una acción suya.
- 4Comprueba la cifra de CLS en PageSpeed Insights o en el informe de Core Web Vitals de Search Console.
Errores frecuentes
- Aplicar carga diferida a todas las imágenes, incluida la de la parte superior de la página. Consulta la guía de carga diferida.
- Optimizar imágenes decorativas e ignorar el verdadero elemento LCP.
- Probar una sola vez con una conexión rápida de oficina. Prueba también en un móvil con una red más lenta.
- Tratar las puntuaciones de laboratorio como definitivas. Los datos de usuarios reales de Search Console pueden tardar semanas en reflejar los cambios.
Preguntas frecuentes
¿Qué es una buena puntuación de LCP?
Google considera bueno un LCP de 2,5 segundos o menos, mejorable uno entre 2,5 y 4 segundos y malo uno superior a 4 segundos. Estos umbrales se aplican a la mayoría de las visitas reales, así que busca un margen cómodo.
¿Cómo afectan las imágenes al CLS?
Cuando una imagen carga sin espacio reservado, el contenido que hay debajo salta hacia abajo. Añadir los atributos width y height, o una proporción en CSS, permite al navegador reservar de antemano el espacio correcto y evita el salto.
¿Debo aplicar carga diferida a todas las imágenes?
No. Aplícala a las imágenes que quedan por debajo de la primera pantalla, pero no a la imagen principal de la parte superior, porque suele ser el elemento LCP y debe cargarse lo antes posible.
¿WebP o AVIF mejoran el LCP?
A menudo sí, porque los archivos más pequeños se descargan más rápido. Las mayores mejoras siguen viniendo de redimensionar y comprimir la imagen LCP, así que hazlo primero y luego plantéate un formato moderno.
¿Por qué no cambió mi puntuación después de optimizar las imágenes?
Puede que hayas optimizado una imagen que no es el elemento LCP, o que los datos de usuarios reales aún no se hayan actualizado. Identifica el elemento LCP exacto y recuerda que los datos de campo de Search Console pueden tardar semanas en reflejar los cambios.