I recently wondered why a lot of webmasters don’t care about the loading speed of their website requests. Most are thinking it’s not that important. But it is, because it really improves the user experience.

Google had made some tests that shows the importance of of the performance of a webpage. They made an AB-Test, where they delivered search results 500ms delayed to some of their users. Only 500ms. Doesn’t matter? Well, they measured a 20% drop in traffic. That’s immense.

There are some really cool tools out there, that could help you to improve the performance of your site.

PageSpeed is a plugin for Firefox/Firebug. When installed you’re able to click on a button and you get a full report which parts of your website could be optimized.

Another cool tool is gtmetrix. It’s a web based tool. You have to enter the url of your webpage and you get a very detailed report back. The report shows you exactly what you should optimize.

Here are the most important things, and how they could achieved:

Optimize your Stylesheet-Files

Today a lot of CSS is used to style and layout websites. CSS is a great technology.

A lot of developers split their styles into various external files. This makes things a lot easier during website development.

While this is nice in a development environment this could cause slowdowns on productive systems.

For example, five css files will result in five http requests. As most browsers are only able to handle up to three requests at the same time, this will have a big impact on the loading time.

Using CSS compressors, it’s very easy to optimize this. One of my websites (gameposter.net) consists of seven css files. I first joined them together into a single file using the OS X shell:

cat file1.css file2.css file3.css file4.css file5.css file6.css file7.css > comp.css

It’s important that you keep the original order or you could run into some problems with styles that gets overwritten. Now you have one big file. I used CSSTidy to compress this file:

csstidy comp.css --template=highest

There was no prebuilt mac binary of CSSTidy, so I compiled it for OS X (Download it here).

The Javascript can be optimized in a similar way.

Optimize your images

Images are usually the biggest part of a webpage request. And it’s very easy to optimize them. On OS X you can install pngcrush using:

sudo port install pngcrush

Then with a two simple lines you could optimize all your images:

find . -name "*.png" | xargs -I file pngcrush file file.optimized
find . -name "*.png.optimized" -print0 | while read -d $'' file ; 
    do rm ${file%.optimized} ; mv ${file} ${file%.optimized} ; done

You’ll find a benchmark of various png compressors here. Other algorithms might be better than the one from pngcrush.

You can even use css sprite sheets. It’s not easy to implement them when your website is almost finished. But it could be worth the effort.

Enable gzip compression

Most browsers support gzip compression. So if you deliver your files zipped you can improve the performance. If you are using a web hosting service without ssh/root access, it could be a little bit tricky. But it’s still possible. I have achieved it on my 1&1-server using the following steps:

I have zipped all js and css files using gzip and uploaded them to my web server. Now with mod_rewrite and a few lines in the .htaccess file you can deliver those files to the browser instead of the uncompressed files:

AddEncoding gzip .gz
AddType "text/javascript" .gz
AddType "text/css" .gz

RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} .(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ /$1.gz [QSA,L]

If you want to use php to compress your generated html pages, you can add the following line to the top:

ob_start("ob_gzhandler");

Of course, if you have access to your web server there are much more easier solutions. For example you could achieve the same effect with apache- or lighthttpd-mods (mod_compress).

Add Future-Expires-Header

You can avoid unnecessary HTTP requests to your server by setting future expires header on scripts, stylesheets, images and flash components. If you have no access to the httpd.conf of your server, you could achieve it by adding following lines to the .htacces file

<filesmatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|gz)$">
    Header set Cache-Control "max-age=172800, public, must-revalidate"
    Header set Expires "Thu, 15 Apr 2011 20:00:00 GMT"
</filesmatch>

FileETag MTime Size
ExpiresActive on
ExpiresDefault "access plus 1 year"
  1. Daniel (2010-12-17 19:24)

    great post, thanks for sharing

  2. Benny (2010-12-27 00:11)

    One more toolhttp://siteloadtest.com

  3. joe (2010-12-27 01:44)

    thank you @Benny, great link!

Add your comment now