Improve Website Load Time

As promised in our Pubcon Overview post, here is a real world example of what we did to improve the website load time for one of our sites. These are rough notes on what was performed on a real website,  how the implementation of each task was done and how it improved the website load time.

The first thing we did was run the website through http://www.webpagetest.org. This is a free tool that will break down your website performance and give each area a score. After we ran the site through this tool, we were presented with a lot of suggestions on how to optimize the site. Following is a break down of each.

Initial page load results

First Phase [Optimize images for faster page load time]:

From the test we saw many images that needed to be reduced (optimized). We went through these images and reduced the file size and from just that we were able to notice a relatively significant decrease from the load time. As you can see from the before and after screen shots below, we were able to cut back almost 200 KB from our images without resorting to a reduction in quality.

Before and after results from compressing image sizes – note the dramatic increase in score after the changes were put in place

Second Phase [Combine JS/CSS Files faster page load]:

We initially had three separate CSS files that were being used for different aspects of the same overall style, which was causing the server to have to unnecessarily download three different files. We combined the three CSS files into one, which saved about one second from the load time.

If you are using WordPress, the WP-Minify app makes this very simple. Merely install the plugin and it will combine Javascript, CSS, and HTML files automatically. We’ve found that this works best when using the Thesis theme, as there have been compatibility complications with other themes.

Before and after results from minifying Javascript and CSS files – note the increase in score after the changes were put in place

Third Phase [Enable GZIP Compression for faster website load time]:

This is more techie but it did improve load time. First make sure your host has compression turned on. Once that is confirmed you can control the GZIP compression through your .htaccess file. I won’t go into detail about what each setting means because there is already a ton of documentation about this on the web.

(A good resource is http://www.askapache.com/htaccess/apache-speed-compression.html)

Instead I will simply provide a screen shot with what we placed in our .htaccess file for the site we tested this on and leave it up to you to read more about what these settings mean.

htaccess GZIP Example

Forth Phase [Minimize serving images and other files from other sources ]:

One of the sections on this particular site was using an API to pull in data. This API passes image urls from another server so this section was having to download and serve the images from that server each time the pages were loaded. We made some modifications to this script so instead of serving the images from the other server, it saves a copy of the image on our server and loads that copy.  This cut off at least 2 seconds from our page loads. While it is not always possible to load everything from your own server (e.g. Google Analytics, Adsense code, etc.) you should minimize this as much as possible.

So that’s the low down of how we improved the load time on one of our websites. We may tweak these settings some more and will document it here if we do, but for now we are satisfied with the improvements. We would love to hear any other tips you may have.

Final page load results