Enable GZip Compression using .htaccess

  • Avinash
  • 5
  • Apr 26, 2012
  • Web Server

Its a best practice to serve the compressed content over the internet to dramatically save the bandwidth of the user. In this article I will cover how to compress the static content over the internet using Apache and .htaccess file.

Let me cover bit of introduction first for this. We can compress content using two different methods: GZip and deflate.

Introduction

GZip method was used in earlier version of apache (before apache 1.3). But after that apache introduced deflate method which is not much effective as Gzip (But still it is very good). But GZip is no more supported after apache 1.3. So in now a days you must have Apache greater than 1.3 and if not you must upgrade to latest version.

To take an advantage of this compression facility you must have apache module mod_deflate enabled. To enable this module you just need to uncomment this module line from httpd.conf file.

After enabling this module your server is ready to provide the compressed content. But server will create compressed content only if it receives appropriate headers from the client. So now to enable this headers you need to place below code in your htaccess file of the site to inform server to provide the compressed contents.

.htaccess code

# force deflate for mangled headers # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/ 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 # HTML, TXT, CSS, JavaScript, JSON, XML, HTC: FilterDeclare COMPRESS FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype FilterChain COMPRESS FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no # Legacy versions of Apache AddOutputFilterByType DEFLATE text/html text/plain text/css application/json AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE text/xml application/xml text/x-component AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml AddOutputFilterByType DEFLATE application/atom+xml AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font-ttf font/opentype
<IfModule mod_deflate.c>
  # force deflate for mangled headers
  # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  <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>

  # HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
  <IfModule filter_module>
    FilterDeclare   COMPRESS
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
    FilterChain     COMPRESS
    FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
  </IfModule>

  <IfModule !mod_filter.c>
    # Legacy versions of Apache
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font-ttf font/opentype
  </IfModule>
</IfModule>

After placing above code in your htaccess file have a look at request header of you site. You can see one mode additional header over there which is “Accept-Encoding“. It means the requesting client is able to handle the given compression type for the content and will provide the compressed contents.

Accept-Encoding:gzip,deflate,sdch
  Accept-Encoding:gzip,deflate,sdch

Result

Have a look at below image to how much compression takes place. So ultimately it will improves the performace of your website.

htaccess gzip compression

In above image you can see that actual page size is 707 KB but it comes to 401 KB using this compression.

Conclusion

I would strongly recommend to have this implemented as early as possible. Because I have lots of reason to implement this and i have not even single reason to not implement this. As this is considered as a best practice for the web development.

Share you thoughts over this article via comments. And don’t forget to Subscribe to get latest updated right into your inbox, Follow us on twitter and Like us on facebook.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • Kirubakar Udayakumar

    Its awesome post. Its good. Expecting more advance Concepts.

  • canciller

    beautiful website, beautiful article.

  • http://www.earmin.com Armin

    Thannks for your code, but it doesn’t compress CSS and JS. Pagespeed still tell that js and css files are not compressed.

    http://www.gidnetwork.com/tools/gzip-test.php
    result: GZIP=NO

    http://www.whatsmyip.org/http-compression-test/
    result: GZIP=NO

    GZIP compression score in gtmetrix is 60 (CSS and JS are not compressed)

    • Will Mezker

      Try this one, it’s the most reliable GZIP tester I found so far: http://www.giftofspeed.com/gzip-test/

      If this tester says it doesn’t work you need to re-examine your mod_deflate (in .htaccess file) settings.

  • David Nguyen

    very good, this is best solution