Carga Perezosa

Introducción

La carga perezosa es un patrón de diseño y técnica de optimización en la que el sistema carga recursos solo cuando son necesarios. En lugar de cargar todo cuando la página se carga por primera vez, la carga perezosa mejora los tiempos y el rendimiento de carga de la página. Esto es particularmente útil para páginas con mucho contenido por debajo del pliegue que los usuarios podrían no desplazarse para ver.

La carga ansiosa recupera y carga todos los recursos inmediatamente cuando la página se carga, independientemente de la necesidad inmediata. Esto puede ralentizar la carga inicial de la página. La carga perezosa acelera la página al cargar recursos no críticos solo cuando el navegador los necesita.

Los desarrolladores a menudo usan carga perezosa para imágenes. También puede aplicarse a archivos JavaScript, CSS, o cualquier contenido no esencial para la vista inicial de la página. Este método conserva los recursos de red y computación, asegurando una experiencia de usuario más rápida al cargar estos recursos solo cuando se necesitan.

Beneficios de la Carga Perezosa

Las principales ventajas de implementar la carga perezosa son:

Tiempos de carga inicial más rápidos: La carga perezosa reduce el tiempo de carga inicial de la página al recuperar y renderizar solo los recursos inmediatamente visibles para el usuario. Esta optimización ayuda a mejorar la experiencia del usuario y el rendimiento. Esto proporciona un renderizado inicial más rápido de la página.
Reducción del uso de ancho de banda y recursos: La carga perezosa descarga recursos solo si y cuando el usuario los necesita. Si un usuario nunca se desplaza hacia abajo para ver una imagen cargada perezosamente, esa imagen nunca se recupera, ahorrando ancho de banda tanto para el usuario como para el servidor.
Mejora del rendimiento: Al reducir la cantidad de datos que deben cargarse inicialmente, la carga perezosa pone menos presión en la conexión de red, el procesador y la memoria del usuario. Esto conduce a un mejor rendimiento y capacidad de respuesta en general, especialmente en redes más lentas o dispositivos de gama baja.
Mejor experiencia de usuario: Tiempos de carga más rápidos y mejor rendimiento se traducen en una experiencia de usuario más positiva y atractiva. Los usuarios pueden comenzar a interactuar con la página más pronto y experimentar menos retrasos.

Sin embargo, la carga perezosa no siempre es la mejor aproximación para cada situación. Para recursos que son críticos para la página o que se encuentran por encima del pliegue, la carga ansiosa puede ser preferible para asegurar que estén disponibles inmediatamente. La carga perezosa puede no ser necesaria para recursos pequeños o ligeros donde la sobrecarga de implementar la carga perezosa supera los beneficios.

Carga Ansiosa vs. Carga Perezosa

Al decidir entre carga perezosa y carga ansiosa, considere lo siguiente:

Visibilidad: Si un recurso es inmediatamente visible para el usuario por encima del pliegue, la carga ansiosa podría ser la mejor opción para evitar cualquier retraso en la carga de ese contenido. La carga perezosa es más adecuada para recursos que aparecen por debajo del pliegue o requieren alguna interacción del usuario para ser mostrados.
Importancia: Los recursos críticos de los que depende la página deben tener una carga ansiosa para evitar demoras. Los recursos secundarios u opcionales son buenos candidatos para la carga perezosa.
Tamaño: La carga perezosa es más beneficiosa para recursos grandes o pesados que toman un tiempo significativo para cargar. Los recursos más pequeños pueden no valer la pena la sobrecarga de la carga perezosa.
Comportamiento del Usuario: Considere cómo interactúan típicamente los usuarios con la página. Si los análisis muestran que la mayoría de los usuarios se desplazan hacia abajo y ven contenido por debajo del pliegue, la carga ansiosa de parte de ese contenido podría proporcionar una mejor experiencia. Si pocos usuarios se desplazan, la carga perezosa minimizará las descargas innecesarias.
Velocidad de Red: En redes más lentas, la carga perezosa proporciona mayores beneficios de rendimiento al reducir el tamaño de descarga inicial. En redes más rápidas, la carga ansiosa puede ser menos perjudicial para la experiencia del usuario.

El equilibrio adecuado entre carga ansiosa y carga perezosa dependerá de las características y requisitos específicos de cada página o aplicación. Las pruebas de rendimiento y la monitorización de métricas de usuarios reales pueden ayudar a optimizar el enfoque.

Métodos de Implementación de la Carga Perezosa

Hay varias formas de implementar la carga perezosa en páginas web:

JavaScript: Usando JavaScript, se puede detectar cuando un elemento entra en el campo de visión y cargar dinámicamente su recurso asociado. Librerías como lazysizes o lazyload facilitan este proceso. Ejemplo:

<img data-src="image.jpg" class="lazyload">

lazyLoadInstance = new LazyLoad({
  elements_selector: ".lazyload"
});

API de Intersección del Observador: La API de Intersección del Observador proporciona una forma nativa de detectar cuando un elemento entra en el campo de visión y realizar una acción como iniciar una carga. Ejemplo:

let observer = new IntersectionObserver(callback, options);
observer.observe(element);

Atributos HTML: Los navegadores modernos soportan imágenes perezosas de forma nativa usando el atributo loading=”lazy”. Ejemplo:

<img src="image.jpg" loading="lazy" alt="...">

CSS: Las técnicas CSS pueden usarse para crear esqueletos de marcador de posición que se muestren mientras se carga el contenido. Ejemplo:

css

.lazy-loaded {
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}

Server Push de HTTP/2: HTTP/2 proporciona un mecanismo de push del servidor donde el servidor puede enviar proactivamente recursos al cliente en anticipación de solicitudes futuras. Aunque no es estrictamente perezoso, esto puede usarse para lograr un efecto similar.

La elección del método de carga perezosa depende de los requisitos específicos, las consideraciones de soporte del navegador y la arquitectura general de la aplicación.

Carga Perezosa de Imágenes

Las imágenes son candidatas principales para la carga perezosa ya que a menudo constituyen una parte significativa del peso de una página. Hay algunas formas de cargar imágenes perezosamente:

Atributo de carga nativo: La forma más directa es usar el atributo nativo de carga del navegador. Configurar loading=”lazy” en la etiqueta <img>:

<img src="image.jpg" alt="..." loading="lazy">

JavaScript: Usar JavaScript para verificar si la imagen está en el campo de visión y configurar el atributo src dinámicamente:

<img data-src="image.jpg" alt="...">
<script>
  const images = document.querySelectorAll('img[data-src]');
  const loadImage = (image) => {
    image.setAttribute('src', image.getAttribute('data-src'));
    image.onload = () => { image.removeAttribute('data-src'); };
  };
  const callback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadImage(entry.target);
        observer.unobserve(entry.target);
      }
    });
  };
  const options = { rootMargin: '0px 0px 500px 0px' };
  const observer = new IntersectionObserver(callback, options);
  images.forEach(image => observer.observe(image));
</script>

CSS: Usar CSS para crear un efecto de marcador de posición mientras se carga la imagen:

html

<div class="lazy-image">
  <img data-src="image.jpg" alt="...">
</div>

css

.lazy-image {
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
}

Recuerde proporcionar un texto alternativo adecuado para la accesibilidad y manejar los casos de error de manera adecuada.

Conclusión

La carga perezosa es una técnica valiosa para mejorar el rendimiento y la experiencia del usuario de las páginas web al diferir la carga de recursos no críticos hasta que sean necesarios. Puede reducir significativamente los tiempos de carga iniciales, ahorrar ancho de banda y mejorar el rendimiento en general.

Al decidir si usar la carga perezosa, considere factores como la visibilidad e importancia del recurso, su tamaño, el comportamiento típico del usuario y las condiciones de la red. Encuentre un equilibrio entre carga perezosa y ansiosa según las necesidades específicas de sus páginas.

La carga perezosa puede implementarse usando varios métodos como JavaScript, la API de Intersección del Observador, atributos HTML nativos, técnicas de CSS u optimizaciones del lado del servidor como el push de HTTP/2.

Las imágenes se cargan comúnmente de forma perezosa, pero la técnica puede aplicarse a cualquier tipo de contenido o recurso para optimizar la carga y el rendimiento.

Al reducir la transferencia de datos y optimizar la carga de recursos, la carga perezosa no solo mejora el rendimiento, sino que también puede ayudar a mitigar posibles fugas de datos o incidentes que pueden ocurrir debido a la transferencia de más datos de los necesarios.