¿Qué es el lazy loading?

También llamado: carga diferida, carga perezosa

Definición

El lazy loading o carga diferida consiste en no descargar las imágenes, vídeos o scripts que no se ven hasta que el usuario se acerca a ellos al desplazarse. Acelera la carga inicial y ahorra datos.

En una página larga, gran parte de las imágenes están muy por debajo de lo que se ve al entrar. Si se cargan todas al principio, compiten con lo importante y retrasan la página. Con carga diferida, el navegador solo las pide cuando van a aparecer en pantalla.

Ejemplo

Los navegadores lo admiten de forma nativa con un atributo:

<!-- Imagen principal, visible al cargar: NADA de lazy -->
<img src="portada.webp" width="1200" height="600" alt="..." fetchpriority="high">

<!-- Más abajo en la página: carga diferida -->
<img src="grafico.webp" width="800" height="400" alt="..." loading="lazy">
<iframe src="https://www.youtube-nocookie.com/embed/..." loading="lazy" title="Vídeo"></iframe>

En JavaScript, los módulos que no hacen falta al principio también se pueden cargar bajo demanda:

boton.addEventListener("click", async () => {
  const { abrirEditor } = await import("./editor.js");
  abrirEditor();
});

Errores habituales

Aplicar lazy loading a la imagen principal o a todo por defecto. Retrasa justo lo que el usuario ve primero y empeora el LCP de las Core Web Vitals.
No indicar width y height: cuando la imagen llega, empuja el contenido y aumenta el CLS.
Cargar contenido importante para SEO solo al hacer scroll con JavaScript: los buscadores no se desplazan como un usuario.

¿Tienes un producto o servicio relacionado con Lazy loading? Anúnciate en este término.

Términos relacionados

Categorías: Frontend