Ver contenido
Introducción
Agregaste lazy loading para acelerar tus páginas y, en cambio, tu métrica más importante empeoró. Es una situación común y corregible: loading="lazy" terminó aplicado a tu imagen LCP, el elemento más grande visible cuando la página carga por primera vez. Esta guía es el camino práctico, paso a paso, para confirmar el problema, encontrar qué imagen está afectada y corregirlo.
Si buscas el mecanismo de fondo—por qué diferir la imagen LCP retrasa la métrica, los umbrales exactos y el principio del lazy loading selectivo—revisa el artículo complementario Lazy loading y LCP: por qué diferir tu imagen principal frena el rendimiento. Aquí nos concentramos en el diagnóstico y la corrección.
Una Nota Breve Sobre Qué Es el LCP
El Largest Contentful Paint (LCP) mide cuánto tarda en renderizarse el elemento visible más grande. En la mayoría de las páginas ese elemento es una imagen: un banner hero, una foto de producto destacado o un retrato grande. Google considera un LCP de 2.5 segundos o menos como bueno. Cuando aplicas lazy loading a esa imagen específica, el navegador espera antes de solicitarla y la métrica se degrada. Ese es el problema completo en una frase; el artículo conceptual cubre el resto.
Síntomas: ¿Realmente Tienes Este Problema?
Antes de tocar cualquier marcado, verifica si las señales coinciden. Probablemente tienes lazy loading en tu imagen LCP si:
- Activaste hace poco un plugin, opción de theme o librería de lazy loading, y el LCP empeoró en lugar de mejorar.
- Lighthouse o PageSpeed Insights reportan un LCP lento mientras otras métricas se ven bien.
- PageSpeed Insights muestra una advertencia del tipo "la imagen del Largest Contentful Paint se cargó de forma diferida (lazy)".
- Tu imagen hero o destacada aparece un instante después que el texto que la rodea.
- El Analizador SEO de UXR marca un problema de lazy loading en LCP (se detalla más abajo).
Si nada de esto aplica, tu demora de LCP probablemente tiene otra causa, y la Guía de Optimización LCP es un mejor punto de partida.
Paso 1: Identificar Qué Elemento Es tu LCP
No puedes corregir la imagen correcta hasta saber cuál es. Cualquiera de las tres herramientas siguientes te lo indica.
Chrome DevTools
- Abre DevTools (F12).
- Ve a la pestaña Performance.
- Graba una carga de página (recarga mientras grabas).
- Ubica el marcador LCP en la línea de tiempo.
- Haz clic en él para ver exactamente qué elemento activó el LCP.
Lighthouse
- Ejecuta una auditoría Lighthouse.
- En la sección Performance, abre Largest Contentful Paint element.
- Nombra el elemento preciso medido como tu LCP.
PageSpeed Insights
- Ingresa tu URL en PageSpeed Insights.
- Desplázate a Diagnostics.
- Busca "Largest Contentful Paint element".
Una vez que tengas el elemento, inspecciona su HTML y revisa si lleva el atributo loading="lazy". Si está presente, confirmaste el problema.
Paso 2: Encontrar el Culpable en tu Stack
El atributo rara vez llega a mano. Casi siempre lo agrega de forma automática una plataforma, theme o librería que aplica lazy loading a todas las imágenes sin distinguir la que está sobre el pliegue. Compara tu configuración con el origen probable.
| De dónde viene | Cómo introduce el error | Dónde revisar |
|---|---|---|
| Auto-lazy del CMS (por ejemplo WordPress) | Agrega loading="lazy" a todas las imágenes por defecto, hero incluido |
Configuración del theme y plugins de optimización de imágenes |
| Themes de e-commerce (por ejemplo Shopify) | Las plantillas del theme aplican lazy a imágenes de producto y banner en todo el sitio | El snippet de imagen en las plantillas de tu theme |
| Librerías JavaScript de lazy load | Aplican el comportamiento diferido a toda imagen que coincida, sin distinción | La configuración de la librería; agrega una exclusión para imágenes above-the-fold |
| Valores por defecto de componentes de framework | Los componentes de imagen aplican lazy salvo que se indique lo contrario | Ajustes de Next.js Image, Nuxt Image, la directiva de imagen de Angular |
El patrón a vigilar es el lazy loading generalizado, donde el hero, un producto a media página y el logo del footer llevan todos el mismo loading="lazy". El hero es tu LCP y debería ser la excepción.
Paso 3: Aplicar la Corrección
Una vez que sabes qué imagen es y dónde se genera, el arreglo es pequeño.
Elimina loading="lazy" de la imagen LCP. Si el origen es un plugin o un valor por defecto de componente, desactiva el lazy loading para imágenes hero y destacadas en lugar de editar a mano el HTML generado.
<!-- INCORRECTO: Lazy loading en la imagen LCP -->
<img src="hero.jpg" alt="Banner hero" loading="lazy">
<!-- CORRECTO: Sin lazy loading en la imagen LCP -->
<img src="hero.jpg" alt="Banner hero">
<!-- MEJOR: Señalar la prioridad al navegador -->
<img src="hero.jpg" alt="Banner hero" fetchpriority="high">
Agrega fetchpriority="high". Quitar el lazy loading detiene la demora; esto le indica al navegador que la imagen es crítica y debe cargarse antes que otros recursos, lo que puede recuperar 100-200ms adicionales.
Considera el preload. Cuando la imagen LCP se referencia tarde (por ejemplo, definida vía CSS o construida por script), una pista de preload en el <head> permite que el navegador la descubra antes:
<link rel="preload" as="image" href="hero.jpg">
Mantén loading="lazy" en las imágenes que sí están below-the-fold. El objetivo es un lazy loading selectivo, no eliminarlo en todas partes.
Lista de Verificación
Después del cambio, confirma que funcionó en lugar de darlo por hecho.
- [ ] El elemento LCP ya no lleva
loading="lazy"en el HTML renderizado. - [ ]
fetchpriority="high"está presente en la imagen LCP. - [ ] Las imágenes below-the-fold siguen usando
loading="lazy". - [ ] Vuelve a ejecutar Lighthouse o PageSpeed Insights y confirma que el LCP mejoró.
- [ ] Revisa cada plantilla principal, porque la corrección es por plantilla: home, producto y blog pueden generar el marcado de forma distinta.
- [ ] Vuelve a ejecutar el Analizador SEO de UXR y confirma que la marca desapareció.
Cómo lo Marca el Analizador SEO de UXR
El analizador automatiza el diagnóstico anterior:
- Instala la extensión de Chrome.
- Abre la página que quieres revisar.
- Abre la extensión y busca, en la pestaña Images, LCP Image Lazy Loading.
Identifica el elemento LCP, verifica si tiene el atributo loading="lazy" y lo marca como error crítico cuando está presente, recomendando eliminarlo y usar fetchpriority="high". Se marca como crítico porque el LCP es una señal de ranking de Core Web Vitals.
Artículos Relacionados
- Lazy loading y LCP: por qué diferir tu imagen principal frena el rendimiento - El concepto y el mecanismo detrás de esta corrección
- Guía de Mejores Prácticas de Lazy Loading - Librerías, placeholders y técnicas avanzadas
- Guía de Optimización LCP - Optimización completa de Largest Contentful Paint
- Imágenes Responsivas Explicado - Sirviendo el tamaño correcto a cada dispositivo
- Optimización de Imágenes Explicado - Visión completa de optimización de imágenes
- Hub de SEO de Imágenes - Todas las guías de optimización de imágenes
Referencias
- web.dev - Lazy loading images
- Chrome Developers - Optimize Largest Contentful Paint
- web.dev - Largest Contentful Paint (LCP)
- Google Search Central - Page experience