Lazy loading

Qué es lazy loading

Lazy loading es una técnica de optimización web que retrasa la carga de recursos (imágenes, vídeos, iframes) hasta que el usuario los necesita: cuando hacen scroll y entran en el viewport.

Por qué importa

Sin lazy loading, una página con 20 imágenes carga las 20 al inicio, aunque el usuario solo vea las 3 primeras. Esto:

• Sube el LCP: el navegador descarga lo no necesario antes que lo importante
• Consume ancho de banda innecesario (especialmente costoso en móvil)
• Empeora la experiencia en conexiones lentas

Con lazy loading: solo cargan las 3 visibles. Las 17 restantes se cargan según el usuario hace scroll.

Cómo implementarlo

HTML nativo (recomendado)

<img src="foto.webp" loading="lazy" alt="...">

Atributo loading="lazy" soportado en todos los navegadores modernos desde 2020. Es la forma más simple y eficiente.

Para iframes

<iframe src="..." loading="lazy"></iframe>

Para vídeo (manual)

Los vídeos no tienen loading="lazy" nativo. Hay que usar Intersection Observer:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target;
      video.src = video.dataset.src;
    }
  });
});

Cuándo NO usar lazy loading

Nunca apliques lazy loading a:

1. Imagen LCP (hero de la página): debe cargar inmediato con loading="eager" y fetchpriority="high"
2. Imágenes above the fold: visibles sin scroll, deben cargar inmediato
3. Logo del header: parte de la primera impresión

Errores comunes

• Aplicar lazy a TODAS las imágenes → LCP malo
• No aplicar a imágenes pesadas bajo el pliegue → pérdida de optimización
• Olvidar width y height: causa CLS al cargar la imagen tarde

Cómo verificar

Chrome DevTools → Network → Filtrar Img → Hacer scroll → ver que las imágenes solo cargan cuando entran al viewport.