Aplica Lazy Loading a la web de tu despacho
-(1).png)
Profundizando en Lazy Loading y ¿Cómo aplicarlo?
Ayer estuvimos hablando de varias formas de hacer que tu web sea más rápida, hoy me preguntaba un amigo ¿Qué es eso del Lazy Loading? Es un poco como las mañanas de tú pagina web, suena el despertador te despiertas, y vas haciendo tus rutinas. Esto es lo mismo alguien entra en tu web y comienza a cargar, primero los elementos visibles que tienen un impacto en la primera visualización del usuario, y luego el resto.
Beneficios del Lazy Loading:
- Mejora en la Velocidad de Carga: Reduce el tiempo inicial de carga de la página, ya que el navegador solo descarga el contenido necesario.
- Reducción del Uso de Datos: Esencial para usuarios con conexiones lentas o con límites de datos, ya que solo se descargan los recursos que se van a visualizar.
- Aumento del Rendimiento del Servidor: Al reducir el número de solicitudes simultáneas, se disminuye la carga en el servidor.
Bien el "lazy loading" es una técnica que permite cargar imágenes, iframes, y otros elementos multimedia de una página web solo cuando estos están a punto de ser visibles en la ventana del navegador. Esto puede mejorar significativamente los tiempos de carga y la eficiencia de la página, especialmente en páginas con mucho contenido multimedia.
A continuación, te ofrezco una guía básica para implementar técnicas de "lazy loading" en tu sitio web:
1. Lazy Loading con HTML nativo
A partir de la versión 77, Chrome y otros navegadores basados en Chromium admiten el atributo loading en las etiquetas de imagen y . Puedes añadir este atributo para implementar el lazy loading sin necesidad de JavaScript.
'<'img src="imagen.jpg" loading="lazy" alt="Descripción"'>'
Nota: elimina los ‘ que hay en < y > los he tenido que incluir para que no interprete el código como código.
2. Bibliotecas JavaScript:
Si quieres una solución que funcione en una variedad más amplia de navegadores o que ofrezca un control más detallado, puedes usar JavaScript o bibliotecas populares como jQuery. A continuación te detallamos las más populares:
2.1 Lozad.js
Descripción: Es una biblioteca ligera que utiliza la API ‘IntersectionObserver’ para implementar lazy loading, lo que significa que es eficiente y no depende del monitoreo del desplazamiento del usuario
Características:
- Sin dependencias (no requiere jQuery).
- Peso muy ligero (~1kb minificado y gzip).
- Alto rendimiento gracias a ‘IntersectionObserver’.
Uso básico:
import lozad from 'lozad';
const observer = lozad();
observer.observe();
Sitio web: https://apoorv.pro/lozad.js/
2.2. LazySizes
Descripción: Es una de las bibliotecas de lazy loading más populares y robustas. Es extensible y tiene muchos plugins para casos de uso avanzados.
Características:
- Soporte para imágenes responsive.
- Plugins para diferentes escenarios, como carga progresiva o efectos de desenfoque.
- No requiere de un marcado especial, lo que lo hace fácil de integrar.
Uso básico:
HTML
'<'img src="imagen.jpg" loading="lazy" alt="Descripción"'>'JAVASCRIPT
import 'lazysizes';
Nota: elimina los ‘ que hay en < y > los he tenido que incluir para que no interprete el código como código.
¡Ojo! última actualización en GitHub de Mayo 2021.
Sitio web: https://github.com/aFarkas/lazysizes
2.3. Blazy
Descripción: Otra biblioteca popular y ligera para lazy loading de imágenes.
Características:
- Compatible con imágenes de fondo.
- Trabaja con imágenes retina.
- Carga de imágenes dentro de iframes.
- Soporte para imágenes responsive.
Uso básico:
var bLazy = new Blazy();
¡Ojo! lleva bastante tiempo sin actualizar última versión 1.8.2. de 2016
Sitio web: https://dinbror.dk/blazy/
2.4. Yall.js (Yet Another Lazy loader)
Descripción: Utiliza ‘IntersectionObserver’ para lazy loading y tiene un polyfill incorporado para navegadores que no lo soportan.
Características:
- Soporta la Lazy Load de imágenes, imágenes de fondo, videos e iframes.
- Puede trabajar con el elemento ‘’ y ‘srcset’ para imágenes responsive.
Uso básico:
document.addEventListener("DOMContentLoaded", function() {
yall({
observeChanges: true
});
});
Sitio web: https://github.com/malchata/yall.js
Ten en cuenta que elegir una biblioteca de lazy loading depende de tus necesidades específicas, la complejidad de tu sitio web y tus preferencias personales. ¡Explora y elige la que mejor se adapte a tu proyecto!
3. Utilizar un plugin si estás usando CMS
Para WordPress: Existen varios plugins disponibles que ofrecen la funcionalidad de lazy loading con un par de clics. Plugins como "a3 Lazy Load" o "Smush" son populares y fáciles de usar.
Otros CMS: Muchos sistemas de gestión de contenidos tienen plugins o módulos disponibles que permiten implementar el lazy loading. Realiza una búsqueda específica para tu CMS.
4. A tener en cuenta
En resumen, el "lazy loading" es una excelente herramienta para mejorar la velocidad de carga de tu sitio web, pero es esencial implementarlo correctamente y testearlo en diferentes escenarios para asegurar una experiencia de usuario óptima. Para terminar unas cuantas cosas que debes tener en cuenta cuando implementes este método.
- Asegúrate de testear la implementación en diferentes navegadores y dispositivos para asegurarte de que todo funcione correctamente
- Lazy loading puede mejorar los tiempos de carga, pero no olvides optimizar tus imágenes y otros elementos multimedia para que su tamaño sea lo más reducido posible sin perder calidad. Para ello puedes apoyarte en nuestras herramientas de imagen.
- Asegúrate de que las imágenes que están siendo cargadas con lazy load estén bien optimizadas desde el punto de vista SEO. Esto incluye atributos ‘alt’ descriptivos, tamaños adecuados y formatos de archivo optimizados.
- Es fundamental no aplicar lazy loading a imágenes o contenido crítico que debe ser visible de inmediato cuando se carga una página. Esto puede afectar la percepción del usuario sobre la velocidad del sitio.
Espero que esto te haya sido de ayuda, y sea un punto de partida en tus esfuerzos para aplicar correctamente Lazy Loading en la web de tu despacho profesional.
