There's two different ways to look at a website's performance. First of all there's raw server performance. How many page request can a server handle before it collapses under load and more important: how fast can it process them. On a high volume website this aspect of performance is very important because it determines how many users a machine can serve before additional server capacity is needed. This article is not about this kind of performance tuning. WordPress comes with a pretty robust caching engine built in which makes it perform as fast as it possibly can.
The second way to look at performance is what we could call 'perceived performance'. It's the speed at which your site appears to perform to the user. Even if your server is capable of serving all files required to render your website's pages in a visitor's browser as fast as it gets, your site may still appear slow to the user. A fast pipe doesn't necessarily result in a fast website. Slow client-side performance can have a plethora of causes. There's an awful lot to gain on the front end side of the game which is what this article is about.
Graphics account for most of any web page's total download size. And as we all know, downloading content takes time and therefore affects perceived performance. Of course the most effective way to speed things up when it comes to download sizes is to reduce or even eliminate the use of graphics. However, we do want our website to be easy on the eyes so graphics are going to be used in most websites anyway. What we CAN do is make sure the graphics we use are as small as possible. You can experiment with JPEG compression in Photoshop and for PNG's, which are used quite a lot on Eurobands I've used PNGOUT which does an excellent job at reducing PNG graphics to an absolute minimum file size.
Making your images as small as possible in size is important for your website's performance. However even with a fairly small total amount of kb's for all your images there's another aspect that may negatively affect the performance: The amount of images. As most of you know, every separate image on a website results in it's own HTTP request to the webserver. Initiating server requests takes time. Therefore downloading 10 images of 1kb each will take considerably longer than one image of 10kb even though we're downloading the same amount of data.
Many websites use collections of icons or menus that consist of many small images. These are a perfect target for optimization. On Eurobands I placed all images for the menu and all images for the frontpage image replacement headers in two single files. Have a look at this one for the menu and this one for the frontpage headers. By doing this I reduced a whopping 25 HTTP requests for images to only two! A remarkable performance win. The mechanism behind this is called CSS Sprites. If you want to learn more about how to use this technique, read Dave Shea's excellent article on A List Apart: CSS Sprites: Image Slicing�s Kiss of Death. A great example of a high volume website using this technique in a very effective way is Yahoo!. There's a huge CSS sprite containing all of their menu icons. Check it out here
Most web browsers only handle two simultaneous HTTP requests to one host at any given point in time. This can be overridden by hacking the registry for MSIE or tweaking network.http.max-persistent-connections-per-server in Firefox' about:config page. Needless to say, 99,9% of your visitors won't be geeky enough to actually do that. Therefore we'll have to trick Joe User's browser into performing more simultaneous requests.
Of course most websites consist of more than just two files which means that all consequetive requests will be placed on a stack to be handled on a 'two at a time' basis. After reading Steve Saunders excellent article Maximizing Parallel Downloads in the Carpool Lane on the YUI blog I went ahead and created three extra subdomains for Eurobands: images1.eurobands.us, images2.eurobands.us and images3.eurobands.us. After this I tried to evenly distribute image requests in my CSS files over these three domains and the www.eurobands.us domain. This resulted into more simultaneous requests and therefore: more perceived speed on the client!
important note: If you want to try this technique youself, DON'T try to be smart and randomize hostnames for images on a per-request basis or you'll run the risk of the same image(s) being loaded from different servers instead of being cached by the browser which of course results in an actual performance hit instead of a gain. Make sure each file is downloaded from the same domain at every request.
Another word of caution is about the amount of different hostnames you create. When using too many hostnames it will increase the amount of simultaneous HTTP requests but it will also increase the amount of DNS requests which in it's turn affects performance negatively. Steve mentions a healthy balance between an optimal amount of parallel HTTP requests and required DNS requests to be performed of 2 to 4 hostnames. It's not recommended to go higher than that or you may loose speed more than you gain.
Of course this technique can be used not only on images but also on CSS files and Javascript files. However there's more to be optimized when it comes to those. Read on!