Tutorial HTML: Optimización de la carga de la página (Lazy loading)

La optimización de la carga de la página, también conocida como "Lazy Loading", es una técnica de optimización web que carga los contenidos de la página solo cuando son necesarios. En lugar de cargar todo el contenido de una página de una sola vez, lazy loading solo carga los elementos que son visibles para el usuario, como las imágenes o los vídeos que están en la parte superior de la página. A medida que el usuario se desplaza hacia abajo, se cargan los demás elementos.

Esta técnica mejora la velocidad de carga de la página, reduce el uso de ancho de banda y mejora la experiencia del usuario, especialmente en dispositivos móviles o en conexiones a internet lentas.

En términos de HTML, la implementación de lazy loading puede realizarse utilizando el atributo loading en la etiqueta img y iframe. Este atributo tiene dos posibles valores: lazy y eager.

Cuando se usa loading="lazy", el navegador carga la imagen o el iframe solo cuando están cerca de la vista actual del usuario. Por ejemplo:

<img src="imagen.jpg" loading="lazy" alt="Imagen de prueba" />

Cuando se usa loading="eager", el navegador cargará el recurso inmediatamente, independientemente de donde se encuentre en la página. Este es el comportamiento predeterminado para las imágenes y iframes que no tienen un atributo loading especificado. Por ejemplo:

<img src="imagen.jpg" loading="eager" alt="Imagen de prueba" />

En el caso de imágenes muy grandes o de varios iframes en una sola página, el uso de loading="lazy" puede mejorar significativamente la velocidad de carga de la página.

Cabe mencionar que el atributo loading es una característica relativamente nueva en HTML y está soportada en la mayoría de los navegadores modernos, pero no en todos. Para soportar navegadores más antiguos, se pueden usar bibliotecas JavaScript como lozad.js o Intersection Observer API para implementar lazy loading.

Un ejemplo utilizando la biblioteca lozad.js sería:

<!-- HTML -->
<img data-src="imagen.jpg" class="lozad" alt="Imagen de prueba" />

<!-- JavaScript -->
<script src="lozad.min.js"></script>
<script>
  // Inicializa Lozad
  const observer = lozad();
  observer.observe();
</script>

En este caso, el atributo data-src contiene la ruta de la imagen a cargar y la clase lozad indica que esta imagen se debe cargar de manera diferida.

Un ejemplo con la Intersection Observer API de JavaScript sería:

let observer = new IntersectionObserver((entries, observer) => { 
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      let img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => { 
  observer.observe(img); 
});

En este caso, se está creando un observador que vigila cuando las imágenes con el atributo data-src entran en el viewport del navegador, y entonces se carga la imagen.

Estos son solo algunos ejemplos de cómo implementar la carga diferida en HTML y JavaScript. La técnica exacta puede variar según el proyecto y las necesidades del mismo.