Los contenidos de las páginas web suelen ser el mayor aliado para atraer a nuestros usuarios, pero, si lo descuidamos, puede ser nuestro peor enemigo. Y deberíamos preocuparnos por eso, ya que no queremos más enemigos de los que ya tenemos, siendo este un problema muy fácil de evitar.
¿Nuestro enemigo?
Lamentablemente sí, puede ser nuestro enemigo; resulta que hoy en día todas las páginas web utilizan algo en común para mostrar descripciones, productos, servicios, resultados, decoraciones en la web etc., y esto en común, son las imágenes, por lo tanto, tratemos de imaginar una página web exitosa con cero imágenes. ¿Difícil verdad?, necesitamos imágenes para tener ese toque mágico.
Desafortunadamente las imágenes serán el contenido más pesado en nuestra Web, aproximadamente un 50% a 60% de nuestro total.
Así que te mostraré una manera de mantener el contenido como un aliado para nuestro sitio Web, y brindar una buena experiencia a nuestros usuarios con Lazy load.
¿Lazy load?
Así es, Lazy load, carga floja, o carga diferida. Como gustes llamarla. Este no es un concepto nuevo, de hecho es un patrón de diseño, el cual nos ayudará a optimizar los tiempos de carga y reducir el peso de nuestra web al ser cargada por un usuario.
El objetivo de Lazy load es aplazar los tiempos de descarga del contenido de nuestra Web y obtener solo los recursos necesarios de acuerdo a la navegación del usuario, es decir, si en nuestra página contamos con un total de 300 imágenes y no utilizamos Lazy load, estas serán descargadas sin ninguna restricción, consumiendo recursos innecesarios, en cambio, si utilizamos esta técnica, solo se obtendrán las imágenes que se encuentren en la vista del usuario y las restantes se obtendrán progresivamente de acuerdo a la navegación del usuario.
¿Cómo utilizarlo?
Existen muchas maneras de utilizarlo, así que podemos optar por las que más nos guste o según nuestra necesidad. Aquí te dejo 3 ejemplos.
1. Lazy load nativo
La primera forma es manera nativa, sin JavaScript, es la más sencilla, para poder utilizar esta opción necesitamos tener tres puntos:
- Una etiqueta
<img src="./images/image.webp" /> - Cada etiqueta img debe tener mínimo una altura predefinida.
- Variedad de imágenes para realizar nuestra prueba.
Así que crearemos un archivo index.html, y dentro de nuestro body colocaremos 2 contenedores de la siguiente manera.
<body>
<div class="container">
<div class="gallery_container" id="gallery"></div>
</div>
</body>
Para obtener imágenes contamos con dos opciones. Llenar nuestro div gallery_container con etiquetas img y diferente src, o consumir un endpoint que nos brinde imágenes. En este post utilizaremos la segunda opción, nuestro body quedará de la siguiente manera.
<body>
<div class="container">
<div class="gallery_container" id="gallery"></div>
</div>
<script>
const getImages = () => {
// Realizamos peticón de 50 imagenes
fetch('https://picsum.photos/v2/list?limit=50')
.then(function(response) {
return response.json()
})
.then((images) => {
// Obtenemos nuestro elemento contenedor de las imagenes
// e inyectamos las imagenes que hemos obtenido
document.getElementById('gallery').innerHTML = images.map(image =>
`<div class='card text-center'>
<img loading='lazy' class='image' src="${image.download_url}" alt='...' >
</div>`
).join('')
});
}
getImages()
</script>
</body>
Y no olvidemos de asignar un tamaño a las imágenes.
Como podemos notar el elemento img que estamos insertando en el script contiene la propiedad loading. Podemos observarlo más claramente a continuación**.**
<div class='card text-center'>
<!-- Justo aqui tenemos la propiedad loading -->
<img loading='lazy' class='image' src="${image.download_url}" alt='...' >
</div>
De esta manera ya tenemos Lazy load nativo, solo con una propiedad, y podemos observar el comportamiento en este ejemplo. Verás que las imágenes se irán descargando conforme al scroll que realicemos.
2. NPM
La segunda forma de utilizar Lazy load es mediante NPM, solo basta con buscar Lazy load y encontraremos un sin fin de librerías que nos ayudarán a utilizar Lazy load.
Una de ella es yall.js (Yet Another Lazy Loader)
3. JavaScript
Claro, si somos una persona que desayuna y respira JavaScript, no será un problema crear nuestro propio Lazy load y si somos bastante buenos, incluso podemos compartir nuestro Lazy load en NPM.
Así que sin más, esto es todo, ¿qué te parece esta técnica para mejorar el rendimiento de tu página? ¿Crees que todas las páginas deban de utilizarlo? ¿Lo utilizarás? Cuéntame en los comentarios. Nos vemos en un próximo artículo 👋.
¿Quieres aprender JavaScript y crear tu propio Lazy load? Toma nuestro curso 💻 ed.team/cursos/javascript, te enseñaremos desde cero y gratis 🎁.
