Estamos haciendo un Manual sobre las ventajas y métodos para comprimir con GZIP / Deflate los archivos de una web. Hasta ahora hemos conocido las ventajas de comprimir los archivos y un primer método para comprimir el código de las páginas PHP enviado al navegador. Sin embargo, la idea de la compresión debemos extenderla también a otros archivos de texto y no sólo al código HTML de las páginas web y cuando me refiero a archivos de texto, no sólo estoy hablando de los .txt, sino cualquier código del sitio web que está basado en texto, que se envíe al navegador para interpretar y renderizar la página.

El código de la página, como sabemos, está compuesto por varios elementos, como el propio HTML del documento, imágenes, hojas de estilo, archivos Javascript, etc. Las imágenes en realidad ya está comprimidas, puesto que los formatos usados en páginas web, como GIF, JPG o PNG, ya tienen la compresión del propio formato gráfico. No obstante, ficheros como las hojas de estilos (extensión .css) o los códigos Javascript (normalmente con extensión .js) se crean como archivos de texto plano, que no tiene ninguna compresión. Por ello, son ideales para enviarse comprimidos al navegador.

Para que esto quede bien claro, pensemos en el código de CSS de este mismo sitio, DesarrolloWeb.com. En el momento de escribir este artículo tenemos un archivo de CSS que ocupa 33.4 KB. Pero ese archivo se envía comprimido con GZIP, por lo que realmente lo que se está enviando al navegador es un archivo con 7.2 KB. La diferencia es, cuando menos, relevante. Lo cierto es que el CSS se transfiere una vez, en la primera visita del usuario, pero luego en páginas siguientes que pueda ver, o en visitas sucesivas, ese CSS se toma desde la Caché del navegador, así que ese ahorro de transferencia por enviar el archivo comprimido sólo se nota en la primera página que el usuario visita, pero aun así ayudará a reducir considerablemente la primera carga y por tanto será positivo.

Los archivos Javascript también se pueden comprimir para obtener ventajas similares, igual que los CSS podemos hacer que pesen entre un 60% y un 90% menos que los archivos no comprimidos. Sobre todo, pensando que los sitios más modernos utilizan bastante código Javascript, para hacer lo que se llaman aplicaciones enriquecidas en el cliente, la compresión con GZIP será fundamental para una rápida carga del sitio.

Por ejemplo, en DesarrolloWeb.com utilizamos el framework Javascript Mootools y también unas librerías relacionadas llamadas Mootools More para generar interfaces de usuario avanzadas. Pero además utilizamos una buena cantidad de scripts Javascript creados por nosotros mismos y basados en ese framework para animar y aportar dinamismo al web. Si sumamos todos los Javascript que utilizamos en una página básica del sitio tendremos unos ahorros de transferencia considerables, como se puede ver en la siguiente tabla:

Archivo JS	Tamaño sin comprimir	Tamaño comprimido	Ahorro en KB
mootools-1.2.3-core-yc.js	66.7 KB	20.8 KB	45.9 KB
mootools-1.2.3.1-more.js	6.3 KB	2.5 KB	3.8 KB
desarrolloweb.js	39.7 KB	9.5 KB	30.2 KB
TOTAL	112.7 KB	32.8 KB	79.9 KB

Como se puede ver, el ahorro total que obtenemos en estos tres archivos es de aproximadamente 80 KB y además no son los únicos ficheros .js que utilizamos en el sitio web, con lo que el ahorro en algunas páginas todavía es mayor.

Si utilizamos cualquier otro framework Javascript, como el popular jQuery, el ahorro también será tan representativo como con Mootools. Por ejemplo, en la página de inicio de jQuery nos informan que el framework pesa 24KB "Minified and Gzipped", pero si nosotros lo descargamos veremos que el archivo realmente ocupa 70.5KB. Lo que nos quieren decir es que, si tenemos configurado nuestro servidor para que comprima los archivos con GZIP antes de enviarlos al cliente, el peso real del archivo de jQuery que se enviará al cliente es de 24 KB, osea, casi un 33% del peso del fichero original (sin comprimir).

Configurar un htaccess para comprimir archivos CSS / JS o similares

Ahora que ya sabemos bien las ventajas de enviar comprimidos los archivos de código fuente del sitio web, veamos cómo hacerlo en Apache. La manera más cómoda y al alcance de más personas, para comprimir los archivos JS o CSS es definir un archivo htaccess con las directrices de configuración de nuestro servidor.

En el archivo .htaccess, que contiene texto de configuración para Apache, vamos a colocar varias líneas de código para solicitar a Apache que envíe comprimidos los archivos de extensiones que nosotros deseemos.

Por ejemplo, con el siguiente código estamos diciendo que se envíe comprimidos todos los archivos que tengan extensiones .css (todas las hojas de estilos de nuestro sitio web):

<Files *.css>
SetOutputFilter DEFLATE
</Files>

Observar el *.css para indicar los tipos de archivos a enviar comprimidos. Observar también que se está solicitando el uso del método DEFLATE para la compresión de los archivos.

De una manera similar podemos definir la compresión de los archivos con código fuente Javascript, que tienen extensiones .js:

<Files *.js>
SetOutputFilter DEFLATE
</Files>

De este modo, podemos definir cualquier extensión de archivo y Apache se encargará de enviarlo comprimido de manera transparente para nosotros desarrolladores y también para los visitantes. Es decir, el archivo está comprimido sin que tengamos que hacer nada más en la etapa de desarrollo y por tanto al navegador se le enviará con un peso menor. El cliente web recibirá ese archivo comprimido y lo descomprimirá internamente, sin que el visitante se entere de nada.

En el siguiente artículo seguiremos ofreciendo consejos y métodos de compresión de los contenidos de nuestra web y en concreto veremos cómo definir un htaccess para comprimir de una vez todos los tipos de archivos menos las imágenes.