Grow your CSS skills. Land your dream job.

Last updated on:

Active Gzip Compression

Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip.

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

Comments

  1. Permalink to comment#

    What happens to the 10% who don’t support it?

  2. Peter Dubrovski
    Permalink to comment#

    Under Apache 2 better use mod_deflate

  3. I’ve never understood how to get GZIP working. By just copying this into the .htaccess it will GZIP all my content?

    • Permalink to comment#

      Some server don’t support it. This might be the reason, why it’s not working for you. The example above will compress the follwing file types:
      - text
      - html
      - xml
      - css
      - js

      Important is not the file extension, but how the server handles the files. Images – no matter what format – will not be compressed with this setting. This wouldn’t make sense, because all image types already use compression in one way or the other. And these compression methods are much more effective in handling bitmaps (image data).

  4. John
    Permalink to comment#

    Does this have a downside?
    What happens in browsers which do not support gzip when using this?

  5. Warrick
    Permalink to comment#

    I have a question as a .htaccess noob.

    How does this code work?
    I have added it to mu .htaccess file and Yslow in FireBug says that I do not have gzip compression?

    Any ideas

  6. i want to know where is the located .htaccess file where is put this above code and also tell me whats the procedure to do this gzip/deflat integration.

  7. Permalink to comment#

    i have add that string but did not work. my server use apache 2

  8. D. Schmitz
    Permalink to comment#

    I use this one for gzip and deflat


    # BEGIN GZIP
    # mod_gzip compression (legacy, Apache 1.3)
    <IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|xml|txt|css|js)$
    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.*
    </IfModule>
    # END GZIP

    # DEFLATE compression
    <IfModule mod_deflate.c>
    # Set compression for: html,txt,xml,js,css
    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
    # Deactivate compression for buggy browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html
    # Set header information for proxies
    Header append Vary User-Agent
    </IfModule>
    # END DEFLATE

    what do you think about this code?

    • Permalink to comment#

      Just gave it a test and worked great, thanks!

    • Mike
      Permalink to comment#

      I have a page load javascript which lets me know what the load time is. After I added this to the .htaccess file in my public_html root my sites load time went from around 2.2-1.5 seconds on mobile to 0.8-0.4.

      Less than HALF A SECOND.

      Optimize your CSS, enter this…mind blowing.

    • Ville
      Permalink to comment#

      Thank you, sir!

    • Fantastic, many thanks.

      Have just checked one of my test sites and it’s compressed to over 70%!

      I have added this to httpd.conf. Is this ok or should you always add this code into .htaccess files where needed?

      Thanks again,
      James

    • Sarika
      Permalink to comment#

      Hi I cant gzip my files. I could not understand more from searching over the internet. I installed apache tomcat(version 6). Put the var file in webapps. created an httpd.conf file and put it in conf folder. I dont know more. Please help me. Copied the above snippets into it. But I cant find any changes.

    • Carl P
      Permalink to comment#

      So, where does this code go? Is it just a PHP file that you stick in the root directory of your site?

  9. Manav
    Permalink to comment#

    I use this to gzip my php pages
    php_value output_handler ob_gzhandler
    it doesn’t work with flush() in php
    does any compression work with flush()

  10. André von Kugland
    Permalink to comment#

    You should also add image/svg+xml.

  11. Chris Leaper
    Permalink to comment#

    The title of the article is “Active Gzip Compression” but you’re using mod_deflate! “”

    For GZIP you need to use mod_gzip!!

    e.g. “”

  12. Chris Leaper
    Permalink to comment#

    [code]

    
    [IfModule mod_gzip.c]
        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.*
    [/IfModule]
    

    * Change square for pointy brackets!

    Ref: http://www.parorrey.com/blog/webmaster-tasks/enabling-gzip-compression-on-your-website-on-apache-via-htaccess/

  13. Thank You very Much ! !

    Page Speed Score 92/100 ;))

  14. We’ve just released a free beta service that allows web developers to check for gZIP (and other performance metrics such as resource load time) on all page resources.

    We think this is the fastest, most simple way to check for gzip. We’ve kept in mind that people don’t want to be overwhelmed with data, so the results that you get are straight to the point.

    gzipWTF

  15. Jon
    Permalink to comment#

    This is superb. If old browsers don’t support it, then fine. I’m a firm believer in building for the future. Thanks Chris.

  16. Thank you very much, compressed my site by 69.9% which is what you said it would. Site running much quicker than before.

  17. Narendra
    Permalink to comment#

    Hi,

    I have a question regarding gzip.

    Suppose the server adds the “Content-Encoding: gzip” header.
    But, the actual content is not gzipped (assuming the compression failed and it is sending the data without compression). What will be the impact of this?
    How will http clients (especially browsers) handle this?

    Thanks,
    Narendra

  18. Permalink to comment#

    HI I wanna use this trick on blogger it’s possible and if possible please i want the step to do it

  19. My server always crashes when forcing Gzip, I had to do it in PHP, any ideas?

    • Sumit
      Permalink to comment#

      same here…

    • Are you using a hosting company? Each hosting company is different. Most of them support it but require you to enable it. If you search through their Q and A section usually someone has already asked the questions and an answer was given.

      For example I use Hostmonster, so I had to do this in order to enable it for my website. In the article it shows I had to edit my php.ini folder first to enable it then add the code to the .htaccess file.

      If you don’t have the .htaccess file then you simply just create one and add it. HTML5 Boilerplate has a great .htaccess file that covers most of what is used in the industry.

      http://goo.gl/t4381

  20. why my website still slowing ? why why ?

  21. Jansha
    Permalink to comment#

    Enabling gzip, deflate compression on your website on iis via web.config

  22. Permalink to comment#

    I have a 2 MB png image in my header. There is no way I could decrease the size of the image, it would look too lossy. Is there a way to compress that image in htaccess? This snippet works good for me, 2.7x.

    • Hamish
      Permalink to comment#

      In no way ever is a 2mb image a good idea. Get a hold of photoshop and save for web and devices for goodness sake. If you’re still having troubles with the image size on the png, then maybe the image is not suited as a png, and you need to combine the png with the background behind it and turn it into a jpg. A header image should be 100th the size of this. What if somebody is accessing your site on a metered connection (mobile device) and paying good money to see your 2mb masterpiece?

    • You can use tinypng.org to compress your PNG without any loss in quality and size. :D

  23. Permalink to comment#

    How about this?

    
    
      # Force deflate for mangled headers 
      
        
          SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
          RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        
      
    
      # Compress all output labeled with one of the following MIME-types
      
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
      
    
    
    
  24. Permalink to comment#

    Sorry for the last comment, didn’t display properly. Here is the code again. Just replace the “[" and "]“with “<” and “>” respectively.

    [IfModule mod_deflate.c]
    
      # Force deflate for mangled headers 
      [IfModule mod_setenvif.c]
        [IfModule mod_headers.c]
          SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
          RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        [/IfModule]
      [/IfModule]
    
      # Compress all output labeled with one of the following MIME-types
      [IfModule mod_filter.c]
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
      [/IfModule]
    
    [/IfModule]
    
  25. Stf
    Permalink to comment#

    Hello,

    Sorry incorrect characters when posting here, need to be replaced…

    Here is what my host admin did:

    \# Optimization
    ExpiresActive On
    ExpiresDefault A0

    \# Cache media for 1 year (forever).
    [FilesMatch "\.(gif|jpg|jpeg|png|gif|bmp|swf)$"]
    ExpiresDefault A31536000
    Header append Cache-Control “public”
    [/FilesMatch]

    \# Setup 2 hour caching on commonly updated files
    [FilesMatch "\.(xml|txt|html|js|css)$"]
    ExpiresDefault A1209600
    Header append Cache-Control “proxy-revalidate”
    [/FilesMatch]

    [FilesMatch "\.(php|cgi|pl|py|rb|rhtml|htm)$"]
    ExpiresActive Off
    Header set Cache-Control “private, no-cache, no-store, proxy-revalidate, no-transform”
    Header set Pragma “no-cache”
    [/FilesMatch]

    [IfModule mod_deflate.c]
    AddOutPutFilterByType DEFLATE text/html text/plain text/xml
    [IfModule mod_setenvif.c]
    # Netscape 4.x has some problems…
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    # MSIE masquerades as Netscape, but it is fine
    # BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
    # the above regex won’t work. You can use the following
    # workaround to get the desired effect:
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
    # Don’t compress images
    SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
    [/IfModule]
    [IfModule mod_headers.c]
    # Make sure proxies don’t deliver the wrong content
    Header append Vary User-Agent env=!dont-vary
    [/IfModule]
    [/IfModule]

  26. Thank you, I tested that code and it really worked perfectly

  27. Permalink to comment#

    +1 to André von Kugland add SVG to the mime list.
    Also put it in the apache httpd.conf file if you have control over that. .htaccess files can slow a site down by about 5% (I read it somewhere google it) each request to the site for css, image, or html requires apache to read the htaccess before responding to the request. Putting it in httpd.conf means it will be read once on apache start up.

  28. Our SEO packages are economical and offer every activity
    needed to achieve high search engine rankings. But discovering something new which will yield better results will be more rewarding.
    SEO on Google Zebra will be focused on creating useful, transparent and unique data, but
    the main change will be the power social signal has.

  29. Vijay
    Permalink to comment#

    i need to compress my code with gzip compression using ASP.NET 3.5… any solution ???

    i used below code but its not working on online website… its work on localhost IIS

    <system.webServer>

    </system.webServer>

  30. Vijay
    Permalink to comment#

    Please check below code for above Question

    <system.webServer>
    <httpCompression directory="%SystemDrive%\inetpub\
    temp\IIS Temporary Compressed Files">
    <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"/>
    <dynamicTypes>
    <add mimeType="text/*" enabled="true"/>
    <add mimeType="message/*" enabled="true"/>
    <add mimeType="application/javascript" enabled="true"/>
    <add mimeType="*/*" enabled="false"/>
    </dynamicTypes>
    <staticTypes>
    <add mimeType="text/*" enabled="true"/>
    <add mimeType="message/*" enabled="true"/>
    <add mimeType="application/javascript" enabled="true"/>
    <add mimeType="*/*" enabled="false"/>
    </staticTypes>
    </httpCompression>
    <urlCompression doStaticCompression="true" doDynamicCompression="true"/>
    </system.webServer>

  31. online media
    Permalink to comment#

    use below work for me

    BEGIN GZIP

    mod_gzip compression (legacy, Apache 1.3)

    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|xml|txt|css|js)$
    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.

    END GZIP

    DEFLATE compression

    Set compression for: html,txt,xml,js,css

    AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript

    Deactivate compression for buggy browsers

    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4.0[678] no-gzip
    BrowserMatch bMSIE !no-gzip !gzip-only-text/html

    Set header information for proxies

    Header append Vary User-Agent

    END DEFLATE

  32. Permalink to comment#

    Just lost. Need help. We are hosted on a share server, and it seems the service provider cannot alter the server settings. And compression is not enabled. Now what is that we can do.
    We have primarily HTML pages and the website is designed using Asp.Net. How to compress the html pages using gzip?

    Please help.

  33. Hidayat Mundana

    thank you
    I’ve tried it
    successful, but did not reach 70%

  34. pablo

    Hi,

    I did what was I supposed but after checking in gzipWTF.com it appears like nothing is getting compressed.

    Any idea why? I have no others issues with the code being in .htaccess, it just doesn’t do anything.

  35. i am getting the result for enableing the gzip and caching method but i’m unable to get reslut on server (apache 2.2) side please assist me.

  36. will gzip in.htaccess work if its a shared server? my vendor told me my server doesnt support compression. sorry, newb question

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".