Diagnosticar y mejorar la performance en Azure web sites

Hoy les dejo algunos tips para mejorar la performance aún más en nuestros Azure Web Sites. Tengan en cuenta que algunos de estos escenarios son genéricos (aplican a cualquier marco web, o esquema de infraestructura como ser PaaS o IaaS).

En primera instancia, lo que debemos hacer es analizar el escenario con el que contamos. La manera más sencilla y completa es utilizando las herramientas para desarrolladores de Internet Explorer 11. Para acceder a las mismas, simplemente presionamos F12.

Lo que haremos a continuación es una sesión de profiling, donde luego evaluaremos aspectos como latencia, load time, entre otros. El resultado será una pantalla similar a la siguiente:

Y aquí es donde no se pone tan sencillo. Debemos analizar cada escenario y pensar las mejores alternativas para cada uno.

En este caso concreto, no se trataba de un problema de latencia con Azure sino un tema de imágenes muy pesadas. Estos son algunos de los tips más comunes.

Bundling

Hablamos de consolidar archivos de JavaScript o CSS. Como sabrán, por cada archivo independiente contenido en el sitio web, el navegador generará un HTTP request (GET). Entonces, si tenemos 10 archivos de JS y 5 de CSS, generaremos (al menos!) 15 requests. Esto tiene un grave problema de overhead y también de paralelización.

La manera de solucionar el anterior problema es muy sencilla: consolidar todo mi JavaScript y CSS en archivos únicos. No hay nada que el buen copy-paste programming no pueda solucionar.

Esto es una solución extremadamente económica y efectiva.

Minificar archivos CSS y JS

Online podremos encontrar cientas de herramientas que realizan esta tarea. El objetivo es achicar los nombres de las variables, reducir espacios innecesarios, comentarios, etc. El tamaño de los files se reduce mucho y también es una solución económica y efectiva.

Usar sprites para imágenes

En lugar de tener 20 imágenes pequeñas para cada icono del sitio (20 requests), que tal si usamos un sprite y acomodamos el background de la imagen para solamente usar esa porción que nos interesa? Esto es una práctica milenaria, extremedamente efectiva y no muy costosa.

Enviar imágenes en base a la resolución de la pantalla del cliente

Bueno, acá tengo que tener más nafta en el tanque. Devices más pequeños, imágenes más pequeñas. Desconozco si existe alguna herramienta ya creada para esto, pero se los dejo de tarea. Implementarlo a mano no debería ser muy difícil.

Esto es una solución más costosa y con un rédito variable en base al escenario.

Heavy caching

Si todavía no lo están usando, ¡deberían!. Azure ofrece servicios de caché altamente performantes y escalables. Investiguen y verán!. Esto es una solución algo más costosa, pero puede llegar a ser un enorme diferencial en la performance de mi aplicación web.

Mover archivos a un Blob Storage

Por motivos de comodidad, muchos usuarios eligen almacenar imágenes y archivos en el web site. No es grave si tengo un site con poco tráfico y no me preocupa mucho la performance. Para los demás casos, recomiendo mover imágenes y archivos a un blob storage, el cual está especialmente diseñado para eso. De esta forma desviamos requests y procesamiento al web server, y en cambio paralelizamos llevándolo al storage.

Esta solución es económica aunque implica algo de refactoring. Los beneficios también son variables.

Analizar cambiar de data center

A veces no siempre lo que está más cerca en términos geográficos es lo más cercano en términos de latencia. Por ejemplo, desde Argentina tenemos mejor tiempo de respuesta en el data center de East US que en el nuevo data center de Sao Paulo. Esto se debe a la forma en que están armados los backbones submarinos que nos conectan con el resto del mundo.

Mi consejo: investigar un poco y luego hacer prueba y error. Hacer un redeploy en otro data center es extremadamente sencillo y no nos lleva nada de tiempo ni dinero. Probando nos sacamos la duda.

En fin, estas son algunas de las cosas que he hecho (fuera del nivel de aplicación) para mejorar la performance. Estoy seguro que esto es sólo una mínima parte de los tips que hay allá afuera, no te olvides de comentar cuales son los tuyos!