You Are Here: Home »Articles »   Site Performance

Site Performance

Introduction

One of my biggest web-related grumbles would have to be websites that take an age to load. It annoys me, it'll annoy your users and I've lost count of the times I have given up on waiting for a site and simply closed the window. The reasons for this are too many to mention but taking time to build some performance improvements into your site is perhaps the biggest step in improving your users experience. It can even help to cut your bandwidth bill - everybody wins!

Here we look at a couple of key areas to address including page compression and images.

mod_gzip

mod_gzip is an Apache module that will basically compress files. CGI, PHP, HTML etc, and it's basically "invisible", gzip compression is not something you'll see happening, however, you need access to compile modules and edit the httpd.conf file of your server in order to enable mod_gzip.

To find out if it's already enabled you can use this page which will also give you an idea of how much difference mod_gzip can make to your page sizes and load times. In addition to improving page load times, mod_gzip can also greatly reduce the amount of bandwidth your site munches through.

If it's not enabled and you are running your own server or have root access this page will explain everything you need to know about enabling it.

Any downsides? well mod_gzip will create temporary files on your server whenever it's triggered, therefore, if you have a very busy website it's possible that this can increase the server load, but on most average websites it wont be a problem.

If you don't have access to enable mod_gzip yourself, and your host wont do it for you (there's not many reasons why they shouldn't if you ask nicely) then there's two alternatives, that can produce similar results.

ob_gzhandler

I wont go into this in much detail because the second option noted below is actually a better way of doing things but PHP has it's own methods of data compression which are based around the ob_gzhandler, a function which can offer different levels of page compression depending on what's accepted by the users browser.

For more details and some code examples for implementing the ob_gzhandler on your site see the following page in the PHP Manual

zlib output compression

If you're using buffers in your pages (many php scripts do) this can slow down page load times as the buffering has to wait for everything to finish being processed before it can send the information to the browser, zlib compression will basically take the page content as chunks and send them as it comes to it, and this can be enabled from a .htaccess file directly in your own website using the following:

<FilesMatch "\.(php|html?)$">
php_value zlib.output_compression 2048
</FilesMatch>

Basically, this code in your .htaccess file says if the page is a php or html file, use zlib compression and stream out the content every 2kb. That final value you can experiment with and edit if you wish, most other examples of using zlib compression that I have seen normally set the value to somewhere between 4-5kb (4096-5120) but 2kb is what seemed to work best for me.

All the above mentioned methods of compression are a little dependant on the visitors browser, but most modern browsers will support them, and hopefully one of them will help reduce the time it takes for your pages to load.

Images

Some of the biggest factors in page load times are usually the amount and size of images in your pages, you can probably tell I don't like layouts with lots of graphics, and it's mostly for that reason, but if you must insist on designing your entire site in photoshop, try to remember a couple of things.

  1. Try to use .jpg images where possible, they load faster than .gif images, and always try to avoid using any .bmps on your site. Lots of flash can also take a long time to load.
  2. If you're using some sort of border or header, if possible try to use a small image and have it repeat across the page, for example, gradient bars. There's no point having an 800 pixel wide gradient when it's the same all the way across, it only needs to be a few pixels wide, and you can force it to repeat using stylesheets.
  3. Try to optimize images, two ways I can think of, Ulead and also Adobe Image Ready (included with adobe photoshop) can optimize images for the web.

Finally, always specify height and width dimensions for your images, this way the browser already knows the size of the image before it loads.

You can do this within your image tags with style="width:xx;height:xx" or within your stylesheet (xx being the dimensions of the image).

Code

Not sure how much I can say about this, but excessive code be it HTML, PHP or anything else will slow down your website. The more you understand your chosen web scripting language the more knowledge you'll have to be able to compress your code and make it more efficient.

Incorrect or 'bad' code can also impact the performance of your site, just because it works doesn't always mean it's right, the W3C website is something you should really have bookmarked and has all the reference you need regarding various language specifications, HTML, XHTML, CSS and so on, it also has some useful tools to help you check your own code.

At the end of the day, if you don't need it (code that is) don't use it (obviously you need some), spend more time reading up on the languages you're using, and you'll soon find yourself saying "what is that doing there" <remove big chunk of code> then perhaps your pages wont take 5 minutes to load for people still using a regular modem.