Reduce Your Page Size with GZIP Compression

Big sites with much features are often great and such, but most of the times take decades to load. With GZIP compression, you can download the requested files in a great compression. When the server is requesting your request and finds it, it will pack each file in, send it over to you and your browser will unpack the files again.

It looks like a hassle, but most of the time it has proven to be helpful. Although the packing-in will increase the load time, you won't notice this with big sites. The time to compress is shorter than the time which is needed to load all files. Maybe you're familiar with the setting in programs as vBulletin. An on/off switch and the level of compression. This setting only covers the main document of the requested vBulletin page. With the use of .htaccess you will have more control over the GZIP compression.

The following code works similar to the function in programs as vBulletin. Only with this method it will cover every php-page on your server instead of only vBulletin-files for example.

Code:

<ifmodule mod_php5.c>
php_flag zlib.output_compression On
php_value zlib.output_compression_level 1
</ifmodule>

Firstly, the ifmodule wrapper will prevent you from receiving a 500-error. Although you will experience more trouble if your whole php is experiencing problems. The second sentence enables the compression and the third sentence is for the level of compression. You can choose 1 to 9, although in most cases you will experience level 1 as best choose.

Until now, you won't feel an improvement if your whole site is a vBulletin forum for example. So now we will look into gzipping more stuff.

Code:

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE application/x-javascript text/css
</ifmodule>

This ifmodule will prove more worthly, as your site will keep functioning while you could experience trouble with the mod_deflate function in apache. The rest of the code functions as a filter which will use of the capitalised word DEFLATE. After that, you can enter the mime-types you want to compress.

HTML: text/html
CSS: text/css
JS: application/x-javascript

Alternatively, you can also target file extensions instead of mime-types. The code for that looks a bit different:

Code:

<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

For adding more filetypes, just add a "|" after the word 'css'. I recommend only doing this for .html, .js and .css. Images can often not be compressed any more, so in that case you will be wasting server resources.

The effects can be measured with all sorts of tools. If you are using FireFox, try using the Web developer add-on. It has many good features for webmasters, including file size checks. Check the effects on my vBulletin forum index:

Code:

Documents (2) - 15 KB (69 KB uncompressed)
Images (24) - 133 KB
Scripts (13) - 74 KB (215 KB uncompressed)
Style Sheets (3) - 4 KB (13 KB uncompressed)

Total (42) - 225 KB (430 KB uncompressed)

52% of total is compressed. Only those damned images...

Depending on the way your site is build, you can get even more than my 52% compression! Caching your files is a good next step...

This post has been promoted to an article

 

You will need to turn off GZIP within vBulletin before implementing this method. Double compression can disable your forums and make them inaccessible.

vBulletin Options -> vBulletin Options -> Cookie and HTTP Header Options.

 

Thanks Wayne, I've added this to the article.

 

Thank you for placing it