Recently I was tasked to implement a new site design for a hunt club. The site design could only be described as beautyful. However initial testing showed some performance issues. In this guide I will go through the steps I followed to optimize the site as well as some other additional techniques to use.

Note: This is not an exhaustive guide but I will keep updating it as I become aware of new techniques.

Note: There comes a point of diminishing returns when you are only shaving milliseconds off the load time. Its up to you as the developer to weigh development effort against potential performance improvements.

Beauty != Speed

When I implemented the design, I followed the designers specifications to the letter. I used the exact images given to me at the resolution supplied. This did not work out so well. On my localhost dev environment the site loaded smoothly and looked awesome. However when we uploaded it to the hosting machine and tried viewing it over our bandwidth starved office network, the performance was less than optimal.

This does highlight an important point. If you want to really test a sites performance do it from the worst network you can find. If you know someone with dial-up try that. In this case the site loaded faster on my home computer than in the office.

Get the Tools

There are many free tools for analysing site performance. I use the "Page Speed" plugin for firefox. Whatever tool you use, you will be presented with a dizzying array of suggestions. Some of these will have little realworld impact while others can have a significant effect. It is really a case of trial and experiment to learn which steps are vital.

Note: Be aware that page speed uses percentages which can be misleading. For example reducing a css file by 40 percent may sound like alot until you see that the original size was 2k.

Identify Repeating Pattern Images

My first step when optimizing a site is to look at all the images that get loaded and look for repeating patterns. These can be used to significantly improve page loads.

For example in the Hunt Club site the background image I was supplied with was a high resolution jpg with 1980x1152px dimensions. This was a huge 4.5 meg file. Of course I did not use that file unaltered even on localhost but it highlights the size of the potential problem.

A quick look at it though revealed that while the height could not be altered as it contained a gradient, the width could be reduced to 41px as the pattern repeated. I then set the background image css to repeat the image on the x-axis.