Blogger Website में Image Lazy Load Enable कैसे करें

क्या आप भी अपने blogspot ब्लॉग में image lazy load install करना चाहते है तो आप बिलकुल सही जगह पर है। आज इस आर्टिकल के जरिए मैं आपको ब्लॉगर ब्लॉग में lazy load ऑन करना सिखाऊंगा।

अगर आप अपने ब्लॉग की page loading speed improve करना चाहते है तो आपको Lazy Load Images setup करना होगा। इससे पोस्ट Image सिर्फ viewport में और user के scroll down करने पर ही load होगी। इससे आपकी ब्लॉग पहले से 30% से 40% fast load होगी।

Lazy load ब्लॉग को optimize करने का तरीका होता है जो website content को जरुरत के हिसाब से load करती है। मतलब जब विजिटर आपके पोस्ट को पढ़ता है तो पोस्ट में जितने भी इमेजेस होगी उसके जरूरत के हिसाब से show होगी। मतलब पोस्ट पढ़ने के लिए विजिटर जब स्क्रीन को स्क्रॉल करेगा तब इमेजेस लोड होगी और दिखाई देगी। इससे आपकी पेज लोडिंग स्पीड में सुधार होता है और आपकी साईट की performance अच्छी हो जाती है।

ब्लॉग मे image lazy loading क्यों लगाए

गूगल algorithm के अनुसार जिस ब्लॉग की पेज लोडिंग स्पीड फास्ट होती है वही ब्लॉग गूगल सर्च में ज्यादा रैंक करती है। किसी भी ब्लॉग के पेज लोडिंग स्पीड पर इमेजेस का बहुत बड़ा प्रभाव पड़ता है। अगर आप अपने पोस्ट में बहुत से इमेजेस यूज किए है तो वह आपके पेज लोडिंग स्पीड को slow कर देंगे।

इस स्थिति में आप image lazy loading का इस्तेमाल करके अपने ब्लॉग पेज लोडिंग को improve कर सकते है। उदाहरण के लिए, अगर आपने अपने पोस्ट में 10 images add किए है और जब विजिटर उस पोस्ट को open करेगा तो सभी 10 photos load होंगे, जिसमे time लगेगा, इससे page loading speed slow हो जाती है।

लेकिन अब अगर आप Lazy load technique का उपयोग करते हो तो page को open करने पर सिर्फ 1 image लोड होगा, और बाकि 9 इमेज user के scroll down करने पर load होगा।

तो चलिए अब मैं आपको बताता हु ब्लॉगर ब्लॉग में lazy loading कैसे ऑन करना है…

Blogger Website में Image Lazy Load Enable कैसे करें

• सबसे पहले अपने ब्लॉगर डैशबोर्ड में लॉगिन करे।
• उसके theme ऑप्शन पर क्लिक करे।
• उसके बाद customise के बगल में आइकन पर क्लिक करे।
• उसके बाद Edit HTML पर क्लिक करे।
• उसके बाद आप अपने कंप्यूटर कीबोर्ड में Ctrl +F दबाए। और सर्च बॉक्स में </body> लिखकर सर्च करे।
• अब आप नीचे दिए गए स्क्रिप्ट कोड को कॉपी करके </body> के पहले paste करे।

<script>
//<![CDATA[
// Lazy Load
(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:"https://4.bp.blogspot.com/-XNnCtsmVWps/WwUzI4O3OMI/AAAAAAAAGzM/s5IzNI42txMh8ZglfGk9ktfD7CqQ0JkMgCLcBGAs/s1600/sun.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

अधिक जानकारी के लिए आप इस वीडियो को देख कर अच्छे से समझ सकते है ब्लॉगर ब्लॉग में lazy load enable कैसे करते है।

उम्मीद करता हु इस आर्टिकल से आपकी जरूर मदद हुई होगी। अगर आपको ब्लॉगर ब्लॉग में lazy load enable करने में कोई दिक्कत आ रही हो तो आप मुझे कॉमेंट जरूर करे।