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

Image Lazy Loading एक ऐसी तकनीक है जो web pages पर images को तब तक लोड करने में देरी करती है, जब तक कि उनकी आवश्यकता न हो। Lazy Loading website performance में सुधार करता है और server bandwidth को बचाता है, खासकर उन वेबसाइट पर जिन पर बहुत अधिक images का उपयोग किया जाता है।

Blogger एक free blogging platform है, जिसका उपयोग बहुत अधिक लोगों द्वारा blog बनाने के लिए किया जाता है। इसे Pyra Labs द्वारा विकसित किया गया था, जिसे 2003 में Google द्वारा खरीदा गया था। Website Performance को बेहतर बनाने के लिए ब्लॉगर वेबसाइटों पर Lazy Loading को enable किया जा सकता है। जोकि बहुत ही आसान कार्य है।

Website Speed के लिए images बहुत अधिक important role play करती है। अगर आप अपनी वेबसाइट के webpages में बहुत अधिक images का उपयोग करते हैं, तो इससे आपकी वेबसाइट की loading speed बहुत अधिक down हो जाती है।

अगर आप WordPress का उपयोग करते हैं, तो वहां पर आपको बहुत से ऐसे प्लगइन मिल जाते हैं। जिनका उपयोग करके आप अपनी वेबसाइट पर उपयोग की जाने वाली images को optimize कर सकते हैं। जैसे imagify, short pixel और smush.

लेकिन यदि आप ब्लॉगर प्लेटफार्म का उपयोग करते हैं, तो वहां पर आपको कोई भी ऐसा ऑप्शन नहीं मिलता जिसका उपयोग करके आप इमेजेस को ऑप्टिमाइज कर सके। इसलिए ब्लॉगर पर इस्तेमाल करने से पहले आपको इमेजेस को मैनुअली optimize करना पड़ता है।

हम आपको सलाह देंगे कि आप ब्लॉगर पर webp format images का उपयोग करें। क्योंकि webp format में image size कम रहता है, जिससे web page अधिक जल्दी से लोड होता है।

आप images को webp images में convert करने के लिए हमारे Image Converter Tool का उपयोग कर सकते हैं और इसके अलावा आप अपनी blogger website पर Image Lazy Load Enable कर भी website speed को बढ़ा सकते हैं।

इस लेख में हम आपको बताने वाले हैं कि आप Blogger Website में Image Lazy Load Enable कैसे कर सकते हैं।

Lazy Loading क्या है?

Lazy Loading का अर्थ है, Content केवल तभी load होता है जब उसकी आवश्यकता होती है। यह website performance के लिए फायदेमंद होता है क्योंकि webpage अधिक तीव्रता से लोड हो जाते है।

Images, Videos और यहां तक ​​कि संपूर्ण pages सहित विभिन्न प्रकार की सामग्री के लिए lazy loading का उपयोग किया जा सकता है। जब इसे ठीक से implemente किया जाता है, तो यह किसी भी website speed को बहुत अधिक बढ़ा देता है।

हालांकि lazy loading में कुछ कमियां हैं, जिसमें कुछ सामग्री के कभी लोड न होने की संभावना भी शामिल है यदि user के द्वारा webpage को नीचे तक scroll नहीं किया जाता। यह भी ध्यान में रखें कि  वेबसाइट पर lazy-loading implemente करने से user experience पर negative प्रभाव ना पड़े।

Image Lazy Load Enable करने के क्या लाभ हैं?

Image Lazy Load एक ऐसी प्रक्रिया है जिसके द्वारा images को केवल तभी load किया जाता है जब वे स्क्रीन पर दिखाई देती हैं। यह कई कारणों से फायदेमंद होता है।

Image Lazy Loading पृष्ठ लोड समय में सुधार करता हैं। इससे कोई image तब तक दिखाई नहीं देती है जब तक कि user webpage को नीचे स्क्रॉल नहीं करता है। यह आपकी वेबसाइट स्पीड को बढ़ाता है और साथ में bandwidth भी सेव करता है।

Image Lazy Loading उपयोगकर्ता अनुभव को भी बेहतर बनाती हैं। यदि कोई page लोड होने में बहुत अधिक समय लेता है, तो visitor उस content को देखने से पहले ही छोड़ सकते हैं। जिससे आपकी वेबसाइट का bounce rate बढ़ता है और जिससे आपकी वेबसाइट की रैंकिंग डाउन होती है।

कुल मिलाकर, Lazy Loading web pages speed और user experience को बेहतर बनाने का एक शानदार तरीका हैं।

Lazy Loading कैसे काम करता है?

Lazy Loading एक तकनीक है। जिसका उपयोग resources की लोडिंग को तब तक टालने के लिए किया जाता है, जब तक कि उनकी आवश्यकता न हो। यह पहले से लोड किए जाने वाले डेटा की मात्रा को कम कर website performance में सुधार करता है, और तेज प्रारंभिक लोड समय प्रदान कर user experience को भी बेहतर बनाता है।

Lazy Loading का उपयोगआमतौर पर images के लिए किया जाता है, लेकिन इसका उपयोग अन्य प्रकार के resources जैसे CSS और JavaScript files के लिए भी किया जा सकता है। जब Lazy Loading Enable होती है, तो web browser केवल उन resources को load करेगा जो screen पर दिखाई दे रहे हैं और जैसे-जैसे user webpage को नीचे स्क्रॉल करता है, वैसे-वैसे अधिक resources load होते जाते हैं जैसे वे दिखाई देते हैं।

Lazy Loading को विभिन्न तकनीकों का उपयोग करके implemente किया जा सकता है, जैसे कि अगर आप wordpress का उपयोग करते हैं तो आप Lazy Loading implemente करने के लिए बहुत से ऐसे प्लगइन है जिनका का उपयोग कर सकते हैं। जैसे wprocket.

लेकिन अगर आप blogger प्लेटफार्म का उपयोग करते हैं, तो आप Lazy Loading Enable करने के लिए script का उपयोग कर सकते हैं। तो चलिए दोस्तों अब हम आपको बताते हैं कि Blogger Website में Image Lazy Load Enable कैसे करें?

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

अब हम आपको बताने वाले हैं कि आप किस प्रकार से एक स्क्रिप्ट का उपयोग कर Blogger Website में Image Lazy Load Enable कर सकते हैं। इसके लिए आप नीचे दिए गए स्टेप्स को फॉलो करें।

• सबसे पहले blogger.com पर जाएं और लॉगिन करें।
• इसके बाद लेफ्ट साइड में theme option पर क्लिक करें।
• अब drop dowm menu में edit HTML पर क्लिक करें।
• अब सबसे नीचे स्क्रॉल करें और  यहां पर आपको </body> tag  मिल जाएगा और अगर </body> tag  ना मिले तो आप Ctrl + F key का उपयोग कर </body> find  कर सकते हैं।
•  इसके बाद नीचे दिए गए code को </body> tag ठीक ऊपर पेस्ट कर दें।

<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>
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

• अब आपको राइट साइड में सबसे ऊपर save icon पर क्लिक कर सेटिंग को सेव कर लेना है।

अब अपने Blogger Website में Image Lazy Load Enable कर लिया है।

अगर आप यह चेक करना चाहते हैं कि आपकी ब्लॉगर वेबसाइट पर Image Lazy Load Enable हुआ है या नहीं। इसके लिए आप google page speed insight tool का उपयोग  कर सकते हैं। बहुत से ब्लॉगर इस tool का उपयोग अपनी वेबसाइट की speed check  करने के लिए करते हैं।

आप नीचे दी गई image में देख सकते हैं कि जब हमने अपनी blogger वेबसाइट पर इस script का उपयोग किया तो हमारी वेबसाइट ने Image Lazy Load audit pass कर लिया।

Blogger Website में बिना Script के Image Lazy Load Enable कैसे करें?

जो हमने आपको ऊपर मेथड बताया है उसका उपयोग करके आप अपनी पूरी ब्लॉगर वेबसाइट में Script का उपयोग कर Image Lazy Load Enable कर सकते हैं।

लेकिन अगर आप script  का उपयोग नहीं करना चाहते हैं तो आप एक छोटे से code का उपयोग कर इमेज पर lazy load implimen कर सकते हैं।

इसके लिए आपको इमेज कोड में loding=”Lazy” code add करना होगा जैसे कि नीचे दिखाया गया है

<img src="#" alt="image alt tag" loading="lazy"/>

जैसे ही आप इस कोड का उपयोग किसी इमेज में करेंगे, तो यह कोड वेब ब्राउज़र को बताएगा कि इमेज को lazy load करना है। जिस कारण से user के द्वारा scroll  करने पर ही image load होगी।

Note :-  यहां पर ध्यान रखने योग्य बात यह है, कि आपको इस कोड को हर इमेज में ऐड करना होगा जिसे आप लेजीलोड करवाना चाहते हैं।

निष्कर्ष

Lazy Loading एक ऐसी तकनीक है। जो सभी images को एक साथ लोड करने के बजाय images को आवश्यकतानुसार लोड करती है। यह webpage load समय में सुधार करती है, विशेष रूप से उन वेबसाइटों पर जिन पर बहुत अधिक images का उपयोग किया जाता है।

यह छवियों को केवल तभी लोड करेगा जब वे स्क्रीन पर दिखाई देंगी, जिससे पृष्ठ लोड समय में सुधार होता है। 

कई छवियों वाली वेबसाइटों पर पेज लोड समय को बेहतर बनाने के लिए Lazy Loading एक शानदार तरीका है। छवियों को केवल तभी लोड करके जब उनकी आवश्यकता हो, आप किसी पृष्ठ को लोड करने में लगने वाले समय को कम कर सकते हैं।

अगर आपको यह लेख पसंद आया हो तो इसे अपने दोस्तों के साथ शेयर करें और उन्हें भी बताएं कि how to enable lazy load in blogger website?

अगर आपका कोई सवाल हो तो आप हमें नीचे दिए गए कमेंट बॉक्स में कमेंट कर सकते हैं।