Optimizing Your Blog's Load Time


GTmetrix PictureAny Websites Load Time is a vital factor in its ability to engage its readers. Studies show that users leave a site if it hasn't loaded in 4 seconds. Knowing the above facts it becomes really important to optimize your blogs accordingly. The main services for this stuff are Google's Page Speed and Yahoo's YSlow but both are bit technical and not that graphical. Here comes the Service called GTmetrix.com ,it combines the results of the above services and is bit more easy to understand.Not only does it provide suggestions it also provides actionable recommendations to fix those.



To test Your Blog's Score
Go to GTmetrix.com and Enter the URL and Press Go, after a bit of time you will get a very detailed Report discussing all your Websites Parameters. Here a bit of information about some of them.



Now after this it will be a easy to follow ,as not only does GTmetrix suggests you what is wrong but it also gives the optimized versions of the things. For example they give the Losslessly compressed versions of images which are capable of being compressed .


Now some very important things to consider while optimizing your Score


  • Optimizing Images: Make sure you loselessly compress all the images on your blog to reduce your Page Size
  • Combine images using CSS sprites: This becomes very important if you have a lots of Social Media Icons on your blog, as it increases the Page Requests
  • Specify image dimensions: Make sure you add a width and height tag to all your images, this is considered good for Search Engines as well
  • Remove Unused CSS: Make sure you delete any CSS left out from any buttons or menus which you previously used
  • Place CSS in Head :Any external CSS file should be placed in the head tag as it helps in fast rendering of the Page


Some of the suggestions will be out of your hands, as Blogger doesn't gives you any control over them , like 


  • Leverage browser caching: Blogger doesn't give you access to the .htaccess file where you have to set the expiry date for your resources, making them cacheable.
  • Avoid CSS expressions: The main CSS of Blogger is dynamic in nature , for the Template Designer to work. This makes use of variables in CSS which is considered bad. 
  • Reduce DNS lookups: As Blogger doesn't give any custom CDN for your Blog, Images and JavaScript are loaded from various domains, increasing chances of failures
  • Default CSS File: Blogger loads a CSS file namely bundle.css ,over which you have no control. This file has a lot of CSS which remains unused on any Given Page




Now some general suggestions for improving Page Load time:


  • Put all JavaScript at the end of body tag , this lets the page's CSS and JavaScript to load in parallel.
  • Remove all useless gadgets from your Blogs specailly the Traffic Gadget, if you want better insights try Google Analytics 
  • Go through your HTML and check out for any piece of code which is not being used but is still present.
  • Remove Gadgets like FB LikeBox and Followers Gadget, as the images of members that are loaded ,very badly effect Load Times and Page Size.
  • Use b:if tags .For example if you have share buttons on the Post page alone then make sure that the scripts related to these are loaded on Post Page only.


Even though there are lot of limitations in Blogger, you can still achieve a very good Scores by tweaking a little bit. Here is a Extreme Modification that can be done to Blogger for Better Scores: (Try This only if your a Pro in Blogger Templates )


This modification will render your Template Designer Completely useless, but on the other hand reduce your Page Size by atleast a 100-150KB.


1.Go to Design > Edit HTML (In New Blogger Interface Go to Template > Edit HTML).


2. Search for b:skin term using CTRL+F method and remove everything in between the B:skin tags so that it looks something like this 



3. Now open your Blog in a New Tab and Right Click anywhere and Click on "View Page Source". Search for the term page-skin-1 . After finding it scroll down a till all you find the </Group> , now copy all the CSS code below this till the closing B:skin tag like this




4. Paste this code back into the Edit HTML and Save your Template.


Everybody has a different blog and the problems faced while optimizing  would be wide ranging. Incase you are unable to solve them, please feel free to share. If you get frustrated at any stage stating Blogger Platform as the reason , then these are the score of SYB.





Written by Prayag Verma


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


41 comments:

  1. I tried checking my gaming blog using your suggested tool. And I've found out my page loads slow. It was graded 82% and 64%. I think this is because of the ads that are running. So I guess I should remove or at least minimize them.

    ReplyDelete
  2. Also try the website grader tool. It displays your SEO score and evaluates your website/blog. Using this tool, you can analyze your blog and determine what part of it needs optimization.

    ReplyDelete
    Replies
    1. Thanks for the advise , will try it out for sure

      Delete
  3. Thank you for this valuable information. Our conversion and leads depends on the site loading speed. If our site loads slow then we are losing that fat cash. I also think that site loading speed is incorporated in SE positions.

    ReplyDelete
  4. Thanks for this tool. Mine's got 85% grade and a 4.26 loading time. I put some javascript codes in my homepage. I think that is what slowing my blog.

    ReplyDelete
  5. Hi Prayang
    How to combine images using CSS sprites can you help me ^_^

    ReplyDelete
  6. @Danialde4

    Check out this article , this is the best resource for stuff and if there is some problem, then feel free to contact again

    ReplyDelete
  7. @Xpert SEO
    This template is a cumulation of a lot of time and effort, I didn't use specify software for this ,if you want to Download it ,you can do that from here http://www.mediafire.com/?zqz2vgun93zes9g

    ReplyDelete
  8. your post are very informative. It is a pleasure reading it. I have also bookmarked you for checking out new posts.Thank

    ReplyDelete
  9. This blog is provide lots of good idea and your blog are very usefull for me.Thanks a lot.

    ReplyDelete
  10. All I can say is keep up the good work and keeping serving the same stuff.

    ReplyDelete
  11. Actually, the second chart shows a much greater delta given the refreshed scale so I don't think it's as close as you think. Or let's say it's "deceptively close". Remember also this is based on a massive number of Google searches to absolute delta is significant

    ReplyDelete
  12. .///////////////////////////your post are very informative. It is a pleasure reading it. I have also bookmarked you for checking out new posts.Thank////////////////////////

    ReplyDelete
  13. I didnt find in the source code of my blog....:(

    ReplyDelete
    Replies
    1. What exactly did you not find in the Source Code of your blog, please be more specific

      Delete
  14. I found "page-skin-1" but didnt find /group tag in my source code....:(

    ReplyDelete
    Replies
    1. In your blog ,copy everything after the last <Variable> tag , it is something like:

      <Variable name="endSide" description="Side where text ends i.....

      Delete
  15. 3. Now open your Blog in a New Tab............

    this point i can't understand ...pls expalin this

    ReplyDelete
    Replies
    1. The aim is to be see the Source of the Blog. I just suggested to open the blog in a new browser window

      Delete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. I want to do this but I don't understand where to start, after the last variable until?
    I think you need to update this tutorial to help newbie like me understand better.

    ReplyDelete
    Replies
    1. Start with optimizing your Images ,they provide the largest gains

      Then remove any scripts and stylesheets that you are not using (specially the once from old gadgets )

      Also remember to place all the CSS in the head of the page

      Delete
  18. It is important to have a fast loading page otherwise visitors will not even come back.

    ReplyDelete
  19. ilmunya sangat berguna sekali nih

    ReplyDelete
  20. Sangat bermanfaat nih informasinya moga sukses trus gan...

    ReplyDelete
  21. One of the best way to make blogger blogs load fast is by hosting the java script files in blogger itself. I have found a great difference in doing so..

    ReplyDelete
  22. I was doing Google and got this blog, this is my first visit on this blog, information is impressive and very useful. I enjoyed it.
    SEO Services India | SEO Company Australia

    ReplyDelete
  23. Sangat bermanfaat sekali nih infonya makasih..

    ReplyDelete
  24. Your tutor is not that much clear. Please give a tutor again as brief as clear for beginners.

    ReplyDelete
  25. Thanks for showing up such fabulous information. I have bookmarked you and will remain in line with your new posts. I like this post, keep writing and give informative post...!
    buy youtube likes

    ReplyDelete
  26. Excellent post. I was checking continuously this blog and I am impressed! Extremely helpful information specifically the last part :) I care for such info much. I was looking for this certain information for a very long time. Thank you and good luck.

    ReplyDelete
  27. Hi, friend

    Thank you so much for your great information about this site loading time. Of course, my site loads so slow and I really need your help and hope that I can improve it even faster. I hope you can check my site and give me a suggestion. www.oublogs.com

    Thank you in advance

    ReplyDelete
  28. Doing Google search got this blog, get visit on this blog, got lot of valuable information and very useful. i m too working as seo freelancer I enjoyed it.

    ReplyDelete