Are you gzipping your files?

October 25, 2012

One quick way to make your website faster is turning on HTTP Compression, also known as gzipping or mod_deflate. 

This is something that will just take a few minutes of your time but will improve your website’s performance dramatically. 

WHAT IS HTTP COMPRESSION?

From Wikipedia: HTTP compression is a capability that can be built into web servers and web clients to make better use of available bandwidth, and provide faster transmission speeds between both.

Each time a user visits your site, there’s communication happening from their browser to your website’s server. If you are not using HTTP Compression or Gzipping, the files travel the Internet from the server to the browser without any changes. The same way they left, same way they arrive. 

Now when you gzip, the files get zipped (compressed to smaller files) before they leave the server. The server then sends the compressed files across the Internet and get decompressed by the browser before using them. 

Some hosts already gzip automatically your files. But not all of them.

HOW TO CHECK IF YOU’RE GZIPPING OR NOT?

Use gzipWTF.com a handy tool that will show you which resources are not being gzipped by the server, which resources are slow and which are causing 404s.

HOW TO SET UP GZIP COMPRESSION?

For Apache servers here is one way to do it: go to the root directory of your server and open the .htaccess file. Then paste this code:

# ----------------------------------------------------------------------
# Gzip compression
# ----------------------------------------------------------------------

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

  # 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>

Source.

In case you don’t have an .htaccess file you can create one by opening a text editor like Notepad, name the file .htaccess and upload it to your root directory.

If you’re not running on Apache servers then my recommendation is to contact your Web host customer support and request for HTTP compression.

RESULTS

The following images show the timeline of a website I work with. The first image shows the amount of time it took to load and how much it was transferred while NOT using HTTP Compression. In the second image I’m using HTTP Compression and you can see the difference.

Every second counts when it comes to website performance.