Lazy Loading: qué es y cómo afecta a tu eCommerce

Consejos para tu negocio

Qué es lazy load

El lazy loading o carga diferida es una forma de diseñar una web por la cual los distintos elementos que componen su contenido van cargando de forma gradual mientras el usuario va accediendo a ellos. De esta forma se evita cargar todo el contenido al principio y reducir el tiempo de carga, proporcionando un acceso más rápido y fluido a los usuarios y visitantes de la web o tienda online.

Con lazy load, una página solo descargará imágenes y vídeos cuando sea necesario, es decir, cuando el usuario vaya a acceder a ellos.

Cómo funciona el lazy load

Aplicar una técnica de lazy load en una página web, tienda virtual o blog consistirá en retrasar la carga de su contenido para poder ir mostrando (y cargando en ese momento) cuando el cliente acceda a él. El lazy load images funciona siguiendo los siguientes pasos:

1. Cuando un usuario accede al sitio web se construye la página (web DOM) sin cargar imágenes ni precargar los vídeos.
2. El contenido que se presenta en primer lugar al usuario es determinado por un script JavaScript, procediendo a su carga y presentación.
3. La carga del resto de imágenes y vídeos es retrasada hasta que el usuario se desplace por la página, momento en el que son descargados y mostrados.

Cómo funciona lazy load en WordPress

Si se utiliza el CMS WordPress se puede implementar la carga diferida utilizando para ello plugins o complementos específicos. Existe una gran variedad de plugins gratuitos para lazy load en WordPress, siendo algunos de los más populares:

• A3 Lazy Load. Su instalación y configuración es muy sencilla gracias a un menú propio donde se pueden asignar todos los parámetros de la carga diferenciada.
• BJ Lazy Load. Además de retrasar la carga de imágenes, reduce su tamaño para optimizar aún más la velocidad de carga del sitio web.

Cuáles son las ventajas del lazy loading

Los principales beneficios que se obtienen del lazy loading son:

» Disminución de la tasa de rebote

La disminución de la tasa de rebote o bounce rate es una de las ventajas principales de lazy load. Con la carga diferenciada activada en un sitio web, el número de usuarios que la abandonará por problemas de tiempos de carga se reducirá de forma notable.

Los expertos SEO y desarrolladores web siempre buscan la forma de reducir la tasa de rebote para conseguir que los usuarios permanezcan en un sitio web y no lo abandonen a las primeras de cambio. Implementar lazy loading es una buena estrategia para conseguirlo.

» Mejora la experiencia de usuario

La UX (user experience) o experiencia de usuario es uno de los factores más importantes del posicionamiento SEO, ya que Google favorece a las webs y eCommerce que ofrecen una buena experiencia a los usuarios, situándolos en mejores posiciones en sus resultados de búsqueda o SERP.

La velocidad de carga es uno de los principales elementos que influyen en la UX, por lo que implementar lazy loading es una buena forma de conseguir que los usuarios permanezcan en la web al acceder de forma instantánea al contenido y no tener que soportar tiempos de espera por carga de imágenes o vídeos.

» Ayuda a realizar más conversiones

Uno de los principales objetivos de cualquier proyecto web es el de incrementar sus conversiones, bien sean suscripciones o ventas. Al disminuir la tasa de rebote, mejorar el posicionamiento SEO y conseguir una navegación más rápida y fluida por la web, utilizar lazy load conseguirá que existan mayores probabilidades de que se produzcan conversiones.

» Ahorro para los usuarios

Hoy en día, el uso de dispositivos móviles para navegar por internet o realizar compras online es muy elevado. Con lazy loading se conseguirá un ahorro de datos y batería para los usuarios que accedan desde este tipo de dispositivos como tablets o smartphone. Las imágenes y vídeos solo se cargarán cuando el usuario acceda a ellas, por lo que no consumirán datos o batería si no se llegan a visualizar.

Cómo implementar un diseño lazy load en tu eCommerce

Las tiendas online se caracterizan por tener un alto contenido en imágenes debido a que son necesarias para que los usuarios puedan conocer el producto y verlo desde todas las perspectivas. El uso de una gran cantidad de imágenes en las fichas de productos es necesaria, pues da mayor información al cliente e incrementa las posibilidades de que realice la compra.

Este alto volumen de imágenes suele suponer un problema grave para muchos eCommerce pues ralentiza la velocidad de carga. Aunque se puede reducir el tamaño de las imágenes o su resolución para controlar el tiempo de carga, no es conveniente disminuir en exceso la calidad de las mismas, pues es necesario que muestren el producto con todo detalle.

Lazy load se presenta como una solución ideal para que las tiendas virtuales puedan mostrar todas las imágenes sin que por ello el tiempo de carga suponga un impedimento. El usuario o cliente solo verá las imágenes a las que tenga acceso visual en cada momento, quedando el resto en espera de carga, lo que afectará de manera directa reduciendo el tiempo de carga del eCommerce.

Ejemplo de lazy load en un eCommerce

Imaginemos la carga en un smartphone de la página de inicio de una tienda online. Entre banners de ofertas y enlaces a distintos productos como más vendidos, ofertas, mejor valorados, entre otros, el número de imágenes que incorpora esa home del eCommerce es muy elevado.

Si se tiene implementado lazy loading, cuando un usuario acceda desde su terminal a la tienda virtual, solo se mostrarán las imágenes que pueda ver en su pantalla, quedando el resto en espera de carga hasta que el usuario haga scroll y continúe avanzando por la misma.

El resultado es una primera carga del eCommerce muy rápida y una navegación mucho más fluida y dinámica para el usuario.

Conseguir que los usuarios permanezcan en una página web o tienda online es una de las principales prioridades hoy en día para los responsables del marketing digital. Los usuarios cada vez son más impacientes y acabarán abandonando un sitio web si tarda más de 3 o 3,5 segundos en cargar (muchos estudios sitúan en torno a esa cifra el incremento de la tasa de rebote).

Aplicando lazy load a un eCommerce o web WordPress se podrá incrementar el tiempo inicial de carga del sitio, dosificando poco a poco la carga de los distintos elementos de la web a medida que el usuario vaya accediendo a ellos mediante scroll.

Información útil

Qué es un banner y para qué sirve
Cómo implementar Bizum en un eCommerce
Product Bundling: qué es, tipos y ventajas
Google Webmaster: qué es y cómo funciona
Importancia y tipos de Call to Action
¿Es tu tienda online responsive?