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.

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.