Uninstallme

Desarrollo frontend, estándares web, accesibilidad y más

Otra forma de utilizar la compresión Gzip en archivos Javascript y CSS

Por kcmr, el 25 de Noviembre de 2008 en Buenas ideas, htaccess

En 61924 (sí, este parece ser el nombre del sitio) he descubierto un pequeño truco realmente sencillo, para utilizar la compresión Gzip en archivos Javascript y CSS sin utilizar PHP.

Para ello necesitamos, además de un servidor Apache, un compresor de archivos capaz de comprimir en formato Gzip, como 7zip, y añadir unas líneas en el .htaccess mediante las que indicamos que los archivos con la extensión indicada, utilizan este tipo de compresión.

Simplemente comprimimos el archivo que deseemos en formato .gzip y le damos como nombre de extensión de archivo .jgz en el caso de Javascript o .cgz en el caso de CSS.

Enlazamos al nuevo archivo en el HTML y añadimos estas líneas en el .htaccess


# Compressed javascript files
AddEncoding x-gzip .jgz
AddType application/x-javascript .jgz

# Compressed css files
AddEncoding x-gzip .cgz
AddType text/css .cgz

He hecho la prueba con esta web comprimiendo Mootools y estos son los resultados.

Antes de comprimir (63 Kb)

Captura de Firebug mostrando el tamaño de archivo antes de la compresión

Y después de comprimir (19 Kb)

Captura de Firebug mostrando el tamaño de archivo después de la compresión

Una técnica que merece la pena tener en cuenta si estás usando librerías Javascript pesadas.

6 comentarios

  1. Por doble2fantasia, el 10 de Abril de 2009

    Muy bueno el método. Como a mi me da algo de pereza lo de tener que cambiar las extensiones uso el siguiente método (sacado de aquí, de allá y de más allá (:-))) para compresión estática en hostings compartidos con Apache:

    # Compresión de archivos de texto
    php_value output_handler ob_gzhandler

    # Añado la extensión que por defecto crea 7-zip para GZIP
    AddEncoding x-gzip .gz

    #Si el servidor tiene instalado el módulo rewrite cuando se le soliciten los archivos .css y .js buscará primero si existen con la extensión .gz si no usará los archivos normales

    RewriteEngine On
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.+).(css|js)$ $1.$2.gz [L]

  2. Por doble2fantasia, el 10 de Abril de 2009

    ups, me comió el if. Antes del RewriteEngine On iría:

    IfModule mod_rewrite.c

    Y después del RewriteRule…:

    IfModule

  3. Por kcmr, el 10 de Abril de 2009

    Por cierto, este método acabó por darme algún problema que ahora no recuerdo muy bien y dejé de usarlo. Debería haber actualizado la entrada…
    Creo que en Explorer no me funcionaban los script o algo así. En fin, que no es tan bueno.

  4. Por roberto, el 29 de Diciembre de 2009

    ok pero esto solo funciona con js y css y que de los php y html como podria ponerlo

  5. Por doblefantasia, el 30 de Diciembre de 2009

    Para archivos de texto (txt,htm,html,php) puedes probar con:

    php_value output_handler ob_gzhandler

    Más métodos según los módulos habilitados en el servidor por tu proveedor:

    http://viralpatel.net/blogs/2009/02/compress-php-css-js-javascript-optimize-website-performance.html

    Imprescindible consultar para otros métodos y para otras cuestiones relativas al htaccess Ask Apache
    http://www.askapache.com/htaccess/htaccess.html

  6. Por roberto, el 31 de Diciembre de 2009

    OK GRACIAS

Deja tu comentario

Campos obligatorios marcados con asterisco *