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

Addy Osmani

Houssein Djirdeh

Mathias Bynens

Barry Pollard

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

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

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

एचटीटीपी संग्रह के मुताबिक, ज़्यादातर वेबसाइटों के लिए इमेज, सबसे ज़्यादा अनुरोध की जाने वाली एसेट होती हैं. साथ ही, आम तौर पर ये किसी भी दूसरे संसाधन के मुकाबले ज़्यादा बैंडविड्थ लेती हैं. 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) पर, हमारे किसी डेमो के लिए, व्यूपोर्ट से दूरी के पुराने और नए थ्रेशोल्ड की तुलना दिखेगी: