Enable GZip Compression using .htaccess

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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.

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

0 0 vote
Article Rating

Related Post

Subscribe
Notify of
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kirubakar Udayakumar

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

canciller

beautiful website, beautiful article.

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 Fischer

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