Get 25% Discount For HostGator- $110 OFF! | Series: Become a Pro Blogger!, Create and Sale Ebooks , PDF Editing Ways


Saturday, November 7, 2009

12 Useful Tips To Reduce Your Blog Load Time



blog-load-time

Almost every newbie blogger fails when it comes to reducing blog load time. Most of the tutorials that are available on reducing the time taken for a website to load are often un-clear or incomplete. We decided to share our way of solving this problem. Below are 11 really interesting and important tips to decrease the load time of your blogs by almost 90%.

 

  1. Link To All images Inside Your Template From Blogger

    I shared an important tip tomorrow about creating an Image Backup in Blogger and then Linking to All Images From there. Most of you use templates that are not officially provided by Blogger. These templates often contain images that are saved on services like tinypic or photobucket. When your blog loads the browser has to connect to all servers which link to your images, as a result leading to immense delay in the loading time of your blog. What you must do is replace all such images with those that you have saved inside blogger as explained in the my previous post. The advantage of doing so will be this that the browser will need to connect only to blogger while loading your images. Thus saving time.

  2. Save All Images in GIF or PNG Format

    GIF stands for “Graphics Interchange Format” and PNG stands for “Portable Network Graphics” Both these formats are well compressed, smaller in size and widely supported by all browsers. But if size is concerned PNG compresses far better than GIF. In typical cases up to 5-25%.  There are some transparency issues with PNG in IE6 but since IE7 is widely used these days, transparency is nor more an issue. Using any of these image formats will tremendously reduce the load time of your blogs by 60% i.e 70-90KB The size is an approximate for my blog and true size depends on the number of images you use.

  3. Give Proper Dimensions To Images

    Giving each image a specific width and height will make it easy for the browser to load the image quickly. Always decrease the size of an image if the original size is larger. The general HTML code for an image looks like the one below,

    <img width=”” height=”” src=”URL Of Image” />

    The width and height will require a value in pixels. One pixel equals a dot on the screen. A Full size image on my blog will have a width=”590px” and height can be as long as I want. 590px almost equals the width of my posts. Hope that gives you an idea on how to choose width and height values for your images. Browsers find it easy to load images whose dimensions are specified. Make sure you make it your habit to specify a proper size for your images. If you use Windows Live Writer your life will become far easy.

  4. Don’t Use An Image As A Background

    If you are using any image as a background then kindly remove it. A background Image repeats itself horizontally and vertically and is responsible for 50% slow load time. Just remove it and see the difference. To remove a background image simply find this CSS code inside your template,                (Tip:- Its located just at the top of your blog. Simply search for body)

    body { background: #7AA1C3 url(http://xyz.com/blabla.jpg);

    width: 980px;

    color: #333;

    font-size: 14px;

    font-family: Georgia;

    margin: 0 auto 0;

    padding: 0; }

    This code will look different in your template but you should be concerned only with the bolded black text. Simply Delete url(http://xyz.com/blabla.jpg) and save your template. Give a simple color to your background. #7AA1C3 refers to Background Color. You can change it by using my Hexadecimal Color Chart

  5. Save All JavaScript Inside Blogger

    Why should you link to external sites for storing your JavaScript whilst you can easily save it in Blogger! Save All your JavaScript codes inside your templates just above </head> using the code below,

    <script type='text/javascript'>

    //<![CDATA[

    Paste Your JavaScript Code Here

    //]]>

    </script>

    The bolded text is where you must paste the JavaScript code that you use in your template by linking to an external site.

    To find a JavaScript URL that links to external site, search for <script type='text/javascript'> inside your template (Make sure to check “expand widget templates” box at top-right corner). Once you find such linking, open that link in a browser. You will see large piece of complex text in the window and that is your JavaScript code. Simply copy it and paste it in the code shared above. Replace All JavaScript codes inside your template with the code above, ensuring that you have extracted the code from the link and pasted it in the code above.

  6. Always Accept Quality and Well Scripted Blogger Templates

    The major mistake most bloggers make is to upload any template that attracts them. Most un-official Blogger templates that are available in blogosphere are often created by people who are not well aware with proper use of HTML and JavaScript. A improper scripted template with empty tags ,unwanted tags and broken JavaScript often make Job tough for search engine spiders to crawl the content of your weblog. Further Browsers also waste precious time in reading broken scripts. If a JavaScript is not well coded or optimized, it can cause a readers PC to hang! Imagine this happening to readers accessing your blog. In Short use templates from authorities who have respect in blogosphere and from those who are certified professionals.

  7. Use Limited Advertisements

    If you are blogging only to get paid by displaying large chunks of ads from several sources than you are surely misusing this beautiful experience of blogging. Don’t make a blog a Fish Market. Display only few ads at major areas in your blog. Doing so will keep your blog interface clean and easy to be crawled and browse able. Each add that you display uses JavaScript that prolongs the page Load time. Make sure you limit all your ads to three.

  8. Don’t Link To Blog Directories

    It is a wrong perception that linking to several blog directories will bring you immense Traffic. When you link to several blog directories on your homepage, search engines loose trust on your blog due to excessive linking and browsers find it difficult to browse those tiny images that link to blog directories. All blog directories ask you to link back using a small image link on your blogs but doing so will only damage the success of your blog. I believe only on blogcatalog and mybloglog as relevant authorities to expect Traffic from. If you really want some amount of traffic from blog directories then trust only on blogcatalog and mybloglog. Moreover accept only the small piece of meta tag from them rather linking to them.

  9. Don’t Use Widgets From Blog Directories that Use Images

    I refer to the famous recent Viewers widget by blogcatalog and mybloglog. These widgets use JavaScript that link to these sites and also display images that add up to the load time of your blog. I use meta tags provided by them rather using their widgets. This helps in reducing the time taken for my pages to load. If you really want to use these widgets then try displaying few images on them, as low as 10.

  10. Summarize your Posts Using The Read More Link

    Full Length Posts at homepage is one of the biggest reasons why a blog has high load time. Summarize all your posts by using the continue Reading Link or Read More Link. To know how to add it, read this post-> Read More Link

  11. Show Only Four-Five Posts At Home Page

    Don’t show more than 4-5 posts at Homepage. Doing so will keep your readers busy reading different posts and they will also find it interesting to see how fast the homepage loads.

  12. Eliminate External Links

    Don’t use widgets that are from external sites other than blogger. Get rid of stat counters and use Google Analytics. Don’t store images on other services but Blogger. Save all JavaScript code inside blogger as discussed above. Don’t add links from blog directories, they don’t bring Traffic with exception of blogcatalog and mybloglog.

 

Note:-

Don’t Mess Up CSS and HTML Code By Removing The Line Breaks

Many Bloggers who are not well aware with web designing think that by removing the gaps between lines inside blogger template will reduce the size of a template. What they don’t realize is the fact that doing so will only reduce the template size by 2-4KB or even less, which is almost negligible reduction when it comes to fast browsers present today. Removing the line breaks between the codes inside blogger will distort the overall presentation of your template, making it difficult to edit it. Kindly avoid all such un-professional tips and always take suggestion from an expert before taking any such step.



Respected Readers:
We educate thousands of bloggers a week with our tutorials. To help us go ahead with the same spirit, a small contribution from your side will highly be appreciated.


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Thanks for making this possible! Kindly Bookmark and Share it.
Technorati Digg This Stumble Facebook Twitter
Create your own blog!

27 comments:

Comment Page :
jayaraj on 7:03 AM, November 08, 2009 said... #

hello its me chinna whats about my doubt?
after all it is a wonderful post
thanks

Mohammad Mustafa Ahmedzai on 12:06 PM, November 08, 2009 said... #

@Chinna

Friend your doubt or quest for splitting the header will be done as soon as I get rid of my busy schedule. I did that comment bubble thing for you because I had time and I will surely do the header splitting thing for you as soon as I get some leisure time.

jayaraj on 2:38 PM, November 08, 2009 said... #

ok i am awaiting for ur replyyyyyyyyyyyyyyyyyyyyyyyyy

Anonymous said... #

Awesome Trick Bro! Thanks a Lot

Mohammad Mustafa Ahmedzai on 8:06 PM, November 08, 2009 said... #

@Chinna

Read this post to split the header -> http://www.lawnydesigns.com/2008/06/how-to-split-your-blogs-header-into-two.html

I hope that will help.

Anup on 7:18 AM, November 09, 2009 said... #

Thank for this cool tips. And please my post related Adding unique background image to the single widget
Thanks.

sonowar said... #

I impressed with Javascript Tip. Accept my thanks.
Sorry for bad english
Sonowar
From Italy

chinna on 5:11 PM, November 09, 2009 said... #

ya it worked great thanks for that
will u try to do it to ur buster themes and send me link to jayaraj.chinna@gmail.com
pleaseeeeeeee

Mohammad Mustafa Ahmedzai on 6:15 PM, November 09, 2009 said... #

@Sonowar

I am glad you find it helpful

@Chinna

I guess you can do that your self :D

IsHu on 5:21 PM, December 24, 2009 said... #

hmmmmm much informative :) thanks bro

Open door to everyone... on 3:09 PM, February 15, 2010 said... #

10) Summarize your Posts Using The Read More Link

Will doing this really save the loading time? I tried to observe this, but the images in the post still loaded though they were not displaying. It seems like to only hide the rest of the post from appearing virtually.

Mohammad Mustafa Ahmedzai on 1:36 AM, February 17, 2010 said... #

@Open door

Read more truncates the post length and only displays a fraction part on homepage. Doing so saves 80-120 kb and thus reduces load time. Images do appear if you want them to be displayed at homepage. Take my summarized posts as an example. Each summarized post is displayed with an image and the image really shows up. I believe your net connection speed can be an issue due to the images being not loaded properly.

Rafay Baloch on 8:49 AM, March 19, 2010 said... #

Hats off for Muhammad
http://rafayhackingarticles.blogspot.com

erwan on 10:35 PM, March 30, 2010 said... #

nice tip..... :)

varun.g on 9:47 AM, April 22, 2010 said... #

Its really good tips.I'll try them.please tell more about crawling and indexing also

NSE tips on 10:06 PM, June 13, 2010 said... #

Dear Muhammad,

Greetings !!

Congrats on your being chosen in DMOZ.
I am bit confused for Javascript coding. I want your help by letting me know that what is to be done at what location and if you can just explain the same with an example, it will be all the more great. You can take example of mybloglog javascript.
Regards
Indian-Share-Tips.Com

Mohammad Mustafa Ahmedzai on 2:33 AM, June 14, 2010 said... #

@NSE tips

Thanks for the greetings!

Dear I have clearly mentioned in the post that you simply need to paste all your javascript codes just above the tag </head> You can find this tag by going to Layout > Edit HTML

and paste all your code between these lines,

<script type='text/javascript'>

//<![CDATA[

Paste Your JavaScript Code Here

//]]>

</script>



To find where your javascript codes are located then simply search for tags like <script type='text/javascript'> OR <script

A javascript codes starts with either of the above two tags and ends with </script>

If it is a link then open that link and copy all the code that appears on the page where the link points. and paste this code inside your template as guided before

Hope this helps.

Anonymous said... #

MOHD i can not understand u r javascript method can u pls explain it i will find put one script see example and guide me what to do

example
http://www.mdn.fm/files/199520_y7obh/New%20Text%20Document.txt
kindly guide me what to do n how
REGARDS NIL

Nifty option Tips on 1:20 PM, May 28, 2011 said... #

Awesome post, I am an avid reader of your blog, keep on writing these great posts, and I’ll be a regular visitor for a very long time.
Nifty option Tips

The Orange Jeep Dad on 4:02 PM, June 15, 2011 said... #

I used almost all of these suggestions except for replacing images. I don't have the time tonight to move them all. Thanks tho. I think I see a quicker loading time already.

I wish IntenseDebate didn't take so dang long to load.

Evan - King of hacKING on 12:44 PM, July 17, 2011 said... #

cool..i used some of the tricks.really helpfull.thnx bro and keep posting.......

www.hackingmyworld.blogspot.com

Lasting Rose on 12:36 AM, July 27, 2011 said... #

(script type='text/javascript')

//(![CDATA[

Paste Your JavaScript Code Here

//]])
should only be applied for scripts other than jQuerry for which
calling it by including a call like the one below with the appropriate version like 1.3.2; 1.4.2; 1.5.2 etc will be much better.
(script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript")(/script)
(/script)

Please see this article for more info http://goo.gl/IAez2

I have spent a day copying all of them and then having to delete sand insert the call instead for very strong reasons in this article.
Hope this helps

HD Cafe on 12:51 PM, October 13, 2011 said... #

Great tips. Thank a lot.

M. AYAD on 4:33 PM, October 31, 2011 said... #

What is a good load speed in ms( 1s =1000 ms)for a blogger site?
Thanks

M. AYAD on 5:52 PM, October 31, 2011 said... #

I forgot,

Mohammad,

Kindly have a look at this:http://gtmetrix.com/reports/www.mybloggertricks.com/XRVPtm6Z

and let us know by a detailed post how your improve the overall score by optimizing rules at the top of the list (red bar).

Thanks for your input.

Techmaker on 10:26 AM, November 13, 2011 said... #

This is a great post. I likes it. Awesome

Thanks for sharing.

SHREE MADHAN on 8:49 PM, December 29, 2011 said... #

thanks for the last tips that was perfeckt
http://softechnogeek.blogspot.com/

Confused? Feel free to ask

Your feedback is always appreciated. I will try to reply to your queries as soon as time allows.

Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Try the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon my review.

Regards,
Mohammad

 

Recent Posts

Join Me On Facebook

4907+ Followers

Join The Team!

Licensed Under CC

Recent Comments

Follow Me On Twitter

1954+ Followers

| My Blogger Tricks (MBT) © 2012. All Rights Reserved | Contact | About |