How To Achieve Maximum Website Performance (Part 5)

Welcome to the fifth part of this article series on how to maximize the performance of your website. The focus of this article is mostly on compressing content on the way from the server to the user’s browser.


6. Compress That Code

All modern browsers support the compression of content transferred via HTTP and indicate this by sending the appropriate Accept-Encoding header just like this:

Accept-Encoding: gzip,deflate

This header tells the server that the browser supports compression of content using either the GZIP algorithm or the deflate algorithm.

To optimize your site and speed up the load time you should add compression to the output your server is sending. If you are using Apache (which I have always assumed throughout this article series) it works as described as follows.

Just like you installed the ExpiresModule as described in part 4 you can install the DeflateModule (“mod_deflate”) in your Apache web server by adding this line to your httpd.conf file:

LoadModule deflate_module       modules/mod_deflate.so

Most of the time it does not make sense to compress images or packed files because they have already been compressed so I suggest you focus on the HTML code. You can achieve this by adding this block to either your httpd.conf file or to any VirtualHost you wish to use the compression for.

<IfModule deflate_module>
AddOutputFilterByType DEFLATE text/html
</IfModule>

Just by adding this configuration to the VirtualHost for this domain (saschakimmel.com) at the time of writing the data transferred for this blog’s homepage was reduced from almost 170 KB to only 27 KB – that’s a reduction of 84%!

I highly recommend using this Apache module as it reduces the traffic enormously.

If you just wish to use output compression in your PHP scripts you can simply use this code:

<?php
ob_start("ob_gzhandler");
?>
<html>
<body>
<p>This should be a compressed page.</p>
</html>
<body>

This will tell the PHP interpreter to use output buffering, i.e. to buffer all of the output of the script until it has finished when it will call the ob_gzhandler from PHP. This handler detects if the browser supports compression at all and will only send the code as compressed data if it does.

7. Using YSlow

If you have read each of the articles in this series you pretty much know every possible performance optimization for a website so now let’s have a look at the analysis of the YSlow addon for Firefox. If you have not already installed this addon you should install it now.

After installing it and restarting your Firefox browser type the URL of the page you wish to optimize into the address bar and hit the enter key. If the page has finished loading you need to open the YSlow tool by clicking on the icon in the browser’s status bar.

yslow

If you click on the button labeled “Run Test” it takes some seconds during which YSlow reloads and analyzes the page. This will show you a list of recommendations like the one below.

yslowresult

If you have read all parts of this series you should by now already have optimized most of the things you can optimize on your website. Please note that YSlow only shows you what you can optimize, not what you already have optimized. It won’t show me that the main page is already delivered with compression it only shows me which files are not yet compressed on this blog so keep this in mind when reading the recommendations.

8. Outsourcing Your Data To A CDN

If you get lots of traffic (and I am talking about really lots of traffic here) to static files like images, videos and downloads you should think about hosting your files on a content delivery network.

You just upload the data to their network and modify the links on your website pointing to these files. You have to pay a fee depending on the amount of data served to your users through these networks. If you already know that your server is not likely to be able to handle all of that traffic you might have a closer look at these services.

The most prominent ones are Amazon Simple Storage Service (S3) and MOSSO.

9. Adding Cache Headers For The WordPress Sociable Plugin

As I just had a look at the YSlow recommendations for my blog I found out that I could add expiration headers for these graphics so I just added this info here because I think it may be quite helpful for you.

Just add this code to your VirtualHost which belongs to your WordPress blog:

<LocationMatch /wp-content/plugins/sociable/images/*>
        ExpiresActive On
        ExpiresDefault "access plus 7 days"
</LocationMatch>

Please note that you need to have the ExpiresModule installed on your server for this to work as described in part 4 of this series.

This concludes this article series. Download your free Website Performance Checklist now.

tweetthis-15

Be Sociable, Share!
Sascha Kimmel - Living The Web Experience Since 1996 by tricosmedia