Carga diferida o lazy loading: optimiza el tiempo de carga de tu Web

¿Qué es la carga diferida?

La carga diferida es la práctica de evitar que las imágenes y otros activos de tu página web se carguen hasta que el usuario no los necesite. Los recursos por encima del pliegue se mostrarán porque se supone que deben hacerlo, pero las imágenes que queden por debajo del pliegue no se cargarán hasta que el usuario no se desplace hasta el lugar donde se encuentran en la página.

En los sitios web que no utilizan la carga de imágenes diferida, lo que suele suceder es que un usuario entra en la página y el navegador descarga todos los activos y recursos antes de construir la página para que el usuario la vea.

Si alguna vez has hecho clic en un enlace y has tenido que esperar mucho tiempo antes de que las cosas se mostraran correctamente, es probable que esa página contenga muchos recursos que tardan mucho tiempo en descargarse y renderizarse. Este tipo de retraso puede provocar que alguien abandone una página web, sobre todo si esto ocurre con cada enlace en la página en la que hacen clic.

Pero cuando implementas la carga diferida, en lugar de que el navegador cargue todos los recursos de antemano, usará una imagen de marcador de posición para el lugar al que se supone que va la imagen.

A medida que el usuario se desplace, puede que incluso vea ese marcador de posición antes de que el navegador inserte la imagen que se supone que debe ir ahí. Este método de carga de imágenes puede mejorar el tiempo de carga de tu página, con el objeto de mejorar a su vez la experiencia del usuario. Esto es especialmente cierto en los sitios web que alojan una gran cantidad de imágenes o iframes. Aunque es importante saber qué significa la carga diferida de imágenes, también tienes que entender que la carga diferida no se aplica solo a las imágenes. Varios activos y recursos pueden beneficiarse de la carga diferida, pero la carga diferida de las imágenes sigue siendo la función más popular.

Carga diferida frente a carga ansiosa

Ahora que hemos visto la carga diferida, hablemos de la carga ansiosa y sus diferencias respecto a la carga diferida.

Si bien la carga diferida evita descargas innecesarias, la carga ansiosa es lo contrario. Con la carga ansiosa, todas las imágenes se cargan inmediatamente en cuanto alguien abre el sitio web.

Cuando los usuarios se encuentran con una página que utiliza la carga ansiosa, puede que vea algunos indicadores de carga o que tenga que esperar mientras se realizan todas las descargas y renderizaciones. Esto también significa que aunque el usuario no se desplace más abajo de la página, todas las imágenes se seguirán descargando, lo que es contrario a cómo funciona la carga diferida.

Una carga ansiosa puede beneficiar a algunos sitios web, como los que tengan muy pocas imágenes o imágenes muy optimizadas, pero para la mayoría, este método puede ralentizar enormemente una página web.

Sin embargo, para los sitios con mucho texto y aquellos con activos de poco peso, la carga ansiosa puede funcionar bien. Por ejemplo, un sitio como Wikipedia se beneficia en gran medida de la carga ansiosa.

Ventajas de la carga diferida

Los beneficios de la carga diferida no son solo el aumento de las velocidades de carga del sitio web. La carga diferida también aporta beneficios adicionales, como:

Tiempos de carga más rápidos del sitio web

Los sitios web pequeños y los activos de tamaños de archivo pequeños se cargarán rápidamente. La carga diferida ayuda a reducir el tamaño inicial de un sitio web, lo que ayuda a que se cargue en el navegador más rápidamente.

Un sitio web más rápido ofrece muchas ventajas. Cuando cargas imágenes de forma diferida en tu sitio web, puedes mejorar las conversiones, aumentar y mejorar la experiencia del usuario, y hacer que el sitio sea mucho más apto para las actividades de SEO, lo que les encantará a los motores de búsqueda.

Uso reducido del ancho de banda

Cuando tus imágenes se carguen de forma diferida, los usuarios del sitio web solo verán los activos que necesiten. Esto significa que el navegador no necesitará perder ancho de banda descargando imágenes que el usuario nunca verá. Esto puede crear una buena reducción en el uso del ancho de banda con el tiempo.

Si tu sitio tiene muchas imágenes de tamaños de archivo más grandes, esa conservación del uso del ancho de banda puede marcar una gran diferencia desde el principio. Esta conservación del ancho de banda te beneficia tanto a ti como al usuario. Dado que no estás mostrando esos activos, también estás manteniendo el uso del ancho de banda reducido en tus servidores.

Mejora de la experiencia del usuario

La carga diferida mejora la experiencia del usuario de varias maneras.

A nadie le gusta un sitio lento. De hecho, los sitios lentos a menudo pueden hacer que un usuario crea que algo falla en el dispositivo desde el que está viendo el sitio. Una carga más rápida también puede mejorar la experiencia del usuario de maneras que no son tan perceptibles. Por ejemplo, sus navegadores no tendrán que hacer todo el trabajo pesado de descargar tanto en segundo plano. Esto puede hacerles ahorrar recursos de su sistema y permitir que sus dispositivos funcionen mejor mientras están en tu sitio web.

Toda esa actividad desde el navegador también significa actividad desde la CPU, la batería y otros recursos del dispositivo. Esta es una de las razones por las que la carga diferida es una de las mejores prácticas de SEO móvil.

Mejor rendimiento de SEO

Las cargas de página más rápidas son un aspecto crítico de la optimización de motores de búsqueda (SEO). Los motores de búsqueda a menudo penalizan a los sitios lentos, y uno de los culpables más grandes de la carga lenta de sitios son las imágenes. Si deseas mejorar el rendimiento de tu sitio y aumentar tu clasificación en los motores de búsqueda, necesitas maximizar tu velocidad de carga.

Inconvenientes de la carga diferida

La implementación de cargas diferidas puede ocurrir de varias formas, y no todos los métodos de carga perezosa son adecuados para todos los sitios.

A veces, la implementación de una carga diferida puede convertirse en una tarea compleja, sobre todo si utilizas un CMS que prefiera un método de aplicación sobre otro.

Eso también significa que puedes tener problemas de compatibilidad al intentar usar la carga diferida. Es posible que incluso tengas un CMS con carga diferida incluida por defecto. Al intentar un tipo diferente de implementación, se pueden generar más problemas de compatibilidad.

Algunos otros inconvenientes pueden provenir de la forma en que el usuario se desplaza por tu página. Si se desplaza muy rápido, la carga diferida no puede seguir el ritmo. Esto puede obrar en detrimento de ciertos tipos de sitios web. Por ejemplo, el desarrollo de sitios web de comercio electrónico necesita imágenes que siempre permanezcan en la página.

Un desplazamiento rápido también puede crear problemas de almacenamiento en búfer. Además, la carga diferida crea más llamadas al servidor que pueden acumularse si el usuario continúa.

Un posible inconveniente final proviene del beneficio de reducción del almacenamiento en caché. El almacenamiento en caché por lo general solo funciona cuando se solicitan activos, o la información en la memoria caché puede permanecer durante mucho tiempo y quedar desfasada u obsoleta debido a la rareza de su uso debido al almacenamiento en caché diferido.

Esto puede parecer un montón de desventajas, pero en la mayoría de los casos de uso, los beneficios de las cargas diferidas superan con creces los posibles inconvenientes.

Muchos de los inconvenientes también tienen que ver con la implementación. La carga diferida puede funcionar de varias maneras, por lo que es importante hacerlo bien. La correcta implementación te dará los mejores resultados posibles.

Cómo implementar la carga diferida

Puedes implementar la carga diferida de varias maneras. Algunos métodos manuales que usan CSS pueden funcionar para quienes sepan lo que están haciendo como un desarrollador web. Sin embargo, las soluciones CMS que utilizan plugins o complementos probablemente tendrán un módulo de carga diferida que puedes instalar.

Algunos plugins y complementos, principalmente de la variedad de almacenamiento en caché, también tienden a tener opciones de carga diferida. Puedes encontrar librerías de código abierto con código JavaScript de carga diferida que puedes añadir.

Pero independientemente de cómo implementes la carga diferida, hay algunas prácticas recomendadas que pueden permitirte aprovecharla al máximo. Estos incluyen:

• Solo recursos de carga diferida debajo del pliegue
• No cargues en diferido recursos esenciales necesarios para la funcionalidad inicial del sitio o aplicación
• Presta atención a los errores de carga de las imágenes y arréglalos inmediatamente
• Establece parámetros de carga diferida muy estrictos
• Recorta el código de carga perezosa para hacerlo más eficiente
• Implementa soluciones de respaldo para navegadores que no admitan la carga diferida o JavaScript

Además, como la carga diferida no es solo para las imágenes, es posible que tengas que averiguar diferentes prácticas para diferentes contenidos.

Todo esto puede volverse abrumador, por lo que es mejor hacer la implementación y luego lidiar con las cosas de manera individual a medida que avanzas. Por ejemplo, a medida que optimices tu sitio web para móviles, mira las herramientas de diseño de la interfaz de usuario que te ayuden a perfeccionar la carga diferida.

Optimiza la experiencia del usuario con la carga diferida

La carga diferida funciona como una herramienta que puedes utilizar para optimizar la experiencia del usuario y obtener todas las ventajas que conlleva. No hace falta que lo veas como un dilema de tener que escoger entre experiencia de usuario e interfaz de usuario, ya que la carga diferida puede mejorar ambas.

Además, no tienes que saberlo todo a nivel técnico cuando dispones de las herramientas que pueden ayudarte a que tu sitio sea más rápido sin necesidad de profundizar en el nivel de codificación.

Sigue siendo útil que comprendas algunos conceptos básicos, para que puedas tomar decisiones informadas sobre qué implementar o qué servicios utilizar que puedan ayudar a que tu sitio o aplicación funcione mejor y más rápido para tus usuarios. Mailchimp ofrece un gran número de soluciones que pueden ayudarte a hacer que tu sitio web sea más rápida y mejorar la experiencia del usuario.

Si necesitas integraciones, información y otros recursos para ayudar a acelerar tu sitio web o aplicación móvil, echa un vistazo a todas las herramientas que ofrece Mailchimp.