Qué es Lazy Load: definición y guía completa SEO
Lazy Load (Carga diferida): Técnica de optimización que retrasa la carga de recursos (imágenes, vídeos, iframes) hasta que el usuario se aproxima a ellos durante el scroll, en lugar de cargarlos todos al inicio de la página. Reduce el tiempo de carga inicial y el consumo de datos, pero requiere una implementación correcta para no perjudicar la indexación ni el LCP.
Lazy load e indexación: qué puede y qué no puede rastrear Google
Google ha mejorado considerablemente su capacidad de rastrear imágenes con lazy load. Googlebot simula el scroll durante el renderizado y puede cargar imágenes que se activan al entrar en el viewport. Sin embargo, si el lazy load usa un método no estándar (como detectar el evento scroll de JavaScript propio en lugar del Intersection Observer API o el atributo nativo loading=’lazy’) el comportamiento del crawler puede ser impredecible. Las imágenes con lazy load que no cargan correctamente en el rastreo quedan excluidas del índice de imágenes y no pueden generar tráfico desde Google Imágenes.
Impacto del lazy load en el LCP: el error más común
Aplicar lazy load al elemento que actúa como LCP de la página es el error más frecuente y más perjudicial: si la imagen principal (hero image) o el título grande tiene lazy load, el navegador no la carga hasta que el usuario llega a ella, pero es el elemento que define el LCP. El resultado es un LCP que puede superar los 4-6 segundos. La solución es identificar qué elemento es el LCP de cada plantilla de página y excluirlo explícitamente del lazy load. Para imágenes above-the-fold (visibles sin scroll), nunca debe aplicarse lazy load. El atributo fetchpriority=’high’ en la imagen LCP comunica al navegador que debe priorizarla.
Implementación correcta del lazy load para SEO y rendimiento
El atributo nativo loading=’lazy’ de HTML5 (compatible con todos los navegadores modernos) es la implementación más sencilla y la que mejor funciona con Googlebot: <img src=’…’ loading=’lazy’ width=’…’ height=’…’ alt=’…’ />. Es fundamental mantener los atributos width y height explícitos incluso con lazy load, para que el navegador reserve el espacio y evite CLS. El Intersection Observer API es el método JavaScript más apropiado para lazy load personalizado: activa la carga cuando el elemento entra en el viewport con un margen configurable (rootMargin), lo que permite pre-cargar recursos antes de que sean visibles. Las bibliotecas de lazy load antiguas basadas en el evento scroll tienen peor rendimiento y menor compatibilidad con crawlers.
Lazy load nativo vs JavaScript: cuándo usar cada uno
El lazy load nativo (loading=’lazy’) es suficiente para imágenes estáticas en HTML: es la solución más sencilla, con mejor soporte de crawlers y sin necesidad de JavaScript. El lazy load con JavaScript (Intersection Observer) es necesario cuando se quiere controlar el margen de pre-carga (rootMargin), cuando el contenido se genera dinámicamente, cuando se necesita lazy load para iframes complejos o cuando se requiere seguimiento del evento de carga. Para vídeos de YouTube o Vimeo embebidos, el lazy load es especialmente importante: un iframe de YouTube añade entre 300-500KB al peso inicial de la página y puede retrasar el LCP significativamente.
Preguntas frecuentes
¿Google puede ver el texto alternativo (alt) de imágenes con lazy load?
Sí. El atributo alt está en el HTML desde el primer momento, independientemente del lazy load. Googlebot puede leer el alt de la imagen incluso si la imagen en sí no se ha cargado todavía durante el rastreo. Para la indexación de imágenes y el ranking de búsqueda de imágenes, el alt es la señal textual principal y debe ser descriptivo y relevante.
¿El lazy load en imágenes below-the-fold mejora el Core Web Vitals?
Sí, indirectamente. Al no cargar imágenes invisibles en la carga inicial, se reduce la competencia por el ancho de banda de red durante los primeros segundos de carga, lo que permite que el elemento LCP (y otros recursos críticos) se descarguen antes. El impacto en LCP puede ser significativo en páginas con muchas imágenes below-the-fold. PageSpeed Insights específicamente sugiere usar lazy load en imágenes fuera de la zona visible inicial.