In this modern World, People don’t have useless time so they try their best to utilize the time. Due to this reason, they prefer faster devices, faster internet connection and obviously fast loading websites. Those days are gone when users preferred to use slow loading websites having quality contents over Fast loading websites having a bit poor contents. Contents still matters but now,t he success or Failure of a blog/website also depends upon their load time as well. For example- Users will not visit a website which takes 5 minutes to load. Instead of that, they will visit a website which takes just 1 minute because it saves their precious time.
As we all know, Blogger is a Popular Free Blogging Platform which allows you to modify the codings so as to enhance the look and feel of your Blog. Sometimes, Designers use lots of Graphics which slows down their blog. If you are also facing the same problem, You can either Compress your Images or use the Lazy Load Script. Today, I will show you the way to speedup a Blogger Blog by using the Lazy Load Script.
How to Speedup a Blogger Blog by using Lazy Load Script?
Simply, Follow the below given steps:
- First of all, Log in into your Blogger Dashboard by visitinghttp://www.blogger.com and choosing your Blog.
- Once done, Click on “Template” Option. You will find this option on the left hand side. The screenshot of the same is given below:
- After that, Click on “Edit HTML” option. The screenshot of the same is given below as well:
- Now, Press “Ctrl+F” button on your keyboard and try to find “</head>“. If you are confused, see the below given picture:
- Just Above </head> tag, Insert the below given code:
<!– starting the Lazy Load 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>
<!– End of Lazy Load 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>
<!– End of Lazy Load Script –>
- After that, Click on “Save Template” Button and you are done.
Is there any Disadvantage of using Lazy Load Script?
Every coin has two faces so Lazy Load Script also has some disadvantages. Your blog on Browsers where Javascript is disabled or doesn’t have support for javascript will show Blank Images. This is the only disadvantage. Many blogger has misconception that, it affects the SEO as well which is not true.
No comments:
Post a Comment