Para optimizar la carga de una página web es necesario disminuir al máximo el número de peticiones o el tamaño de los archivos transmitidos. Para ayudar al ahorro de transferencia los servidores web han implementado formas de compresión, mediante la cual el contenido es comprimido antes de enviarlo al browser.
En la actualidad la mayoría de los browsers soportan dos formatos de compresión, ello lo podemos observar en los headers que envía el browser al hacer una petición. En la propiedad Accept-Encoding con dos valores:
- gzip es un formato de compresión libre, desarrollado por el proyecto GNU, es el mas popular pues la mayoría de los browsers lo soportan, además ofrece un ahorro del 66% en promedio.
- deflate menos efectivo que gzip pues ofrece un ahorro de 60%, uno de los pocos sitios que lo utiliza es msn.com.
Que archivos comprimir con GZIP
Es recomendable comprimir solo los archivos html, php, css, js y algunos otros archivos en formato texto. En el caso de archivos jpg, png, gif, pdf estos ya están comprimidos y aplicarle gzip puede incrementar el tamaño de los archivos e incluso el consume de CPU del servidor. Otra regla que hay que tener en cuenta es que se recomienda comprimir archivos de mas de 1Kb.
Utilizar GZIP con Apache 1.3
En el caso de Apache 1.3 la compresión gzip es manejada por el módulo mod_gzip. Para ello se pueden utilizar las sentencias mod_gzip_item_include para incluir archivos a comprimir y mod_gzip_item_exclude para excluir archivos. Luego editamos el archivo .htaccess e incluimos el siguiente código.
mod_gzip_on Yes mod_gzip_item_include file \.html$ mod_gzip_item_include file \.php$ mod_gzip_item_include file \.css$ mod_gzip_item_include file \.js$ mod_gzip_item_include mime ^application/javascript$ mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include handler ^application/x-httpd-php mod_gzip_item_exclude mime ^image/.*
Utilizar GZIP con Apache 2.x
Para versiones de Apache 2.x la compresión es gestionada por el módulo mod_deflate (No confundir el nombre del módulo con la compresión, pues esta genera compresión gzip). Para comprimir los archivos podemos utilizar la sentencia AddOutputFilterByType de la siguiente forma:
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
En nuestro caso tenemos Apache 2.0.54 por lo cual aplicamos el segundo método. Hemos creados dos ejemplos uno sin compresión (http://samples.unijimpe.net/optimization/no-gzip/), en el cual podemos observar que toda la pagina tiene un tamaño de 135.4 Kb y demora en cargar 3.46 segundos.
Ahora si agregamos la compresión gzip (http://samples.unijimpe.net/optimization/gzip/) podemos observar una reducción significante en el tamaño de los archivos. Ahora toda la página tiene un tamaño de 38.8KB con lo cual hemos ahorrado un 71.3%.
Mas Información
Se puede habilitar la compresión con PHP e incluso controlar mas al detalle la compresión de los archivos, para ello les dejo algunos enlaces para encontrar mas información.
Comentarios Total 20 comentarios
Publicado: 02/02/2010 5:48 am
Hola. Es la primera vez que posteo, pero desde hace un tiempo que estoy agregado para recibir las novedades, muy bárbara la información.
Sobre este tema, estoy interesado en agregar a mi Apache 2.2 lo que comentas, pues algunas de las webs que programo tienen scripts y css «pesados».
Lo que no llego a entender es donde meter, por ejemplo, la sentencia AddOutputFilterByType. ¿Es parte del htdocs?¿o es la única línea que tengo que meter en un .htaccess en el raíz del sitio?. Te comento que no tengo la raíz de directorios en htdocs, sino que mediante el vhosts asigno los directorios.
He querido ver en la página de apache, pero tampoco lo he tenido muy claro
Gracias!
Publicado: 02/02/2010 9:45 am
Para activar la compresión GZIP debes crear un archivo llamado .htaccess el cual debes colocar en la raiz de tu servidor web, es decir en la carpeta donde publicas tus archivos html, php, etc.
Publicado: 12/03/2010 1:03 pm
No se quiebren la cabeza tanto con el apache.
@ob_start(«ob_gzhandler»); al inicio es su amigo.
Publicado: 29/03/2010 11:38 am
[…] […]
Publicado: 09/07/2010 8:18 am
Muy Bueno… Justo lo k buscaba… te pasaste…. necesitaba esto con urgencia… saludos.¡
Publicado: 08/10/2010 3:43 am
[…] […]
Publicado: 13/10/2010 12:00 pm
Debo de tener algún problema, pues en mi hosting con apache 1.3 me funciona con todos los archivos menos con .php… la página carga pero no ejecuta el código, y en ocasiones aparece por pantalla… ¿alguna idea? Gracias
Publicado: 10/12/2010 11:30 am
Como sabemos si nuestro servidor soporta este formato? o eso se aplica al crear el .htaccess
Tiene que tener algún requisito despues el navegador del usuario?
Publicado: 22/06/2011 12:45 am
Buenísimo, me sirvió. Lo apliqué recién en uno de mis sitios y hasta ahora va bien, si sigue todo normal lo empezaré a aplicar en los otros sitios donde la demanda es mayor.
Publicado: 25/10/2011 9:36 pm
me parece interesante tu articulo sin embrago me hubiese gustado que incluyas ejemplos de como usar gzip con php, dado que muchas veces no tenemos control directo sobre nuestro apache cuando tenemos contratado un hosting.
un saludo
Jose Luis.
Publicado: 14/12/2011 5:47 am
Muchísimas Gracias ! !
He probado tu código en .htaccess y funciona 100%. Ahora tengo un Page Speed Score del 92/100 ;)
Para conseguirlo también he tenido que añadir el siguiente código para que las imágenes se guarden en caché durante una semana y no estén viajando arriba y abajo una y otra vez:
ExpiresActive On
ExpiresDefault A604800
ExpiresDefault «access plus 7 day»
Un Saludo y Muchas Gracias por tu Post !
Publicado: 13/02/2012 9:46 pm
hola gracias por puclicar esta imformacion super interezante.
yo acabo de hacer mi primera pagina web pero pesa muchisimo trada demasiado en abrir pero no se en que parte poner la comprecion gzip y nose como generarl el codigo .espero que me ayudes a resolver mis dudas GRACIAS…….
Publicado: 08/04/2012 11:55 am
Yo utilizo compresión gzip y otros métodos de optimización
que vienen en el template de boilerplate; incluso hay una versión
para móviles -donde comprimir es aún más importante-.
Publicado: 23/05/2012 8:34 am
Para usuarios novatos en esto, no hay algún manual donde lo explique paso a paso?? Me comprimieron el código, creo que bien hecho pero para el resto de las webs me gustaría aprender a hacer lo yo.
Gracias!!
Publicado: 23/05/2012 8:36 am
Voy a intentar contribuir, mi informático subió este código para las expiraciones duren un mes
#añadimos expiración a los headers
ExpiresActive On
ExpiresDefault «access plus 1 day»
ExpiresByType image/png «access plus 1 month»
ExpiresByType image/jpg «access plus 1 month»
ExpiresByType image/jpeg «access plus 1 month»
ExpiresByType image/gif «access plus 1 month»
ExpiresByType image/ico «access plus 1 month»
ExpiresByType application/javascript «access plus 1 month»
ExpiresByType text/css «access plus 1 month»
ExpiresByType image/x-icon «access plus 1 year»
#ExpiresByType application/javascript «modification plus 2 weeks»
#ExpiresByType text/css «modification plus 14 days»
Publicado: 11/08/2013 2:25 am
Amigo no se da cuenta que este último comentario enlaza una web Sexshop y que encima tiene virus.
Saludos
Publicado: 11/08/2013 4:53 pm
Gracias por tu comentario, he eliminado el comentario anterior pues efectivamente era un enlace tipo spam.
Publicado: 12/04/2014 4:04 pm
Esto es lo que tengo en mi .htaccess y no me funciona la compresión, que estoy haciendo mal? me falta algo? me sobra algo?
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
ExpiresActive On
ExpiresDefault «access plus 1 seconds»
ExpiresByType text/html «access plus 1 seconds»
ExpiresByType image/gif «access plus 2592000 seconds»
ExpiresByType image/jpeg «access plus 2592000 seconds»
ExpiresByType image/png «access plus 2592000 seconds»
ExpiresByType text/css «access plus 604800 seconds»
ExpiresByType text/javascript «access plus 216000 seconds»
ExpiresByType application/x-javascript «access plus 216000 seconds»
#Compress
SetOutputFilter DEFLATE
#Compress
SetOutputFilter DEFLATE
#Compress
SetOutputFilter DEFLATE
#Compress
SetOutputFilter DEFLATE
#Compress
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Publicado: 12/04/2014 4:09 pm
Comentar también que mi servicio de hosting es 1and1, no se si tenga algo que ver, no estoy muy versado en diseño web.
Saludos
Publicado: 03/07/2014 6:00 pm
Buen tutorial, gracias por el aporte.
;)