¿Qué es la carga diferida?

¿Qué es la carga diferida?

La carga diferida es una técnica por la que no se cargan ciertas partes de una página web, especialmente las imágenes, hasta que sean necesarias. En lugar de cargar todo a la vez, lo que se conoce como carga "previa", el navegador no solicita ciertos recursos hasta que el usuario interactúa de forma que los necesite. Cuando se implementa correctamente, la carga diferida puede acelerar los tiempos de carga de la página.

Este tipo de carga se denomina "diferida" porque anima al navegador web a procrastinar. Al mostrar una página web de carga diferida, básicamente el ordenador dice: "No voy a cargar estas imágenes hasta que realmente las necesite." Al mostrar una página web de carga previa, un navegador adopta la actitud contraria: "¡Me ocuparé de todo de inmediato!" Aunque la procrastinación tiene a veces connotaciones negativas en el mundo real, en este caso suele ser más eficiente.

Por ejemplo, una entrada de blog puede tener una imagen en la parte superior de la página y un diagrama cerca de la parte inferior. Es posible que alguien que lea la entrada del blog no llegue a la parte inferior del texto hasta que hayan pasado varios minutos, así que el navegador no carga el diagrama hasta que el lector se desplace hasta esa sección. De este modo, la página se carga más rápidamente al principio, porque el navegador está cargando una imagen en lugar de dos.

¿Cómo funciona la carga diferida de imágenes?

La navegación del usuario suele ser lo que desencadena la carga diferida de las imágenes. En concreto, cuando un usuario se desplaza hacia abajo en una página, le indica al navegador que cargue las imágenes que aparecen allí.

Cuando se carga una página web, la parte que el usuario ve se llama "por encima del pliegue," mientras que la parte que el usuario todavía no ve se llama "por debajo del pliegue."* Las imágenes por encima del pliegue tienen que cargarse enseguida, o se verá afectada la experiencia del usuario. Pero el usuario no ve las imágenes por debajo del pliegue hasta que se desplaza hacia abajo. Por lo tanto, las imágenes por debajo del pliegue pueden utilizar la carga diferida.

*¿Qué significa "pliegue"? "Por encima del pliegue" y "por debajo del pliegue" tienen su origen en el diseño de los periódicos. Los periódicos suelen venir doblados por la mitad de forma horizontal, y la mitad delantera, la zona por encima del pliegue, es lo primero que ve el lector. Cuando el término se aplica a un diseño web, el "pliegue" es la parte inferior de la pantalla del usuario.

Cómo implementar la carga diferida para las imágenes

Una forma de implementar la carga diferida es utilizar la carga de atributo HTML en una etiqueta de imagen. Si se añade loading="lazy", como en el siguiente ejemplo, se indica al navegador que no cargue la imagen hasta que el usuario se desplace hacia ella:

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

Los desarrolladores web también pueden utilizar marcos de programación para implementar una carga diferida más sofisticada. Angular se suele utilizar para esto. La biblioteca de JavaScript React también es compatible con la carga diferida.

Cloudflare Mirage es otra manera de implementar la carga diferida. Además de redimensionar automáticamente las imágenes, Mirage actúa como un cargador diferido, cargando las imágenes solo cuando se le pide. La función Cloudflare Mirage está disponible para los clientes de Cloudflare en los planes de autoservicio Pro y Business, así como para los clientes Enterprise.

¿Qué otros recursos de la página pueden utilizar la carga diferida?

• JavaScript: JavaScript es lo que se conoce como un recurso de bloqueo de renderización, lo que significa que un navegador no puede renderizar la página hasta que se cargue el código JavaScript. El código JavaScript puede dividirse en módulos más pequeños que se cargan cuando son necesarios, lo que reduce el tiempo de carga de las páginas que necesitan ejecutar JavaScript (más información).
• CSS: CSS también es un recurso que bloquea la renderización. Dividir un archivo CSS en varios archivos que solo se carguen cuando sea necesario puede ayudar a reducir la cantidad de tiempo que un navegador se bloquea para renderizar el resto de la página. Los archivos CSS que no se bloquean deben tener su propio enlace con una propiedad media añadida para indicar al navegador cuándo debe cargarlos (más información).
• iframes: los iframes se utilizan para incrustar contenido de una fuente externa en una página web. Las etiquetas iframe pueden incluir el mismo atributo de carga HTML descrito anteriormente para las imágenes.

¿Cuáles son las ventajas de la carga diferida?

Carga más rápida de la página: en igualdad de condiciones, las páginas web con archivos de menor tamaño se cargan más rápido. Con la carga diferida, una página web es más pequeña al principio que su tamaño completo y, por tanto, se carga más rápido. Un rendimiento web más rápido tiene numerosos beneficios, como un mejor SEO, mayores porcentajes de conversión y una mejor experiencia del usuario.

No tiene contenido innecesario: supongamos que una página carga varias imágenes por debajo del pliegue, pero el usuario sale de la página antes de desplazarse hacia abajo. En ese caso, el ancho de banda utilizado para entregar las imágenes y el tiempo que el navegador dedica a solicitar y procesar las imágenes básicamente se desperdician. En cambio, la carga diferida garantiza que estas imágenes solo se carguen cuando sea necesario. Esto ahorra tiempo y capacidad de procesamiento, y puede suponer un ahorro de dinero al propietario del sitio web, ya que se se utiliza menos ancho de banda.

¿Cuáles son las desventajas de la carga diferida?

Los usuarios pueden solicitar recursos más rápido de lo esperado: por ejemplo, si un usuario se desplaza rápidamente por una página, puede que tenga que esperar a que se carguen las imágenes. Esto podría afectar negativamente a la experiencia del usuario.

Comunicación adicional con el servidor: en lugar de solicitar todo el contenido de la página de una sola vez, el navegador podría tener que enviar múltiples solicitudes de contenido a los servidores del sitio web a medida que el usuario va interactuando con la página. El uso de una red de entrega de contenido (CDN) minimiza este posible inconveniente, ya que las imágenes son almacenadas en caché por la CDN y el navegador no tiene que enviar una solicitud hasta el servidor de origen para acceder a ellas.

El navegador debe procesar código adicional: si un desarrollador añade varias líneas de JavaScript a una página web para indicar al navegador cómo cargar los recursos de la página en diferido, esto aumenta la cantidad de código que el navegador tiene que cargar y procesar. Si se hace de forma ineficaz, este ligero tiempo adicional de carga y procesamiento puede superar el tiempo que se ahorra con la carga diferida.

¿Qué es la carga previa?

La carga previa consiste en cargar todos los recursos de la página web al mismo tiempo, o tan pronto como sea posible. Algunas aplicaciones que utilizan la carga previa pueden mostrar una pantalla de "Cargando". Las aplicaciones web complejas y con mucho código, como los juegos en línea, suelen preferir la carga previa.

¿Qué otras formas tienen los desarrolladores de acelerar una página web?

Hay una serie de factores que influyen en el rendimiento web, pero estos tres pasos son un buen punto de partida para hacer que un sitio web funcione más rápido:

1. Usar una CDN: cuando el contenido web se almacena en la caché de una CDN, la comunicación con el servidor de origen se reduce al mínimo, tanto si se utiliza la carga diferida como si no. Las CDN también entregan el contenido a los usuarios más rápidamente, porque suelen estar más cerca del usuario que el servidor de origen.
2. Optimizar las imágenes: las imágenes demasiado grandes afectarán al rendimiento incluso si se utiliza la carga diferida. Reducir el tamaño del archivo de imagen siempre que sea posible ayuda a garantizar que las imágenes se carguen rápidamente.
3. Minificar el código: la minificación es el proceso de eliminar todos los caracteres innecesarios del código CSS y JavaScript sin alterar su funcionamiento. Esto incluye la eliminación de espacios en blanco, comentarios, y puntos y comas. La minificación reduce el tamaño del archivo de código, lo que aumenta la velocidad de carga.

Ver más formas de mejorar el rendimiento de las páginas web: Consejos para mejorar la velocidad de los sitios web