Optimización del rendimiento de una Aplicación Web

El objetivo de este artículo es aprender a cómo y cuándo ofrecer al usuario los datos que quiere ver en una web en el menor tiempo posible, para así asegurarnos que tendrán una agradable experiencia y no cerrarán nuestra web en cuestión de segundos.

1. Precarga y análisis de datos

El primer paso que se debe realizar es analizar cuáles serán los datos que tomarán mayor importancia en la web. Una vez identificados, se realizará una precarga de estos en cuanto se accede a la web para así poder reutilizarlos en otras secciones. Con esta precarga, también se mostrarán de forma instantánea evitando la carga de estos cuando se accede a la vista en la cual se reutilizarán.

La recomendación para gestionar y almacenar esta reutilización y precarga de datos en diferentes secciones de la web es el uso de librerías para la gestión reactiva de estados (reactive state management), como Vuex para Vue, Redux para React o NgRx para el caso de Angular.

Almacenaremos así en el store de nuestro framework estos datos realizando las llamadas necesarias al backend de los datos anteriormente mencionados en el inicio de nuestra aplicación web.

2. Gestión de llamadas para la obtención de datos en la precarga inicial.

Es muy importante tener en cuenta que no es aconsejable realizar muchas requests al backend en el inicio de nuestra aplicación. Esto se debe a que el navegador que el usuario esté usando en ese momento tiene una limitación en el número de llamadas que se pueden realizar simultáneamente.

Por ejemplo, si estamos realizando 10 requests en el inicio de nuestra aplicación usando el navegador Chrome, hay que tener en cuenta que este sólo puede realizar un máximo de 6 llamadas a la vez. Cuando acabe una de estas 6, entrará la siguiente llamada que esté esperando en la cola de las cuatro restantes.

A continuación, mostraré la limitación de requests que permiten realizar simultáneamente cada navegador:

Como podemos observar, cada navegador tiene una limitación de requests simultáneas que se puede realizar desde el mismo, por lo que nos limita el poder realizar todas las llamadas al backend que queramos para la obtención de datos al inicio de nuestra aplicación.

3. Posible solución al problema de la limitación de llamadas simultáneas en el navegador

Viendo el problema que genera la limitación de requests de cada navegador, vamos a ofrecer una solución que se pueda implementar en el framework mediante el uso de javascript, sin tener que instalar ninguna librería extra para gestionar las colas en las llamadas al backend.

Para ello, vamos a realizarlo haciendo uso de la URL que esté utilizando el usuario en ese momento, para así darle prioridad a las llamadas necesarias que mostrarán los datos de esa vista.

En primer lugar, hay que definir las rutas (en base a la URL donde se encuentran estos datos) y la funciones que se encargarán de obtener los datos de la vista de esa ruta:

En este caso, también tendremos en cuenta una función que siempre se ejecutará antes de realizar las llamadas en base a la URL actual: this.loadUserInformation(). Esta se encargará de cargar la información del usuario, como su ID, su nombre, su email, etc. Es decir, datos que se usarán en casi todas las secciones y, por lo tanto, toman mucha importancia y hay que darles prioridad.

Como ejemplo, si el usuario accede directamente a la URL https://www.nuestraweb.com/pagina1, en primer lugar, se ejecutará el método this.loadUserInformation() y la función correspondiente a nuestra URL, en este caso this.loadPagina1(). Cuando esta última acabe, se ejecutarán simultáneamente el resto de funciones del objeto sections, que obtendrán los datos de las demás secciones referentes a cada URL de nuestra web.

Estas son las funciones que se usan en el objeto sections y se encargarán de ejecutar las actions o dispatchs que cargarán los datos de las secciones:

En este caso, es muy importante definirlas de forma que se puedan ejecutar y controlar de forma síncrona mediante el uso de async/await, ya que nos interesa que si accedemos a una URL donde haya que dar prioridad a la carga de datos de esta, como por ejemplo loadPagina1, primero se ejecute esta función y después el resto.

Otra de las ventajas que nos ofrecen las librerías para la gestión reactiva de estados de nuestro framework es que, una vez se hayan cargado y almacenado estos datos en el store de este, si el usuario vuelve a esta sección o vista, se mantendrán estos datos en él y no será necesario cargarlos cada vez que el usuario acceda a esta sección.

4. Conclusión

A muchos de los usuarios que visitan una web hoy en día no les gusta la idea de malgastar su valioso tiempo en páginas que lo mantienen en espera y tardan en mostrar datos cada vez que acceden a una sección o página determinada.

No basta con que el diseño de tu web sea atractivo para el usuario, sino que el cómo optimizar esta carga y gestión de datos toma un papel muy importante.

Autor del artículo

Sergio Mérida, consultor de Consultoría Tecnológica de Deloitte