Cómo acelerar mi sitio web con Lazy Loading
por Adrián Barbeito, 7/29/2020, 2:03:43 PM
Webs de ecommerce lentas es una mala noticia para el negocio, sea B2B or B2C.
A continuación algunas de las razones clave:
1. Pérdida de tráfico en el sitio web, lo que lleva a pérdidas en ventas e ingresos.
2. Una profunda caída en el ranking de SEO del sitio web.
3. Pobre experiencia del cliente, lo que resulta en un menor compromiso.
4. Aumento de la tasa de rebote del usuario y una menor tasa de conversiones.
5. Aumento de las posibilidades de que el sitio web se caiga o que se incluya en la lista negra de Google.
Cómo conseguir que tu web sea más rápida
Tenemos dos técnicas fáciles de aplicar que usamos en Orienteed como estándar. Estas técnicas pueden cambiar dramáticamente el tiempo de carga.
¿La tienda online tiene muchas imágenes?
Tamaño de la imagen
Es muy común que a veces las imágenes utilizadas sean excesivamente grandes. Ninguna imagen debe ser mayor de 500KB. Si se encuentran imágenes de mayor tamaño en una tienda, se debe considerar su reducción.
¿Sigue siendo lento?
Lazy Loading
Lazy Loading es un patrón de diseño comúnmente usado en la programación de computadoras para diferir la inicialización de un objeto hasta el punto en que se necesita.
Beneficios
- Reduce el tiempo de carga inicial.
- Conservación del ancho de banda. Hoy en día el tráfico de móviles es de alrededor del 52%, y es muy importante ahorrar todo el ancho de banda posible.
- Conservación de los recursos del sistema.
Cómo funciona Lazy Loading?
Abajo podrás ver las diferencias entre el llamado traditional load (eager) y lazy load.
Con Lazy Load, sólo se cargan las imágenes disponibles en el visor (la parte visible en ese momento). Una vez que el cliente se desplaza y las imágenes aparecen en el visor, comenzarán a cargarse. En una carga ansiosa se cargan todas las imágenes a la vez. No importa si está en el visor o no.
Hay diferentes opciones para implementar el Lazy Loading en las imágenes y videos usando Javascript:
API del Observador de Intersección
Yall.js
Lozad.js
Introducción de Yall.js
Una forma rápida de implementar el Lazy Loading es usar una biblioteca como Yall.js. Ejemplo:
<body>
…
<img class=”lazy” src=”placeholder.jpg” data-src=”image-to-lazy-load.jpg” alt=”Alternative text to describe image.”>
…
<script>
document.addEventListener(“DOMContentLoaded”, yall);
</script>
…
</body>
Se mostrará la imagen "placeholder.jpg" y una vez que la imagen esté disponible en el viewport, se mostrará la "imagen-a-carga-de-lazado.jpg". El "placeholder.jpg" debe ser pequeño e igual para todas las imágenes. Un buen enfoque podría ser una imagen transparente de 1×1 píxel.
Pasos a seguir:
- Incluir la dependencia.
- Añadir un oyente cuando se cargue el DOM para habilitar la funcionalidad de Yall.
- Añadir la clase "lazy" a todas las imágenes.
- Cambiar la ruta de la imagen de src a data-src.
- Crear la imagen de marcador de posición.
Lazy Loading es un patrón de diseño, por lo que hay otros enfoques que se pueden aplicar, como la paginación. Muy útil en páginas como la lista de productos. Por ejemplo, iniciar la página con 15 elementos por ejemplo e incluir un botón para recuperar más elementos en la parte inferior, o dinámicamente en el desplazamiento.
