Tips & Tricks: How to speed up your blog

Just like many blogs, The Road to the Horizon grew from a blog with a simple plain template to what it is now: a site combining pictures, links, widgets and text.
Came a time, a few weeks ago, I realized it took almost 30 seconds to fully download the homepage of my blog, on an ADSL or cable connection. Around the same time I travelled to Addis Abeba in Ethiopia, and was surprised to see it took over two minutes to download my page when one had more limited connectivity.

Why is speed important?

Many visitors will come to your blogsite “by accident”, through a referral link or more commonly, through a Google search. In just a few seconds, these “incidental visitors” will decide whether your site is interesting or not. In just a few seconds, they will decide if they will stay, or not. We also have just a few seconds to turn him from an occasional (or unique) visitor to a regular ‘customer’, someone who will come back, bookmarking your blog, or even post it on social networks.

A couple of factors are important in this ‘flash’ decision “will I stay or not”:
1. the overall appearance or impression of the site (which they will evaluate on what they see on the top screen without even scrolling down), and
2. the download speed.

The download speed became even more important when Internet Explorer versions 7 and 8 seems to ‘block’ for seconds, while in the middle of download if they need to wait for certain widgets to complete.

So, I had to improve my download speed. Here is what I have learned:


1. Benchmark your site’s speed

Measure the speed before and after you make the improvements. Try selfseo.com (which specifies if a page doesn't load within 5-8 seconds according to their benchmark you will lose 1/3 of your visitors.) or linkvendor.com or for a more in depth analysis, use websiteoptimization.com.

Each time you change something on your site, measure what difference the change made.

Two good tools to find out what specific parts (widgets, images, scripts,..) are slowing down your site, two great tools are Firefox Firebug and the Chrome Developer tools .
Firebug is an add-on to Firefox (download here). The Chrome tool comes built-in (goto menu>developer>Javascript console and click on Resources).


2. Slow items go last:

Have a look in what sequence your blog loads. E.g. in the case of The Other World News, the sequence is:
1st the header
2nd the left column
3rd the middle column with the posts
4th the right column
5th the bottom banner.

In the case of The Road, the sequence is:
1st the header banner
2nd all blog posts with the pictures
3rd the whole right column (darker grey), item per item.
4th the bottom banners (darker grey)

This means, if I would put something in the banner or in any of the blog posts that would not work properly, or would be slow, the rest of the page’s download will slow down.

An example:, I had a widget which often had speed problems, as one of the first things to download on The Road’s right column. It often kept the whole download of the rest of the right column on hold for at least 10 seconds. I moved that widget to the part of my page which loads last (the bottom), for visitors not to notice the delay.

Recommendation: ensure you put the slower widgets, or those taking a long time to load, at the end of your download cycle.


3. Compress your pictures.

Most people think because they use small pictures, these automatically take little time to download. Not necessarily so. It depends on the data-size (kbytes) of your picture.

Check your pictures by right-clicking on them and select ‘Properties’.
A typical 400 x 300 pixel picture should not take more than 20-40 kbyte. Often people use > 100 kbyte. A couple of those pictures and your download speed will be a killer.

I posted before about ShrinkPic, a tool I used to compress pictures, but lately I use Picasa, a free picture library and processing tool that lets you export pictures with predefined pixel size, quality and compression rate. The visual quality of compressed Picasa pictures is very good (and much better than with ShrinkPic tool I used before.

Pay particular attention to your banner: because banners are often larger than normal pictures, and is the first thing your page will download (and the first thing the users will see), compressing it is critical (The Road’s banner is 12 Kbyte, as an example). There is nothing as frustrating for a user than to sit and wait for a banner to download.


4. Limit your widgets

This has been a killer for me. I loved to add little gimmicks – “widgets”, that showed the ‘latest visitors’, or “the weather where I am”, or “the latest comments”, or “all countries of the latest visitors”, etc..

That killed my speed. I could see so, when using Mozilla’s Firefox to download my page, and to observe what Firefox was waiting for (check the bottom left of the Firefox window)…

Recommendations:
a. Limit the number of of gimmicks and widgets
b. Delete those widgets which are slow
b. Those which are slow, and you really really wanted to keep, put at the bottom of your page (or whatever part of your page which downloads last – see point two).


5. Store widget and badge icons on your picture server

Often, widgets or badges (like this one ) come by default with the “img” link to an icon stored by the service you are referring to.

I had a lot of these on my site (e.g. in the syndication part at the bottom of my page), and found out that in average at least one of these services would be down or slow, thus slowing down MY page…

The remedy is to store these icons on your trusted image server (e.g. Picasa or Flickr).
How?
1. You rightclick on the icon as you have it on your page
2. Choose ‘Save as’
3. Then upload that image to your picture server
4. In the "IMG" tag, replace the URL of the picture with the one on your picture server.


6. Limit or speed up RSS feeds

I RSS feeds to show the latest news bulletins or to display the latest comments on my blog. Feeds take some time to download, and not all servers are fast.

The speed of my site increased quite a bit when I moved the feeds onto Newsgator, a free feed service. They are fast and reliable. You can quite easily combine your feeds with free Yahoo Pipes.

Have fun!

Check out more blogging tips and tricks on The Road.

Picture courtesy vintage-poster.info