Hace apenas unos dias, comence a darme cuenta lo importante que aun es la optimización de las páginas web, en mercados emergentes como el de México, donde el ancho de banda es aún muy caro.

Dentro de este post, voy a estar agregando ligas a diferentes herramientas y sitios que he estado utilizando y que espero  también les sirva.

Mi investigación comenzó al utilizar una herramienta para medir la “capacidad” de un sitio web, llamada BrowserMob. Basicamente es un sitio web que te permite generar pruebas de carga “load testing” utilizando navegadores reales  a tu aplicación web con, donde el precio varia dependiendo de los usuarios concurrentes que simule la aplicación que estan accediendo a tu aplicación web.

La sopresa me la llevé al darme cuenta que con 15 usuarios concurrentes mi enlace dedicado de 2MB (E1) (que es bastante chico para internet, pero bastante decente para los enlaces empresariales de TELMEX) se llenaba completamente.

La memoria, procesador e interfaz de red de mi servidor ni siquiera le hacian cosquillas, el problema era el enlace. El cual además de esto se usa de manera interna. El sitio en cuestión no esta disponible al público en general, sin embargo no es el único sitio corriendo en ese servidor, por lo que me di a la tarea de analizar que podíamos hacer para mejorar el desempeño de la aplicación.

Lo primero y más importante que debes de tomar en cuenta, es analizar la cantidad de KB que tus páginas estan generando, ya sea que tengas muchos gráficos, scripts u hojas de estilo.

Para esto te recomiendo la herramienta Firebug, la  cual es un add-on para Firefox, que te permite hacer muchas cosas con tu javascript, html, css. etc.. Les recomiendo visitar el sitio si aun no conocen la herramienta. 

Después les recomiendo que descarguen (despues de ya haber instalado Firebug), un add-on de Yahoo, llamado Yslow que funciona sobre Firebug. En esa página pueden aprender tambien de la herramienta. Lo mas interesante es una tabla de calificación que usa para medir que tan bien optimizada esta tu página, que va de la A a la F, siendo la primera la mejor calificación.

Los puntos a calificar son:

Numero de Requests de HTTP

Basicamente la idea atras de esto es que mientras menos recursos tengas que llamar, tu página va a cargar mucho mas rápido debido a que el navegador unicamente puede llamar de 2 a 3 recursos de manera paralela. Una recomendación es que tanto tus archivos de scripts como de CSS trates de agruparlos, en lugar de tener 4 o 5 hojas de estilo, trates de juntarlo todo en un solo archivo, de esta manera el navegador solamente necesitará hacer un solo request.

Usar un CDN (Content Delivery Network)

Este punto fue el primero que quize implementar debido a que es el que entrega resultados mas tangibles. Y es que la lógica es simple, tus recursos estáticos, sobre todo las imagenes y archivos de flash/silverlight son aquellos que te consumen mas KB en una página, si puedes conseguir un proveedor que pueda entregarlos de manera mucho mas rápida y de manera distribuida y sobre todo a un precio justo hay que utilizarlo. Como les comente anteriormente, en México el ancho de banda es un activo caro, y mucho mas cuando deseas ser escalable. Con los modelos en USA, el uso de un CDN  es indispensable. Ejemplos de CDN tenemos a Akamai, Amazon S3 y Cachefly.

Utilizar Headers con Expiración

De todos los puntos este es de los más fáciles de implementar, sin embargo es con el que mas debemos de tener cuidado, sobre todo en sitios de naturaleza muy dinámica. Basicamente lo que hacen estos headers es guardar en el cache local del servidor, todos los elementos de la página, (mientras el usuario no limpie manualmente su cache). Esto te da la gran ventaja que el acceso a la  página es practicamente inmediato. El problema con esto es que si actualizas tus elementos, deberás hacerlo con un nombre diferente para que el servidor identifique que se trata de un elemento nuevo. Simplemente hay que utilizarlos con cuidado.

Componentes Gzip

De una u otra manera todos estamos muy familiarizados con el concepto de compresión sin importar la plataforma en la que trabajemos. Y sabemos tambien que los archivos de texto son los mas suceptibles a la compresión, esto es que se pueden reducir mucho en su tamaño. Y debido a que tanto el html, javascript y css están basados en texto son candidatos ideales para su compresión. En el caso de IIS 6 y posterior ya cuenta con un mecanismo de compresión de archivos, así como también herramientas de terceros como HttpZip la cual estoy usando en mi server con resultados muy buenos. El único detalle a considerar es el soporte de los navegadores para manejar el contenido gzip. Pero si hablamos que nuestra aplicación esta diseñada para navegadores nuevos (IE6+,FF2+), no debería haber ningún problema.

En la siguiente parte seguiré platicando acerca de los puntos a calificar para que tu aplicacion este optimizada, así como comentarios personales.