Esta técnica mejora el rendimiento de la página web al cargar imágenes solo cuando están visibles o cerca de la pantalla del usuario.

En el acelerado mundo digital actual, tener un sitio web de alto rendimiento es esencial. Un aspecto crítico de esto es garantizar que sus imágenes se carguen de manera eficiente. Los usuarios esperan una experiencia de navegación fluida y rápida, y este artículo le mostrará cómo lograrlo.

Explorará el concepto de carga diferida de imágenes y aprenderá cómo implementarlo usando HTML y JavaScript con la API de Intersection Observer.

¿Qué es la carga diferida?

La carga diferida retrasa la carga de elementos, como imágenes, hasta que sea necesario. En lugar de cargar todas las imágenes cuando se carga una página, la carga diferida solo carga las imágenes que están actualmente visibles o cerca del área de visualización del usuario. Esta mejora en el rendimiento del sitio web disminuye el tiempo de carga inicial y conserva el ancho de banda.

¿Por qué utilizar la carga diferida?

instagram viewer

Existen varias razones de peso para utilizar la carga diferida de imágenes en su sitio web, como por ejemplo:

  • Carga de página inicial más rápida: La carga diferida evita que todas las imágenes se carguen a la vez, lo que reduce el tiempo de carga inicial de la página. Los usuarios pueden comenzar a interactuar con su sitio antes, lo que genera una mejor experiencia de usuario.
  • Capacidad de respuesta de la página mejorada: Al cargar imágenes a medida que los usuarios se desplazan, el sitio web sigue siendo receptivo y fluido, lo que garantiza un desplazamiento y una navegación fluidos sin la necesidad de esperar a que se cargue todo el contenido.
  • Ahorro de ancho de banda: La carga diferida conserva el ancho de banda, lo que la hace ideal para usuarios móviles y aquellos con conexiones lentas a Internet. Esto puede Reduzca el consumo de datos de su sitio web., beneficiando a los usuarios.
  • Beneficios de SEO: Motores de búsqueda como Google Considere la velocidad de la página como un factor de clasificación. Lata de carga diferida impactar positivamente el rendimiento SEO de su sitio mejorando el tiempo de carga.

Ahora que comprende por qué la carga diferida es beneficiosa, exploremos cómo implementarla.

Implementación de carga diferida: el marcado HTML

Para comenzar, deberá modificar su código HTML para incluir el cargando="perezoso" atributo en tu etiquetas.

<body>
<main>


<section>
<imgsrc="./image-one-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-two-high.jpg"alt=""loading="lazy" />
section>


<section>
<imgsrc="./image-three-high.jpg"alt=""loading="lazy" />
section>


main>


body>

El cargando El atributo se utiliza en HTML para controlar el comportamiento de carga de elementos en una página web. cuando estableces cargando="perezoso" en un etiqueta, le dice al navegador que posponga la carga del recurso hasta que sea necesario.

Por el momento, la página se ve así:

Implementación de carga diferida: la implementación de JavaScript

Para llevar su carga diferida al siguiente nivel, utilice la API de Intersection Observer. Esta API le permite observar cuándo un elemento entra o sale de la ventana gráfica.

La razón detrás del empleo de Intersection Observer para la carga diferida de imágenes es simple: cuando la página se carga, obtiene una imagen de menor calidad.

Luego, cuando esta imagen se vuelve visible en la ventana gráfica, JavaScript la cambia por la versión de mayor calidad. Para poner esto en práctica, modifique su HTML.



 src="./image-one-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-one-high.jpg"
 />
</section>


 src="./image-two-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-two-high.jpg"
 />
</section>




 src="./image-three-low.webp"
 alt=""
 loading="lazy"

 data-src="./image-three-high.jpg"
 />
</section>

Aquí, la fuente de imagen principal es la versión de baja calidad y la imagen de alta calidad es la fuente secundaria. La página entonces se ve así:

A continuación, seleccione todas las imágenes que desea cargar de forma diferida:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Después de eso, cree un IntersecciónObservador objeto.

const observer = new IntersectionObserver();

Luego pase las entradas (una serie de IntersecciónObservadorEntrada objetos, que representan los elementos que se observan y su intersección con la ventana gráfica) y el observador (el IntersecciónObservador instancia misma).

const observer = new IntersectionObserver((lazyImages, observer) => { });

A continuación, verifique las intersecciones y cambie la imagen de baja calidad por una de alta calidad cada vez que ese elemento se cruce.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
 lazyImage.src = lazyImage.dataset.src; // Swap the image source
 observer.unobserve(lazyImage); // Stop observing this image
 }
 });
});

Finalmente, inicialice la observación para cada elemento.

// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Y con eso, implementó la carga diferida con JavaScript.

Consideraciones de carga diferida

Al integrar la carga diferida, resulta vital considerar los siguientes aspectos:

  • Accesibilidad: Para garantizar la accesibilidad, proporcione texto alternativo para las imágenes con el alternativo atributo. Esta información sirve como punto de confianza para los lectores de pantalla.
  • Compatibilidad del navegador: Antes de implementar la carga diferida, confirme su compatibilidad con diferentes navegadores. No todos los navegadores ofrecen soporte para esta función. En ciertos casos, la inclusión de un polyfill puede resultar imperativa, especialmente para navegadores más antiguos. una herramienta como Puedo usar es un recurso valioso para evaluar la compatibilidad del navegador.
  • Pruebas: Las pruebas exhaustivas de la implementación de la carga diferida en un espectro de dispositivos y dimensiones de pantalla adquieren una importancia primordial.

Mejora de la velocidad del sitio web y la experiencia del usuario

Cuando incorpora la carga diferida de imágenes en su sitio web, puede acelerar su sitio y mejorar la experiencia del usuario. Lo que los usuarios quieren es un tiempo de carga más rápido y experiencias de navegación más fluidas, y esta técnica ofrece lo mismo.

Además, disfrutará de un mejor SEO y ahorrará en el uso de ancho de banda. Entonces, ¿por qué esperar? Comience a optimizar su sitio web hoy con este método sencillo pero poderoso.