The recent article by the Smashing Magazine Stop Wasting Users Time was a huge wakeup call for us. When was the last time we actually checked the performance of our website? Are we wasting your time right now because our website is not as fast as we’d like it to be? The first tests were really devastating and we have to admit our website was slow, really slow. But we went and tried to speed it up and documented our steps along the way. After some coding hours we were able to reduce the page load time by over 70%. Do you want the same? No problem just read on I’ll show you what we did!

Measure Before You Improve

Every performance improvement should start with a detailed analysis of the current state. (tweet this) Not only does this give you some real data to measure against but often you can find and solve the low hanging fruits first. Luckily there are some really good tools out there to measure website performance. We used the tool GTMetrics which combines the results of Googles Page Speed and YSlow into a nice report.

The first results came back:

• Page Load Time 10.21 seconds
• Total Page Size 1.20MB
• Total Requests 95

Not really that fast now is it? But we know where we stand and can start improving.

Use Fewer HTTP Requests

As you can see the pages uses 95 different HTTP Requests to download all necessary files to display the site. How can there be so many you ask? Easy, over time we added a new jQuery plugin here (+1 script file, +1 css file), one image there and of course this adds up over time. Luckily reducing the amount of resources is quite easy.

Combine Resources

This is a really a no brainer. Simply combine all necessary JavaScript and CSS files into one but make sure to keep the order intact otherwise it might be fast but does not work anymore. By this we were able to reduce the HTTP requests by 43%.

Minify JavaScript and CSS

Now that we have all JavaScript and CSS in a few files we can easily minify them to reduce the bandwidth needed to download these resources. For this you can use a tool like YUI Compressor just make sure to keep the original files so you can make changes in the future! For example this tool compresses JavaScript like this:

function FetchImage() {
        $('#tryitbar').hide();
        $('#loadingbar').show();
 
        var url = "http://www.url2picture.com/Home/Screenshot/?url=" + $('#tryurl').val() + "&browser=" + $('#browserselect').val();
 
        var img = $("<img />").attr('src', url).load(function () {
            if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                $('#tryitbar').show();
                $('#loadingbar').hide();
            } else {
                this.style.clip = 'rect(0px, 552px, ' + this.naturalHeight + 'px, 0px)';
                $("#generatedImage").empty().append(img);
                $('#tryitbar').show();
                $('#loadingbar').hide();
            }
        });
    }
 
function FetchImage(){$("#tryitbar").hide();$("#loadingbar").show();var b="http://www.url2picture.com/Home/Screenshot/?url="+$("#tryurl").val()+"&browser="+$("#browserselect").val();var a=$("<img />").attr("src",b).load(function(){if(!this.complete||typeof this.naturalWidth=="undefined"||this.naturalWidth==0){$("#tryitbar").show();$("#loadingbar").hide()}else{this.style.clip="rect(0px, 552px, "+this.naturalHeight+"px, 0px)";$("#generatedImage").empty().append(a);$("#tryitbar").show();$("#loadingbar").hide()}})};

This way we reduced the download to 1,1 MB, a reduction of 9%.

So after the first round of improvements we ran the tests again and came up with a load time of 6.75 seconds which is 66% better than before.

• Page Load Time 6.75 seconds
• Total Page Size 1.10MB
• Total Requests 41

Optimize Images

Most images can be compressed in a loss-less way to reduce the file size without affecting the website design. (tweet this) We used the tools PNGOut and jpegTran to compress all images on the page. Furthermore we combined some images into one so called sprite to save another 4 HTTP Requests. These images look like this:

You can use these images as background images in CSS and set the background position to correctly display the part of the image you want. See the footer of this page for an example. The CSS will look something like this:

.facebook
{
    background: url('Images/sprite.png');
    background-position-y: 32px;
}

Again we ran the tests and came back with a load time of 4.27 seconds.

• Page Load Time 6.61 seconds
• Total Page Size 975KB
• Total Requests 37

Leverage Browser Caching

The last change we made were the HTTP expires headers. These headers tell the browser how long it can cache a specific resource (like an image or a JavaScript file). If your server does not send these headers the browser will recheck the resource for changes on every page reload. It is unnecessary most of the time so we set the expires header to 1 Week.

How you can set this depends on your server. Here is an example for PHP and Apache and for IIS.

This was the quickest change and did get us some good results:

• Page Load Time 2.89 seconds
• Total Page Size 975KB
• Total Requests 32

End Result

In the end we were able to reduce the page load time by 72% which is really good for only one day of work:

Of course, there is room for more improvements but currently, we think the page feels fast enough. Do you do any regular performance optimizations on your websites? Let’s discuss this in the comments!

Photo by Dan DeChiaro