Desde la aparición en la escena del concepto de la web2.0, las páginas web han trasladado una parte de lógica importante al navegador para construir la interfaz de usuario. Mucha de esta lógica hace uso de pesadas librerías javascript de muchos kilobytes. Para asegurarnos de que la experiencia es tan agradable al visitante como pretendemos es necesario optimizar la página. Optimizarla significa tener un servidor eficiente (en software y hardware) y tener unos recursos ligeros que hagan que la página se descargue rápido.

En mi página no necesito preocuparme demasiado ya que recibo una cantidad irrisoria de visitas, pero el año pasado tuve problemas con el tamaño y el número de las peticiones de las librerías javascript. En las últimas obras añadí el script lightbox para mostrar con una animación superpuesta las fotos de este sitio web. No soy muy amigo de las chorraditas que se mueven pero este es un script estupendo porque es muy cómodo y porque no es nada invasivo¹. El script requiere del uso de dos archivos de la librería scriptaculous. Esto suponía tres peticiones independientes al servidor web de ficheros fuente bastante pesados.

Al tener varios ficheros pesados aumenta la latencia ya que se tarda más en bajarse los elementos que componen la página y el resultado es que nuestro visitante se desespera y se larga. En mi caso concreto, se tardaba unos cuantos segundos más en cargar la web de los que consideraba aceptable.

A continuación explicaré el proceso de limpieza de código que se realizó en esta web. Mostraré las instrucciones usadas para Linux pero deberían funcionar en MacOS. Antes de nada decir que es un método sencillo, rápido, eficiente y sobre todo seguro pero no es el que más nos optimiza el resultado. Esto lo aclararé al final del post.

1. Paso primero: Empaquetado de ficheros
Primero juntamos todos los ficheros de script en un único fichero. De esta manera optimizamos la descarga y disminuimos el número de peticiones al servidor web.

cat scriptaculous/prototype.js > all_js.js
cat scriptaculous/effects.js >> all_js.js
cat lightbox.js >> all_js.js

2. Entra en escena JSmin

Limpiamos el código con JSMIN. Nos quitará los comentarios, los espacios en blanco, los saltos de linea y los tabuladores innecesarios. Cuidado con el programa, por defecto nos sobreescribirá el fichero que le introducimos por parámetro así que recuerda tener el fichero original a buen recaudo por lo que pueda pasar.

En su página web puedes descargarte el binario para ms-dos y también te puedes bajar el código fuente en C. También se encuentra disponible para descarga como código fuente en C#, Java, Javascript, Perl, PHP, Python y Ruby. En nuestro caso usaremos el código fuente para crear un ejecutable con el que procesar nuestros ficheros.

Compilamos jsmin

gcc jsmin.c -o jsmin.out

Y lo usamos atacando nuestro fichero all_js.js y poniendo el resultado en all_js_min.js

 ./jsmin.out < all_js.js  > all_js_min.js

3. Compresión
Por último comprimimos el fichero resultante.

  gzip -9 -c all_js_min.js > all_js_min.js.gz

Resultados

• 88 Kilobytes all_js.js - Fichero fuente con todo el javascript de la página web
• 64 Kilobytes all_js_min.js - Fichero fuente pasado por jsmin para limpiarlo
• 16 Kilobytes all_js_min.js.gz - Fichero comprimido

Hemos reducido 3 peticiones a una sola y hemos reducido el peso de los scripts en un 550%.

¿Cómo incluir el nuevo fichero en la página?
No tiene nada especial, tan solo tener en cuenta la nueva extensión incorporada por gzip.
Para incluir nuestro nuevo fichero podríamos usar una linea como la siguiente dentro del head.

‹script src="/css/js/all_js_min.js.gz" 
type="text/javascript"›‹/script›

Otras opciones
Existen otros métodos que suelen comprimir mejor el código pero tienen algunas pegas. Por un lado, algunas propuestas están basadas en un motor en javascript integrado en una página web con lo cual se nos complica hacer actualizaciones frecuentes. Por otro lado, la mayoría intentan rizar el rizo y ofuscar el código fuente acortando los nombres de funciones y variables. Esto es estupendo porque reduce significativamente el peso de los archivos (y protege un poco el código) pero puede traernos problemas si el proceso no lo hace tan bien como debiera y nuestro programa deja de funcionar.

• Memtronic - En javascript. No me parece muy fiable
• ShrinkSafe - Hace un proceso similar al aqui explicado pero ademas ofusca (De forma light y segura) y lo hace con su propio interprete javascript así seguramente sea el método más sofisticado existente. Además te puedes bajar un programa ejecutable java.
• CSS & JavaScript Compressor - En javascript
• Packer - En javascript. Ofusca mediante expresiones regulares así que supongo que no es tan seguro como ShrinkSafe.

Ventajas de comprimir el javascript de nuestras páginas:

• Menos peticiones y más ligeras. Menor tiempo de descarga
• Contra otras opciones este método tiene la ventaja de que el proceso se puede automatizar mediante un script y es muy rápido y seguro.

Decir que algunos frameworks ya incorporan la compresión javascript de serie (Dojo) y que entonces no seria necesario seguir estos pasos. En cualquier caso, si algún lector ha usado alguno de los otros métodos que no dude en ponerse en contacto conmigo para comentarme su experiencia.

¹ ¡Ojo, intrusivo no es una palabra presente en nuestro diccionarío!