¿Qué es el lazy loading?

Lazy loading: definición y finalidad

Una página web con muchas imágenes carga de forma clásica todo de una vez, incluso lo que los visitantes solo verán tras desplazarse mucho o nunca. Con el lazy loading, estos elementos se aplazan y solo se descargan cuando están a punto de hacerse visibles. La página se puede usar antes y, sobre todo en el smartphone, disminuye la cantidad de datos transferidos.

Lo contrario es la carga inmediata (eager loading). Para todo lo que está visible al abrir la página sigue siendo la elección correcta, porque ahí cuenta cada milisegundo. El lazy loading solo actúa, por tanto, sobre contenidos situados fuera de la primera pantalla o que solo aparecen cuando hacen falta, por ejemplo en pestañas.

Cómo funciona el lazy loading

Para imágenes e iframes basta el atributo HTML loading=lazy. Todos los navegadores habituales lo admiten y no hace falta ningún script adicional. El navegador decide por sí mismo cuándo empieza a cargar y arranca algo antes de que el elemento sea visible, para que los visitantes apenas noten retraso.

Además existen soluciones en JavaScript basadas en el IntersectionObserver, que también cargan posteriormente mapas, vídeos o componentes enteros. Para que nada salte, el ancho y el alto de los elementos deben fijarse de antemano; de lo contrario, el contenido se desplaza al cargarse y empeora el valor de estabilidad del diseño.

• Imágenes por debajo de la zona visible, como galerías, teasers y pie de página
• Vídeos y mapas incrustados (iframes)
• Listas largas y cuadrículas de productos que se cargan después
• No aplazar: imagen de cabecera en la zona visible y logotipo

Ejemplo práctico: página de referencias de un instalador de baldosas

Un instalador de baldosas muestra en su página de referencias ochenta fotos de gran formato. Al abrirla, el navegador carga todas las imágenes de una vez, lo cual tarda en la red móvil y consume datos. Con el lazy loading, al principio solo aparecen las primeras imágenes y el resto llega al desplazarse.

Al principio también se había aplazado la imagen de cabecera grande, con lo que la página parecía incluso más lenta. Solo cuando se cargó de inmediato y además se priorizó (fetchpriority=high) mejoró el valor del Largest Contentful Paint, el tiempo de carga del elemento visible más grande. La excepción para la imagen de cabecera es, pues, tan importante como aplazar las demás imágenes.

Ventajas, límites y errores habituales

El lazy loading reduce el tiempo de carga, el consumo de datos y la carga del servidor. Pero no ayuda contra los archivos demasiado grandes: las imágenes deberían, además, comprimirse y servirse en formatos modernos como WebP o AVIF. Para los buscadores, los contenidos cargados posteriormente deben hacerse visibles sin necesidad de hacer clic, algo que cumplen el atributo nativo y el IntersectionObserver.

• Imagen de cabecera (elemento LCP) cargada con retraso: empeora el tiempo de carga
• Faltan indicaciones de ancho y alto: la página salta al cargarse el contenido
• Textos importantes que se cargan solo tras un clic
• Carga posterior demasiado tardía: las imágenes aparecen con retraso visible al desplazarse

Imple­menta­ción

Los temas y frameworks modernos aplican a veces el lazy loading automáticamente, pero conviene comprobar la regla: zonas visibles de inmediato, todo lo demás con retraso. Nano Concepts lo aplica en el marco de la optimización de PageSpeed, fija tamaños de marcadores de posición y comprueba el efecto con las Core Web Vitals.