Optimizing site with GZIP Compression

Most of the websites today are exceeding on a 20kb size standards per web page. Some may reach 100kb file size or more due to the complexity of css, HTML and JavaScript files they're using. These often resulting to poor or incomplete loading and slow server response.

Users don’t like slow site, search engine too. Larger pages adversely affect search engine ranking and bounce rate in SEO aspects. In this issue, compression provides best solution to make the slower sites load faster. Compression compresses HTML, CSS, and JavaScript with no encoding or encryption used.

The power of gzip compression

"(GNU ZIP) A popular compression program in the Unix world that is also available for Windows and Mac. Using the .GZ file extension, gzip compresses only a single file and is therefore often used in combination with the Unix "tar" utility when more than one file must be compressed. Tar combines multiple files into one archive, and gzip compresses that single archive, creating a file with the extension .TAR.GZ."

- freedictionary

Google also explained this in video. Take a look.

Wait, how does Gzip Work?

Before we go deeper, let us first understand the process of requesting a website page and displaying it in a browser. Please take a look this illustration below. These are typically the steps on how we access pages of a certain sites.

Let say that index .html filesize is 80KB due to cluster of CSS, javascript and HTML elements. When the users access the page, he/she is making a request to the server to display the file. The server now will find the requested file and make a response and then basically display on the users browser.

So, where the gzip compression intervenes?

As you can see in the illustration that the requested page is 80KB and it sounds too heavy for a single webpage file. Slow server response and poor loading are the results of it. So, what do we got to make it load fast? – compress it, zip it.

Here is the illustration on how gzip compression work

As you take a look at the result, the size file is reduced due to compression. So, it is now display on the browser with less bandwidth used. The server look for the requested zipped file and returned a response if compression is enabled. Then, page is displayed in compressed version - happy users.

Go and set it up.

We can acquire compression in two steps; it can be set up in htaccess or in php file itself.
Htaccess

Add the following to your .htaccess file:

############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

# Insert filter on all content
SetOutputFilter DEFLATE
# Insert filter on selected content types only
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary

The two compression options that can be use in .htaccess file are:
1. mod_deflate
2. mod_gzip

mod_deflate is the standard and easy to set up compression while the mod_gzip is complex but more powerful one.

If .htaccess steps are not working for you; use PHP to make the compression possible. Please make sure that you change your html file to php first before adding the following code.

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

Test if compression is working?
You can your website if compression is working. Simply add your website address in the following compression checker site.
1. http://www.whatsmyip.org/http_compression/
2. http://www.gidnetwork.com/tools/gzip-test.php
Hope this article helps you to understand the compression better.