Lazy loading: guía de carga diferida

El principio es simple: los recursos fuera del viewport se marcan como candidatos a carga diferida. Cuando el usuario hace scroll y el recurso se acerca al área visible, se inicia la descarga. Esto puede implementarse con el atributo HTML nativo loading="lazy", con la Intersection Observer API de JavaScript o con librerías especializadas.

El navegador gestiona la lógica de cuándo iniciar la descarga en el caso nativo: normalmente empieza a cargar cuando el recurso está a unos 1.250 px del viewport en conexiones rápidas y más cerca en conexiones lentas, adaptándose automáticamente a las condiciones del usuario.

Las imágenes son el caso de uso principal del lazy loading porque representan la mayor parte del peso de la mayoría de páginas web. El atributo nativo loading="lazy" en la etiqueta <img> es la implementación más sencilla y eficiente.

La Intersection Observer API es la forma moderna de implementar lazy loading con JavaScript. Permite observar cuándo un elemento entra o sale del viewport (o de otro contenedor) de forma eficiente, sin los problemas de rendimiento del antiguo enfoque basado en scroll events.

Creas un IntersectionObserver con un callback que se ejecuta cuando los elementos observados cruzan un umbral de visibilidad. El rootMargin permite definir un margen alrededor del viewport para empezar la carga antes de que el elemento sea visible, evitando que el usuario vea un espacio vacío.

Más allá de imágenes, el lazy loading de componentes JavaScript reduce el bundle inicial de la aplicación. Componentes pesados como editores WYSIWYG, mapas interactivos, gráficos o modales complejos pueden cargarse bajo demanda cuando el usuario interactúa con ellos.

React ofrece React.lazy() con Suspense para importar componentes dinámicamente. Vue tiene defineAsyncComponent(). En Astro, las directivas client:visible y client:idle aplican lazy loading nativo a componentes interactivos (islands architecture). Next.js soporta dynamic imports con next/dynamic.

Los iframes (especialmente de YouTube, Google Maps o embeds de redes sociales) son uno de los recursos más pesados que puede contener una página. Un embed de YouTube carga más de 1 MB de JavaScript y CSS, incluso si el usuario nunca reproduce el vídeo.

Lazy loading mejora Core Web Vitals al reducir el peso inicial de la página, pero debe implementarse correctamente para no afectar negativamente al SEO. Googlebot procesa JavaScript y puede renderizar lazy loading basado en Intersection Observer, pero el contenido cargado de forma diferida puede tardar más en indexarse.

Las imágenes con loading="lazy" nativo son indexadas correctamente por Google. Para contenido textual importante, evita lazy loading: el contenido principal debe estar disponible en el HTML inicial para garantizar indexación inmediata. Usa lazy loading solo para recursos below the fold.

Lazy loading mal implementado puede empeorar la experiencia en lugar de mejorarla. Los errores más frecuentes incluyen aplicar lazy loading a la imagen LCP (retrasando su carga), no definir dimensiones (causando layout shifts) y usar implementaciones JavaScript pesadas cuando el atributo nativo sería suficiente.

Otro error común es lazy loading demasiado agresivo: si el usuario hace scroll rápido, las imágenes no cargan a tiempo y ve espacios vacíos. Usa rootMargin en Intersection Observer o confía en el comportamiento adaptativo del atributo nativo para mitigar este problema.