Carga predictiva de una web

Publicado en WebPerf · 10 December 2018.
Adivinar comportamiento usuario

Seguramente ya sabrás que llamamos “carga de una web” al hecho de transferir la información HTML desde el servidor, dónde está alojado el sitio web, hasta el navegador. Generalmente, también se incluye en esta definición de carga, la visualización de ese HTML en el navegador. Hay que tener en cuenta que la carga de este HTML lleva asociada también varias subcargas, una por cada recurso que se necesite para la puesta en marcha( o renderizado ) del HTML.

Es decir, que cuando escribimos una dirección web en nuestro navegador, tenemos que esperar que se cargue el HTML con la información de la página web y, además, que se carguen todos los recursos asociados que necesita esa página web.

Ese proceso, que sería el de carga normal( o también llamada “carga ansiosa” ), es lento para el usuario y costoso para el servidor( que tiene que responder a todas esas peticiones de subcargas que se le hace ). Es por eso que se idearon otros tipos de carga:

Carga asincrónica

En este tipo de carga, el HTML de la página web se carga de modo normal, pero ciertas partes( o ciertos recursos ) se van añadiendo posteriormente a la página principal sin necesidad de tener que cargarla de nuevo entera( o de tener que cargar otra página ). Esta técnica, se llama AJAX.

Carga progresiva

En este tipo de carga, la web lo hace de modo normal excepto algunos recursos que se cargan de un modo reducido. Luego, de manera asincrónica, esos recursos se irán transfiriendo de poco en poco( normalmente de manera gradual ) al navegador.

Un ejemplo muy conocido de carga progresiva es el streaming de los vídeos. Primero, se carga el recurso en modo reducido( el reproductor ) y, luego, se va cargando el resto del recurso( el vídeo en este caso ) poco a poco.

Otro ejemplo, es cuando entramos en una web y las imágenes se cargan en baja calidad. Pero también, de modo asincrónico, se van transfiriendo las versiones de buena calidad al navegador. Una vez que se hayan transferido, se reemplazarán las de baja calidad por las de buena calidad.

Con este tipo de carga, mejoramos la velocidad de carga del HTML, pues lo esencial está disponible antes, y dejamos que los recursos pesados lo hagan poco a poco.

Carga perezosa

En este tipo de carga, la web se carga de modo normal, excepto algunos recursos que se cargan bajo demanda, o bajo ciertas acciones, del usuario.

Por ejemplo, los vídeos de los streaming comentados antes, normalmente se cargan de manera perezosa. Esto es, no empiezan a cargarse hasta que el usuario le da al play al reproductor.

Otro ejemplo típico es el de las imágenes perezosas, aquellas que sólo se cargan cuando el usuario baja el scroll del navegador hasta su posición.

Con este tipo de carga, mejoramos la velocidad de carga del HTML, pues no todos los recursos se descargan. También se quita de trabajo al servidor, pues sólo tiene que procesar peticiones cuando son necesarias.

Carga predictiva

Llegamos a la carga que le da título a esta entrada. Este tipo de carga es utilizada en muchos ámbitos de la informática, por ejemplo en los procesadores dónde ahora es noticia por los fallos recientes de Meltdown y Spectre. También en las memorias, pues es la base para los sistemas de caché. Tú me dirás: “vale, ¿ pero qué es la carga predictiva ?”.

La carga predictiva es invertir recursos, o tiempo de ejecución, en algo que esperas que ocurra o haga el usuario, suceda al final o no. Como entenderás, al tratarse de una inversión de recursos, hay que saber muy bien lo que se hace y, sobretodo, cómo se hace. Es por ello que la implementación de este tipo de carga suele realizarse sólo por profesionales de la optimización web. Es por ello que no verás muchas webs hablando de la carga predictiva, al contrario que pasa con sus hermanas( la carga progresiva y la carga perezosa ).

Te pongo un par de ejemplo de sitios en dónde una carga predictiva podría ser utilizada:

  1. Imagínate una página web con un catálogo de productos de comercio electrónico. En la cual, se ha definido que sólo aparezcan 12 productos y que se carguen 8 más de manera perezosa cada vez que el usuario baje el scroll. Esto permitiría por un lado una carga rápida del HTML principal del sitio web( pues de principio sólo se tienen que cargar 12 productos ) y del servidor( ya que la carga de futura nuevas imágenes de productos solo se hará cuando el usuario baje el scroll ). ¿ Se podría mejorar aún más la velocidad de carga ?. Pues…sí, mucho más, anticipándonos al usuario e invirtiendo en nuestra predicción. Verás: Yo creo que si un visitante lleva cinco segundos viendo los productos de un catálogo es que está interesado y diría que seguramente bajará el scroll para ver más. Bajo esa predicción, yo estoy dispuesto a invertir recursos, esto es, descargar los siguientes 8 productos aún sin que se haya bajado el scroll. Así, cuando lo haga, ya los productos estarán cargados( pero ocultos ) en el navegador que sólo tendrá que ponerlos visibles con lo que la respuesta será inmediata. Es una predicción, no es seguro que ocurra, pero si ocurre nuestra inversión habrá dado lugar a una mejor experiencia de usuario. Si no ocurre, habremos invertido recursos innecesariamente.
  2. Para este segundo ejemplo, imagínate una intranet corporativa que lleva asociada una gran cantidad de CSS/JS. La entrada a la intranet se realiza desde una página de login. El tiempo medio de carga es de 15s segundos, desde que se entra los datos correctamente en la pantalla login hasta que se carga la página principal de la intranet. ¿ Es posible mejorar ese tiempo de carga ?, sí, por supuesto, haciendo una predicción. Yo diría que si un usuario llega a la página de login hay muchas probabilidades de que quiera entrar a la intranet. Podría hacerse una pantalla de login muy simple pero que cargue los css/js esenciales que serán necesarios de la intranet. Así, aunque ralenticemos unos pocos segundos la pantalla de login cargando recursos CSS/JS que no necesita, cachearemos recursos en el navegador. De esta manera, la entrada a la intranet corporativa será bastante más rápida.

Como ves, realizar una buena optimización web no es cuestión de aplicar un sistema de caché y ya está. Una buena optimización se consigue estudiando las necesidades del proyecto web y definiendo estrategias de optimización. Una de ellas, como hemos visto, podría ser la carga predictiva que bien usada puede mejorar en mucho la experiencia de usuario, pero usada incorrectamente podría implicar carga innecesaria en el servidor o, incluso, lentitud de carga del proyecto web.


Aprende más sobre carga predictiva

¡ Compártelo !
Este sitio utiliza cookies propias y de terceros para mejorar tu experiencia con el sitio web. Al continuar con la navegación consideramos que acepta su uso.