Lazy Loading
Aprende sobre lazy loading en tres niveles: desde conceptos básicos hasta conocimientos avanzados.
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!
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.
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