Ver contenido
Lazy Loading de Imagen LCP: El Error Crítico de Rendimiento
Introducción
Has agregado lazy loading a tus imágenes para mejorar el rendimiento—pero tu página realmente se volvió más lenta. ¿Qué pasó?
Uno de los errores de rendimiento más comunes en la web hoy es aplicar loading="lazy" a tu imagen LCP (Largest Contentful Paint). Este único error puede agregar cientos de milisegundos a tu métrica de rendimiento más importante y afectar tus rankings de búsqueda.
En esta guía, aprenderás por qué usar lazy loading en tu imagen LCP es un error crítico, cómo identificar qué imagen es tu elemento LCP, y cómo corregir este problema en minutos.
¿Qué es LCP?
Largest Contentful Paint (LCP) mide cuánto tiempo toma para que el elemento de contenido más grande—usualmente una imagen o bloque de texto—se vuelva visible en pantalla. Google usa LCP como factor de ranking de Core Web Vitals.
Umbrales de LCP:
- Bueno: ≤ 2.5 segundos
- Necesita Mejora: 2.5 - 4.0 segundos
- Pobre: > 4.0 segundos
Para la mayoría de las páginas, el elemento LCP es una imagen hero, foto de producto destacado, o banner grande. Esta es la imagen que los usuarios están esperando ver.
El Error del Lazy Loading
Cómo Funciona el Lazy Loading
El atributo loading="lazy" le dice a los navegadores que difieran la carga de una imagen hasta que esté a punto de entrar en el viewport. Esto es excelente para imágenes below-the-fold—los usuarios no desperdician ancho de banda descargando contenido que quizás nunca vean al hacer scroll.
<!-- Lazy loading para imágenes below-the-fold -->
<img src="foto.jpg" alt="Descripción" loading="lazy">
Por Qué Rompe el LCP
Aquí está el problema: cuando aplicas loading="lazy" a tu imagen LCP, le estás diciendo al navegador que espere antes de cargar el elemento visual más importante de tu página.
Qué sucede:
- El navegador comienza a parsear el HTML
- El navegador ve
loading="lazy"en la imagen hero - El navegador retrasa la solicitud de la imagen
- El navegador espera el layout para determinar si la imagen está en el viewport
- El navegador finalmente comienza a cargar la imagen
- Se registra el LCP—pero ahora es cientos de milisegundos más lento
Según web.dev, este retraso puede agregar 500ms o más a tu tiempo de LCP.
Cómo Identificar Tu Imagen LCP
Usando Chrome DevTools
- Abre Chrome DevTools (F12 o clic derecho → Inspeccionar)
- Ve a la pestaña Performance
- Haz clic en el botón de recarga
- En la línea de tiempo, busca el marcador “LCP”
- Haz clic para ver qué elemento fue medido
Usando Lighthouse
- Abre Chrome DevTools
- Ve a la pestaña Lighthouse
- Ejecuta una auditoría de rendimiento
- Desplázate hasta “Largest Contentful Paint element”
- Te mostrará exactamente qué elemento es tu LCP
Usando PageSpeed Insights
- Ve a PageSpeed Insights
- Ingresa tu URL
- Busca “Largest Contentful Paint element” en los diagnósticos
La Solución: Eliminar Lazy Loading de la Imagen LCP
Paso 1: Eliminar loading=“lazy”
Si tu imagen LCP tiene loading="lazy", elimínalo:
<!-- INCORRECTO: Lazy loading en imagen LCP -->
<img src="hero.jpg" alt="Imagen hero" loading="lazy">
<!-- CORRECTO: Sin lazy loading en imagen LCP -->
<img src="hero.jpg" alt="Imagen hero">
Paso 2: Agregar fetchpriority=“high” (Recomendado)
Ve más allá diciéndole al navegador que priorice esta imagen:
<!-- MEJOR: Priorizar la imagen LCP -->
<img src="hero.jpg" alt="Imagen hero" fetchpriority="high">
Paso 3: Considera el Preloading
Para máximo rendimiento, haz preload de tu imagen LCP:
<head>
<link rel="preload" as="image" href="hero.jpg">
</head>
Mejor Práctica: Lazy Loading Selectivo
El lazy loading sigue siendo excelente—solo no para contenido above-the-fold.
SÍ usa loading=“lazy” para:
- Imágenes de productos en una grilla (debajo de las primeras)
- Miniaturas de posts de blog
- Imágenes de galería
- Imágenes del footer
- Cualquier imagen below-the-fold
NO uses loading=“lazy” para:
- Imágenes hero
- Primera imagen de producto visible
- Imágenes de logo
- Cualquier contenido above-the-fold
- Tu elemento LCP
Errores Comunes a Evitar
1. Lazy Loading Generalizado
No apliques lazy loading a todas las imágenes globalmente:
<!-- INCORRECTO: Todas las imágenes con lazy loading via CSS/JS -->
<style>
img { loading: lazy; } /* Esto no funciona, pero frameworks pueden hacer algo similar */
</style>
En su lugar, sé selectivo sobre qué imágenes reciben lazy loading.
2. Auto-Lazy Loading de CMS
Muchas plataformas CMS y plugins de optimización de imágenes automáticamente agregan loading="lazy" a todas las imágenes. Revisa tu:
- Configuración del tema de WordPress
- Plugins de optimización de imágenes
- Configuración de CDN
- Valores por defecto del framework
3. Valores por Defecto de Frameworks
Algunos frameworks usan lazy loading por defecto. Revisa tu configuración:
- Componente Image de Next.js
- Módulo Image de Nuxt
- Directiva de imagen de Angular
Cómo Verificar con UXR SEO Analyzer
El UXR SEO Analyzer detecta automáticamente este problema crítico:
- Instala la extensión de Chrome
- Navega a cualquier página
- Abre la extensión
- Busca “LCP Image Lazy Loading” en la pestaña de Imágenes
- Si está marcado, el analizador mostrará qué imagen tiene el problema
La extensión identifica cuándo loading="lazy" está aplicado a tu elemento LCP y recomienda eliminarlo.
Impacto en Core Web Vitals
Corregir este único problema puede tener resultados dramáticos:
| Métrica | Antes de Corregir | Después de Corregir |
|---|---|---|
| LCP | 3.8s | 2.2s |
| Performance Lighthouse | 62 | 89 |
Los resultados varían por sitio, pero mejoras de 500ms+ son comunes.
Próximos Pasos
- Identifica tu elemento LCP usando Chrome DevTools o Lighthouse
- Verifica si tiene loading=“lazy” en esa imagen específica
- Elimina el atributo si está presente
- Agrega fetchpriority=“high” para mejora adicional
- Re-testea con Lighthouse para medir la mejora
¿Listo para aprender más? Lee nuestra Guía de Mejores Prácticas de Lazy Loading para estrategias avanzadas.
Artículos Relacionados
- Guía de Optimización de LCP - Guía completa para mejorar LCP
- Fetchpriority de Imágenes Explicado - Hints de prioridad para imágenes
- Preloading de Imágenes Explicado - Cuándo hacer preload de imágenes
- Hub de SEO de Imágenes - Todas las guías de optimización de imágenes
Referencias
- web.dev - Largest Contentful Paint - Documentación oficial de LCP de Google
- web.dev - Browser-level lazy loading - Cuándo usar lazy loading
- Chrome Developers - Lighthouse LCP - Midiendo LCP
- MDN - Lazy loading - Referencia técnica