Técnicas para maximizar la performance en webapps

para los ansiosos el tip (es un ejemplo que depende de cada casa optimizarlo a sus necesidades):

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A0

# Set up caching on media files for 1 year (forever?)
<FilesMatch ".(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"
</FilesMatch>

# Set up caching on media files for 1 week
<FilesMatch ".(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>

# Set up 2 Hour caching on commonly updated files
<FilesMatch ".(xml|txt|html|js|css)$">
ExpiresDefault A7200
Header append Cache-Control "proxy-revalidate"
</FilesMatch>

# Force no caching for dynamic files
<FilesMatch ".(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"

</FilesMatch>

La explicación completa:

Con el pasar de los años las paginas van ganando peso (mas js, mas css, mas imagenes y mas flash). Por suerte, los navegadores y proxys usan mecanismos que cache, que supongo sabes lo que significa. Ahora bien, los mecanismos de cache tienen su complejidad, ya que de alguna manera el servidor web debe indicarle al browser cuando guardar y cuando solicitar nuevamente el contenido de un componente de la pagina (archivo css, js, img, etc). Esa comunicación se realiza por medio de headers en el mensaje HTTP entre el navegador y el servidor web.

Gracias a esos mecanismos de chache podemos ganar muchísima performance en la carga cada página de nuestro website o webapp. Ya que si pensamos que en un caso típico, solo el 5% del peso de una página es contenido dinámico(HTML generado), el resto puede ser guardado en el navegador y la segunda vez que el usuario ingrese a esa página o bien necesite alguno de esos componentes, el navegador los tendrá en disco para leerlos directamente. Por ende podemos intuir una ganancia del 95% en la transmisión de la página.

El secreto de una buena utilización de la cache es saber determinar, cuanto tiempo le permitimos guardar al navegador cada archivo. Y en general la respuesta es para cada caso. Pero si pensamos en casos típicos lo que nos recomiendan nuestros amigos de yahoo high performance es manejar dos tipos de cache:

Para contenido dinámico (que puede cambiar) usamos el header cache-control para decirle al navegador que ese contenido necesita revalidar la antigüedad. Esto generalmente utiliza un request en la carga, pero la respuesta es un mensaje HTTP 304, con lo que no se vuelve a transmitir el contenido del archivo, por lo que es altamente mucho mas performante.
Para el contenido estatico (contenido que no cambia “casi” nunca como Imagenes, CSS, JS, Flash, etc), usamos la política “Never Expire”, con lo cual indicamos que ese archivo nunca cambiara, y por ende puede el navegador tomarlo siempre de su cache. Evidentemente, siempre debemos realizar un cambio hasta en las imagenes, por lo que conviene realizar un cambio en el nombre del componente. Habitualmente se utiliza nombre_fecha o nombre_version. De esa forma, cambiamos el recurso y obligamos al navegador a pedir la nueva versión.

Bien, ahora que sabemos porque y que hacer, les voy a comenta un poco del como hacerlo. En principio existen dos métodos para definir que tipo de cache definimos a cada archivo.  En el método dinámico, seteamos el header en el lenguaje de programación que estemos utilizando en el servidor web, eso es fácil de hacer en Python, PHP, ASP, JSP, etc y no voy a dar ejemplos ya que esta lleno. La otra manera es el método “estático” que consiste en definir los header en el .htaccess de nuestro web site. Existen muchas formas de hacerlo, y debemos tener en cuenta la problematica y la distribución de nuestros archivos. Pero la mas fácil y general de hacerlo es como comente en el principio del post.

También, podemos poner varios .htaccess en el site, como ya saben, uno en cada carpeta redefiniendo para ese contenido la política.

Aclaración para HTTPS:

Por una pólitica de seguridad los navegadores no guardaban en cache ningún contenido cuando se trabaja sobre HTTPS o SSL sobre HTTP. Pero desde la versión FireFox3 y una actualización de IE7 permiten que se guarde en cache aquel archivo que contenga la directiva en el header “Cache-control public”. De esta forma lo autorizamos al navegador desde el servidor web a poder hacer uso de la pólitica cache que el crea conveniente para ese componente.

En Resumen, en la actualidad es muy importante para todos los sitios de gran contenido estático como imagenes y demas, hacer un buen uso de la cache de los navegadores. No solo por la performance de los website, sino también por la usabilidad que perderán los usuarios del mismo si no lo tienen habilitado.

Para los mas lectores:

Un post con mucha información sobre el tema

Suerte!