Home
Tutorials
Gzip And Deflate Compression In Web Development

Gzip or Deflate Compression

How to enable Gzip or Deflate compression on your site via .htaccess.
Provided by Leumas Naypoka / www.apphp.com

What is Gzip/Deflate compression and why do you need it?

Compression is a simple and effective way to save bandwidth and speed up your website. When a user hits your website there is a call that is made to your server to deliver the requested files (actually they are HTML, CSS files, Javascript files, images etc. The bigger these files are the longer it's going to take for them to get to your browser. Also it takes much more time to appear on your screen whether you work on stationary or mobile devices.

You may ask the question: why it is so important today, when bandwidth and connection are so high in the Internet. The answer is because it reduces the time it takes for a website to transfer the page files and CSS files which ultimately reduces the load time of your website, so your visitors will enjoy fast work even if they have a very slow Internet connection and your pages are too havy (more than 500-700Kb).

How does it work?

Gzip (or Deflate) compresses your webpages and CSS files before sending them to the browser. And as we said before this operation drastically reduces transfer time since the files are much smaller. In terms of cost versus benefit, gzip compression should be near the top of your page speed optimizations if you don't have it setup already.

Gzip is actually a very simple idea that has extremely power (when put to good use of course). Gzip locates similar strings within a text file (in our case this is commonly CSS and HTML codes) and replaces those strings temporarily with some placeholders to make the overall file size smaller.

The reason these compressions work so well in a web environment is because CSS files and HTML files use a lot of repeated text and have loads of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70-80%! To make it works for you - Gzip has to be enabled on your webserver (it is relatively straight forward).

Standard HTTP Request and Response

Compressed HTTP Response

Some important details

The tricky part of this compression is that both browser and server knowing it's ok to send zipped files. The agreement has two parts:

The browser sends a header telling to the server it accepts compressed content (gzip and deflate are two compression schemes): Accept-Encoding: gzip, deflate
The server sends a response to the browser if the content is actually compressed: Content-Encoding: gzip

Ok, now you have to take in account if server doesn't send the content-encoding response header, it means that the file is not compressed (such settings are default on many servers). The "Accept-encoding" header is just a request by the browser, not a demand. If the server doesn't want to send back compressed content, the browser has to make do with the heavy standard version.

Setting up your server

The important thing you have to know is that we can't control the browser. It either sends the Accept-encoding: gzip, deflate header or it doesn't.

Our job is to configure the server so it returns zipped content if the browser can handle it, saving bandwidth for everyone (and giving us more happy users).

For IIS, enable compression in the settings.

In Apache, enabling output compression is fairly straightforward. Add the following to your .htaccess file:

Code Sample 1.


# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Apache actually has two compression options:

mod_deflate is easier to set up and is standard
mod_gzip seems more powerful: you can pre-compress content

Deflate is quick and works very good, so you may use it or use mod_gzip if that what you prefer. In either case, Apache checks if the browser sent the "Accept-encoding" header and returns the compressed or regular version of the file. However, some older browsers may have trouble and there are some special directives you can add to correct this.

If you can't change your .htaccess file, you can use PHP to return compressed content. Give your HTML file a .php extension and add this code to the top (for PHP).

Code Sample 2.


<?php
if(substr_count($_SERVER["HTTP_ACCEPT_ENCODING"], "gzip")){
    ob_start("ob_gzhandler"); 
}else{
    ob_start();
}
?>

We check the "Accept-encoding" header and return a gzipped version of the file (otherwise the regular version). This is almost like building your own web server (what fun!). But really, try to use Apache to compress your output if you can help it. You don't want to monkey with your files.

Verify Your Compression

Once you've configured your server, check to make sure you're actually serving up compressed content.

Online: Use the online gzip test to check whether your page is compressed.
In your browser: Use Web Developer Toolbar > Information > View Document Size to see whether the page is compressed.
View the headers: Use Live HTTP Headers to examine the response. Look for a line that says "Content-encoding: gzip".

Comments

Please post only comments related to the original tutorial. Be polite and helpful, do not spam or offend others.

Members Login