Lazy loading

El Lazy Loading (carga diferida) es una técnica que retrasa la carga de elementos hasta que son necesarios, es decir, cuando el usuario los visualiza en pantalla. Esto reduce el tiempo de carga inicial, mejora el rendimiento y optimiza el consumo de recursos.

💡 Ejemplo práctico:

• En un eCommerce, en lugar de cargar todas las imágenes de productos al inicio, solo se cargan las visibles. A medida que el usuario hace scroll, se van mostrando las demás.

Tipos de Lazy Loading

🔹 Lazy Loading en Imágenes: Solo se cargan cuando entran en el viewport.
🔹 Lazy Loading en Videos e Iframes: Se evita cargar videos de YouTube o mapas de Google hasta que el usuario los necesite.
🔹 Lazy Loading en Elementos HTML (Divs, Secciones, etc.): Se pueden cargar dinámicamente para mejorar la velocidad de la página.

Beneficios del Lazy Loading para SEO

La carga diferida es clave en la optimización de velocidad y experiencia de usuario (UX), factores que Google considera en su ranking.

✅ Mejora el rendimiento web: Reduce el tamaño total de la página y el tiempo de carga.
✅ Optimiza el uso del ancho de banda: Solo se descargan elementos cuando es necesario.
✅ Reduce el CLS (Cumulative Layout Shift): Minimiza el «movimiento» de la página mientras carga.
✅ Mejora la experiencia móvil: Disminuye el consumo de datos en dispositivos con conexión limitada.

📌 Ejemplo real:
Un sitio de noticias con muchas imágenes implementó Lazy Loading correctamente, logrando una reducción del 35% en el tiempo de carga y un aumento del 12% en CTR en Google Search Console.

Errores Comunes de Lazy Loading que Afectan la Indexación en Google

Si Googlebot no puede ver el contenido Lazy Loaded, simplemente no lo indexará. Aquí los errores más frecuentes:

❌ Uso incorrecto de display: none; o visibility: hidden;

Google ignora contenido oculto con display: none;, ya que lo considera irrelevante.

❌ Lazy Loading basado en eventos de usuario

Si una imagen solo se carga cuando el usuario interactúa (ejemplo: onClick, onMouseOver), Googlebot no podrá activarla.

❌ No proporcionar atributos ALT en imágenes Lazy Loaded

El ALT es clave para SEO y accesibilidad. Si una imagen se carga con JavaScript sin ALT, pierde valor semántico.

❌ No usar un fallback para navegadores sin soporte

Algunos navegadores antiguos no admiten Lazy Loading nativamente, lo que puede afectar la experiencia del usuario.

❌ Bloqueo de recursos en robots.txt

Si los archivos JS que controlan el Lazy Loading están bloqueados en robots.txt, Google no podrá renderizar el contenido correctamente.

Mejores prácticas para implementar Lazy Loading sin «cargarnos nada»

Para evitar problemas de indexación, sigue estas buenas prácticas:

1️⃣ Usa el atributo loading="lazy" (Método Nativo)

Desde HTML5, los navegadores modernos admiten loading="lazy", que permite cargar imágenes diferidas sin JavaScript.

<img src="imagen.jpg" alt="Ejemplo Lazy Loading" loading="lazy">

✔️ Ventajas:

• Rápido y fácil de implementar.
• Compatible con Googlebot.
• No requiere JavaScript adicional.

⚠️ Limitación: No funciona en todos los navegadores antiguos.

2️⃣ Implementa Lazy Loading con Intersection Observer API (Método Avanzado)

Para mayor control, usa la API Intersection Observer, que detecta cuándo un elemento entra en el viewport.

document.addEventListener("DOMContentLoaded", function () {
  let images = document.querySelectorAll("img.lazy");

  let observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        let img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove("lazy");
        observer.unobserve(img);
      }
    });
  });

  images.forEach((img) => {
    observer.observe(img);
  });
});

🔹 Cómo funciona:

1. Se detectan las imágenes con la clase .lazy.
2. Cuando entran en el viewport, se asigna su src y se elimina la clase Lazy.
3. Se desvincula del Observer para evitar cargas repetidas.

✔️ Ventajas:

• Compatible con Googlebot.
• Funciona en la mayoría de los navegadores modernos.
• Mayor control que loading="lazy".

3️⃣ Implementa Lazy Loading en Iframes (YouTube, Google Maps, etc.)

Los iframes pueden ralentizar la carga de la página. Usa el loading="lazy" o Intersection Observer para optimizar su carga.

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>

4️⃣ Agrega un <noscript> como Fallback

Si el navegador no soporta Lazy Loading o JavaScript está desactivado, usa un <noscript> para cargar una imagen estática.

<noscript>
  <img src="imagen.jpg" alt="Ejemplo Lazy Loading">
</noscript>

✔️ Esto asegura que el contenido sea accesible para todos los usuarios y motores de búsqueda.

Validaciones para Indexación en Google

Vamos a comprobar que Google puede ver nuestro contenido bien después de implementar Lazy Loading, así que vamos a utilizar a nuestra querida GSC para esta tarea:

🔍 1. Usa Google Search Console (Herramienta de inspección de URL)

• Ingresa la URL y haz clic en «PROBAR URL PUBLICADA».
• Asegúrate de que Google renderiza correctamente el contenido Lazy Loaded.

🔍 2. Simula Googlebot con Chrome DevTools

• Abre la herramienta de desarrolladores en Chrome (F12 o Ctrl + Shift + I).
• Ve a Network → Disable JavaScript y recarga la página.
• Si el contenido Lazy Loaded desaparece, Google podría tener problemas para indexarlo.