Comprimir con GZIP archivos JS (Javascript) y CSS

  • Por
Por qué nos interesa comprimir con GZIP los archivos de código fuente Javascript, con extensión .js, o las hojas de estilos .css, y cómo podemos configurar nuestro servidor para ello.
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 JSTamaño sin comprimirTamaño comprimidoAhorro en KB
mootools-1.2.3-core-yc.js66.7 KB20.8 KB45.9 KB
mootools-1.2.3.1-more.js6.3 KB2.5 KB3.8 KB
desarrolloweb.js39.7 KB9.5 KB30.2 KB
TOTAL112.7 KB32.8 KB79.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.

Nota: Como hemos explicado en diversos artículos de DesarrolloWeb.com, el htaccess es un archivo llamado ".htaccess" que se coloca generalmente en la raíz de publicación de nuestro sitio web y sirve para configurar el servidor web Apache, en ese directorio donde lo colocamos y todos sus subdirectorios.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

german

30/11/2010
duda con respecto a gzip
tengo dudas con Gzip, testie mi sitio con wget y funciona bien, pero me surgieron las siguientes dudas.

1- es posible comprimir con GZIP archivos que invoco con javascript?
2- si al punto uno, se llamara al archivo con un Selectbox?

es decir
<script>
$.ajax({
type: "GET",
url: 'archivo_XML.xml',
dataType: "xml",
.....
</script>


mi archivo .htaccess

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml

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

Ruqui

13/12/2010
Comprimir con gcif
Hola:¿podrías decirme en que lugar del HTLM de mi web exactamente tengo que colocar <Files *.js>
SetOutputFilter DEFLATE
</Files>
Muchas gracias por la explicación y por la respuesta si eres tan amable

Carlos

24/10/2011
Compresión vs carga servidor
Me parece bien este tema de la compresión, pero supongo que esto está bien si se cachean los archivos comprimidos de alguna forma y sólo se recomprime cuando cambien los originales o cuando pase un cierto tiempo. Si se comprime en tiempo real, ¿no se convertirá en una carga tal que al final pueda ser peor el remedio que la enfermedad?. Imaginemos un escenario de páginas con millones de visitas mensuales, que además compartan servidro con otras muchas páginas más.

En definitiva, y como veo que ustedes la estais aplicando. ¿Es realmente efectiva mirandolo desde un punto de vista más global? ¿Sería más efectiva con el cacheo de los archivos comprimidos? ¿como se podría hacer esto último si fuese realmente mejor?.

Ariel Rodríguez

29/1/2016
.less de Magento
Se puede comprimir archivos .less que usa Magento en sus sitios de comercio electrónico?

jose

08/6/2016
Usar versiones minificadas de los js
Mi pregunta es si en lugar de hacer todo esto, no sería más sencillo usar versiones minificadas de los archivos .js y .css.
La única pega que le veo haciéndolo de esta forma es que cuando quieras editar un js, tendrás que abrir el NO minificado, hacer el cambio y posteriormente volverlo a minificar.