Hi friends!! This is my second post about speeding up a blogger/blogspot blog. If you missed out the first one, then click here to have a look at it - Speed Up Your Blogger/Blogspot Blog. I had been working on this topic myself for the past few weeks and few days before, I found a post about the same topic on Google Buzz. I wanted to share some of the tips mentioned there with my readers. Although, this topic deals with terms that sound weird, I have tried my best to keep them as simple as possible because, I always write things aimed at the newbies.
The prerequisites for improving the page speed of your blog would be, to get a few of the Firefox Add-ons working on your computer - Firebug and YSlow. These Add-ons are basically meant to analyze the speed performance of your site. Only when you analyze things, you will know whether you are on the right track or not. So, let me start off with methods which I felt were effective with my blog. I'm sure, it will be effective for your blog as well.(Note: I have concentrated only on CSS and images in this post. The other methods of improving your blog speed will follow on the next series under the same topic. Make sure you have subscribed to this blog so that, you don't miss any valuable tip for the betterment of your blog.)
1. Changing The CSS Section: I highly recommend you to opt in for CSS sprites because it reduces the number of HTTP requests for your blog. If I start to explain about this, I'm sure either I will go mad or you will become one. So, let's not harm ourselves. I leave it to the link from where I gained a little info about CSS sprites - Image Slicing. I know it is pretty difficult for the newbies to understand. So, what do they do??? Simple. Just visit this site - W3C CSS Validation Service.
Enter your URL and get the report. It will clearly indicate the warnings and the errors regarding the CSS codes . You may avoid the warnings, but not the errors. Try rectifying the errors as much as possible. Alteast, learn why the error showed up and eventually, you will correct them once you understand why showed up, just as I did:)
2. Image Modifications - For a blog to be quick in loading, it is pretty obvious that the images in the blog load faster because images occupy more space when compared to the text. So, how do I load my images faster? Basically, if you reduce the number of images, or crunch them you will reduce the size which in turn, reduces the time it takes to load them, thereby increases the speed. Apart from crunching and reducing the number of images, the following methods will be more effective in increasing the speed of loading your images.
2.1. Serve Scaled Images: It is very simple to understand though it sounds complex. This method basically uses HTML to compress the size of your image. To explain this very clearly, consider the example of attaching a large size wallpaper of dimension (1024x768) to your blogger post. Once you attach it in your post, you will find a smaller image only and not the actual size of the image. This is because, the image has been scaled to fit in your post.
It is very important factor to note that, you can still find the original picture once you click on the picture; which means the original image is loaded, but it has been reduced by some factor to make it load faster in your posts. One image, multiple sizes using HTML implies scaling. This is the basics about scaling of images. You can read a little more about serving scaled images here - Serve scaled images.
2.2. Specifying Image Dimensions And Using Alt Tags: If you feel the first step is pretty complex to adopt, then you definitely need to adopt this technique. This method basically involves adding two tags in the images of your post or blog namely, the "height" and "width" tag. What happens when I add this piece of code? If you specify the dimensions in your "img" tag, then the browser understand that it has to load something in that space of "AxB" dimensions. If the dimensions aren't mentioned, then the browser will have to wait until the complete image is fetched or in other words, say wait until the end of the script.
Apart from specifying the dimensions in your img tag, I recommend you to add "alt" and "title" tags. The alt tag basically provides a text equivalent for the object/image. That is, incase an image has failed to load then, the alternate text will be displayed. This saves time because it prevents the re-hits to the server for loading the images. More over, the title tags will fetch you more traffic through images and makes your blog more SEO friendly. I will explain about this concept in the upcoming posts. Subscribe to my blog so that, you don't miss anything vital to your blog.
2.3. Minimizing the HTTP requests: In this method, you just need to ensure that all the URLs for your images are placed on the same server. To be more specific, since you blog on blogger and make use of Google Picasa to upload the images in your post, I recommend you to upload all the images related to your blog(including facebook, social bookmarking buttons,etc..) on Picasa. Do not upload on external servers say, Imageshack, Photobucket, etc.. Every image is associated with a HTTP request and every HTTP request consumes time.
So, if your HTTP requests are diverse(each image at different locations), it simply means more time. About 40 to 60% of your daily visitors come with an empty cache, meaning to say that, they load your site for the first time. So, I would say satisfying the first time visitors would be the key to a better user experience. Hope, you enjoyed this post. Share your views via comments!!! Comments are always appreciated!!!
