Orienteed logo verde y blanco
Ir al blog

Cómo acelerar mi sitio web con Lazy Loading

por Adrián Barbeito, July 29, 2020

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.

 

Entradas relacionadas

Suscríbete a nuestra newsletter

¿Quieres saber más sobre comercio electrónico, tendencias, artículos y eventos de la industria eCommerce? ¡Suscríbete ahora a nuestro boletín mensual!

Utilizamos cookies para mejorar su experiencia y nuestros servicios, analizando la navegación en nuestro sitio web. Si continua navegando, consideramos que acepta su uso. Puede obtener más información pulsando aquí:
Política de cookies
Logotipo de Orienteed

Política de Cookies

Una cookie es un fichero que se descarga en su ordenador al acceder a determinadas páginas web. Las cookies permiten a las páginas web, entre otras cosas, almacenar y recuperar información sobre los hábitos de navegación de un usuario o de su equipo y, dependiendo de la información que contengan y de la forma en que utilice su equipo, pueden utilizarse para reconocer al usuario.
Son aquellas cookies imprescindibles para prestar el servicio solicitado, recordar las preferencias de configuración, así como para fines de seguridad y prevención de fraude. La página web no puede funcionar adecuadamente sin estas cookies.
Son aquellas cookies que nos ayudan a analizar el uso que nuestros usuarios hacen de la web y el número de visitantes. Permiten obtener información del número de visitantes, del origen de los mismos, del navegador que utilizan, del tiempo que permanecen en cada página, cuantifican el impacto de los anuncios, etc.

Cómo denegar o revocar el consentimiento de cookies

Las cookies pueden bloquearse o eliminarse mediante la configuración del navegador. En los siguientes enlaces se detalla cómo hacerlo en cada uno de los navegadores más utilizados.