Web Server

Enable GZip Compression using .htaccess

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

[cc lang=”apache”]

# 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


[/cc]

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.

[cc lang=”apache”]
Accept-Encoding:gzip,deflate,sdch
[/cc]

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.

Shares:
  • Kirubakar Udayakumar
    Kirubakar Udayakumar
    April 26, 2012 at 11:41 am

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

    Reply
  • canciller
    canciller
    May 2, 2012 at 10:12 am

    beautiful website, beautiful article.

    Reply
  • Armin
    July 3, 2012 at 1:23 pm

    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)

    Reply
    • Will Fischer
      Will Fischer
      November 12, 2014 at 5:27 pm

      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.

      Reply
  • David Nguyen
    David Nguyen
    September 23, 2014 at 6:35 pm

    very good, this is best solution

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *