This site is only a few weeks old, really I am still putting the finishing touches to it. It’s only yesterday that I updated the theme to this new look, I really like it… but let me tell it, it caused a few problems. After fixing them all and knocking a massive 44 seconds off page load time, I thought I would write this post to share my experience with you. It’s dead easy to create a very slow loading blog, it’s also very easy to make your blog load a lot faster.

Let me tell you what I did?

After installing the new theme, the site would seem to hang forever. It was loading a lot slower that it did before. I counted and was actually taking over 30 seconds to load over my 10MB fibre optic broadband connection and 47 seconds over a T1 connection, according to http://websiteoptimization.com/services/analyze/

That’s the first site that I want to tell you about in this post, because if your blog is loading slowly and you want to make it load faster, it’s the first place that you should go to.

WebsiteOptimization.com will give you a very detailed report on exactly what your website is requiring of the Internet when it loads, and tell you what is the “norm” for a fast loading site.

I analyzed the site there and to my astonishment it was making 80, yes 80! HTTP requests! No wonder the site was loading so slowly. They tell me that any more than 12 is bad and can be responsible for 80% of latency! Given the list of HTTP requests that the site was making, I got to work eliminating the unnecessary.

The theme had links to all kinds of different subscription and bookmarking services. All unnecessary. It’s easy enough to subscribe to this sites RSS feed if you want to, all these links and images were just weighing the page down. It also had style sheets and javascript files that are only there to power fancy features of the theme which I had already decided not to use, an alexa widget, an old Technorati badge and more unnecessary junk hard coded into the theme.

I removed them all!

I also had a lot of unnecessary WordPress plugins installed and activated. So I deactivated all but the essential. (I’ll post a list of the plugins that I am using in my next post).

After editing the WordPress theme files, and deactivating plugins I managed to get the HTTP requests down to 18, not bad… but still too many. The site was still taking far too long to load (9 seconds over a T1 connection).

I needed to do more.

The next thing I did was visit SpriteMe

This is an absolutely fantastic site. Using the SpriteMe toolbar chiglet I was able to eliminate a further 4 http requests. SpriteMe created an image sprite containing 5 of the images used in the theme. So now instead of having to call 5 images we only had to call one. The installation help on how to use the sprite was a bit lacking. I had to do a bit of Googling to learn how to implement no-repeat into the CSS, but I got there in the end.

If you’re interested, the “no repeat” code that I had to add to the CSS file was

background-repeat: no-repeat;

I was trying to add  no-repeat to the end of the call to the image, but that did not work, but adding that line did.

A full example line of edited code is

background-image: url(“images/spriteme1.png”);
background-position: -10px -56.5px;
background-repeat: no-repeat;

SpriteMe only provided the first 2 lines.

You can see the see the image sprite that sprite me made for me here

You’ve got to love SpriteMe! It’s absolutely awesome what it does for you. I am not a webmaster. I have a little HTML or php knowledge and hardly any CSS skills, yet I was still finished with this task in under 30 minutes.

The next thing that I did was install wp-minify. This is a really cool WordPress plugin that combines and compresses the CSS and JS files used in your WordPress theme. This can greatly increase page load time.

And it did! Another 4 seconds knocked off after installing this plugin.

A 5 second load time is still far too slow, slow loading sites can be penalized by the search engines and even 3 seconds is considered “very slow” by Alexa.

I had done all that I could to optimize the site and theme, but I still had to get the page load time down. (There is more that can be done, like adding expire headers… but that learning curve can wait until another day).

The next thing that I did was install WP-Super Cache. — If you have a wordpress site, then it is essential that you install some kind of caching plugin to create a web cache for your pages. WP-Super Cache is my favorite. Unlike WP-Cache is it dead easy to install.

Why you need a Web Cache on your blog

WordPress is php and MySql powered. What that means is, that every time someone visits your site, the web page is built for them by queering MySQL database. Every different piece of the page has to be extracted from the database for each and every visitor.

The more requests that you make to the database, the slower your site will load. What a web cache does is make a static page that looks exactly the same but does not send any queries to the MySQL database at all. There is no need for each page to be “built” for every user, instead it can be served from the cache.

Every hour or so the pages in the web cache update. You can set the update schedule as you like. For a blog, 1 hour is good if you get lots of comments, as any comments made would not appear until the cached file is updated. If your blog is less active then daily may be better.

After activating WP-Super-Cache, and building the cash I visited the site and it literally slammed on to the browser. I could not even count to 1!

According to http://websiteoptimization.com/services/analyze/ the site was now loading in 2.14 seconds and only making 10 HTTP requests!

That’s down from 80!

I hope that this post helps you make your WordPress blog load faster

Dan

P.S. If you know of any other tips to make your blog load faster, please let me know by posting a comment or trackback.