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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

इस पेज पर, ब्राउज़र में लेज़ी-लोडिंग लागू करने के बारे में जानकारी दी गई है.

ब्राउज़र-लेवल पर लेज़ी लोडिंग की सुविधा क्यों?

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

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

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

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

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

loading एट्रिब्यूट

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

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

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

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

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

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

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

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

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

व्यूपोर्ट से दूरी की सीमाएं

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

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

दूरी की सीमा, इन फ़ैक्टर के आधार पर अलग-अलग होती है:

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

Chromium सोर्स में, अलग-अलग असरदार कनेक्शन टाइप के लिए डिफ़ॉल्ट वैल्यू देखी जा सकती हैं. DevTools में नेटवर्क थ्रॉटलिंग करके, इन अलग-अलग सीमाओं के साथ प्रयोग किया जा सकता है.

डेटा बचाने की सुविधा और व्यूपोर्ट से दूरी की सीमाओं में सुधार

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

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

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

यहां, तेज़ कनेक्शन (4G) पर हमारे किसी डेमो के लिए, व्यूपोर्ट से दूरी की पुरानी और नई सीमाओं की तुलना दी गई है: