¿Qué es el lazy loading (carga diferida)?

¿Qué es el lazy loading?

El lazy loading (carga diferida) es una técnica que retrasa la carga de un recurso hasta que hace falta, normalmente hasta que el usuario se acerca a él al hacer scroll. Las imágenes, los iframes y los fragmentos de JavaScript que empiezan fuera de pantalla se descargan más tarde, así que el navegador tiene menos que descargar antes de mostrar la parte visible.

Cómo funciona la carga diferida

Imágenes e iframes: el atributo loading

Al añadir loading="lazy" a un <img> o a un <iframe>, el navegador espera a que el elemento esté cerca del viewport. La distancia la decide el navegador y no se puede cambiar. La carga diferida de imágenes funciona en Chrome 77, Edge 79, Firefox 75 y Safari 15.4 o posterior; un navegador que no conoce el atributo lo ignora y carga la imagen con normalidad (fuente: web.dev).

<img src="team.jpg" loading="lazy" alt="Our team" width="800" height="600">

Define siempre width y height. Sin ellos el navegador no puede reservar espacio, la página salta cuando llega la imagen y sube tu Cumulative Layout Shift. En tamaño de imagen verás cómo elegir las dimensiones.

JavaScript: Intersection Observer e import() dinámico

Para lo que el atributo no cubre, como un reproductor de vídeo o un widget pesado, un Intersection Observer avisa cuando un elemento entra o sale del viewport y tu código empieza el trabajo en ese momento (consulta MDN sobre lazy loading). Un rootMargin adelanta un poco la carga, de modo que el usuario rara vez ve un hueco vacío.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' });
document.querySelectorAll('img[data-src]').forEach((img) => observer.observe(img));

En una aplicación de una sola página, el import() dinámico hace lo mismo con el código: el bundle de una ruta solo se descarga cuando el usuario navega a ella, y la primera descarga se mantiene pequeña.

const Settings = () => import('./Settings.js');

Ejemplo: una página de artículo larga

Un artículo tiene una imagen principal y quince imágenes más abajo, además de un vídeo incrustado. Para la primera vista solo hace falta la imagen principal. Déjala con carga normal (el valor por defecto) y marca las otras quince imágenes y el iframe del vídeo con loading="lazy". Quien se detiene tras la introducción nunca las descarga; quien hace scroll recibe cada una justo antes de que aparezca.

Errores habituales con la carga diferida

• Aplazar la imagen principal o la del LCP. Las imágenes que probablemente se ven al cargar no deben ser lazy, porque el navegador retrasa justo el elemento que espera tu Largest Contentful Paint (web.dev da el mismo consejo).
• Olvidar width y height. El diseño se desplaza cada vez que llega una imagen.
• Aplazarlo todo. La primera pantalla debe cargar con normalidad; aplaza solo lo que queda debajo.
• Esconder contenido importante tras scripts que esperan al scroll. El texto principal va en el HTML inicial; aplaza los medios, no el texto.
• Empezar demasiado tarde. Sin margen, el usuario llega a un hueco vacío y espera. Empieza a cargar un poco antes.
• Creer que elimina trabajo. La carga diferida pospone la descarga. Un script lento que se ejecuta después sigue siendo lento.

Carga diferida, pruebas y monitorización

Los archivos con carga diferida se piden al hacer scroll, así que una prueba que nunca hace scroll nunca los descarga. Por eso una auditoría de velocidad puede parecer más ligera que lo que descarga un lector que recorre toda la página. Para el panorama general, 10 pasos para mejorar la velocidad de tu web y por qué importa optimizar las imágenes recogen la lista completa.

Para ver el efecto en métricas reales, consulta el LCP y el CLS de tu página con el comprobador gratuito de Core Web Vitals, que lee datos de campo del Chrome UX Report. Para vigilarlas después de cada versión, la monitorización de velocidad de LoadFocus ejecuta auditorías Lighthouse programadas y avisa cuando una métrica cambia.

Preguntas frecuentes: lazy loading

¿Debo añadir loading="lazy" a todas las imágenes?

No. Las imágenes de la parte superior de la página, sobre todo la que es tu elemento Largest Contentful Paint, deben cargarse con normalidad. Usa la carga diferida para las imágenes que quedan debajo de la primera pantalla.

¿El lazy loading ayuda o perjudica al SEO?

Ayuda cuando solo aplaza imágenes e iframes fuera de la zona visible, porque la página se vuelve más rápida. Perjudica cuando el texto o los enlaces que deben indexarse quedan tras un script que espera al scroll. Mantén el contenido importante en el HTML inicial.

¿Qué diferencia hay entre lazy loading y code splitting?

El code splitting es un paso de compilación que divide tu JavaScript en archivos separados. El lazy loading es la decisión en tiempo de ejecución de descargar uno de esos archivos solo cuando hace falta. Los bundlers hacen lo primero; el import() dinámico, lo segundo.

¿Puedo aplicar carga diferida a imágenes de fondo CSS?

No con el atributo loading, que solo vale para imágenes e iframes. Usa un elemento img real cuando puedas, o un Intersection Observer que asigne el fondo cuando el elemento se acerque al viewport.

¿Qué navegadores admiten loading="lazy"?

Chrome 77, Edge 79, Firefox 75 y Safari 15.4 y posteriores lo admiten para imágenes. Los demás ignoran el atributo y cargan la imagen de inmediato, así que nada se rompe.