Cómo mejorar el performance | Boletín de Frontend #3

Llega nuestra tercera edición para compartir información sobre distintas prácticas que te ayudarán a mejorar el performance de tu aplicación web, algunas novedades del ecosistema, eventos próximos de frontend y herramientas recomendadas que harán más efectivo tu día a día.

Mejorando el performance

Un tema de alta importancia en Htech para nuestros proyectos es, además de garantizar su correcto funcionamiento, lograr y mantener un nivel alto de performance. Es decir, una carga y respuesta rápida para que el usuario pueda interactuar con el sitio de forma efectiva.

Esto no es algo que se logre solo trabajando en el desarrollo con normalidad. Requiere prestarle atención, aplicar ciertas prácticas y medir constantemente.

Algunas recomendaciones son:

Dividir los archivos compilados en pedazos menores, por vista, por ejemplo, para que cada vista solo cargue lo necesario, especialmente en la primera página que el usuario ve, normalmente la landing page. Esto es vital, pues si el sitio se tarda más de 2 segundos en estar listo para usarse, la tasa de rebote, es decir, el porcentaje de usuarios que se va, inmediatamente aumentará considerablemente.

Relacionado a este primero, algunas funcionalidades no necesitan cargarse desde el principio al ingresar en una vista, se pueden cargar en paralelo o al momento de dar clic en un botón, por dar un ejemplo. Esto hace que los pedazos que se cargan durante el flujo sean más ligeros aún.

Revisar el peso de las imágenes y archivos multimedia. Si bien se puede mediar con estrategias para mantener la calidad de los assets, al tiempo que se mantienen ligeros, también es importante analizar qué y cuándo se carga, solo en el momento preciso, y además, que el sitio no se perciba incompleto mientras sucede (manejar estados de carga y esqueletos apropiadamente).

También ayuda comprimir el código compilado con estrategias como gzip o brotli, para que la información transmitida del servidor al cliente sea menor y suceda más rápido.

Prevenir el bloqueo de la aplicación es clave. Esto sucede cuando ciertos procesos, especialmente complejos, o cargas de funcionalidades que provienen de herramientas externas o de otra url, hacen que el sitio se demore más en estar completamente listo para ser usado o se percibe lento. Esto afecta, por supuesto, en la tasa de rebote. Se pueden configurar dichas herramientas y procesos para que carguen en paralelo evitando dicho bloqueo.

Para este escenario hay que considerar, cuando sea viable, diferir estas funcionalidades a un medio paralelo que conocemos como webworker. Éste ejecutará lo necesario en segundo plano y sin apenas bloquear al centro de la aplicación.

Hay más, pero en resumen, la clave es reducir los pesos de lo que se transfiere o carga, y prevenir bloquear el funcionamiento principal de la plataforma.