How to use Gzip to load your site faster

Lately I’ve been reading various random articles about some browsers ability to deflate zipped webpages, so that there is less bandwidth and faster loading times for websites. Although this ability has been around for a while, it’s only been lately that I have a need to use it.

To understand the concept of page compression and the support for it, visit this site. But in short, most browsers support it, including IE6 and 7 (according to this test page).

For those rare browsers that do not support compression, they just receive a non-compressed page. So effectively, you’d be nuts not to use compression on your site. There’s nothing to lose (apart from a slight server load increase, but I’m told Slashdot uses compression even with it’s large amount of site hits).

Here is a real world example of a page compressed with Gzip:

Gzip in action

Here I’ve compressed the HTML document, CSS and Javascript files. Look at the total, that page is 75% smaller, and 75% faster to load in your browser.

This tutorial will only examine one particular way of implementing Gzip compression with PHP, but there is another way to accomplish it with Apache if you have administration access to your server.

How to implement Gzip compression in 5 minutes

Step 1: Enable zlib compression in PHP. You can do this many ways, just choose one:

  • Add a line to your .htaccess file:
    php_flag zlib.output_compression On
  • Add or change a line in your php.ini file:
    zlib.output_compression = On
  • Add a line to the top of your PHP scripts before any output:
    ini_set(‘zlib_output_compression’,'On’);

Now that you’ve done that (and particularly with the first 2 options), any file that is passed through PHP will be Gzipped if the browser supports it.

Step 2: If you want to compress other files, Javascript, CSS, etc:

If your file does not pass through PHP before it is outputted, you can change the extension of the file to .php and it will be compressed. For this example I’ll use core.js.

  1. Rename core.js to something like core.js.php
  2. Open core.js.php in your favorite text editor and add this to the beginning of the file (before anything else) then save:
    <?php header("Content-type: text/js"); ?>
  3. Reference core.js.php in your html just as you would normally, the browser will see it as a JS file, not PHP:
    <script language="javascript" src="core.js.php" type="text/javascript"></script>

So to explain, we rename the file to make it a php file, so it is passed through the PHP compiler. Then we add a mime header line to the file, so that the browser knows what type of file it’s meant to be. Then we reference the file (if it’s a CSS or JS file for example) just as we normally would.

Remember to change the mime type to text/css for CSS files.

A quick note with this method. Only compress files that are specifically meant for a web browser (html, js, css, and xml). If you try this with a PDF file, for example, it works in browsers, but not when saved and displayed in Adobe PDF Reader.

If you’re finding that this method causes errors in your scripts, chances are that you haven’t got the zlib module installed with PHP.

Be Sociable, Share!
This entry was posted by jc on Thursday, February 8th, 2007 at 10:46 am and is filed under PHP. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.