वेब के लिए ब्राउज़र-लेवल की इमेज लेज़ी लोडिंग

बिल्टइन लेज़ी लोडिंग अब उपलब्ध है!

लेज़ी लोडिंग इमेज के लिए अब वेब पर ब्राउज़र-लेवल की सुविधा उपलब्ध है! इस वीडियो में, इस सुविधा का डेमो दिखाया गया है:

कस्टम लेज़ी लोडिंग कोड लिखे बिना या किसी अलग JavaScript लाइब्रेरी का इस्तेमाल किए बिना, इमेज को लेज़ी-लोड करने के लिए, loading एट्रिब्यूट का इस्तेमाल किया जा सकता है. आइए, इनके बारे में विस्तार से जानते हैं.

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

जो ब्राउज़र loading एट्रिब्यूट के साथ काम नहीं करते वे खराब असर के बिना, इसे अनदेखा कर देते हैं.

ब्राउज़र-लेवल पर लेज़ी लोडिंग क्यों ज़रूरी है?

एचटीटीपी संग्रह के मुताबिक, ज़्यादातर वेबसाइटों के लिए इमेज सबसे ज़्यादा अनुरोध की जाने वाली एसेट होती हैं. ये आम तौर पर किसी दूसरे संसाधन की तुलना में ज़्यादा बैंडविड्थ का इस्तेमाल करती हैं. 90वें पर्सेंटाइल पर, साइटें 5 एमबी से ज़्यादा इमेज डेस्कटॉप और मोबाइल पर भेजती हैं. ये बिल्ली की बहुत सारी तस्वीरें हैं.

पहले, ऑफ़-स्क्रीन इमेज को लोड होने से रोकने के दो तरीके थे:

• Intersection Objectr API का इस्तेमाल किया जाता है
• scroll, resize या orientationchange इवेंट हैंडलर का इस्तेमाल करके

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

loading एट्रिब्यूट

Chrome, डिवाइस के व्यूपोर्ट के हिसाब से अलग-अलग प्राथमिकताओं पर इमेज लोड करता है. यह इस बात पर निर्भर करता है कि इमेज किस जगह पर हैं. व्यूपोर्ट के नीचे मौजूद इमेज को कम प्राथमिकता के साथ लोड किया जाता है, लेकिन पेज लोड होने पर उन्हें फ़ेच किया जाता है.

loading एट्रिब्यूट का इस्तेमाल करके, स्क्रोल करके ऑफ़स्क्रीन इमेज को लोड होने से रोका जा सकता है:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

यहां loading एट्रिब्यूट के लिए इस्तेमाल की जा सकने वाली वैल्यू दी गई हैं:

• lazy: संसाधन को तब तक लोड होने से रोकें, जब तक कि यह व्यूपोर्ट से तय की गई दूरी तक न पहुंच जाए.
• eager: ब्राउज़र का लोड होने का डिफ़ॉल्ट तरीका, जो एट्रिब्यूट को शामिल न करने जैसा ही है. इसका मतलब है कि इमेज, पेज पर कहीं भी लोड होती है. यह डिफ़ॉल्ट रूप से सेट है, लेकिन अगर टूल में कोई साफ़ तौर पर वैल्यू न होने पर, loading="lazy" को अपने-आप जोड़ा जाता है या अगर यह साफ़ तौर पर सेट न हो, तो आपके लिंटर से शिकायत मिलती है. ऐसे में, साफ़ तौर पर इसे सेट करना फ़ायदेमंद हो सकता है.

loading एट्रिब्यूट और फ़ेच करने की प्राथमिकता के बीच का संबंध

eager वैल्यू, इमेज को हमेशा की तरह लोड करने का निर्देश है. अगर इमेज ऑफ़-स्क्रीन है, तो उसे लोड होने में ज़्यादा समय नहीं लगता. इसका यह मतलब नहीं है कि loading="eager" एट्रिब्यूट के बिना, इमेज अन्य इमेज की तुलना में ज़्यादा जल्दी लोड होती है.

ब्राउज़र अलग-अलग अनुभव के आधार पर संसाधनों को प्राथमिकता देते हैं. loading एट्रिब्यूट सिर्फ़ यह बताता है कि इमेज रिसॉर्स को सूची में कब प्राथमिकता दी गई है, न कि उस सूची में उसे कैसे प्राथमिकता दी गई है. eager का मतलब है कि सूची बनाने की सुविधा देने वाले सामान्य ब्राउज़र, डिफ़ॉल्ट रूप से इनका इस्तेमाल करते हैं.

अगर आपको किसी अहम इमेज (उदाहरण के लिए, एलसीपी इमेज) को फ़ेच करने की प्राथमिकता बढ़ानी है, तो fetchpriority="high" की मदद से, फ़ेच प्राथमिकता का इस्तेमाल किया जाना चाहिए.

ध्यान दें कि loading="lazy" और fetchpriority="high" वाली इमेज, स्क्रीन के बंद होने पर भी देरी से चलेगी. इसके बाद, जब यह व्यूपोर्ट में दिखने वाली होगी, तब इमेज को ज़्यादा प्राथमिकता पर फ़ेच किया जा सकेगा. इस मामले में, इसे ज़्यादा प्राथमिकता के साथ फ़ेच किया जा सकता है. इसलिए, इस कॉम्बिनेशन की न तो ज़रूरत होनी चाहिए और न ही इसका इस्तेमाल किया जाना चाहिए.

व्यूपोर्ट से दूरी के थ्रेशोल्ड

फ़ोल्ड के ऊपर मौजूद सभी इमेज सामान्य रूप से लोड होती हैं. ये इमेज, बिना स्क्रोल किए तुरंत देखी जा सकती हैं. जो पेज, डिवाइस के व्यूपोर्ट से बहुत नीचे होते हैं वे सिर्फ़ तब फ़ेच किए जाते हैं, जब उपयोगकर्ता उनके आस-पास स्क्रोल करता है.

Chromium की लेज़ी लोडिंग सुविधा यह पक्का करने की कोशिश करती है कि ऑफ़स्क्रीन इमेज जल्दी लोड हो जाएं, ताकि उपयोगकर्ता के आस-पास स्क्रोल करने पर वे इमेज पूरी तरह से लोड हो जाएं. आस-पास की इमेज को व्यूपोर्ट में दिखने से पहले ही फ़ेच करके, हम उनके दिखने के समय तक उन इमेज के लोड होने की संभावना को बढ़ा देते हैं.

JavaScript की लेज़ी लोडिंग लाइब्रेरी की तुलना में, व्यू में स्क्रोल करने वाली इमेज को फ़ेच करने के थ्रेशोल्ड को कंज़र्वेटिव माना जा सकता है.

दूरी का थ्रेशोल्ड तय नहीं किया गया है और कई वजहों से इसमें अंतर हो सकता है:

• फ़ेच किए जा रहे इमेज रिसॉर्स का टाइप
• कनेक्शन का असरदार टाइप

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

डेटा की बेहतर बचत और व्यूपोर्ट से दूरी के थ्रेशोल्ड

व्यूपोर्ट से इमेज की लेज़ी लोडिंग की दूरी के थ्रेशोल्ड को अलाइन करने के लिए, Chrome ने जुलाई 2020 तक काफ़ी सुधार किए हैं. इससे डेवलपर की उम्मीदों को बेहतर तरीके से पूरा किया जा सकेगा.

तेज़ कनेक्शन (4G) पर, हमने Chrome के व्यूपोर्ट के थ्रेशोल्ड को 3000px से घटाकर 1250px कर दिया है. साथ ही, धीमे कनेक्शन (3G या उससे कम) पर, थ्रेशोल्ड को 4000px से बदलकर 2500px कर दिया है. इस बदलाव से दो फ़ायदे होते हैं:

• <img loading=lazy>, JavaScript की लेज़ी लोडिंग लाइब्रेरी से मिलने वाले अनुभव के जैसा ही काम करता है.
• व्यूपोर्ट से दूरी के नए थ्रेशोल्ड की मदद से, हम अब भी यह गारंटी दे पाते हैं कि उपयोगकर्ता के स्क्रोल करने से पहले तक इमेज लोड हो गई हैं.

तेज़ कनेक्शन (4G) का इस्तेमाल करके, हमारे किसी डेमो के लिए, पुराने और नए व्यूपोर्ट थ्रेशोल्ड के बीच तुलना की जा सकती है:

पुराने थ्रेशोल्ड बनाम नए थ्रेशोल्ड:

और नए थ्रेशोल्ड बनाम LazySize (एक लोकप्रिय JS लेज़ी लोडिंग लाइब्रेरी):

हम वेब स्टैंडर्ड कम्यूनिटी के साथ काम करने के लिए प्रतिबद्ध हैं, ताकि अलग-अलग ब्राउज़र पर, व्यूपोर्ट-व्यूपोर्ट के थ्रेशोल्ड तक पहुंचने के तरीके को बेहतर तरीके से अलाइन किया जा सके.

इमेज में डाइमेंशन के एट्रिब्यूट शामिल होने चाहिए

जब ब्राउज़र किसी इमेज को लोड करता है, तब उसे इमेज के डाइमेंशन के बारे में तुरंत पता नहीं चलता. ऐसा तब तक होता है, जब तक कि साफ़ तौर पर इसकी जानकारी न दी गई हो. ब्राउज़र में इमेज के लिए पेज में ज़रूरी जगह सेव करने के लिए, यह सुझाव दिया जाता है कि सभी <img> टैग में width और height, दोनों एट्रिब्यूट शामिल हों. डाइमेंशन तय किए बिना, लेआउट में बदलाव हो सकते हैं. ये ऐसे पेजों पर ज़्यादा दिखते हैं जिन्हें लोड होने में ज़्यादा समय लगता है.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

इसके अलावा, सीधे इनलाइन स्टाइल में उनकी वैल्यू तय की जा सकती है:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

डाइमेंशन सेट करने का सबसे सही तरीका, <img> टैग पर लागू होता है. भले ही, वे लेज़ी लोड हो रहे हों या नहीं. लेज़ी लोडिंग की वजह से, यह तरीका ज़्यादा काम का बन सकता है. मॉडर्न ब्राउज़र में, इमेज पर width और height को सेट करने से, ब्राउज़र अपने स्वाभाविक साइज़ का अनुमान लगा सकते हैं.

अगर डाइमेंशन शामिल नहीं किए जाते हैं, तो ज़्यादातर मामलों में इमेज लेज़ी-लोड होती हैं, लेकिन कुछ ऐसे किनारे होते हैं जिनके बारे में आपको पता होना चाहिए. width और height के बारे में बताए बिना, इमेज के डाइमेंशन शुरू में 0×0 पिक्सल होंगे. अगर आपके पास ऐसी इमेज की गैलरी है, तो ब्राउज़र यह नतीजा निकाल सकता है कि शुरू में ही सभी इमेज व्यूपोर्ट में फ़िट हो जाती हैं, क्योंकि हर इमेज असल में कोई जगह नहीं लेती और कोई भी इमेज ऑफ़स्क्रीन पर नहीं धकेल दी जाती. इस मामले में, ब्राउज़र यह तय करता है कि वे सभी, उपयोगकर्ता को दिख रहे हैं या नहीं. इसके बाद, ब्राउज़र हर चीज़ को लोड करने का फ़ैसला करता है.

साथ ही, इमेज के डाइमेंशन तय करने से, लेआउट शिफ़्ट होने की संभावना कम हो जाती है. अगर इमेज के लिए डाइमेंशन शामिल नहीं किए जा पा रहे हैं, तो लेज़ी लोडिंग में नेटवर्क के रिसॉर्स सेव होने और लेआउट शिफ़्ट होने का जोखिम बढ़ सकता है.

Chromium में लेज़ी लोडिंग को इस तरह से लागू किया जाता है कि इमेज दिखने के बाद ही लोड हो जाती हैं. हालांकि, अभी भी हो सकता है कि वे अभी तक लोड न हों. इस मामले में, ऐसी इमेज में width और height एट्रिब्यूट न होने पर, कुल लेआउट शिफ़्ट पर असर पड़ता है.

<picture> एलिमेंट का इस्तेमाल करके तय की गई इमेज, लेज़ी लोड भी हो सकती हैं:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

हालांकि, ब्राउज़र यह तय करेगा कि किसी भी <source> एलिमेंट से कौनसी इमेज लोड करनी है, लेकिन loading एट्रिब्यूट को सिर्फ़ फ़ॉलबैक <img> एलिमेंट में शामिल करने की ज़रूरत है.

लेज़ी लोडिंग ऐसी इमेज से बचें जो पहले दिखने वाले व्यूपोर्ट में मौजूद हैं

आपको ऐसी किसी भी इमेज के लिए loading=lazy को सेट नहीं करना चाहिए जो पहले दिखने वाले व्यूपोर्ट में मौजूद है. यह खास तौर पर, एलसीपी इमेज के लिए काम का है. ज़्यादा जानकारी के लिए, बहुत ज़्यादा लेज़ी-लोडिंग की परफ़ॉर्मेंस पर पड़ने वाले असर लेख पढ़ें.

हमारा सुझाव है कि अगर हो सके, तो सिर्फ़ उन इमेज में loading=lazy जोड़ें जो वेबसाइट में फ़ोल्ड के नीचे हैं. आम तौर पर लोड की गई इमेज तुरंत फ़ेच की जा सकती हैं, जबकि लेज़ी तरीके से लोड की गई इमेज को, ब्राउज़र को तब तक इंतज़ार करना पड़ता है, जब तक ब्राउज़र को यह पता नहीं चलता कि पेज पर इमेज कहां दिखाई गई है. इमेज के उपलब्ध होने के लिए IntersectionObserver की ज़रूरत पड़ती है.

आम तौर पर, व्यूपोर्ट में मौजूद किसी भी इमेज को ब्राउज़र की डिफ़ॉल्ट सेटिंग का इस्तेमाल करके तुरंत लोड किया जाना चाहिए. इन-व्यूपोर्ट इमेज के लिए, आपको loading=eager तय करने की ज़रूरत नहीं है.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

अनुकूल गिरावट

जिन ब्राउज़र पर loading एट्रिब्यूट काम नहीं करता वे पेज पर मौजूद जानकारी को अनदेखा कर देंगे. हालांकि, इन ब्राउज़र को लेज़ी लोडिंग के फ़ायदे नहीं मिलेंगे. हालांकि, एट्रिब्यूट का उन पर कोई बुरा असर नहीं पड़ता.

अक्सर पूछे जाने वाले सवाल

क्या Chrome में, इमेज को अपने-आप लेज़ी-लोड होने की योजना है?

इससे पहले, Chromium ने ऐसी सभी इमेज को अपने-आप लेज़ी-लोड किया था जो Android के लिए Chrome पर लाइट मोड चालू होने और loading एट्रिब्यूट न दिए जाने या loading="auto" के तौर पर सेट न होने पर, देरी से लोड की जा सकती थीं. हालांकि, लाइट मोड को बंद कर दिया गया है (जैसा कि पहले loading="auto" नॉन-स्टैंडर्ड था). साथ ही, फ़िलहाल Chrome में इमेज को अपने-आप लेज़ी-लोड होने की सुविधा देने का कोई प्लान नहीं है.

क्या यह तय किया जा सकता है कि लोड ट्रिगर होने से पहले, इमेज का कितना पास होना चाहिए?

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

क्या सीएसएस के बैकग्राउंड की इमेज, loading एट्रिब्यूट का फ़ायदा ले सकती हैं?

नहीं, फ़िलहाल इसका इस्तेमाल सिर्फ़ <img> टैग के साथ किया जा सकता है.

क्या डिवाइस के व्यूपोर्ट में, लेज़ी लोड होने वाली इमेज में कोई समस्या है?

ज़्यादा सुरक्षित यह है कि loading=lazy इमेज को पेज के ऊपरी हिस्से पर न रखा जाए. ऐसा इसलिए, क्योंकि Chrome loading=lazy इमेज को प्रीलोड स्कैनर में पहले से लोड नहीं करेगा. साथ ही, ऐसी इमेज को तब तक फ़ेच नहीं करेगा, जब तक कि पूरा लेआउट पूरा नहीं हो जाता. ज़्यादा जानकारी के लिए, पहले दिखने वाले व्यूपोर्ट में, लेज़ी लोड होने वाली इमेज से बचें लेख देखें.

loading एट्रिब्यूट उन इमेज के साथ कैसे काम करता है जो व्यूपोर्ट में मौजूद हैं, लेकिन तुरंत नहीं दिखतीं (उदाहरण के लिए: कैरसेल के पीछे या कुछ स्क्रीन साइज़ के लिए, सीएसएस की मदद से छिपी हुई)?

loading="lazy" का इस्तेमाल करने से हो सकता है कि उन्हें तब लोड होने से रोका जा सके, जब वे न दिखें, लेकिन कैलकुलेट की गई दूरी के अंदर हों. उदाहरण के लिए, Chrome, Safari, और Firefox display: none; स्टाइल का इस्तेमाल करके इमेज लोड नहीं करते—चाहे इमेज एलिमेंट पर हो या पैरंट एलिमेंट पर. हालांकि, इमेज छिपाने की दूसरी तकनीक, जैसे कि opacity:0 स्टाइल का इस्तेमाल करने पर भी, इमेज लोड होती रहेंगी. लागू करने की हमेशा अच्छी तरह से जांच करें, ताकि यह पक्का हो सके कि यह सही तरीके से काम कर रहा है.

अगर इमेज को लेज़ी-लोड करने के लिए, पहले से ही तीसरे पक्ष की लाइब्रेरी या स्क्रिप्ट का इस्तेमाल किया जा रहा है, तो क्या होगा?

नेटिव लेज़ी लोडिंग की सुविधा अब आधुनिक ब्राउज़र में उपलब्ध है. अगर आपको अब भी इमेज को लेज़ी-लोड करने के लिए तीसरे पक्ष की लाइब्रेरी या स्क्रिप्ट की ज़रूरत है, तो आपको इस बारे में फिर से सोचना चाहिए.

loading="lazy" के साथ-साथ तीसरे पक्ष की लाइब्रेरी का इस्तेमाल जारी रखने की एक वजह, उन ब्राउज़र के लिए पॉलीफ़िल उपलब्ध कराना है जो एट्रिब्यूट के साथ काम नहीं करते हैं या लेज़ी लोडिंग ट्रिगर होने पर ज़्यादा कंट्रोल रखें.

मैं उन ब्राउज़र को कैसे मैनेज करूं जिनमें लेज़ी लोडिंग काम नहीं करती?

अपनी साइट पर इमेज को लेज़ी-लोड करने के लिए, पॉलीफ़िल बनाएं या तीसरे पक्ष की लाइब्रेरी का इस्तेमाल करें. loading प्रॉपर्टी का इस्तेमाल करके, यह पता लगाया जा सकता है कि यह सुविधा ब्राउज़र पर काम करती है या नहीं:

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

उदाहरण के लिए, लेज़ीसाइज़, JavaScript की लेज़ी लोडिंग लाइब्रेरी है. सिर्फ़ loading एट्रिब्यूट के काम न करने पर, लेज़ीसाइज़ को फ़ॉलबैक लाइब्रेरी के तौर पर लोड करने के लिए, loading एट्रिब्यूट की सुविधा की पहचान की जा सकती है. यह इस तरह काम करता है:

• काम न करने वाले ब्राउज़र में ईगर लोड से बचने के लिए <img src> को <img data-src> से बदलें. अगर loading एट्रिब्यूट का इस्तेमाल किया जा सकता है, तो data-src को src से बदलें.
• अगर loading काम नहीं करता है, तो फ़ॉलबैक (लेज़ीसाइज़) लोड करें और इसे शुरू करें. लेज़ीसाइज़ दस्तावेज़ों के हिसाब से, lazyload क्लास का इस्तेमाल यह बताने के लिए किया जाता है कि किन इमेज को लेज़ी-लोड करना है.

<!-- 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/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

यहां इस पैटर्न का डेमो दिया गया है. फ़ॉलबैक को देखने के लिए किसी पुराने ब्राउज़र पर इसे आज़माएं.

क्या iframe के लिए लेज़ी लोडिंग ब्राउज़र में भी काम करती है?

<iframe loading=lazy> को मानक भी कर दिया गया है. इसे Chromium और Safari में पहले ही लागू कर दिया गया है. इससे, loading एट्रिब्यूट का इस्तेमाल करके, iframe को लेज़ी-लोड किया जा सकता है. ज़्यादा जानकारी के लिए, iframe लेज़ी-लोडिंग के बारे में खास तौर पर बनाया गया यह लेख देखें.

ब्राउज़र-लेवल की लेज़ी लोडिंग, वेब पेज पर विज्ञापनों पर किस तरह असर डालती है?

उपयोगकर्ताओं को किसी भी दूसरी इमेज या iframe की तरह ही इमेज या iframe लेज़ी-लोड के रूप में दिखाए जाने वाले सभी विज्ञापन.

वेब पेज प्रिंट किए जाने पर इमेज कैसे मैनेज की जाती हैं?

अगर पेज प्रिंट होता है, तो सभी इमेज और iframe तुरंत लोड हो जाते हैं. ज़्यादा जानकारी के लिए समस्या #875403 देखें.

क्या लाइटहाउस, ब्राउज़र-लेवल की लेज़ी लोडिंग की पहचान करता है?

Lighthouse 6.0 और इससे ऊपर के वर्शन वाली ऑफ़स्क्रीन इमेज लेज़ी लोडिंग के तरीके को तय करने के लिए, अलग-अलग थ्रेशोल्ड का इस्तेमाल किया जा सकता है. इसकी मदद से, ऑफ़स्क्रीन इमेज को डिफ़र करें ऑडिट पास किया जा सकता है.

नतीजा

लेज़ी लोडिंग वाली इमेज के लिए काम करने की सुविधा से, आपके वेब पेजों की परफ़ॉर्मेंस बेहतर हो सकती है.

क्या आपको Chrome में चालू की गई इस सुविधा में कुछ असामान्य व्यवहार दिखाई दे रहा है? गड़बड़ी की शिकायत करें!