SummArg | Cursos y recursos para webmasters

Compresión de nuestro sitio web por GZIP

Podemos buscar muchos métodos para optimizar nuestros sitios web, con el objetivo de obtener una navegación más rápida; pero en este caso particular nos gustaría ver un poco sobre la compresión por GZIP.

Esta opción es muy interesante para realizar una optimización, ya que todo el código de la página se comprime, ocupando menos espacio, con la consecuencia de una velocidad más rápida, y también del ahorro de ancho de banda.

Grandes portales como Yahoo y Google utilizan esta técnica en sus sitios, de modo que nosotros también podríamos aprovecharlo. Solo por poner un ejemplo, en un momento la portada de Yahoo pesaba 150kb, pero al trabajar con la compresión se reduce a solo 30kb.

Vamos a lo interesante, ¿cómo hacerlo? Simplemente tenemos que configurar nuestro archivo .htaccess para que el servidor Apache pueda interpretar y proceder a comprimir el código. Veamos varias maneras de hacerlo.

Si queremos que el servidor comprima el código generado después del procesamiento de los scripts PHP, vamos a utilizar las siguientes dos líneas:

php_flag zlib.output_compression On
php_value zlib.output_compression_level 2

La primera línea le indica que se tiene que activar la compresión GZIP para los archivos PHP. La segunda línea indica el nivel de compresión del archivo (cuanto mayor sea el nivel, de 1 al 10) mayor será la compresión, pero también requerirá más tiempo de procesamiento el comprimir los archivos antes de enviarlos. Con una compresión a nivel 2 el nivel de compresión y el tiempo de procesamiento es lo suficientemente equilibrado.

Sin embargo, nuestro sitio no se compone únicamente de archivos PHP, también tenemos otros, de los cuales probablemente tengamos muchos, como los JS y CSS. Sobre todo los JS, que es muy común utilizar frameworks como Mootools o jQuery, aparte otros scripts más que van sumando KB en la transferencia. Veamos de que manera muy simple podemos configurar nuestro .htaccess para la compresión de estos archivos.

Con el siguiente código vamos a establecer que todos los archivos con extensión CSS serán comprimidos:

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

De la misma manera podemos utilizar un código similar para hacer lo propio con los archivos JS:

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

Existe una forma más para configurar la compresión por medio del comando AddOutputFilterByType DEFLATE tipo, que también es para el .htaccess, veamos unos ejemplos:

AddOutputFilterByType DEFLATE text/plain (comprime los archivos de texto plano)
AddOutputFilterByType DEFLATE text/html (comprime los archivos 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

Y para finalizar, probablemente se pregunten: “¿Cómo puedo saber si mi sitio ya está comprimiendo el contenido?”. Cómo este proceso es totalmente transparente para el usuario (efectivamente, al navegar no nos damos cuenta si el sitio está comprimido o no), la única manera que tenemos para conocer esto es examinando las cabeceras HTTP del sitio en cuestión. Si usamos el navegador FireFox, tenemos a nuestra disposición el complemento HttpLiveHeaders, o también el Web Developer Bar que nos permiten visualizar lo que necesitamos.

En esta cabecera el servidor web envía una variable informando si se realizó la compresión o no y, en el caso de que se haya comprimido, el formato con el que se codificó. Esta es la variable a buscar en la cabecera:

Content-Encoding: gzip

Espero que les sea de utilidad, y puedan empezar a utilizar esta ventaja de la compresión.

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Podemos buscar muchos métodos para optimizar nuestros sitios web, con el objetivo de obtener una navegación más rápida; pero en este caso particular nos gustaría ver un poco sobre la compresión por GZIP. Esta opción es muy in…..

  2. Hola que tal?,

    Estoy intentando utilizar este gran tip, es de mucha utilidad, muchas gracias, pero la pregunta que tengo es… Debo copiar tal cual la última lista, la del DEFLATE y pegarla solo en el htaccess?, eso es todo?, o tambien tengo que pegar en el mismo htaccess las dos lineas primeras?

    php_flag zlib.output_compression On
    php_value zlib.output_compression_level 2

    Muchas gracias y saludos!!

  3. hectorejch

    Hola Hoteles Suiza.
    Fijate que la lista del DEFLATE abarca solo un tipo de archivos, y en esa lista NO incluye el PHP, de modo que sería bueno que combines la opción de PHP, junto con la lista de DEFLATE.

    Saludos.

  4. Hola muy bueno tu aporte pero veras, soy nuevo en esto y a lo mejor mi pregunta es algo tonta.
    Pero sino pregunto nunca lo sabre, estas dos lineas
    php_flag zlib.output_compression On
    php_value zlib.output_compression_level 2
    las coloco en todos los archivos php que tenga?????
    al igual que

    SetOutputFilter DEFLATE

    tengo que ponerlo en todos los archivos css que tenga????

Dejar un comentario