Si últimamente no has revisado la tasa de rebote de tu página, te invitamos a hacerlo. Si ésta es alta, algo no anda bien en tu tienda. Deberás analizar el comportamiento que está teniendo el público en tu sitio, cuánto tiempo permanecen, en que pagina abandonan. Este análisis te brindará un mapa de lo que está pasando. Recuerda que deberás ver también estos datos, para dispositivos móviles.
La principal causa de la tasa de rebote de un sitio, es que éste no carga lo suficientemente rápido y los usuarios abandonan antes de hacer cualquier acción. La carga de imágenes influye directamente en la velocidad de carga de tu sitio, y este puede ser el problema que estás teniendo, ya que en una tienda online hay una gran presencia de imágenes de productos.
Como en el mundo digital siempre hay una solución o una herramienta para mejorar ciertos aspectos. Para la carga de imágenes existe 🔮 LAZY LOAD, una técnica que nos permite cargar los recursos de una web justo cuando son necesarios.
✅ QUE ES LAZY LOAD
Hace referencia a un patrón de diseño de software, cuyo propósito es demorar la carga de contenido multimedia hasta el momento de su uso, de modo de contribuir en la optimización del diseño de tu sitio web.
Esta herramienta brinda una solución inteligente a esta problemática de la carga de imágenes. Lo que realiza esta herramienta es que las imágenes se descarguen a medida que el usuario las consume, lo que incide directamente en la velocidad de carga del sitio.
Esta optimización brinda una mejor experiencia de usuario, y también te ayudará en el posicionamiento de tu sitio en los buscadores. En la actualidad esto es lo que buscan los buscadores, más allá de lo bueno de tu contenido y producto.
✅ BENEFICIOS DE APLICAR LAZY LOAD EN TU TIENDA
La carga diferida de imagen afecta directamente en el SEO de tu sitio, por ello muchos sitios utilizan este plugin para mejorar la UX de su tienda.
Estos son algunos de los beneficios que trae la implementación de este plugin:
- Los usuarios se conectan más rápidamente a tu sitio y consumen el contenido que realmente desean.
- Optimización guardando data cache.
- Se disminuye la tasa de rebote afianzando el tiempo de permanencia del cliente en la tienda.
- Tus usuarios logran obtener un ahorro de batería, tiempo y recursos porque las imágenes y videos no cargan de inmediato.
✅ CÓMO IMPLEMENTAR LAZY LOAD EN TU TIENDA SHOPIFY
A partir del 2020, atributo loading para imágenes e iframes se hizo parte del estándar HTML. El problema radica en que no todos los navegadores ofrecen soporte, por lo que es necesario utilizar galerías externas en JavaScript para integrar en todos los navegadores. Hay muchas librerías que permiten hacer el Lazy Load, pero la que suelen utilizar la mayoría de temas de Shopify es Lazysizes.
3 VENTAJAS DE LAZY SIZES 👇
- Mejora el SEO.
- Calcula el tamaño que realmente necesitan tus imágenes dependiendo del dispositivo móvil.
- Detecta los recursos visibles y próximos a visualizarse para que la experiencia de usuario sea muy óptima.
💪 CÓMO IMPLEMENTAR LAZYSIZES EN TU TIENDA SHOPIFY
La ventaja que tiene esta librería de carga de imágenes en diferido, es que no necesitas ningún tipo de configuración. Incluir LazySizes en nuestro theme es muy fácil: Lo primero que haremos es descargar la librería y su servicio de imágenes bajo demanda e incluirlas en nuestra cabecera entre las etiquetas <head></head>.
*Img. aportada por Shopify.
Qué podemos hacer para que las imágenes carguen pronto? como son un elemento bloqueante desde el punto de vista visual, es importante que se inicialice lo antes posible.
Lo que vamos a hacer es añadir class="lazy load" a las imágenes e iframes y los atributos data-src y/o data-srcset. También, de manera opcional, añadiremos un src con una imagen de una calidad baja o un splash.
*Img. aportada por Shopify.
Por otro lado, vamos a utilizar el servicio de creación de urls dinámicas que nos ofrece RIAS, para lo cual tenemos la propiedad data-widths. Éste es un array de valores que crea de forma dinámica las diferentes imágenes que irán en el srcset de la imagen.
¿Cómo lo hace? Sustituye los valores que hay en la cadena {width} por los valores de nuestro array. Luego, gracias al data-sizes="auto" se elegirá la imagen más óptima a utilizar en base a: Tamaño de la pantalla, La imagen, Resolución.
El resultado será similar a lo siguiente:
*Img. aportada por Shopify.
Tener que escribir para cada imagen todos estos parámetros puede ser muy tedioso y hay una gran probabilidad que cometamos un error humano. ¡Pero tenemos la solución! Te recomendamos crear un snippet reutilizable, que nos ayude a utilizarlo de manera sencilla.
El resultado será el siguiente:
*Img. aportada por Shopify.
Siempre que queramos utilizarlo, usaremos la inclusión del código mediante la etiqueta render, pasando la url de la imagen. Y si queremos de manera opcional clases o cualquier otro elemento para enriquecer nuestro snippet a lo largo del tiempo:
*Img. aportada por Shopify.
Es importante que, dentro de tu tema SHOPIFY, implementemos estos consejos referentes a las imágenes. Con Lazy Loading sólo se descargará el contenido visible en el área de la pantalla en que se encuentra el usuario. Cuando el usuario llegue a la zona que le interesa, el contenido por defecto se reemplazará por el real. Con ello, la UX de tu página mejorará de manera significativa.
✍️ Recuerda que podemos ayudarte con esta implementación.