Lazy Loading

Nivel Principiante

Imagina que estás viendo una galería de fotos en internet. Si tu computadora tuviera que cargar todas las fotos al mismo tiempo, tardaría muchísimo. El Lazy Loading es un truco para que la página solo cargue las fotos que puedes ver en la pantalla. Las demás fotos se cargan automáticamente a medida que vas bajando. ¡Es como una magia que hace que las páginas sean mucho más rápidas!

Nivel Intermedio

Lazy Loading (o Carga Diferida) es una técnica de optimización del rendimiento web que retrasa la carga de los recursos (como imágenes, videos o scripts) hasta el momento en que son necesarios o están a punto de ser visualizados por el usuario. En lugar de cargar todos los elementos al inicio, la página carga solo el contenido que aparece en la pantalla (el viewport), y el resto se carga de forma asíncrona a medida que el usuario se desplaza hacia abajo. Esta técnica es muy efectiva para mejorar la velocidad de carga inicial de una página.

Nivel Avanzado

Técnicamente, el Lazy Loading se implementa de varias maneras, siendo la más común la detección de la posición del elemento en el DOM (Document Object Model) en relación con el viewport del navegador. La implementación puede variar dependiendo del tipo de recurso:

Imágenes y Iframes: Los navegadores modernos tienen soporte nativo para el lazy loading a través del atributo loading="lazy". Esto le indica al navegador que no debe cargar el recurso hasta que esté cerca del viewport. En navegadores antiguos, esta funcionalidad se simula con JavaScript utilizando la Intersection Observer API.
Scripts: La carga diferida de scripts se puede lograr con los atributos async o defer en la etiqueta <script>. async permite que el script se cargue de forma asíncrona sin bloquear la renderización de la página, y defer retrasa la ejecución del script hasta que el HTML ha sido completamente analizado.
Videos: La carga de videos se puede diferir con el atributo preload="none" en la etiqueta <video>, lo que evita que el navegador descargue el video completo hasta que el usuario decida reproducirlo.

El Lazy Loading es un pilar fundamental en la optimización de las Core Web Vitals, especialmente para LCP (Largest Contentful Paint), ya que asegura que los recursos no críticos no retrasen la carga del contenido principal. Además, reduce el consumo de ancho de banda, lo que mejora la experiencia en redes lentas.

« Volver al índice del glosario