Speed Up Your Blog - Tips And Tools

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 20 Comments

This is my third post about "How To Speed Up Your Blog?". If you had missed the earlier versions, check out the "First Post" and "Second Post" on Speeding Up Blogger Blogs. I suggest you to have a look at the previous versions before you continue with this post because it might sound completely new, if you straight away get to this post. Here, I'm going to deal with some concepts that might sound little complicated when compared to the previous ones. However, I tried my best to keep it as simple as possible. So, webmasters can straight away continue reading this post.

I don't want to make this post too long by writing stories about the benefits which my blog gained after implementing these techniques. But, I would like to know how the following techniques benefited your blog/website. I have just explained few concepts in this post while the other techniques, like CSS Sprites and reducing DNS look ups, may be explained later in the upcoming posts on my blog.

STEP ONE : GET THE RIGHT TOOLS

The first and foremost step that one should implement to speed up his/her blog is to get the right tools for analysis. I suggest you to download "YSlow". YSlow is the best firefox add-on as far as I know, when it comes to complete analysis of your website. It will provide grades under each category that contributes to load time of your blog.

Another tool that would generate a detailed report about your website - Pingdom. The main benefit of Pingdom is that you don't need Firefox and the results are much easier to parse. How ever, I highly recommend you to download Firefox and get the add-on installed because YSlow is something very special, especially for webmasters.

STEP TWO : IMAGE AND JAVASCRIPT OPTIMIZATION

The most important factor that reduces the speed of your web page would be the images and Java Scripts on your blog. So, what should I do with the images? One simple method reduce the images. But, I feel images speak more than words. So, it becomes very important to add images on your posts and blogs as well. So, let's skip the simple method and get to the next level. Instead of reducing the number of images, it is better to reduce the image size. Let's take an example. Imagine that an image occupies 500kb but after compression it becomes 250kb which simply means my site will load faster. 

Next question : How to compress the images without losing the image quality as well? The answer to this question is very simple - Smush.it!!! This tool does the compression work. Just upload the image to Smush.it and later upload it to your blog. You may apply this technique to the existing images on your blog as well!!!

As far as the Java Scripts are considered, I recommend you reduce them. However, when you can't avoid their use, I recommend you place them at the end of your template. Place them right before the end of body tag. Before placing them at the end, make sure all the Java Scripts are combined into a single file. So, that you avoid the number of HTTP requests and eventually, save time in loading your site. To combine the Java Scripts, use the following tool - JMerge. Jmerge is simple tool that will combine all the Java Scripts on your blog into one single file. 

STEP THREE : CSS OPTIMIZATION

The most important optimization that is required for any blog or website is the placement of CSS and external stylesheets. The CSS and other external stylesheets should be placed above the end of head tag. This allows the browser to load the content first. Thus, the user can read the properly formatted content first while the CSS, Java Scripts and other stylesheets will load in the mean time.

One more optimization that should be made with respect to CSS would be the reduction in the code or in other words, the reduction in size. So, how do I do that? Apart from the CSS compressor explained in the previous posts, you may optimize it as shown in the example here. If you have a code that reads like the one below.

p.notice

{
font-weight: bold;

font-size: 1.33em;

}

p.another-notice 

{
font-weight: bold;
font-size: 1.33em

}

You may replace them with the following code.

p.notice,

p.another-notice

{
font-weight: bold;
font-size: 1.33em;
}

This will considerably save few bytes (though very little) which in turn contributes to a quick load time. More over, you can prove to your friend that your are CSS geek just as I did. Any how, I believe that these tools and tips will increase the speed of your site. Share your views via comments and don't forget that you get back-links (How To Increase Backlinks To My Blog?) for your comments, since my blog is a dofollow blog. (What Is A Dofollow Blog?)

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogging Tips