¿Qué es Lazy Loading y cómo puede mejorar la UX de tu sitio web?

¿Cómo va el tiempo de permanencia de tus usuarios en tu web? ¿Le has dado un vistazo a la tasa de rebote en estos días? Te invito a que lo hagas. Analiza cuánto tiempo invierten tus usuarios en navegar por tu web, qué páginas frecuentan, y qué porcentaje da clic al botón “atrás” sin demorar más de 5 segundos en el site. En pocas palabras, revisa qué tan satisfactoria es la experiencia que ofreces a tu target.

Si la tasa de rebote es alta, déjame decirte que algo va mal en tu página. Lo más probable es que el tiempo de carga sea demasiado prolongado, al punto de fatigar a tus usuarios, ahuyentándolos de tu web y llevándolos a la competencia. Pero, tranquilo, en este maravilloso espacio virtual hay una solución para (casi) todo. ¿Has escuchado hablar de Lazy Loading? ¡Herramienta ideal para mejorar la UX de tu web!

¿Qué es Lazy Loading?

En español significa “carga diferida”, y hace referencia a un patrón de diseño 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 sitio web. Y es que, por lo general, cuando un usuario visita una web todo el contenido de la página se descarga y se visualiza de inmediato, aun cuando no es garantía de que el usuario vaya a consumirlo. Como efecto, se produce una pérdida de memoria y ancho de banda.

Como solución a esta problemática, la herramienta Lazy Loading evita que todo el contenido se descargue y se muestre enseguida. Es decir, los diferentes apartados de una web se cargan a medida que el usuario va llegando a las partes que le interesan.

Por supuesto, el principal factor que se ve favorecido es la velocidad de carga. Si bien podrías pensar que no es el único elemento importante en una web, sí que juega un papel fundamental cuando se trata de posicionarla en los buscadores. ¿Por qué? Porque mientras más rápido cargue tu web, mayor será el impacto positivo que generará en tus usuarios y, por ende, mejor será la experiencia.

Recuerda que para los buscadores la experiencia de usuario lo es todo. Si tu site tiene información de valor, novedosa y actualizada, pero el tiempo de carga es increíblemente lento ¿Qué crees que prevalecerá? ¡La lentitud de carga!

Cómo funciona

La tecnología y sus maravillosas metodologías no dejan de sorprendernos. Esta herramienta se basa en un procedimiento rápido y sencillo:

  • El navegador crea la web DOM, sin descargar imágenes ni precargar videos.
  • JavaScript es usado para identificar qué imágenes y videos precargar.
  • El contenido multimedia se descarga como mejor sea apropiado. El contenido es retrasado hasta que el visitante se desplace a lo largo del site.
Lazy Loading de WordPress

Un sitio web promedio pesa cerca de 3719 kB incluyendo imágenes y videos, lo que ocupa casi el 78% del peso total, según el HTTP Archive. Estos son muchos bytes que un usuario debe descargar desde su navegador para poder visualizar una web. En WordPress, cuando se trata de carga diferida, hay plugins que pueden emplearse:

BJ Lazy Load

Es uno de los plugins más populares en WordPress, está activo en más de 70.000 webs creadas con este Gestor de Contenidos. Su instalación y configuración es sencilla. Solo instala y activa el plugin. Finalizada la activación, se agrega una nueva sección en el menú, específicamente, en el apartado de opciones. De manera automática, todas las opciones de carga diferida son seleccionadas.

a3 Lazy Load

Este plugin de Lazy Loading está activo en más de 50.000 webs de WordPress. Una vez activado el plugin, se agrega una opción adicional en el apartado de opciones en el menú. A3 Lazy Load reduce considerablemente el tamaño de la página y el número de peticiones. Si bien podría demorar un poco más en cargar en comparación con BJ Lazy Load, las imágenes entregadas son de menor tamaño.

Beneficios en la UX de tu web

La carga diferida supone una técnica vital en cuanto a posicionamiento web SEO refiere. Por eso, hay muchas webs haciendo uso de este plugin, solo que no lo has notado. Lazy Loading ofrece una amplia variedad de beneficios, donde la UX de tu sitio web es el principal afectado. Repasemos algunos:

  • Los usuarios se conectan rápidamente con el contenido que desean consumir.
  • Al guardar la date en caché, se minimizan las peticiones y se optimizan los tiempos de cargas.
  • Se mantiene un equilibrio entre el contenido optimizado entregado, y se dinamiza la experiencia final del público objetivo.
  • Se afianza el tiempo de permanencia en la web, por lo que la tasa de rebote disminuye considerablemente.
  • Los usuarios ahorran batería, tiempo y recursos porque las imágenes (u otros contenidos) no cargan de inmediato, sino cuando ellos vayan a consumirlos.

En lugar de cargar todo el contenido (imágenes y videos, sobre todo) de la web, por medio de Lazy Loading solo se descarga el contenido visible en el área actual de la pantalla. Cuando el usuario llegue a la zona que le interesa, el contenido por defecto se reemplazará por el real. ¿No te parece genial? Es una excelente forma de optimizar en líneas generales la velocidad de carga de tu site y, con ello, la UX de tu página mejorará de manera significativa. ¡Adiós a las altas tasas de rebote!

**Tip: Si quieres saber más información sobre esta herramienta, repasa el post sobre carga diferida de imágenes y videos, compartido por Google. ¿Ya conocías esta herramienta? ¡Cuéntame qué beneficios ha aportado a tu web!

Recibe los últimos datos e inspiración de FMB