35 Top Tips for a Faster Loading Blog June 02, 2008 /

Blog readers can be quite impatient. When accessing your blog through search results, Stumbleupon or links to your blog, it is ideal that your entire blog page should load within a few seconds, otherwise such visitors may move on to another site instead.

The question, "How can I make my blog load more quickly?" is one which is asked often by readers of this site. So in this post, I'll offer a few simple tips and tricks you could try which should ensure you have a faster loading blog.

While you may think your blog loads quickly when viewed on your own computer, you should be aware that your visitors may be using different (and possibly slower) connections to access your pages.

The aim of a fast-loading blog is to ensure your pages load in a reasonable time for all connection types.

Those using dial-up will undoubtedly be used to slower page loading times than visitors who have DSL access; however you must also consider that search engine spiders need to access your site and can index pages much more quickly when a site is optimized for speed.

Find out how quickly your site loads

One of the best tools I have found for understanding page loading time is Web Optimization's web page speed report.

This tool is very easy to use: simply type your blog's home page URL into the text box, and hit the "Submit Query" button:

It does take a few minutes to parse the information from your website, though once the page has loaded, you will see loads of useful information about your site.

Now I admit that the information in this page can seem quite intimidating! This service is generally aimed at experienced webmasters who understand the technical details of HTTP requests, external objects and so on. The section we are most interested in is the "Analysis and Recommendations" which will look something like this:

At a glance, we can see which areas of our blogs require some tweaking in order to load more quickly:

• The sections highlighted in green are the areas of the site which have optimal performance, and do not need to be changed.
• The sections highlighted in yellow are not critical, but could be optimized for better loading times.
• Those sections highlighted in red demonstrate areas which really slow down page loading time, and are top of the list for immediate optimization!

If all of these sections display in green and yellow when using this tool, you have little to worry about in regard to your page loading time. However, if you see many red sections you are advised to make some changes to your blog, or potentially lose readers due to excessive loading times!

Ideally, we need to work towards a page loading time of under 8 seconds using a 56k dial-up connection (page loading times will be much faster for DSL and T1 connections).

To achieve this optimal loading time, we need to try to follow these guidelines:

• The overall size of the page should not exceed 80kb
• Use as few external JavaScripts as possible
• Try not to display many images on each page, both in your posts and blog template
• Aim for the smallest file size possible for your images
• Reduce the size of your CSS (style) section wherever possible!
• Make few HTTP requests (in other words, aim to have scripts, images and any other external elements on as few servers as you can!)

This may seem like a lot of work, and if you are new to blogging or web design, it may also seem bewildering! So rather than focus on each factor in great technical detail, I'm going to suggest 6 useful methods you could use to reduce your blog loading time dramatically.

1. Remove any widgets/scripts you don't really need

Unofficial Blogger widgets and JavaScripts can add some great interactive elements to your layout. Unfortunately, each different widget/script you use will need to be referenced from a different server (known as HTTP requests), and will slow down page loading time.

So take a look at all of the widgets and scripts you use in your Blogger layout:

• Do you really need to have each and every single widget?
• Does each widget offer some value to your readers?
• Would your readers really notice (and complain) if you removed a few of these widgets/scripts from your layout?

If you answered "no" to these questions in regard to some of the scripts you use, you should consider removing them from your template altogether.

I know that widgets can help your blog appear more pretty, but consider the impact on your page loading time: you could be losing precious readers if these slow your page down!

2. Try to reduce the amount of images you use in your layout

Loading externally hosted images is another high contribution to your page loading time. So if you use a lot of image-based buttons; feature many image widgets in your sidebar, or use a template which is heavily image based, try cutting down on these to see if this may help your blog load more quickly.

Bonus Tip!

If you really don't want to reduce the number of images you use in your template, you could host these with Blogger instead of an external image host.

To do this, create a new blog post, and upload all of the images you would like to use to this post. These images will then be hosted on one of Blogger's image servers.

Preview your post, and right click on each of these images. You should be able to copy the image location, which you can use to replace the image URLs in your template code.

Using this trick reduces the number of HTTP requests for your images: all of the images you use will be hosted by Blogger, rather than a completely different host. This can have a dramatic impact on your page loading time, especially as Blogger's servers are hosted by Google (which in theory, should be one of the most stable hosts in the world...)

3. Reduce the file size of your images

Another method of reducing the impact of images on page load time is to reduce the file size (not actual size) of all images used (whether in posts or layout).

Many image manipulation programs allow you to optimize images for the web, which reduces the overall file size (in bytes and kilobytes) of the image.

You may also like to try using an online image optimizer to reduce the size of your images. There may be some loss of quality (especially for larger images) but on the other hand, your overall page loading time will be reduced.

4. Simplify your CSS

The CSS section of your Blogger template takes up a lot of the overall file size of your blog pages. This is because each element of your <b:skin> (or <style> for those using classic Blogger templates) is featured on a separate line. There is a lot of unnecessary "white space" (page breaks, indentations and spaces) and possibly HTML comments.

By eliminating unnecessary white space and HTML comments, you can reduce the overall size of your blog pages. However, doing this can make it difficult to edit the style section afterwards!

If you would like to improve page loading time by optimizing the style section of your Blogger template, here is the easiest method you could use:

1. Copy all of the code between the <b:skin> and </b:skin> tags in your blog's HTML code (for classic template users, this is the section between the <style> and </style> tags).
2. In a new browser window or tab, visit the CSS Optimizer website, and paste your style code into the "direct input" box.
3. Click the "Optimize" button (there is no need to check the box which says "do not remove line breaks").
4. The next page will offer your optimized style code inside a text box, along with data of how much this has been compressed.
   
   
   
   Copy all of this code to your clipboard.
5. Replace all of the existing code in your Blogger template (between the <b:skin> or <style> tags with this optimized code.
6. Preview your template to ensure your template displays properly with these modifications, and finally save your template.

5. Optimize the placement of scripts/widgets in your template

There will undoubtedly be some externally hosted widgets and JavaScript's you would like to keep in your layout. To improve the impact these have on blog loading time, you can move these towards the bottom of your template code.

If you use a widgetized layout, move such widgets to your right-hand sidebar (or possibly even the footer section) of your blog. This will ensure that your blog content will appear before these scripts begin to load, so visitors can appreciate your posts while the page continues loading.

6. Reduce the number of posts which appear on your front page

Each post which appears on your home page will add to the overall file size and loading time of your blog.

Even if you only display summaries of your posts on the home page, the entire HTML code for your posts will be visible in the source code. This is because the post summary hack hides the main part of the post using CSS.

When choosing how many posts to display on the home page, you should consider the general length and style of your blog posts.

If you write around 5-600 words for each post, using few or small images (and infrequent multimedia), then 5-7 posts would be optimal to display on your home page.

If you write much longer posts (as I do here at Blogger Buster); use many images, or video in posts, any more than 3 or 4 posts would slow down the loading time of your blog.

On the other end of the scale, if your posts are generally short with few (if any) images, you could probably display 10 or more without affecting page load time.

To change the number of posts which can be displayed on your blog's home page, go to Settings>Formatting while logged in to your Blogger dashboard. The first option enables you to choose how many posts are displayed on the front page:

Overview

When considering how to reduce blog loading time, the main thing to consider is reducing the amount of code and files which are used in your blog's mark-up.

Removing (or optimizing) as much unnecessary JavaScript and images as you are able; reducing the number of posts displayed on the main pages, and optimizing the style section of your blog's template code will certainly help your blog to load more quickly. This is beneficial for new visitors who may become impatient while waiting for large pages to load, and is also a key aspect of optimizing your blog for search engines (as spiders are able to crawl your content more quickly.

A word of caution...

I must tell you that Blogger Buster (in it's current form) is NOT a good example of optimal blog loading time!

The template I use currently requires lots of JavaScript and images; in this instance I have forsaken page loading time for aesthetic appeal...

In researching blog loading time and methods of optimization for this post, I have learned the value of a fast loading blog, and also many methods I could use to ensure this blog loads much more quickly.

Over these next few weeks, I will "practice what I preach" by gradually toning down the use of scripts and images. A faster loading blog will be of benefit to us all!

What do you think?

In this article, I've tried to cover the most significant changes you can make to optimize the loading time of your Blogger blog. Have you used other methods to speed up your own blog's loading time? If so, which methods did you use to achieve this?

Feel free to leave your own ideas and comments by leaving a message below.