Website Administrator Know How Articles

Website Compression Techniques

Synopsis: This article shows a step by step technique on how to add gzip on your Web Site using Php's ob_gzhandler, php.ini, and Apache's .htaccess file. The first assumption this article makes is that you prefer your website to display the .html extension in the visitor's Web Browser. Our second assumption is that PHP is already functional on your website (review our install guides if you need assistance with Apache or PHP setup or installation).

Questions this article seeks to resolve are: "Why should I enable GZip optimization on my Web Site?", "How to enable GZip on my Website to serve compressed html files?" and "Is setup for GZip in Apache PHP the same for Apache-CGI and Apache-Module install methods?".

Apache 2.2 Know how
Skill level required: intermediate - advanced.

Php 5.3 Know how
Skill level required: basic.

Can I hire WebsiteAdministrator.com.au to do this for me?
Yes. Enquire via our online contact form now.

Other articles in this series: GZipping CSS Files

Website Compression and GZip

Test if GZip compression is enabled on your Web Site.

An oddity I noticed on the internet a while back is that there are many web site pages which claim to offer you insight in how you can implement GZip or other forms of compression on your web site pages yet do not themselves use any form of compression on those exact same web pages or even anywhere on their Web Site. Real "guidance" on this issue is seemingly limited to but a handful of very helpful online resources if you can stumble across them. Or perhaps the globally dwindling English speaking community prefers a diet of double standards, curve-balls and further ignorance? This led to a decision to formulate a step guide to cover some GZip basics in a single article.

I would highly recommend you check to see if the web page offering you such information on gzip compression does in fact know how to compress their own website first. You can check this yourself (or check your own web pages) by using our jump to link in the paragraph below.

Jump to gzip compression test resources: Find answers to: "Is GZip compression enabled on my Web Page?" or "Are my GZipped pages compatible with aol, chrome, internet explorer, mozilla, netscape, opera (and many more) browsers?"

The role GZip plays to your Web Site.

GZip's usual role is to reduce the physical size of data that is sent from your web server to the requesting client's web browser. Just as a .gif can reduce the file size of a 256 color image and retain 100% full image quality, so can GZip compress web page data into a reduced size and therefore will dramatically increase the speed of service between your web site's web server and that of your visitor's web browser. A Reduction ratio in the amount of 70% is not uncommon for text type files. GZip has long been supported by most (if not all) of Earth's popular browsers and they readily accept the GZip content encoded information. And so we can see that GZip is like "zipping" or "RARing" but for web site data. Those of you who also have an interest in increasing your Web Site SEO ratings will find this exercise very useful as it aligns with Google's view of what is considered to be a worthy web site. In short, if you are not compressing your web pages, you are doing your visitors a disservice.

How to introduce GZip compression into your Web Site in four steps?

While reviewing this information, it may occur to some of you that you have setup your web site all wrong. There is no prozac for filing systems (far as i know). The sooner you correct the web site's mind (your file layout), the sooner it will get healthier. There are ways to do this without losing incoming links or losing established page ranks etc.

If you have had problems applying the normal solutions for adding GZip compression to your Web Site, you might also find this article of use. Resolving problems can differ according to how PHP is installed on your server. Many PHP GZip solutions offered online are only applicable when PHP is installed as a module of Apache. However, as a general rule, web sites which prefer stronger security do not install PHP as a module of Apache but as a separate CGI handler for Apache's CGI requests. This article is geared to these sorts of CGI web sites, and to make this article even less popular, we again tweak it for those which also have another set of limiting factors to which we then offer resolution in four easy steps. (Though this solution may very well work with your scenario too)

The following configuration options are true in our scenario:
a) Php has been installed using the Apache-CGI option (Apache Module is fine too).
b) The master php.ini is out of our reach (shared server) - though not that important for our use.
c) we are able to add or modify Apache's .htaccess file.
d) Apache's deflate module is either not installed or is unavailable - again, this is not important for our use.

Problem: How do we GZip and return .html urls using php's ob_gzhandler handler to our website visitor?

Solution: Use Apache's rewrite module and pre-append an ob_gzhandler script to the requested .html file.

Method: We rename our .html file extension to a .php extension. However, the visitor still requests this .php file as an .html file. Using the rewrite module, Apache sees the .html request but instead, fetches the corresponding .php file and passes it to Php for handling. Php checks the php.ini file in the same directory as our requested file and learns our compression script may need to be activated before parsing the request. Php then checks whether the visitor's web browser accepts GZip files and then parses the main file accordingly. Php returns the page to Apache which then forwards the file back to the visitor's browser as a GZip compressed (or not) .html file. Easy peasy lemon squeezy!

how to gzip the web

Note: This will of course treat every HTML file in that directory the same which means that all html files would need to be renamed as .php files and they will all be GZipped on the fly for fast service across the web. If there is some strange reason you would not like all your .html pages in that directory to be compressed, you would need to modify your .htaccess file further or create a new directory to house the files you do not want to have GZipped. Both scenarios are relatively easy to do but are outside the scope of this mini-tutorial.

The mechanicals:

Is my Php an Apache Module or CGI installation?

If you are unsure which PHP method your web site uses. use this article link to help uncover your Web Site Configuration with phpinfo.

Four Easy Steps to add GZip Compression to HTML files

We are about to create a test directory/folder on your website. When we have finished these four step and are ready to test our test.html file to see that it has been compressed, this folder will have these files inside:
a) a test.html file renamed as test.php,
b) a php.ini file we have created and
c) a .htaccess file we have created
d) a mygzip.php file we have created

This full method as given below should work easily with any php-apache setup and makes handling very large sites very simple.

And there is also shortcut method to this procedure if you find this method too difficult or if you only have a small site. One can simply add the Php code as given in Step 2 (see below) to the very beginning of your HTML code. We then save and call the file as whatever.php from your web site. (The following method does not require this to be manually added to our html pages as it automates this process with the use of an added prepend command. The GZip code is then called by the php.ini we insert in each webpage's directory.) If you add the code manually and would like the file to display as whatever.html in your visitor's web browser, then you would also need to edit your .htaccess file as per the notes given below. GZipping .css files is on page two of this gzip guide.

1) Create a test file and folder

Let's create our test folder (or sub directory) on your web site first. The reason we create a sub directory (test) is that we do not want to disrupt your site while we are in our testing phase. We use a .htaccess file for this process and we do not want the contents effecting other files until testing is completed. Modifying .htaccess effects all deeper directories (sub directories) in that branch.

The next part of this step is to create a new .html file (or copy, paste and rename an existing one) with the name of test.php. Upload this new file to your new test folder on your server. eg. www.MyWebSite.com/test/test.php. We are going to call this file as www.MyWebSite.com/test/test.html from your web site browser.

Remember, all edits are to be done with a plain text editor eg. notepad and not a word processor like Microsoft word.. Also, any decent html editor (like dreamweaver etc.) will display your .php file just like an .html file during any editing process. You should hardly notice any difference.

This step is complete when you have uploaded your new file to your newly created directory.

Php ob_gzhandler

This method makes use of Php's ob_start("ob_gzhandler") command. It is common to add this code before the doctype! declaration of each HTML (.php) file like so:

<?php
ob_start("ob_gzhandler");
?>

However, we are not going to GZip and send files without first checking if the user's browser will accept the compressed input so the above code is not suitable in it's current state for our purposes. So next we are going expand on this code to add a browser check and then save our new compression script as it's own file. This also saves us the bother of having to add the script to every html file on our site which we will now explain and use.

2) mygzip.php (Pre-appended data)

There is a method which avoids manually adding the ob_gzhandler code to each web page. To do this, we make use of PHP's "prepend" command. We use this to add the GZip compression script to each .php page about to be parsed. You will note this code expands on the previous data to include a check to see if the visitor's web browser will or will not receive gzip encoded content.

Using a text editor (like notepad), copy and save this next piece of code as a separate file. Eg. as mygzip.php and upload it to your Web Site. (eg: www.SomeWebSite.com/mygzip.php)

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

This step is complete when you have uploaded this new file (mygzip.php) into a permanent directory (you can upload it to the test directory we created). The location of this file is is not that important. What is important about this file is in our next step when we create a php.ini which needs to point to the correct location of this file.

(Note: You can of course just copy and paste the above code at the very beginning of all your .php files if you do not want to add the "prepend" file step. You would also skip the php.ini step in this scenario and go straight to step four: .htaccess.)

3) php.ini

Unlike .htaccess, our added php.ini will only work in a single directory (in common setups). If a php.ini file already exists in any directory, then add to it. Do not overwrite it with this data. If you add a php.ini file into any directory, the contents of that .ini file will effect how PHP interacts with that particular directory only. So if you have two directories with .html files you want to serve as compressed files, you will need to have a php.ini file in each of these directories with this same information inside each of the php.ini files in each directory.

But before we begin this step, you will first need to know the full server path to your mygzip.php file you just uploaded. If you have copied the file to your test folder, it will be something like /home/SomeWebSite/public_html/test/mygzip.php. You can easily find out your server path by using the above link which uncovers Web Site Configuration data with phpinfo (located just above the ad). Start the php info script and search the page for an item named DOCUMENT_ROOT in the left column. When found, the right column next to this is your full server path to your root directory. (Note: Some servers use /www/ in place of /public_html/. Use that which you are most comfortable with. And don't forget to add the /test/ part to the path if you need to.

We just add one line of code to our php.ini (note: file=/full server path/mygzip.php)

auto_prepend_file=/home/SomeWebSite/public_html/test/mygzip.php

Remember, this step is to locate your mygzip.php file for PHP. If php can not find it, it will not be able to GZip anything for you with the prepend method.

This step is complete when you have uploaded your new file (php.ini) to the test directory which has the test.php (.html) file we want to gzip.

4) .htaccess

Common sense: When ever you play with .htaccess, make sure you save a working copy to be on stand by in the case you may need to reload it back to your server. These are not beginner techniques and are used at your own risk.

Our final step is to create or modify our .htaccess file. Not all ftp software will display your .htaccess file if it exists. You may need a better ftp program like filezilla ftp or core ftp (check our free downloads page for links). Also, I probably should have mentioned this earlier, but you may need to tell windows not to hide any file types or file extensions when using explorer (file manager). This can be set from "folder options" in explorer. It helps to see the file extension names in order to change them.

This next piece of code tells apache to treat an incoming request for an .html file as a request for a .php file. PHP can then "prepend" our ob_gzhandler script. Apache then returns the handled data back to the originator as .html. Here's the code:

# ======================================================================
# Configure HTML2PHP2HTML handling (php.ini must exist in each dir for cgi config for our prepend command).
# ======================================================================
Options +FollowSymLinks
RewriteEngine On
RewriteRule ^(.+)\.html$ $1.php [L]

This step is complete when you have uploaded your new or modified file (.htaccess) to the highest level directory which contains the .php file we want to gzip (for now, we place it in our test folder as we are still testing if this method is suitable for your use).

Your test directory should now contain:
a) your newly created test.html file that you have renamed as test.php,
b) your newly created php.ini file and
c) your newly created .new htaccess file
d) your newly created mygzip.php

And now you are now ready to test it all out.

And this is what should happen now on our server:

User requests test.html
Apache doesn't bother to look for test.html but looks for and processes our test.php instead
Php checks if GZip result required then processes test.php accordingly
Apache returns output to user as test.html

GZip Compression Test Resources

Testing GZip compression

That's it. You are now able to serve pages compressed with GZip. You can test GZip compression for any Web Page with these linked resource web sites below. Check yours, check mine or check another's.

whatsmyip.org is pretty straight forward site with other great online utils like checking your i.p.

nontroppo.org allows you to test your site against a great array of web browsers for GZip compatibility.

FireFox users can install FireBug with Page-Speed to view Header Information and Error Codes including GZip information.