La carga diferida es una técnica utilizada en el desarrollo web para mejorar el rendimiento y la velocidad de carga de las páginas web, en particular aquellas con una gran cantidad de imágenes u otro contenido multimedia. La idea básica detrás de la carga diferida es retrasar la carga de ciertos recursos, como imágenes, hasta que realmente se necesiten o estén a punto de aparecer a la vista del usuario.

La carga tradicional de páginas web implica obtener todos los recursos, incluidas las imágenes, tan pronto como el navegador solicite el documento HTML. Esto puede conducir a tiempos de carga más lentos, especialmente en páginas con muchas imágenes, porque el navegador tiene que descargar y procesar todo el contenido antes de mostrar algo al usuario.

Por el contrario, la carga diferida funciona solo cargando imágenes que están actualmente visibles dentro de la ventana gráfica del usuario o cerca de ella. A medida que el usuario se desplaza hacia abajo en la página, se cargan dinámicamente imágenes adicionales en función de su posición actual en la pantalla. Este enfoque tiene varios beneficios:

• Carga de la página inicial más rápida: al cargar solo el contenido que es inmediatamente visible, se reduce el tiempo de carga inicial, lo que proporciona una experiencia de usuario más rápida y fluida.
• Uso de ancho de banda reducido: la carga diferida minimiza la cantidad de datos que deben transferirse a través de la red, lo que puede ser particularmente ventajoso para los usuarios con conexiones a Internet limitadas o lentas.
• Rendimiento mejorado: cargar menos recursos por adelantado puede mejorar la capacidad de respuesta de la página y reducir el uso de memoria, especialmente en dispositivos con recursos limitados.
• Mejor experiencia de usuario: los usuarios pueden comenzar a interactuar con el contenido visible más rápidamente, lo que mejora la experiencia de navegación en general.

Hay dos formas principales de cargar imágenes de forma diferida (lazy loading):

Carga diferida a nivel del navegador: esto es compatible con la mayoría de los navegadores modernos y utiliza el atributo "loading" en el elemento img. El valor de este atributo se puede establecer en "lazy", lo que le indica al navegador que cargue la imagen solo cuando esté visible en la pantalla. Aquí hay un ejemplo:

<img src="https://example.com/image.jpg" alt="..." loading="lazy">

Carga diferida de JavaScript: esto implica el uso de JavaScript para cargar imágenes solo cuando se necesitan. Esto puede ser más flexible que la carga diferida a nivel del navegador, pero también puede ser más complejo de implementar. Debe usar la API de Intersection Observer para detectar cuándo el usuario ve la imagen. Siga estas instrucciones para agregar carga diferida usando Javascript:

1. Incluya todas sus imágenes usando la etiqueta img sin el atributo src e incluyendo data-src, de la siguiente manera:

<img data-src="https://example.com/image.jpg" alt="...">

2. Agregue el siguiente código javascript antes de la etiqueta </body>

    const imgObserver = new IntersectionObserver(function(entries, observer){
      entries.forEach(entry => {
        if (entry.isIntersecting){
          entry.target.src = entry.target.dataset.src;
        }
      });
    });
 
    document.querySelectorAll('img[data-src]').forEach( el => {
      imgObserver.observe(el);
    });

Usando ambos métodos a la vez: otra opción es usar la carga diferida de javascript cuando el navegador no soporta la carga diferida nativa. Los desarrolladores web pueden usar Javascript para detectar cuándo el navegador no soporta la carga diferida y proporcionar una función de respaldo:

1. Incluya todas sus imágenes usando la etiqueta img sin el atributo src, con el atributo "loading" con el valor "lazy" e incluyendo el atributo data-src, de la siguiente manera:

<img data-src="https://example.com/image.jpg" alt="..." loading="lazy">

2. Agregue el siguiente código javascript antes de la etiqueta </body>

if ('loading' in HTMLImageElement.prototype) {
    document.querySelectorAll('img[data-src]').forEach( el => {
      el.src = el.dataset.src;
    });
  } else {
    const imgObserver = new IntersectionObserver(function(entries, observer){
      entries.forEach(entry => {
        if (entry.isIntersecting){
          entry.target.src = entry.target.dataset.src;
        }
      });
    });
 
    document.querySelectorAll('img[data-src]').forEach( el => {
      imgObserver.observe(el);
    });
  }

La carga diferida de imágenes es una técnica útil que puede mejorar el rendimiento de una página web, reducir el tiempo de carga inicial de la página, reducir la cantidad de datos que se transfieren a través de la red y mejorar la capacidad de respuesta general del sitio web.