How to add lazy load plug-in to load your blog faster
Blog Page speed is a biggest
factor to hold visitors in your site. Everyday huge visitors surfing many blogs
but if they found higher loading time and containing heavy image then it takes
longer time to load a blog or website. Page speed not only an important factor
for visitors but also it is a biggest factor for search engine and Page rank.
Earlier Page loading time was not a big issue but Google is giving importance
on it. Even if you are AdSense user then you would see on AdSense Score card
about Page Speed Score. If your score is low then it will give alert to improve
your page loading time. Currently my
page speed score is very poor due to heave design so I am also trying to
improve it.
We know a blog with high quality Graphics
make slower in loading. Sometime a blog become unresponsive and your visitors
may leave your blog. Even I am experiencing the same problem in my blog because
I have emphasize on Design rather than loading speed. Recently trying to
overcome from this problem. And I think only lazy load plug-in can solve this problem. Though many blogger
has given argument against this but to hold your visitors for longer time you
must adopt various techniques.
This plug-in will work like magic
even if your blog has many high contrast images. When you would enter into blog
landing page and scroll down to bottom then your blog images will load part by
part. For this reason it won't give any pressure on your internet connection.
On the other hand your heavy loading image will be load easily within slower
internet connection.
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Click on
Now click on -> Template -> Edit
HTML-> Unfold code ►
Step 3 Now Find this code </Head> by pressing Ctrl + F
Step 4 Copy the code from below and Paste it Before/above </Head>
<!-- lazy load start -->
<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>
<!-- lazy load end -->
Step 5 Now hit the Save Button
Hope this Plug-in will help you to make your website faster
and you would gain more visitors which would engage longer time. If you face
any problem then feel free to leave a comment below.
0 comments:
Your comments always welcome