👩🏽‍🤝‍👨🏿 🙌🏿 🏰 आलसी ब्राउज़र छवि लोड हो रहा है (लोडिंग विशेषता) 💛 🤛🏾 ✴️

अंतर्निहित आलसी छवि और iframe अपलोड के लिए समर्थन वेब पर आ गया है!
Chrome संस्करण 76 से शुरू होकर, आप इसके लिए अतिरिक्त कोड लिखने या तृतीय-पक्ष जावास्क्रिप्ट लाइब्रेरी का उपयोग किए बिना संसाधनों को लोड करने के लिए नई loading विशेषता का उपयोग कर सकते हैं। आइए डिटेल्स में देखें।

यह वीडियो इस फ़ंक्शन का एक उदाहरण प्रदर्शित करता है:

क्यों अंतर्निहित आलसी लोड हो रहा है?

HTTPArchive के अनुसार, छवियां अधिकांश साइटों पर सबसे अनुरोधित प्रकार का संसाधन हैं और आमतौर पर किसी अन्य की तुलना में अधिक बैंडविड्थ का उपभोग करती हैं। 90 वें प्रतिशतक पर, साइटें डेस्कटॉप और मोबाइल उपकरणों के लिए लगभग 4.7 एमबी चित्र भेजती हैं। बिल्लियों के साथ पर्याप्त तस्वीरें ।

एंबेडेड iframes भी बहुत सारे डेटा का उपभोग करते हैं और पृष्ठ प्रदर्शन के लिए हानिकारक हो सकते हैं। गैर-महत्वपूर्ण छवियों और iframes को डाउनलोड करना केवल उस समय जब उपयोगकर्ता उन्हें देख सकता है पेज लोडिंग गति में सुधार करता है, उपयोगकर्ता चैनल बैंडविड्थ पर लोड को कम करता है और मेमोरी उपयोग को कम करता है।

वर्तमान में ऑफ-स्क्रीन स्थित लोड हो रही छवियों और फ़्रेमों को विलंबित करने के दो तरीके हैं:

इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करना
scroll , resize या orientationchange इवेंट हैंडलर का उपयोग करना

कोई भी विकल्प डेवलपर्स को आलसी लोडिंग कार्यक्षमता को सक्षम करने की अनुमति दे सकता है, और कई ने अमूर्तता प्रदान करने के लिए तीसरे पक्ष के पुस्तकालय बनाए हैं जो उपयोग करने के लिए और भी आसान हैं। यदि आपके पास सीधे ब्राउज़र में आलसी लोडिंग के लिए समर्थन है, तो तीसरे पक्ष के पुस्तकालय की आवश्यकता नहीं होगी। अंतर्निहित आलसी लोडिंग यह भी सुनिश्चित करती है कि छवियों के विलंबित लोडिंग और फ़्रेम काम करना जारी रखें, भले ही क्लाइंट क्लाइंट पर जावास्क्रिप्ट अक्षम हो।

लोड हो रहा है विशेषता

आज, क्रोम पहले से ही अलग-अलग प्राथमिकताओं के साथ छवियों को डाउनलोड करता है, इस पर निर्भर करता है कि वे डिवाइस के देखने के क्षेत्र के सापेक्ष कहां स्थित हैं। देखने के क्षेत्र के नीचे की छवियां कम प्राथमिकता के साथ अपलोड की जाती हैं, लेकिन फिर भी जितनी जल्दी हो सके अपलोड की जाती हैं।

Chrome 76 में, आप स्क्रीन से छवियों और फ़्रेम को लोड करने में देरी करने के लिए loading विशेषता का उपयोग कर सकते हैं, जिस पर स्क्रॉल करके पहुंचा जा सकता है:

 <img src="image.png" loading="lazy" alt="…" width="200" height="200"> <iframe src="https://example.com" loading="lazy"></iframe>

समर्थित विशेषता मान loading :

auto : ब्राउज़र में डिफ़ॉल्ट आलसी लोडिंग मोड सेटिंग। लापता विशेषता के रूप में भी
lazy : दृश्य से अनुमानित दूरी तक पहुंचने तक एक संसाधन लोड करना
eager : पृष्ठ पर इसके स्थान के बावजूद, तुरंत एक संसाधन लोड करना

यह सुविधा तब तक अपडेट होती रहेगी जब तक कि इसे स्थिर संस्करण में लॉन्च नहीं किया जाता (क्रोम 76 से पहले नहीं)। लेकिन आप क्रोम में निम्नलिखित झंडे सक्रिय करके इसे आज़मा सकते हैं:

क्रोम: // झंडे / # सक्षम-आलसी-छवि-लोडिंग
क्रोम: // झंडे / # सक्षम-आलसी-फ्रेम-लोडिंग

दूरी थ्रेसहोल्ड लोड हो रहा है

स्क्रॉलिंग की आवश्यकता के बिना पृष्ठ पर दिखाई देने वाली सभी छवियां और फ़्रेम मानक के रूप में लोड किए गए हैं। जो डिवाइस के देखने के क्षेत्र के नीचे स्थित हैं, केवल तभी लोड किए जाते हैं जब उपयोगकर्ता उन्हें स्क्रॉल करता है।

जिस दूरी पर लोडिंग शुरू होती है वह तय नहीं होती है और कई कारकों के आधार पर भिन्न होती है:

लोड किए जाने वाले संसाधन का प्रकार (छवि या फ़्रेम)
Android के लिए क्रोम ब्राउज़र में " लाइट मोड " चालू है
प्रभावी कनेक्शन प्रकार

आप क्रोमियम स्रोत में विभिन्न प्रकार के प्रभावी यौगिकों के लिए डिफ़ॉल्ट मान पा सकते हैं। देखने के क्षेत्र से एक निश्चित दूरी तक पहुंचने पर ये मैट्रिक्स और यहां तक कि लोडिंग दृष्टिकोण निकट भविष्य में बदल सकता है, क्योंकि क्रोम टीम डाउनलोडिंग शुरू करने के लिए निर्धारित करने के लिए अनुमानों में सुधार करती है।

Chrome 77 में, आप DevTools में कनेक्शन की गति को धीमा करके इन विभिन्न थ्रेसहोल्ड के साथ प्रयोग कर सकते हैं। इस दौरान, आपको chrome://flags/#force-effective-connection-type. का उपयोग करके ब्राउज़र में प्रभावी कनेक्शन प्रकार को ओवरराइड करना होगा chrome://flags/#force-effective-connection-type. ध्वज chrome://flags/#force-effective-connection-type.

छवियाँ अपलोड करें

लोडिंग विशेषता फ़्रेमों को छवियों की तुलना में अलग-अलग तरीके से प्रभावित करती है, यह इस बात पर निर्भर करता है कि फ़्रेम छिपा हुआ है (छिपे हुए फ्रेम अक्सर एनालिटिक्स या संचार कार्यों के लिए उपयोग किया जाता है)। यदि कोई फ़्रेम छिपा हुआ है, तो यह निर्धारित करने के लिए Chrome निम्नलिखित मानदंडों का उपयोग करता है:

फ्रेम चौड़ाई और ऊंचाई 4px या उससे कम
display: none या visibility: hidden गुण लागू होते हैं
नेगेटिव X या Y पोजिशनिंग का उपयोग कर फ्रेम ऑफ स्क्रीन है

यदि कोई फ़्रेम इन शर्तों में से किसी से मिलता है, तो क्रोम इसे छिपा हुआ मानता है और अधिकांश मामलों में स्थगित मोड में लोड नहीं करेगा। फ़्रेम जो छिपे नहीं हैं वे केवल लोड किए जाएंगे जब वे लोड सीमा के भीतर आते हैं। फ़्रेम के लिए जो अभी भी आस्थगित लोडिंग मोड में लोड हो रहे हैं, एक प्लेसहोल्डर प्रदर्शित होता है

पूछे जाने वाले प्रश्न

क्या इस सुविधा का विस्तार करने की कोई योजना है?

इस मोड में किसी भी चित्र और फ़्रेम को स्वचालित रूप से प्रदर्शित करने के लिए डिफ़ॉल्ट ब्राउज़र विलंबित लोडिंग मोड को बदलने की योजना है, जिसकी लोडिंग में देरी हो सकती है यदि Android के लिए Chrome में लाइट मोड सक्षम है।

क्या उस छवि या दूरी की दूरी को बदलना संभव है जिस पर लोडिंग शुरू होने में देरी हो रही है?

ये मान हार्डकोड हैं और एपीआई के माध्यम से नहीं बदले जा सकते हैं। हालाँकि, वे भविष्य में बदल सकते हैं, क्योंकि क्रोम टीम विभिन्न थ्रेसहोल्ड दूरी और चर के साथ प्रयोग कर रही है।

क्या सीएसएस पृष्ठभूमि संपत्ति के माध्यम से सेट की गई छवियां लोडिंग विशेषता प्राप्त कर सकती हैं?

नहीं, फिलहाल इसका उपयोग केवल टैग के साथ किया जा सकता है।

लोडिंग विशेषता उन छवियों के साथ कैसे काम करती है जो दायरे में हैं लेकिन दिखाई नहीं देती हैं (हिंडोला की तरह)?

आस्थगित मोड में, केवल उन छवियों को लोड किया जाता है जो डिवाइस के देखने के क्षेत्र के नीचे से एक निश्चित दूरी पर हैं। देखने के क्षेत्र के ऊपर सभी छवियां, चाहे वे वर्तमान में दिखाई दे रही हों, सामान्य रूप से भरी हुई हैं।

क्या होगा यदि मैं पहले से ही लोडिंग छवियों या फ़्रेमों को स्थगित करने के लिए एक तृतीय-पक्ष लाइब्रेरी या स्क्रिप्ट का उपयोग करता हूं?

लोडिंग विशेषता को कोड को प्रभावित नहीं करना चाहिए जो डेटा को स्थगित मोड में लोड करता है, लेकिन कुछ महत्वपूर्ण बिंदुओं पर विचार करना महत्वपूर्ण है:

यदि आपका तृतीय-पक्ष बूटलोडर आस्थगित मोड में छवियों या फ़्रेमों को लोड करने से पहले क्रोम को सामान्य मोड में लोड करने की कोशिश करता है, जो कि ब्राउज़र डाउनलोड दूरी सीमा से अधिक दूरी पर है, तो उन्हें अभी भी विलंबित और सामान्य कंप्यूटर व्यवहार के नियमों के अनुसार लोड किया जाएगा।
यदि आपका तृतीय-पक्ष बूटलोडर यह निर्धारित करने के लिए छोटी दूरी का उपयोग करता है कि ब्राउज़र से किसी विशेष छवि या फ्रेम को कब लोड किया जाए, तो व्यवहार आपके बूटलोडर की सेटिंग्स से मेल खाएगा

लोडिंग = "आलसी" के साथ समानांतर में एक तीसरे पक्ष के पुस्तकालय का उपयोग जारी रखने के लिए महत्वपूर्ण कारणों में से एक है, इस विशेषता का समर्थन नहीं करने वाले ब्राउज़रों के लिए एक पॉलीफ़ाइल प्रदान करना।

क्या अन्य ब्राउज़र एकीकृत आलसी लोडिंग का समर्थन करते हैं?

loading विशेषता को एक प्रगतिशील सुधार के रूप में देखा जा सकता है। इसका समर्थन करने वाले ब्राउज़र चित्र और फ़्रेम को आस्थगित मोड में अपलोड कर सकते हैं। जो समर्थन नहीं करते हैं - अब के लिए, हमेशा की तरह छवियां अपलोड करें। क्रॉस-ब्राउज़र समर्थन के दृष्टिकोण से, क्रोम 76 में loading विशेषता का समर्थन किया गया है और क्रोमियम 76 पर आधारित किसी भी ब्राउज़र। फ़ायरफ़ॉक्स में इस फ़ंक्शन को लागू करने के बारे में एक खुला बग भी है।

इसी तरह के एपीआई का प्रस्ताव IE और एज में किया गया था, लेकिन इसे पूरी तरह से बंद करने के बजाय डाउनलोड प्राथमिकताओं को कम करने पर ध्यान केंद्रित किया गया था।

उन ब्राउज़रों के साथ क्या करना है जो अभी तक अंतर्निहित विलंब डाउनलोड का समर्थन नहीं करते हैं?

पॉलीफ़ाइल बनाएँ या स्थगित मोड में साइट पर चित्र अपलोड करने के लिए एक तृतीय-पक्ष लाइब्रेरी का उपयोग करें। लोडिंग संपत्ति का उपयोग यह निर्धारित करने के लिए किया जा सकता है कि क्या ब्राउज़र में कार्यक्षमता समर्थित है:

 if ('loading' in HTMLImageElement.prototype) { // supported in browser } else { // fetch polyfill/third-party library }

उदाहरण के लिए, lazysizes आलसी लोडिंग के लिए एक लोकप्रिय जावास्क्रिप्ट लाइब्रेरी है। आप इस लायब्रेरी को लोड करने के लिए loading विशेषता के लिए समर्थन को तभी परिभाषित कर सकते हैं जब loading समर्थित नहीं है। यह निम्नानुसार काम करता है

 <!-- Let's load this in-viewport image normally --> <img src="hero.jpg" alt="…"> <!-- Let's lazy-load the rest of these images --> <img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload"> <img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload"> <script> if ('loading' in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach(img => { img.src = img.dataset.src; }); } else { // Dynamically import the LazySizes library const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.8/lazysizes.min.js'; document.body.appendChild(script); } </script>

काम का प्रदर्शन । कार्रवाई में गिरावट देखने के लिए फ़ायरफ़ॉक्स या सफारी जैसे ब्राउज़रों में इसे आज़माएं।

लायज़िज़लाइज़ लाइब्रेरी भी एक अंतर्निहित लोडिंग प्लगइन प्रदान करती है जो कि जब संभव हो तो अंतर्निहित विलंबित लोडिंग का उपयोग करती है, और आवश्यक होने पर लाइब्रेरी कार्यक्षमता का उपयोग करती है।

इनलाइन लोडिंग में देरी होने से पृष्ठ पर विज्ञापन कैसे प्रभावित होते हैं?

छवियों या फ़्रेम के रूप में प्रस्तुत सभी विज्ञापन भी किसी अन्य छवियों या फ़्रेम की तरह, स्थगित मोड में लोड किए जाते हैं।

यदि वेब पेज प्रिंट करता है तो छवियों को कैसे संसाधित किया जाता है?

हालाँकि Chrome 76 में कोई कार्यक्षमता नहीं है, फिर भी एक खुली समस्या है जो किसी पृष्ठ को प्रिंट करते समय सभी छवियों और फ़्रेमों को तुरंत लोड करती है।

निष्कर्ष

छवियों और फ़्रेमों के आलसी लोडिंग के लिए अंतर्निहित समर्थन का उपयोग करना वेब पृष्ठों के प्रदर्शन में काफी सुधार कर सकता है।

यदि आप Chrome में इस सुविधा को सक्षम करते समय कोई असामान्य व्यवहार देखते हैं, तो त्रुटि की रिपोर्ट करें ।

आलसी ब्राउज़र छवि लोड हो रहा है (लोडिंग विशेषता)