While surfing on Internet it frustrates very much when a website or blog is loading slow. It is the reason for why most of the users close your blog and surf other blogs/sites to save their time. Because of which your blog traffic decreases.
There are many reasons for a slow loading of blog page for example if a blog contains a script that takes time to load, back-links of other web pages, corrupt widgets or gadgets, broken links etc. Sometimes more content in your blog makes it load slower but its not a problem anymore, 101Helper will help you to make your blog load faster do the following things to increase your blog page loading speed.
(1). Scripts:
Sometimes you add some scripts to your blog which includes some Jquery or javascript code that take time to load that's why your blog loads slowly. Remove these third party scripts to increase your blog loading speed. If you don't know the script then remove the recent added scripts after which your blog stated to load slowly.
(2). Backlinks:
If you have added any backlink of a search engine or any other blog in order to list your blog link on their search engine or blog remove it.
(3). Gadgets Or Widgets:
If you have added any widget or gadget to your blog that might be corrupt or may contain a css or javascript code which loads slowly then remove this widget or gadget to increase your blog loading speed. You can check up your blogs rendering scripts thorough Google Page-Insights.
(4). Layout:
If you haven't customized your layout page then it could also be a reason for slower loading. To customize your blog's layout page go to Template click customize and you will be redirected to the customization page now click Layout and change the layout of your blog. Change the body layout and footer layout. After changing the layout rearrange your widgets and gadgets. It will increase the loading speed of your blog.
(5). Third Party Ads:
Don't add third party ads to your blog sometimes they slow down your blog. They are not so worth also. You can use Google Adsense ads or infolinks because these don't slow down your blog as they are loaded after your blog pages are fully loaded.
(6). Templates:
Using new templates or templates from un-trusted sites can also slow down your blog. Most of the templates are unregistered which create such problems. So avoid using such templates. Use the templates powered by blogger or get a template from trusted sites.
(7). Images Loading Time:
Remove all images which take more time to load. How to find these images which takes time to load? go to http://gtmetrix.com and test your blog, it will show you all errors and images which are slowing down your blog. Check the links of images and replace them with other images. And test them again and again to be sure that all images are loading fast. You can use image optimizer to optimize your images without affecting their quality.
(9). Size Of Page:
Page size of blog also effects blog speed. You can increase page size on the customization page by customizing blog template, a bigger page will get more time to load as well as it won't fit on some screens, so avoid increasing size of your blog page. If you have increased your blog page size then go to template customize it and on the customization page select adjust widths click reset width to default.
(1). Go to Blogger Dashboard.
(5). Third Party Ads:
Don't add third party ads to your blog sometimes they slow down your blog. They are not so worth also. You can use Google Adsense ads or infolinks because these don't slow down your blog as they are loaded after your blog pages are fully loaded.
(6). Templates:
Using new templates or templates from un-trusted sites can also slow down your blog. Most of the templates are unregistered which create such problems. So avoid using such templates. Use the templates powered by blogger or get a template from trusted sites.
(7). Images Loading Time:
Remove all images which take more time to load. How to find these images which takes time to load? go to http://gtmetrix.com and test your blog, it will show you all errors and images which are slowing down your blog. Check the links of images and replace them with other images. And test them again and again to be sure that all images are loading fast. You can use image optimizer to optimize your images without affecting their quality.
(9). Size Of Page:
Page size of blog also effects blog speed. You can increase page size on the customization page by customizing blog template, a bigger page will get more time to load as well as it won't fit on some screens, so avoid increasing size of your blog page. If you have increased your blog page size then go to template customize it and on the customization page select adjust widths click reset width to default.
(10). Posts:
Show 3-4 posts on homepage of your blog to speed up your blog because it takes time to load more posts so show 3-4 posts on homepage. To customize number of posts on home page go to Layout edit blog posts and change number of posts on the main page to 3 or 4 and click save. It will help in loading your homepage fast.
(11). Small Sized Images:
Use as less images as you can, but if you use images in posts use them in small size because images are the main content which slow down your blog. Using more text than images not only speeds up your blog but also helps in seo and makes your blog eligible for Google Adsense. If you don't find small images then you can convert your large images to small by using this online tool. It will cut your images and make them small without affecting their quality.
(12). Lightbox Images:
There is an option in blogger to show images in lightbox. It slows down your blog because some scripts are needed to show images in lightbox so it slows down your blog. So go to settings and stop lightbox images.
(13). Lazy image load plugin:
The main problem because of which blog load slowly is images. A blog having more images than text will load more slowly. Images load slowly because of either their sizes or their formats e.g GIF images loads more slowly as compared to other formats like jpeg, png, TIFF. This problem can be solved by making such changes in blog or site that text, gadgets etc load before images, it will ultimately make blog load faster than before. In order to make such changes we need to add a jquery script in blog this script is known as lazy image load plugin as it makes blog fast by stopping image loading for some time. This plugin is very useful for blogs specially for art, wallpapers, images and other blogs having pictures. To add lazy load script in your blog follow below steps:
(1). Go to Blogger Dashboard.
(2). Select template and click on Edit Html.
(3). Click anywhere in the Html code and search for </head> by using combination of Ctrl+F buttons on your keyboard.
(4). Just after </head> paste the below script:
<script type='text/javascript'>//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
(5). Click on save template and you are done, go to your blog to see changes or use Google Page insights to check your blog speed.
(13). In-line CSS Codes:
Remove all inline codes from both your template and also from posts. In-line css codes is the biggest reason for slow blog speed because they take time to express so remove all in-line css codes and arrange them separately above <head> like this
<style>
This is my css code {background:#eee; color:#000; padding: 10px;}
This is second my css code {background:#eee; color:#000; padding: 10px;}
This is third my css code {background:#eee; color:#000; padding: 10px;}
This is fourth my css code {background:#eee; color:#000; padding: 10px;}
This is fifth my css code {background:#eee; color:#000; padding: 10px;}
</style>
</head>
How To Find In-Line CSS Code?
In-line codes look like below code:
<div id="logo" style="width: 295px; position: absolute;top: 2px;left: 95px;height: 70px;"/>
Remove all the in-line code and arrange them as shown above.
How To Remove And Avoid In-Line CSS Code In Posts?
In-line codes are added to blog posts automatically because when we are writing a post in backhand html and css codes are created. To avoid this, the best thing is not to use the tools above the post editor except bold, italic, and font size.
To remove in-line css codes, switch to HTML editor and remove one by one manually. You can remove all css codes at once.
(14). Minify Javascript:
If you have ever put your blog in Google page insights you must have a recommendation of minfying javascript but there seems no way to do so. Nevertheless you can use online Js compressor to minify your javascript codes. So search for javascript minifier on Google and try to compress your javascript. You can also use code minifier in 101Helper's seo tools.
After minifying your javacript codes its time to place them in right part of your template. The recommended place where all the javascript codes should be placed is above </head> as previously mentioned in this post.
(15). External Sources For Storage:
It is highly recommended to store your excess javascripts and css codes on external sources like github, sourceforge, pastebin etc. It will reduce size of your blog template and your blog will load faster but make sure to avoid redirects. You can also use google drive as an external source but you shouldn't do that because google drive have redirects which slow down blog to a great extent.
So choose the best source for external storage, I prefer github!
And after storing your extra codes on github call them using the below codes.
For CSS:
<link rel="stylesheet" type="text/css" href="http://yourcode.css"/>
For Javascript:
<script src="http://yourscriptlink.js"></script>
Check Out: How To Store Blogger Codes On GitHub To Speed Up Blog
Also remember to include both the above codes below <head>. You can also store your extra codes on your own hosted site if you have registered a domain.
I hope this was helpful to you, share this post with others and help 101Helper to spread.
Follow and subscribe to news feed for latest updates
Tags: How to make your blog load fast, Blog speed increase, increase blog speed tips, 101Helper tips and tricks, blogger Gadgets, blogger help, blogger widgets, tips for seo, new tricks for blogger,speed up your blog, fast blog, speed up my blog, increase blog loading speed.
How To Speed Up Your Blogger Blog/improve Page Load Speed
Reviewed by Anonymous
on
August 14, 2014
Rating:
Reviewed by Anonymous
on
August 14, 2014
Rating: