¿Qué es el Lazy Loading?

El Lazy Loading retrasa la carga de los recursos que no son necesarios para la vista inicial hasta el momento en que se vuelven relevantes. En las tiendas online se aplica a imágenes, iframes, widgets de terceros y componentes de JavaScript situados por debajo del pliegue. Bien implementado, reduce drásticamente los bytes en la ruta crítica y repercute directamente en el LCP y el INP.

Definición

Para imágenes e iframes, el atributo loading="lazy" es compatible de forma nativa en todos los navegadores modernos e indica al motor que retrase las peticiones hasta que el recurso se acerque al viewport. Para componentes, frameworks como Next.js, Nuxt y Remix ofrecen imports dinámicos con límites de carga explícitos, a menudo combinados con la API Intersection Observer para activar la hidratación solo cuando es necesario. El Lazy Loading es conceptualmente distinto del code-splitting: el splitting crea los chunks, y el lazy loading decide cuándo solicitarlos. Ambos trabajan juntos para controlar cuánto JS propio llega al navegador en cada momento.

Por qué es importante

La carga anticipada sin límites es la causa más común de un LCP deficiente en las PLP y en las landing pages gestionadas por un CMS. Un carrusel principal que solicita veinte imágenes de producto por adelantado, un widget de reseñas de terceros que envía 300 KB de JS, o una burbuja de chat que se inicia de inmediato, todos compiten por el ancho de banda y el tiempo del hilo principal. El Lazy Loading recupera ese presupuesto para los recursos que realmente importan en el primer pintado. También reduce la carga del servidor, disminuye la salida de datos de la CDN y mejora la consistencia de los Core Web Vitals en redes lentas. La trampa está en hacerlo bien: aplicar lazy loading a la propia imagen del LCP empeorará la métrica, así que el recurso más prioritario debe seguir cargándose de forma anticipada.

Casos de uso

En las PLP, solo la primera fila de imágenes de producto se carga de forma anticipada, mientras que el resto llega mediante lazy loading nativo a medida que se hace scroll. Las reseñas, los productos relacionados, los carruseles del motor de recomendaciones y los embeds de social commerce se retrasan hasta que entran en el área visible al hacer scroll. Los widgets de chat, los fragmentos de A/B testing y los scripts de personalización pueden inicializarse cuando el navegador está inactivo. En Astro, la islands architecture trata la propia interactividad como algo que se puede cargar de forma perezosa mediante directivas client:visible. Combinado con pipelines de optimización de imágenes y shells renderizados en el edge, el lazy loading es una de las optimizaciones más baratas y con mayor ROI que puede implementar un equipo headless.

Relacionado

Explora Composable Headless Frontend · Performance and Core Web Vitals.