Aunque las velocidades globales de internet han mejorado significativamente—alcanzando un promedio de 90,67 Mbps en banda ancha fija y 44,67 Mbps en conexiones móviles a principios de 2024—muchos clientes siguen experimentando conexiones más lentas según su ubicación y las condiciones de la red. Por eso, es fundamental asegurarte de que tus páginas de producto carguen lo más rápido posible para todos los clientes.
Una solución sencilla es añadir lazy load a tus páginas. El lazy loading es una estrategia para identificar recursos como no bloqueantes y cargarlos solo cuando se necesitan, acortando la ruta crítica de renderizado y reduciendo los tiempos de carga de la página. Se usa principalmente para imágenes en un sitio web.
Beneficios del Lazy Loading
Por un lado, mejora el rendimiento y la velocidad. El lazy loading impacta directamente en el rendimiento de la tienda al reducir los tiempos de carga iniciales, mejorar métricas de Core Web Vitals como Largest Contentful Paint (LCP) y minimizar el uso de recursos del servidor—métricas clave que Google tiene en cuenta al posicionar sitios web. Por otro lado, hace que tus clientes perciban que los productos cargan más rápido, en un fenómeno llamado rendimiento percibido.
Puedes añadir lazy load a tu tienda Shopify de las siguientes maneras.
Usa Lazy Loading nativo de HTML
El lazy loading nativo ya es compatible con los principales navegadores, como Chrome, Firefox, Safari y Edge. El enfoque más simple y moderno es añadir el atributo loading=”lazy” directamente a tus etiquetas de imagen. Así es como se hace:
- Ve al panel de administración de Shopify y selecciona Online Store.
- Selecciona Themes y elige el tema que quieres editar.
- Selecciona Actions y haz clic en Edit Code.
- Busca etiquetas de imagen en los archivos de tus plantillas (como plantillas de producto, páginas de colección, etc.).
- Añade el atributo loading=”lazy” a las etiquetas de imagen para las imágenes que aparecen por debajo del primer pliegue.
<img src="image.jpg" loading="lazy" alt="Product image" />Importante: No apliques lazy load a imágenes que probablemente estén dentro del viewport cuando la página carga, especialmente las imágenes LCP (Largest Contentful Paint), ya que esto puede afectar negativamente al rendimiento. Para imágenes por encima del primer pliegue, usa loading=”eager” en su lugar.
Añade un script de lazy loading (método heredado)
Si necesitas compatibilidad con navegadores antiguos o quieres usar un enfoque con una librería JavaScript, todavía puedes utilizar este método. Así es como se hace:
- Ve al panel de administración de Shopify y selecciona Online Store.
- Selecciona Themes y elige el tema que quieres editar.
- Selecciona Actions y haz clic en Edit Code.
- Ve al directorio Layouts .
- Haz clic en themes.liquid.
- Luego, pega el siguiente código antes de la etiqueta </head> en el editor de código online.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}Guarda los cambios. Ahora, las imágenes con la clase lazyload se cargarán de forma diferida.
Añade lazy loading a imágenes concretas
También puedes especificar qué imágenes deben cargarse de forma diferida si no quieres aplicar la configuración a toda la tienda. Si quieres que una imagen específica use lazy load, aplícale la clase ‘lazyload’. Además, reemplaza el atributo src por data-src.
<!-- Before -->
<img src="image.jpg" />
<!-- After -->
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />Añade lazy loading al documento JS
Si añades este código Javascript al archivo js.liquid o .js en el directorio Assets de tu tienda, se añadirá lazy load al sitio.
$(document).ready(function(){$("img.lazyload").lazyload();});Usar una app
Si no te sientes cómodo editando archivos del tema y necesitas una solución rápida, puedes echar un vistazo a apps que ofrecen esta funcionalidad.
Loadify
Mejora el rendimiento y la experiencia de usuario de tu tienda Shopify con pantallas de carga personalizables y transiciones de página fluidas con Loadify. Implementa lazy loading y predicción de enlaces para aumentar la velocidad de las páginas retrasando la carga de imágenes y vídeos hasta que sea necesario, a la vez que aprovechas la predicción de enlaces basada en hover.
Tiny SEO Image optimize
TinyIMG ofrece un conjunto completo de herramientas de optimización de velocidad de página y SEO, incluyendo texto ALT de imágenes, JSON-LD, gestión de páginas 404, redirecciones 301, SEO de plugins, rich snippets y un compresor de imágenes para SEO. También incluye descripciones generadas por IA, redimensionado de fotos, compresión de imágenes, lazy loading, creación de sitemaps e integración con ChatGPT AI.
Conclusión
El lazy loading es una técnica eficaz para mejorar el rendimiento y la velocidad de tu tienda Shopify al retrasar la carga de las imágenes hasta que se necesiten. El lazy loading de imágenes es una técnica potente que puede ayudar a mejorar el rendimiento del sitio web al reducir el tiempo de carga inicial de la página y el uso total de ancho de banda, y con la disponibilidad de navegadores modernos y APIs de JavaScript, implementar lazy loading es más fácil que nunca.
Al implementar lazy loading mediante atributos nativos de HTML (el enfoque moderno recomendado) o mediante scripts, puedes garantizar una experiencia de navegación más fluida para los usuarios, especialmente para quienes tienen conexiones a internet más lentas. Esto puede traducirse en una mayor satisfacción del cliente y, potencialmente, en tasas de conversión más altas. Añadir lazy loading a tu tienda Shopify es un proceso sencillo que puede aportar beneficios significativos tanto para el rendimiento de tu tienda como para la experiencia de tus clientes, especialmente a medida que la velocidad de carga sigue siendo un factor crítico para el éxito en e-commerce.
