Meth Blog

Con el surgimiento de la Web 2.0, y resurgimiento de la programación JavaScript, gracias a la aparición del tan famoso XMLHttpRequest, cada día los usuarios de Internet tienen que bajar páginas más pesadas, ya que vienen acompañadas de mucho JavaScript, que añaden mucho dinamismo a las páginas, constituyendo las llamadas RIA.

Esto ha hecho que aparezcan unos frameworks dedicados a JavaScript, para poder facilitar la programación de estas RIAs. Hace tiempo, cuando aún estabamos en la Web 1.5, durante el primer boom del .com, en la que el DHTML era el rey, también el uso de JavaScript era intensivo, pero los usuarios sabían que las páginas le iban a tardar en cargar un buen rato, pero hoy en día con las conexiones de banda ancha, los usuarios esperan que la página cargue rápido, y esto es difícil cuando realizas 5 llamadas al servidor para enviar 5 archivos .js, que entre ellos suman unos 120kbs (en el mejor de los casos), además de sumar las llamadas a los archivos .css, que con la vuelta al diseño basado en capas, porque en el principio de los tiempos (o al menos mis principios en el diseño web) no se usaban tablas, sólo cuando eran estrictamente necesarias, este tipo de archivos se ha vuelto más importante para posicionar todas las capas, y darle un diseño a todos los aspectos de la web.

La solución al problema es reducir todos los .js a un único archivo, al igual que los .css. Esto es difícil cuando estás desarrollando, tener que unirlo todo en un archivo donde el caos seguro que reinará y será difícil hacer un pequeño cambio, por lo que es necesario tener varios archivos y ¿luego?. Luego hay dos opciones, o los unes tu solito en uno, o utilizas un PHP que los una, yo opté por la segunda.

Navegando por la red me encontré un fantástico archivo llamado combine.php, al que le pasas todos los .css y .js que tengas y así envias un único archivo para JavaScript y otro para CSS. El uso sería combine.php?type=css&files=mi_primer.css,mi_segundo.css,.... o combine.php?type=javascript&files=mi_primer.js,mi_segundo.js,.... con esto nos ahorramos realizar varias llamadas al servidor, por lo que la página carga más rápido, cada llamada supone una nueva conexión al servidor además de la actual para descargar el HTML. Esto también ayuda mucho al servidor al no tener que atender muchas llamadas. Otra cosa que se agradece a este script, es que tiene un directorio cache/ para guardar los archivos generados y no tener que ejecutar el script por cada visitante.

Este script (combine.php), también nos comprime mediante Gzip el archivo generado, por lo que nos ahorrará unos cuantos Kbs.

Pero esto no es suficiente (o al menos pienso yo), por lo que me puse a buscar como comprimir más mis .css y .js. Navengando nuevamente me encontré con CSSTidy, que nos permite comprimir nuestros archivos CSS aún más, yo tenía un archivo CSS que ocupaba 4kbs, tras pasar por CSSTidy se quedó en 2.8kbs que comprimidos con Gzip se me quedaban en apenas 1kb (redondeando), así que calcula me ahorré 3kbs en un archivo con unas 70 líneas de CSS, si tienes un archivo mayor o varios archivos el ahorro es mayor.

En lo referente a JavaScript tuve que buscar y buscar, hasta que al final encontré JavaScript Packer, una maravilla que comprime los archivos .js hasta donde jamás habrías imaginado, además de ofuscar el código, cosa que no me agrada demasiado, pero que es necesaria para poder tener un código lo más ligero posible. Como ejemplo está el ya mencionado JQuery, que de 61kbs que ocupa la versión completa, tras pasar por JavaScript Packer se queda en unos pauperrimos 20kbs, que una vez comprimidos con Gzip puede llegar a ocupar unos 8kbs, así que imagina de 61kbs hemos llegado a enviar unos 8kbs al usuario, 53kbs de ahorro en un archivo .js, algo que yo creo que es como para pensárselo seriamente. Para poder tener todas las bondades de estas herramientas tuve que modificar el archivo combine.php, que puedes ver en Google Docs.

Espero esto sea de utilidad a todos los desarrolladores Web que lean mi blog, y si resulta útil pues las gracias, que mis semanas de investigación en la red he tenido para poder hacer esto.

PD: Por cierto David, el jsquicktags.js lo dejé en tan sólo 3kbs así que te aconseje lo adoptes en tus desarrollos. Un saludo.