Reduce peso y mejore la velocidad de un sitio Web con la compresión Gzip.
El otro día os hablaba de como reducir las peticiones http de una página web para reducir el tiempo de carga, estaba relacionado con las imágenes. Ahora nos centraremos en los archivos planos: HTML, CSS, JS, XML, JSON, TXT entre otros, y lo que vamos hacer es comprimir “on the fly” con GZip. Nuestro servidor enviará al navegador los archivos comprimidos y el navegador será el encargado de descomprimir estos archivos.
En las imágenes y PDF no se utilizará Gzip ya que estos ya estan comprimidos.
Con esta compresión podríamos reducir el peso entre un 70% y 90%, es muy interesante para reducir el tiempo de descarga y el tráfico mensual de nuestro hosting.
La mayoría de navegadores soportan Gzip, y los que no, cargan la página sin compresión con lo que tendremos ningun problema con navegadores antiguos.
Para activar Gzip en servidores apache, deberás de tener el módulo mod_deflate o mod_gzip y añadir al archivo .htaccess las siguientes líneas:
php_flag zlib.output_compression On
#Nivel de compressión
php_value zlib.output_compression_level 2
Y si lo quieres hacer en PHP deberás de incluir en tus archivos .php al inicio del código:
< ? ob_start(”ob_gzhandler”); ?>
Y al final de tu archivo php:
< ? ob_end_flush(); ?>
Y para habilitar Gzip en Servidores IIS:
http://www.microsoft.com/latam/technet/articulos/200103/art03/default.aspx
Para comprobar las páginas web que utilizan Gzip existe una herramienta online muy útil, que además de informarte si utiliza Gzip o no, te indica el peso con y sin gzip.
Veámos este gráfico con algunos ejemplos reales:
Dejar De Morderse Las UñAs. DiseñOs De UñAs: 
ideas de negocio: 
linux: 
down-7: 
crear facebook:
[...] Ya he ido comentando en varios posts como optimizar un sitio web. Tanto por servidor, comprimir en Gzip, o por contenido, reducir número de peticiones http en imágenes. Estos posts estaba enfocados a optimizar la velocidad de transferencia y reducción de peso y reducción de peticiones http. [...]
Un artículo muy interesante. Pero se me presentan algunas dudas:
1) ¿se incrementa mucho la carga del servidor?
2) Al habilitar la compresión, ¿el servidor comprime todo? quiero decir, ¿podemos evitar que intente comprimir, por ejemplo, los .jpg?
Un saludo y felicidades por el blog.
Hola Pedro, gracias por visitar mi blog. Te voy a intentar responder a tus dudas aunque algunas no las tenga muy claras.
1) Bueno esta pregunta no te la se responder ya que no tengo mucha experiencia con servidores, pero si te puedo decir que la mayoría de grandes webs utilizan la compresión Gzip (Softonic, 20minutos, msn, yahoo, youtube, facebook..).
2) Al habilitar la compresión solo se comprime los archivos planos. Los archivos jpg no serán comprimidos ya que ya es un archivo comprimido.
Espero que te haya servido de ayuda.
[...] A tener en cuenta. El archivo ga.js en Google Analytics ocupa 9kb, ya que está comprimido en Gzip y si solo te limitas a copiarlo en tu servidor y no tienes activa la compresión http Gzip en tu servidor, te ocupará 22kb y la descarga podría ser aún más lenta. Recomiendo que midas el tiempo de descarga del archivo ga.js en google-analytics y en tu servidor. Si en tu servidor es mayor, mejor no utilices está técnica. [...]
Hola Edgar,
Estoy intentando configurar mi sitio para que funcione con la compresion mod_gzip, ya comprobé que el servidor la tubiera habilitada y he hecho los pasos que dices en tu blog, pero no consigo comprimirla, por favor ayudame, que mas hago??
Muchas gracias por el articulo.
Lo estoy probando en mis servicios web, a ver que tal, si se nota en los tiempos de carga.
Saludos!
Muchas gracias por el articulo.
Lo estoy probando en mis servicios web, a ver que tal, si se nota en los tiempos de carga y sobretodo si ayuda a mejorar porcentajes de salida y de rebotes.
Saludos!
Si que sube la carga del servidor, pero compensa usar esta técnica, que el servidor queda liberado antes para acceptar una nueva peticion http
Muy bueno, lo estoy intentando con paginas interiores, la proxima semana lo hare con toda la webs, vale la pena, te lo aseguro, hace las paginas mas rapidas y de seguro recibiras mas visitas a tu pagina webs.
saludos desde Panama, Felicitaciones y Bendiciones
Perfecte ¡¡
Así es como lo hicimos, un poco de batalla con la compresión de CSS pero al final lo logramos.
De todas formas no hay que obsesionarse sin antes optimizar al máximo el site.
El pluggin “page speed ” facilita enormemente el trabajo.
otro tool
http://tools.pingdom.com/?url=www.edgargranados.es&treeview=0&column=objectID&order=1&type=0&save=true
Hola,
He comprimido todos mis html con gzip a .gz y los he subido al servidor pero creo que no ha servido de nada ¿sabe alguien cual es el siguiente paso? Gracias
¿Para qué sirve ? En otras web donde explican esto no añaden esta línea, por ejemplo:
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
¿Para que sirve la línea …ob_end_flush…? En otras web donde explican esto no añaden esta línea, por ejemplo:
http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/
Saludos,
Pedro
Muchas gracias por la info!
me parece que en la ultima version de joomla ya no hay que escribir ese codigo, lo hace automaticamente, digo creo, no estoy seguro
No consigo que funcione
Al inicio de mis paginas
.htaccess
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/.*
Al inicio de mis paginas
Esto va dentro de una etiqueta de php:
*********************************************
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start();
*********************************************
.htaccess
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/.*
Y para Drupal, como lo haría?
gracias
Lo he probado pero no noto nada.
Es normal?
Hola gracias por esta imformacion.
e terminado mi primera pagina web y me e dado cuenta de que es demaciado pesada y me gustaria que me echaras la mano con este problema que tengo mi duda es en donde enque parte coloco este codigo mi servidor es apache y mi pagina es html.
te estaria super agradecido por tu ayuda amigo……….
.htaccess
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/.*
A mi tampoco me funciona, voy a comprobar si está activado mod_gzip…que faena. Por cierto, un posto muy práctico…gracias…
Merci.. comprimiendo los archivos haciendo uso de php, he reducido el peso de 10,795kb a 2,565kb.. muchas gracias por el aporte!
Buenas Edgar
Quiero aprender a hacer en mis webs, a mi me ayudo un informatico pero en cada pagian pone una cosa.
Yo tengo puesto en el inicio del php:
y al final del include de pie:
y en el .htaccess
#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”
peron creo que nada referido al gzip en el htaccess
Eso es correcto??
si repito ese codigo en otras webs ¿se estará haciendo bien?
Un detalle del que veo que no se han percatado, o no lo han indicado, y ya que la info me vino bien se lo indico:
valor mínimo de compresion:
php_value zlib.output_compression_level 1
y por si no se fijaron esto la hace aún más ligera, valor máximo:
php_value zlib.output_compression_level 9
Un saludo.