Reduce peso y mejore la velocidad de un sitio Web con la compresión Gzip.

grafico compresion 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:

grafico compresion gzip

26 Responses to “Reduce peso y mejore la velocidad de un sitio Web con la compresión Gzip.”

  1. [...] 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. [...]

  2. Pedro dice:

    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.

  3. Edgar dice:

    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.

  4. [...] 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. [...]

  5. Juan Felipe dice:

    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??

  6. fotoefectos dice:

    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!

  7. fotoefectos dice:

    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!

  8. Jep Aribau dice:

    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

  9. Juan dice:

    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

  10. 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

  11. alex dice:

    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

    • Hazel dice:

      One other issue is when you are in a problem where you will not have a co-signer then you may genuenily wish to try to make use of all of your financing options. You will find many awards and other scholarships or grants that will give you funding to assist with education expenses. Thanks for the post.

  12. Pedro dice:

    ¿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/

  13. Pedro dice:

    ¿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

  14. DoctorPC dice:

    Muchas gracias por la info!

  15. me parece que en la ultima version de joomla ya no hay que escribir ese codigo, lo hace automaticamente, digo creo, no estoy seguro

  16. Carlos dice:

    No consigo que funcione

  17. 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/.*

  18. 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/.*

  19. Y para Drupal, como lo haría?

    gracias

  20. Lo he probado pero no noto nada.

    Es normal?

  21. carlos dice:

    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/.*

  22. CPB dice:

    A mi tampoco me funciona, voy a comprobar si está activado mod_gzip…que faena. Por cierto, un posto muy práctico…gracias…

  23. Daniel dice:

    Merci.. comprimiendo los archivos haciendo uso de php, he reducido el peso de 10,795kb a 2,565kb.. muchas gracias por el aporte!

  24. javier dice:

    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?

  25. Anonimo dice:

    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.

Comentar

* * (no se publicará) ir al contenido