¿Qué es el Lazy Load y cómo beneficia a la carga de imágenes en tu ecommerce?

La carga lenta de imágenes ( Lazy Load ) que no están en la ventana gráfica mejora el rendimiento de la carga inicial de la página y la experiencia del usuario. Esta es una guía en profundidad sobre todo lo relacionado con la carga perezosa de imágenes, incluidos los métodos nativos de carga lenta.

Las imágenes son fundamentales para todos los sitios web y aplicaciones de hoy en día. Ya sean banners de marketing, imágenes de productos o logotipos, es imposible imaginar un sitio web sin imágenes. Por desgracia, las imágenes son de gran tamaño, lo que las convierte en el mayor contribuyente al tamaño de la página.

Según los últimos datos de HTTP Archive, el tamaño medio de las páginas en los ordenadores de sobremesa es de 1511 KB. Las imágenes representan casi 650 KB de ese tamaño, aproximadamente el 45% del tamaño total de la página. Ahora bien, como no podemos prescindir de las imágenes, tenemos que hacer que nuestras páginas web se carguen rápidamente con ellas.

En esta guía, hablare de las imágenes de carga lenta, una técnica que ayuda a mejorar el tiempo de carga de la página y reduce el tamaño de la misma, sin dejar de conservar todas las imágenes de la página.

La velocidad y el tiempo de carga son esenciales para el éxito de tu web ¡y en el caso de los ecommerce resulta un factor decisivo!

Tienen una relación directa con aspectos muy importantes:

a) Conseguir una buena experiencia de usuario. La inmediatez y la fluidez a la hora de navegar por la web resultan claves para aquellos usuarios que quieran adquirir nuestros productos y consumir nuestros contenidos.

b) Posicionamiento web (SEO). La velocidad de carga es un factor importante para el posicionamiento orgánico, disminuye el porcentaje de rebote y aumenta la relevancia que otorgan los buscadores a tu proyecto.

c) Tasa de conversión en nuestra tienda. Atraer nuevos usuarios puede convertirse en todo un reto.

Para las tiendas online Shopify para aplicar el lazy loading ( Carga Lenta ) en las imagenes puedes leer este articulo aquí.

¿Qué es la carga lenta de imágenes?

Las imágenes de carga lenta son un conjunto de técnicas de desarrollo de aplicaciones y web que aplazan la carga de imágenes en una página hasta un momento posterior, cuando esas imágenes son realmente necesarias, en lugar de cargarlas por adelantado. Estas técnicas ayudan a mejorar el rendimiento, a utilizar mejor los recursos del dispositivo y a reducir los costes asociados.

Aquí tienes un vídeo rápido para que lo entiendas mejor:

La palabra «perezoso / lento» en ingles se atribuye a menudo al acto de evitar el trabajo el mayor tiempo posible.

Del mismo modo, la carga lenta aplaza la carga de recursos en la página hasta que se necesiten realmente. En lugar de cargar estos recursos tan pronto como se carga la página, que es lo que ocurre normalmente, la carga de estos recursos se pospone hasta el momento en que el usuario realmente necesita verlos.

La técnica de lazy loading puede aplicarse a casi todos los recursos de una página. Por ejemplo, en una aplicación de una sola página, si un archivo JS no se necesita hasta más tarde, es mejor no cargarlo inicialmente. Si una imagen no es necesaria de entrada, cárguela más tarde, cuando sea necesario verla.

¿Por qué optar por las imágenes de carga lenta?

Lazy Loading aplaza la carga de una imagen que no se necesita en la página inmediatamente. Una imagen que no es visible para el usuario cuando se carga la página, se carga más tarde, cuando el usuario se desplaza y la imagen se hace realmente visible. Si el usuario nunca se desplaza, una imagen que no es visible para el usuario nunca se carga.

Tiene dos ventajas principales.

  1. Mejora del rendimiento

Este es el más importante para usted como administrador del sitio web: mejor rendimiento y tiempo de carga.

Con la carga lenta, se reduce el número de imágenes que deben cargarse inicialmente en la página. Menos solicitudes de recursos significan menos bytes para descargar y menos competencia por el limitado ancho de banda de la red disponible para el usuario. Esto asegura que el dispositivo es capaz de descargar y procesar los recursos restantes mucho más rápido. Por lo tanto, la página se puede utilizar mucho antes en comparación con una sin lazy loading.

2. Reducción de costes

El segundo beneficio para usted es en términos de costes de entrega. La entrega de imágenes, o de cualquier otro bien, suele cobrarse en función del número de bytes transferidos.

Como se ha mencionado anteriormente, con la carga lenta, si la imagen no es visible, nunca se carga. Así, se reduce el total de bytes entregados en la página, especialmente para los usuarios que rebotan en la página o que interactúan sólo con la parte superior de la misma. Esta reducción de los bytes transferidos desde su red de entrega reduce los costes de entrega. Esto se hará más evidente cuando exploremos más a fondo la carga lenta.

¿Qué imágenes se pueden cargar de forma lenta?

La idea básica de la carga lenta es simple: aplazar la carga de cualquier cosa que no se necesite en ese momento. En el caso de las imágenes, esto se traduce en que cualquier imagen que no sea visible para el usuario puede cargarse de forma diferida.

A medida que el usuario se desplaza por la página, los marcadores de posición de las imágenes comienzan a entrar en la ventana gráfica (parte visible de la página web). Activamos la carga de estas imágenes cuando se hacen visibles.

Puede averiguar qué imágenes son candidatas a la carga lenta y cuántos bytes puede ahorrar en la carga inicial de la página utilizando la herramienta de auditoría de Google Lighthouse. La auditoría realizada por esta herramienta tiene una sección dedicada a las imágenes fuera de pantalla. También puedes utilizar el analizador de sitios web de ImageKit para identificar si tu sitio web utiliza lazy loading o no, además de otras optimizaciones críticas relacionadas con las imágenes en tu página.

La carga lenta es fundamental no sólo para un buen rendimiento, sino también para ofrecer una buena experiencia al usuario.

Técnicas de carga lenta de imágenes

Las imágenes de una página web pueden cargarse de dos maneras: mediante la etiqueta o mediante la propiedad CSS background. Veamos primero la más común de las dos, la etiqueta , y luego pasemos a las imágenes de fondo CSS.

El concepto general de carga perezosa de imágenes en la etiqueta

La carga perezosa de imágenes puede dividirse en dos pasos:

El primer paso es evitar la carga de la imagen por adelantado. Para las imágenes cargadas con la etiqueta <img> , el navegador utiliza el atributo src de la etiqueta para activar la carga de la imagen. Independientemente de que sea la primera o la milésima imagen en su HTML y bien fuera de la pantalla, si el navegador obtiene el atributo src, desencadenaría la carga de la imagen.

Por lo tanto, para hacer un lazyload de estas imágenes, hay que poner la URL de la imagen en un atributo distinto de src. Digamos que especificamos la URL de la imagen en el atributo data-src de la etiqueta de la imagen. Ahora que src está vacío, el navegador no activa la carga de la imagen

<img data-src="https://mihaidobre.es/demo/imagen-defecto.jpg" />

Ahora que hemos detenido la carga inicial, tenemos que decirle al navegador cuándo debe cargar la imagen.

Para ello, comprobamos que en cuanto la imagen (es decir, su marcador de posición) entra en la ventana gráfica, activamos la carga.

Para comprobar cuándo una imagen entra en la ventana gráfica, hay dos maneras:

Activar la carga de imágenes mediante eventos de Javascript

En esta técnica, utilizamos escuchas de eventos en los eventos scroll, resize y orientationChange del navegador. El evento scroll es uno obvio para comprobar cuando el usuario se desplaza por la página. Los eventos resize y orientationChange son igualmente importantes para el lazy loading. El evento resize ocurre cuando el tamaño de la ventana del navegador cambia. El evento orientationChange se dispara cuando el dispositivo se gira del modo horizontal al vertical, o viceversa. En estos casos, el número de imágenes que se hacen visibles en la pantalla cambiará. Por lo tanto, necesitaremos disparar una carga para estas imágenes.

Cuando se produce cualquiera de estos eventos, buscamos todas las imágenes de la página que deben cargarse lentamente y que aún no se han cargado. A partir de estas imágenes, comprobamos cuáles están ahora en la ventana gráfica. Esto se hace utilizando el desplazamiento superior de la imagen, el tope de desplazamiento del documento actual y la altura de la ventana. Si ha entrado en la ventana gráfica, recogemos la URL del atributo data-src y la ponemos en el atributo src. Esto desencadena la carga de la imagen. También quitamos la clase lazy que identifica las imágenes que se cargarán perezosamente para los eventos que se disparen más tarde. Una vez cargadas todas las imágenes, eliminamos los escuchadores de eventos.

Cuando nos desplazamos, el evento de desplazamiento se dispara rápidamente varias veces. Por lo tanto, para mejorar el rendimiento, añadimos un pequeño tiempo de espera que regula la ejecución de la función de carga lenta.

Uso de la API del Observador de Intersección para activar la carga de imágenes

La API de observadores de intersección es una API relativamente nueva en los navegadores. Hace que sea muy sencillo detectar cuando un elemento entra en la ventana gráfica, y realizar una acción cuando lo hace. En el método anterior, teníamos que enlazar eventos, tener en cuenta el rendimiento e implementar una forma de calcular si el elemento estaba en la ventana gráfica o no. La API del observador de intersección hace que esto sea realmente sencillo, ayuda a evitar los cálculos y ofrece un gran rendimiento.

Un ejemplo de uso de la API del Observador de Intersección para la carga lenta de imágenes:

Adjuntamos el observador en todas las imágenes que van a ser cargadas perezosamente. Una vez que la API detecta que el elemento ha entrado en la ventana gráfica, utilizando la propiedad isIntersecting, recogemos la URL del atributo data-src y la movemos al atributo src para que el navegador active la carga de la imagen. Una vez hecho esto, eliminamos la clase lazy de la imagen, y también eliminamos el observador de esa imagen.

Si se compara el tiempo que tarda en cargarse una imagen en ambos métodos, escuchadores de eventos y observador de intersección, se verá que utilizando la API del observador de intersección, la carga de la imagen se activa mucho más rápido y, sin embargo, el sitio no parece lento al desplazarse. En el método que involucra a los escuchadores de eventos, hemos tenido que añadir un tiempo de espera para que sea eficaz, lo que tiene un impacto marginal en la experiencia del usuario, ya que la carga de la imagen se activa con un ligero retraso.

Sin embargo, la compatibilidad con la API de observadores de intersección no está disponible en todos los navegadores. Por lo tanto, tenemos que recurrir al método de escucha de eventos en los navegadores en los que la API de observadores de intersección no es compatible. Hemos tenido esto en cuenta en el ejemplo anterior.

Carga lenta nativa

En su más reciente actualización, Google ha añadido soporte para la carga lenta nativa en la última versión del navegador Chrome: Chrome 76. Todos los navegadores basados en Chromium, es decir, Chrome, Edge y Safari, y Firefox. Puedes encontrar más detalles sobre la compatibilidad de los navegadores con la carga perezosa nativa en caniuse.com.

Con la entrada en juego de la compatibilidad con el navegador, ahora los desarrolladores sólo tienen que añadir un atributo «loading» al incrustar imágenes, para implementar la carga lenta en sus sitios web.

De hecho, no es necesario ser un desarrollador para conseguirlo. Basta con unos conocimientos básicos de HTML para implementar el atributo «loading», lo que hace que esta función sea accesible para muchos más administradores de sitios web.

Así que el código sería ahora como

<img src="example.jpg" loading="lazy" alt="..." />

<iframe src="example.html" loading="lazy"></iframe>

El atributo de carga admite los siguientes valores:

  • lazy – Aplazar la carga de los activos hasta que llegue a una determinada distancia de la ventana gráfica.
  • ansioso – cargar los activos tan pronto como se cargue la página, independientemente de dónde estén colocados en la página, ya sea por encima o por debajo del pliegue de la página.
  • auto – Este valor activa la carga perezosa por defecto. Básicamente, es lo mismo que no incluir el atributo loading.

Sin embargo, para los navegadores que no soportan el lazy loading nativo, es necesario aplicar las técnicas antes mencionadas para su implementación.

Como se explica más adelante en este blog, para evitar que el contenido circundante vuelva a aparecer cuando se descargue una imagen cargada de forma perezosa, asegúrese de añadir atributos de altura y anchura al elemento <img> o especifique sus valores directamente en un estilo en línea:

<img src="image1.jpg" loading="lazy" alt="…" width="300" height="300"> <img src="image2.jpg" loading="lazy" alt="…" style="height:300px; width:300px;">

Carga lenta de imágenes de fondo CSS

Después de las etiquetas <img/> , las imágenes de fondo son la forma más común de cargar imágenes en una página web. Para las etiquetas <img/> , el navegador tiene un enfoque muy simple – si la URL de la imagen está disponible, vamos a cargar la imagen.

Con las imágenes de fondo CSS no es tan sencillo. Para cargar imágenes de fondo CSS, el navegador necesita construir el árbol DOM (Document Object Model), así como el árbol CSSOM (CSS Object Model), para decidir si el estilo CSS se aplica a un nodo DOM en el documento actual.

Si la regla CSS que especifica la imagen de fondo no se aplica a un elemento del documento, el navegador no carga la imagen de fondo. Si la regla CSS es aplicable a un elemento del documento actual, entonces el navegador carga la imagen.

Esto puede parecer complejo al principio, pero este mismo comportamiento constituye la base de la técnica de carga perezosa de imágenes de fondo. En términos sencillos, engañamos al navegador para que no aplique la propiedad CSS de la imagen de fondo a un elemento hasta que éste entre en la ventana gráfica.

Mejor experiencia de usuario con imágenes de carga lenta

La carga perezosa presenta una gran ventaja de rendimiento. Para una empresa de comercio electrónico que carga cientos de imágenes de productos en una página, la carga perezosa puede proporcionar una mejora significativa en el tiempo de carga inicial de la página, al tiempo que disminuye el consumo de ancho de banda.

Sin embargo, muchas empresas no optan por el lazy loading porque creen que va en contra de ofrecer una gran experiencia de usuario alegando razones como «el marcador de posición inicial es feo», «los tiempos de carga son lentos», etc.

¿Cómo podemos resolver estas preocupaciones en torno a la experiencia del usuario con la carga perezosa de imágenes?

1. Utilizar los marcadores de posición de imagen adecuados

Un marcador de posición es lo que aparece en el contenedor hasta que se carga la imagen real. Normalmente, vemos que los desarrolladores utilizan un marcador de posición de color sólido para las imágenes, o una sola imagen como marcador de posición para todas las imágenes.

Se utiliza un color gris claro sólido para todos nuestros fondos de imagen. Sin embargo, podemos hacerlo mejor para proporcionar una experiencia de usuario más agradable.

a) Marcador de posición de color dominante

En lugar de utilizar un color fijo para el marcador de posición de la imagen, encontramos el color dominante de la imagen original y lo utilizamos como marcador de posición.

Esta técnica se utiliza desde hace tiempo en los resultados de búsqueda de imágenes de Google y en Pinterest.

b) Marcador de posición de imagen de baja calidad (LQIP)

Podemos ampliar la idea anterior de utilizar un marcador de posición de color dominante.

En lugar de usar un solo color, utilizamos una versión borrosa y de muy baja calidad de la imagen original como marcador de posición. No sólo se ve mejor, sino que también da al usuario una idea de lo que puede esperar de la imagen real, al tiempo que da la percepción de que la carga de la imagen está en curso. Esto es genial para mejorar la experiencia de carga percibida.

Esta técnica ha sido utilizada por empresas como Facebook y Medium.com para las imágenes de sus sitios web y aplicaciones.

2. Añadir algo de tiempo de búfer para la carga de imágenes

Cuando hablamos de los diferentes métodos para activar la carga de imágenes, comprobamos el momento en que la imagen entra en la ventana gráfica, es decir, cuando el borde superior del marcador de posición de la imagen coincide con el borde inferior de la ventana gráfica.

El problema

A menudo, los usuarios se desplazan rápidamente por la página, y la imagen necesita algún tiempo para cargarse y aparecer en la pantalla. En este escenario, combinado con el hecho de que el evento de carga de la imagen puede activarse con un retraso debido a la aceleración, a menudo se enfrentará al escenario en el que los marcadores de posición entran en la ventana gráfica, el usuario espera durante unos milisegundos mientras la imagen se carga. Este retraso hace que la experiencia del usuario sea pobre.

Aunque el uso de observadores de intersección para cargar la imagen o el uso de marcadores de posición de imágenes de baja calidad proporciona un mejor rendimiento de carga y una mejor experiencia de usuario, hay otro truco sencillo que puede utilizar para asegurarse de que las imágenes siempre se cargan completamente cuando entran en la ventana gráfica: introducir un margen en el punto de activación de las imágenes.

La solución

En lugar de cargar la imagen justo cuando entran exactamente en la ventana gráfica, cargue las imágenes cuando estén, digamos, a 500px de entrar en la ventana gráfica. Esto proporciona un tiempo adicional, entre el disparador de carga y la entrada real en la ventana gráfica, para que las imágenes se carguen.

Con la API del Observador de Intersección, puede utilizar el parámetro root junto con el parámetro rootMargin (funciona como regla de margen CSS estándar), para aumentar el cuadro delimitador efectivo que se considera para encontrar la «intersección».

Con el método de escucha de eventos, en lugar de comprobar que la diferencia entre el borde de la imagen y el borde de la ventana gráfica sea 0, podemos utilizar un número positivo para añadir algún umbral.

3. Evitar el cambio de contenido con lazy loading

Este es otro punto trivial que, si se resuelve, puede ayudar a mantener una buena experiencia de usuario.

El problema

Cuando no hay imagen, el navegador no conoce las dimensiones del contenido que se va a mostrar en el contenedor que lo encierra. Y si no lo especificamos con CSS, el contenedor no tendrá dimensiones, es decir, 0 x 0 píxeles. Por lo tanto, cuando se cargue la imagen, el navegador cambiará el tamaño del contenedor para adaptarlo a la imagen.
Este cambio repentino en el diseño hace que otros elementos se muevan y se llama desplazamiento de contenido. Como se demuestra en este artículo y vídeo de Smashing Magazine sobre el desplazamiento del contenido, es una experiencia bastante desagradable para el usuario, ya que el contenido se mueve repentinamente cuando se carga la imagen.

La solución

Esto puede evitarse especificando una altura y/o una anchura para el contenedor que lo rodea, de modo que el navegador pueda pintar el contenedor de la imagen con una altura y una anchura conocidas. Más tarde, cuando la imagen se cargue, como el tamaño del contenedor ya está especificado y la imagen encaja perfectamente en él, el resto del contenido alrededor del contenedor se mantiene.

4. No cargue de forma lenta todas las imágenes

Este es otro error que los desarrolladores cometen a menudo: cargar de forma perezosa todas las imágenes de la página. Esto podría reducir la carga inicial de la página, pero también daría lugar a una mala experiencia de usuario, ya que muchas imágenes, incluso las de la parte superior de la página web, no se mostrarán hasta que se ejecute el Javascript.

Estos son algunos principios generales a seguir para identificar qué imágenes deben ser cargadas lentamente.

a) Cualquier imagen que esté presente en la ventana gráfica, o al principio de la página web, no debe cargarse lentamente. Esto se aplica a cualquier imagen de cabecera, banner de marketing, logotipos, etc., ya que el usuario debe verlos tan pronto como se cargue la página.

Además, como los dispositivos móviles y de escritorio tienen tamaños de pantalla diferentes, tendrán un número diferente de imágenes que serán visibles en la pantalla inicialmente. Así que hay que tener en cuenta el tipo de dispositivo para decidir qué recursos se cargan al principio y cuáles se cargan lentamente.

b) Cualquier imagen que esté ligeramente fuera de la ventana gráfica no debería cargarse de forma perezosa. Esto se basa en el punto discutido anteriormente – cargar ligeramente por adelantado. Así que, digamos, cualquier imagen que esté a 500px o a un solo desplazamiento de la parte inferior de la ventana gráfica puede cargarse también por adelantado.

c) Si la página no es demasiado larga, puede ser sólo un desplazamiento o dos, o si hay menos de 5 imágenes fuera de la ventana gráfica, entonces la carga lenta puede evitarse por completo.

No proporcionaría ningún beneficio significativo al usuario final en términos de rendimiento. El JS adicional que se carga en la página para permitir la carga perezosa compensará cualquier beneficio obtenido por la carga perezosa de un número tan pequeño de imágenes.

Dependencia de Javascript de Lazy Loading

Toda la idea de la carga perezosa depende de la disponibilidad de las capacidades de ejecución de Javascript en el navegador del usuario. Aunque la carga perezosa nativa promete eliminar esta dependencia, con una compatibilidad de los navegadores todavía cercana al 70%, si se quiere ofrecer la misma experiencia en todos los navegadores, todavía será necesario utilizar bibliotecas JS.

Si bien la mayoría de sus usuarios tendrán habilitada la ejecución de Javascript en su navegador, ya que es esencial para casi todos los sitios web hoy en día, es posible que desee planificar para los usuarios que no permiten la ejecución de javascript o que utilizan un navegador que no soporta javascript en absoluto.

Puedes mostrarles un mensaje que les diga por qué las imágenes no se cargan y que necesitan cambiar a un navegador moderno o activar Javascript. O puede utilizar la etiqueta para crear una experiencia utilizable para estos usuarios también. El uso de la etiqueta para estos usuarios tiene algunos inconvenientes.

Este hilo en Stack Overflow hace un gran trabajo abordando estas preocupaciones, y es una lectura recomendada para cualquiera que quiera dirigirse a este conjunto de usuarios.

Bibliotecas populares de Javascript para la carga lenta en su sitio web

Dado que los entornos de los navegadores y los detalles de implementación pueden variar entre los navegadores y los dispositivos, lo mejor es utilizar una biblioteca probada para la carga lenta.

A continuación, te presentamos una lista de bibliotecas populares y plugins específicos para cada plataforma que te permitirán implementar la carga perezosa con el mínimo esfuerzo

yall.js (Yet Another Lazy Loader)

  • Utiliza el Observador de Intersección y recurre a la carga lenta basada en eventos.
  • Soporta todos los principales tipos de elementos HTML pero no las imágenes de fondo.
  • También funciona en IE11+.

lazysizes

  • Funcionalidad muy popular y extensa.
  • Soporta el atributo srcset y sizes de las imágenes responsivas.
  • Alto rendimiento incluso sin Intersection Observer.

jQuery Lazy

  • Una sencilla biblioteca de carga lenta basada en jquery.

WeltPixel Lazy Loading Enhanced

  • Una extensión de Magento 2 para la carga lenta de imágenes.

Magento Lazy Image Loader

  • Una extensión de Magento 1.x para la carga lenta de imágenes.

Shopify Lazy Image Plugin

  • Una extensión de Shopify para la carga lenta de imágenes.
  • Sin embargo, es de pago.

WordPress A3 Lazy Load

  • Plugin de carga lenta de imágenes para WordPress.

¿Cómo comprobar si el lazy loading funciona?

Una vez que hayas implementado la carga perezosa, querrás comprobar si el comportamiento de las imágenes en tu sitio web es el previsto. La forma más sencilla es abrir las herramientas para desarrolladores en el navegador Chrome.

Vaya a la pestaña Red > Imágenes.

En este caso, cuando se actualiza la página por primera vez, sólo se cargan las imágenes que se van a cargar al principio. A continuación, cuando empiece a desplazarse por la página, se activarán y cargarán otras solicitudes de carga de imágenes.

También puede observar los tiempos de carga de la imagen en la columna de cascada en esta vista. Le ayudará a identificar los problemas de carga de la imagen, si los hay, o los problemas de activación de la carga de la imagen.

Otra forma sería ejecutar el informe de auditoría de Google Chrome Lighthouse en su página después de haber implementado los cambios, y buscar sugerencias en la sección «Imágenes fuera de pantalla«.

Conclusión:

En esta guía he cubierto casi todo lo relacionado con la carga lenta de imágenes. La carga lenta, si se implementa correctamente, mejorará significativamente el rendimiento de carga de sus páginas web, reducirá el tamaño de la página y los costes de entrega al reducir los recursos innecesarios que se cargan por adelantado, manteniendo el contenido necesario intacto en la página. Una carga más rápida de las páginas conlleva una gran experiencia de usuario, algo que encantará a sus visitantes.

¿A qué espera? Empieza a utilizar las imágenes de carga lenta ahora mismo.

quien-soy3

MIHAI DOBRE

Diseñador web Freelance experto en WordPress con más de 7 años de experiencia, ayudo a pequeñas empresas y particulares dentro y fuera de España a conseguir clientes en internet a través de una web profesional. ¿Necesitas mi ayuda?