वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ध्यान में रखते हुए, लेज़ी लोडिंग इमेज के बारे में डेटा-ड्रिवन सलाह.
लेज़ी लोडिंग एक ऐसी तकनीक है जिसकी मदद से, संसाधन को तब तक डाउनलोड नहीं किया जाता, जब तक इसकी ज़रूरत नहीं पड़ती. इससे डेटा की बचत होती है और ज़रूरी ऐसेट के लिए नेटवर्क की वजह से होने वाली दिक्कतों को कम किया जाता है. यह टूल, 2019 में वेब स्टैंडर्ड के तौर पर मशहूर हो गया था. आज ज़्यादातर बड़े ब्राउज़र पर, इमेज के लिए loading="lazy" का इस्तेमाल काम करता है. यह तो अच्छा लग रहा है,
लेकिन क्या बहुत ज़्यादा लेज़ी लोडिंग भी है?
इस पोस्ट में खास जानकारी दी गई है कि नेटिव इमेज लेज़ी लोडिंग के इस्तेमाल और परफ़ॉर्मेंस की विशेषताओं को समझने के लिए, हमने सार्वजनिक तौर पर उपलब्ध वेब ट्रांसपेरंसी (पारदर्शिता) डेटा और ऐड-हॉक A/B टेस्टिंग का विश्लेषण कैसे किया. हमने पाया कि लेज़ी लोडिंग, ग़ैर-ज़रूरी इमेज बाइट को कम करने में एक बहुत कारगर टूल हो सकती है. हालांकि, बहुत ज़्यादा इस्तेमाल करने से परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. हमारे विश्लेषण से पता चलता है कि शुरू में व्यूपोर्ट में, इमेज को ज़्यादा तेज़ी से लोड किया जाता है, जबकि बाकी इमेज को लेज़ी लोडिंग से लोड किया जाता है. इससे हमें दोनों में से बेहतरीन अनुभव मिल सकता है: कम बाइट लोड होती हैं और वेबसाइट की परफ़ॉर्मेंस की जानकारी में सुधार होता है.
बच्चा गोद लेना
एचटीटीपी संग्रह के हाल ही के डेटा के मुताबिक, 17% वेबसाइटें, नेटिव इमेज लेज़ी लोडिंग का इस्तेमाल करती हैं. इसे तेज़ी से इस्तेमाल किया जा रहा है. नेटवर्क में इस तरह की अहम भूमिका, एक नए एपीआई के लिए अहम है.
एचटीटीपी संग्रह प्रोजेक्ट के रॉ डेटा के बारे में क्वेरी करने से हमें साफ़ तौर पर पता चलता है कि किस तरह की वेबसाइटों का इस्तेमाल किया जा रहा है: नेटिव इमेज लेज़ी लोडिंग का इस्तेमाल करने वाली 84% साइटें, WordPress का, 2% साइटें दूसरे सीएमएस का इस्तेमाल करती हैं, और बाकी 14% साइटें किसी ऐसे सीएमएस का इस्तेमाल नहीं करतीं. इन नतीजों से यह पता चलता है कि किस तरह WordPress इस्तेमाल करने के मामले में सबसे आगे है.
इस्तेमाल किए जाने की दर पर भी ध्यान दिया जाना चाहिए. एक साल पहले जुलाई 2020 में, लेज़ी लोडिंग का इस्तेमाल करने वाली WordPress साइटों ने हज़ारों वेबसाइटें बनाईं. ये वेबसाइटें कुल मिलाकर करीब 60 लाख (कुल साइटों का 1%) थीं. सिर्फ़ WordPress में, लेज़ी लोडिंग अपनाने की वजह से, वेबसाइटों की संख्या 10 लाख से ज़्यादा हो चुकी है (कुल वेबसाइटों का 14%).
कोरिलेशनल परफ़ॉर्मेंस
एचटीटीपी संग्रह में ज़्यादा बारीकी से जानकारी पाने के लिए, हम सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) मेट्रिक के साथ, नेटिव इमेज के लेज़ी लोडिंग वाले और बिना इमेज वाले पेजों की परफ़ॉर्मेंस की तुलना कर सकते हैं. एलसीपी का डेटा, लैब में एआई की मदद से की जाने वाली जांच से अलग, Chrome इस्तेमाल करने वाले लोगों के अनुभव की रिपोर्ट (CrUX) से असली उपयोगकर्ता अनुभव से मिलता है. नीचे दिए गए चार्ट में, हर पेज के 75वें पर्सेंटाइल के एलसीपी के डिस्ट्रिब्यूशन को दिखाने के लिए, बॉक्स और व्हिस्कर प्लॉट का इस्तेमाल किया गया है: लाइनें 10वें और 90वें पर्सेंटाइल को दिखाती हैं और बॉक्स 25वें और 75वें प्रतिशत को दिखाते हैं.
लेज़ी लोडिंग वाले मीडियन पेज का एलसीपी 75वां पर्सेंटाइल 2,922 मि॰से॰ है. वहीं, लेज़ी लोडिंग वाले मीडियन पेज का एलसीपी 3,546 मि॰से॰ है. कुल मिलाकर, लेज़ी लोडिंग का इस्तेमाल करने वाली वेबसाइटों की एलसीपी परफ़ॉर्मेंस खराब होती है.
इस बात पर ध्यान देना ज़रूरी है कि ये रिलेशनल नतीजे हैं और यह ज़रूरी नहीं है कि ये धीमी परफ़ॉर्मेंस की वजह, लेज़ी लोडिंग की ओर हों. कल्पनाओं में, अगर WordPress साइटें थोड़ी धीमी हों और लेज़ी लोडिंग कोहॉर्ट में बनी हैं, तो उनके लिए यह अंतर समझा जा सकता है. इसलिए, आइए सिर्फ़ WordPress साइटें देखकर इस बदलाव को खत्म करने की कोशिश करते हैं.
माफ़ करें, WordPress पेज में ड्रिल-डाउन करने पर भी यही पैटर्न दिखता है. लेज़ी लोडिंग का इस्तेमाल करने वाले लोगों की एलसीपी परफ़ॉर्मेंस धीमी होती है. लेज़ी लोडिंग वाले मीडियन पेज के लिए, बिना लेज़ी लोडिंग वाले मीडियन पेज का एलसीपी 75वां पर्सेंटाइल 3,495 मि॰से॰ है. वहीं, लेज़ी लोडिंग वाले मीडियन पेज का एलसीपी 3,768 मि॰से॰ है.
इससे अब भी यह साबित नहीं होता है कि लेज़ी लोडिंग की वजह से पेज धीमे होते हैं. हालांकि, इसका इस्तेमाल करने से पेज की परफ़ॉर्मेंस धीमी हो जाती है. काम की वजह से जुड़े सवाल का जवाब देने के लिए, हम एक लैब-आधारित A/B टेस्ट सेट अप करते हैं.
कैज़ुअल परफ़ॉर्मेंस
A/B टेस्ट का मकसद, इस अनुमान को साबित या गलत करना था कि नेटिव इमेज लेज़ी लोडिंग की प्रोसेस, WordPress कोर में लागू की गई इमेज के लेज़ी लोड होने की वजह से होती है. इसकी वजह से एलसीपी की परफ़ॉर्मेंस धीमी हो जाती है और इमेज बाइट कम हो जाती हैं. हमने twentytwentyone थीम वाली एक डेमो WordPress वेबसाइट को टेस्ट करने के लिए, इस तरीके का इस्तेमाल किया. हमने WebPageTest का इस्तेमाल करके, संग्रह और एक पेज के टाइप, जो कि होम और लेख वाले पेजों की तरह होते हैं, दोनों की जांच की. हमने डेस्कटॉप और एम्युलेट किए गए मोबाइल डिवाइस पर, दोनों की जांच की. हमने लेज़ी लोडिंग की सुविधा वाले और बिना लेज़ी लोडिंग वाले पेजों के हर कॉम्बिनेशन की जांच की. साथ ही, हर टेस्ट को नौ बार किया, ताकि एलसीपी वैल्यू और इमेज बाइट की मीडियन संख्या का पता लगाया जा सके.
| सीरीज़ | डिफ़ॉल्ट | बंद है | डिफ़ॉल्ट से अंतर |
|---|---|---|---|
| twentytwentyone-archive-desktop | 2,029 | 1,759 | -13% से कम |
| twentytwentyone-Archive-mobile की वैल्यू | 1,657 | 1,403 | -15% |
| twentytwentyone-single-डेस्कटॉप | 1,655 | 1,726 | 4% |
| twentytwentyone-Single-मोबाइल | 1,352 | 1,384 | 2% |
ऊपर दिए गए नतीजों में, संग्रह पर की गई जांच के लिए मिलीसेकंड में मीडियन एलसीपी और डेस्कटॉप और मोबाइल के लिए एक पेज के एलसीपी की तुलना की गई है. संग्रह वाले पेजों के लिए लेज़ी लोडिंग की सुविधा बंद करने पर, हमने देखा कि एलसीपी में काफ़ी अंतर आया है. हालांकि, अलग-अलग पेजों पर यह फ़र्क़ साफ़ नहीं था.
ध्यान दें कि लेज़ी लोडिंग बंद करने से, सिर्फ़ एक पेज जल्दी लोड होता है. हालांकि, डेस्कटॉप और मोबाइल, दोनों तरह के टेस्ट में एलसीपी में एक स्टैंडर्ड डीविएशन से कम होता है. इसलिए, हम इसे फ़र्क़ को ध्यान में रखते हैं और कुल मिलाकर बदलाव को न्यूट्रल मानते हैं. तुलनात्मक रूप से, संग्रह पेजों के लिए अंतर दो से तीन मानक विचलनों की तरह है.
| सीरीज़ | डिफ़ॉल्ट | बंद है | डिफ़ॉल्ट से अंतर |
|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 103% से ज़्यादा हुई |
| twentytwentyone-Archive-mobile की वैल्यू | 172 | 378 | 120% |
| twentytwentyone-single-डेस्कटॉप | 301 | 850 | 183% से ज़्यादा हुई |
| twentytwentyone-Single-मोबाइल | 114 | 378 | 233% से ज़्यादा हुई |
ऊपर दिए गए नतीजे हर जांच के लिए, इमेज बाइट (केबी में) की मीडियन संख्या की तुलना करते हैं. उम्मीद के मुताबिक, लेज़ी लोडिंग का इमेज बाइट की संख्या को कम करने पर साफ़ तौर पर पॉज़िटिव असर पड़ता है. अगर कोई असली उपयोगकर्ता पूरे पेज को नीचे की ओर स्क्रोल करता है, तो सभी इमेज, व्यूपोर्ट में क्रॉस करते ही लोड हो जाएंगी. हालांकि, ये नतीजे शुरुआती पेज लोड की बेहतर परफ़ॉर्मेंस दिखाते हैं.
A/B टेस्ट के नतीजों की खास जानकारी देने के लिए, WordPress में इस्तेमाल की जाने वाली लेज़ी लोडिंग तकनीक, इमेज बाइट को कम करने में काफ़ी मदद करती है. इससे, एलसीपी में देरी होने पर भी कम खर्च होता है.
समस्या ठीक करने की जांच करना
ठीक करने के तरीके के बारे में बात करने से पहले, आइए देखते हैं कि आज ही WordPress में लेज़ी लोडिंग कैसे काम करती है. मौजूदा लागू करने का सबसे ज़रूरी पहलू यह है कि यह इमेज को फ़ोल्ड के ऊपर (व्यूपोर्ट के अंदर) लेज़ी-लोड करता है. कॉन्टेंट मैनेजमेंट सिस्टम की ब्लॉग पोस्ट इस बात को स्वीकार करती है कि इससे बचने का एक पैटर्न है. हालांकि, उस समय एक्सपेरिमेंटल डेटा से पता चला कि एलसीपी पर बहुत कम असर पड़ रहा था और WordPress कोर में इन्हें आसानी से लागू किया जा सकता है.
इस नए डेटा को ध्यान में रखते हुए, हमने प्रयोग के तौर पर एक सुधार किया है. इसकी मदद से, पेज के ऊपरी हिस्से पर लेज़ी लोडिंग वाली इमेज से बचा जा सकता है. साथ ही, हमने पहले A/B टेस्ट वाली स्थितियों में ही इमेज को टेस्ट किया था.
| सीरीज़ | डिफ़ॉल्ट | बंद है | fix | डिफ़ॉल्ट से अंतर | 'बंद है' से अंतर |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 2,029 | 1,759 | 1,749 | -14% से कम | -1% से कम |
| twentytwentyone-Archive-mobile की वैल्यू | 1,657 | 1,403 | 1,352 | -18% से कम | -4% से कम |
| twentytwentyone-single-डेस्कटॉप | 1,655 | 1,726 | 1,676 | 1% | -3% |
| twentytwentyone-Single-मोबाइल | 1,352 | 1,384 | 1,342 | -1% से कम | -3% |
ये नतीजे बहुत बेहतर हैं. सिर्फ़ पेज के नीचे मौजूद इमेज को लेज़ी लोड करने से, एलसीपी रिग्रेशन को पूरी तरह से रिवर्स कर दिया जाता है. साथ ही, एलसीपी को पूरी तरह से बंद करने पर, थोड़ा सुधार भी किया जा सकता है. यह लेज़ी लोडिंग से ज़्यादा तेज़ कैसे हो सकता है? एक वजह यह है कि फ़ोल्ड के नीचे वाली इमेज लोड न करने पर, एलसीपी इमेज में नेटवर्क की समस्या कम होती है. इससे एलसीपी इमेज तेज़ी से लोड होती है.
| सीरीज़ | डिफ़ॉल्ट | बंद है | fix | डिफ़ॉल्ट से अंतर | 'बंद है' से अंतर |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 577 | 0% | -51% से कम |
| twentytwentyone-Archive-mobile की वैल्यू | 172 | 378 | 172 | 0% | -54% से कम |
| twentytwentyone-single-डेस्कटॉप | 301 | 850 | 301 | 0% | -65% |
| twentytwentyone-Single-मोबाइल | 114 | 378 | 114 | 0% | -70% से कम |
इमेज बाइट की बात करें, तो डिफ़ॉल्ट तरीके की तुलना में इस सुधार में कोई बदलाव नहीं हुआ है. यह बहुत बढ़िया है, क्योंकि मौजूदा तरीके की यही एक ताकत है.
इस सुधार को लेकर कुछ चेतावनियां हैं. WordPress यह तय करता है कि सर्वर-साइड पर किन इमेज को लेज़ी-लोड करना है. इसका मतलब है कि उसे उपयोगकर्ता के व्यूपोर्ट साइज़ के बारे में कुछ नहीं पता होता. इसके अलावा, उसे यह भी नहीं पता होता है कि शुरू में उस इमेज के अंदर इमेज लोड होंगी या नहीं. इसलिए, मार्कअप में इमेज की जगह की जानकारी के अनुभव का इस्तेमाल करके यह अनुमान लगाया जाता है कि इमेज, व्यूपोर्ट में दिखेगी या नहीं. खास तौर पर, अगर पेज पर फ़ीचर की गई पहली इमेज या मुख्य कॉन्टेंट में पहली इमेज दिखती है, तो उसे पेज के ऊपरी हिस्से में या उसके पास वाली इमेज माना जाएगा. साथ ही, उसे लेज़ी लोड नहीं किया जाएगा. पेज-लेवल की स्थितियां, जैसे कि हेडिंग में शब्दों की संख्या या मुख्य कॉन्टेंट में शुरुआत में पैराग्राफ़ टेक्स्ट की संख्या, इस बात पर असर डाल सकती है कि इमेज, व्यूपोर्ट में है या नहीं. उपयोगकर्ता-लेवल की कुछ स्थितियां भी होती हैं, जो ह्यूरिस्टिक्स के सटीक होने पर असर डाल सकती हैं. खास तौर पर व्यूपोर्ट का साइज़ और पेज की स्क्रोल करने की जगह बदलने वाले ऐंकर लिंक का इस्तेमाल. इन वजहों से, यह स्वीकार करना ज़रूरी है कि सामान्य मामलों में समस्या को ठीक करने के लिए कैलिब्रेट किया गया है, ताकि ये नतीजे ठीक से काम कर सकें. ऐसा इसलिए, ताकि ये नतीजे, असल दुनिया की सभी स्थितियों पर लागू हो सकें.
रोल आउट किया जा रहा है
हमने इमेज को लेज़ी-लोड करने का एक बेहतर तरीका पहचान लिया है. इससे इमेज की बचत होती है और एलसीपी तेज़ हो जाती है. ऐसे में, हम ऐसा क्या कर सकते हैं कि साइटें उसका इस्तेमाल करना शुरू करें? सबसे ज़रूरी बदलाव है कि प्रयोग वाले सुधार को लागू करने के लिए, WordPress कोर में एक पैच सबमिट किया जाए. हम सीएमएस के लिए ब्राउज़र लेवल पर लेज़ी-लोडिंग ब्लॉग पोस्ट में भी दिशा-निर्देश अपडेट करेंगे. इससे ऊपर के फ़ोल्ड के लेवल पर लेज़ी लोडिंग के नेगेटिव असर के बारे में पता चलेगा और यह पता चलेगा कि सीएमएस, अनुभव से जुड़ी जानकारी का इस्तेमाल कैसे कर सकता है.
ये सबसे सही तरीके सभी वेब डेवलपर पर लागू होते हैं, इसलिए Lighthouse जैसे टूल में, लेज़ी लोडिंग वाले एंटीपैटर्न को फ़्लैग करना भी फ़ायदेमंद हो सकता है. अगर आपको ऑडिट में हुई प्रोग्रेस के साथ-साथ फ़ॉलो करना है, तो GitHub पर सुविधा का अनुरोध देखें. तब तक, डेवलपर यह पता लगा सकते हैं कि एलसीपी एलिमेंट को लेज़ी-लोड होने के मामले में, उनके फ़ील्ड डेटा में ज़्यादा से ज़्यादा जानकारी जोड़ी गई है.
new PerformanceObserver((list) => {
const latestEntry = list.getEntries().at(-1);
if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
console.warn('Warning: LCP element was lazy loaded', latestEntry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
ऊपर दिया गया JavaScript स्निपेट, हाल ही के एलसीपी एलिमेंट का आकलन करेगा. साथ ही, अगर इसे लेज़ी लोड किया गया है, तो चेतावनी लॉग करेगा.
इससे लेज़ी लोडिंग की तकनीक की बेहतर परफ़ॉर्मेंस और प्लैटफ़ॉर्म लेवल पर एपीआई में सुधार होने की संभावना के बारे में भी पता चलता है. उदाहरण के लिए, loading एट्रिब्यूट के बावजूद, पहली कुछ इमेज को तेज़ी से लोड करने के लिए, Chromium में एक्सपेरिमेंट करने से जुड़ी एक समस्या मौजूद है. हालांकि, यह समस्या ठीक की गई है.
बात को समेटना
अगर आपकी साइट, नेटिव इमेज लेज़ी लोडिंग का इस्तेमाल करती है, तो देखें कि इसे कैसे लागू किया जाता है. साथ ही, इसकी परफ़ॉर्मेंस की लागत को बेहतर तरीके से समझने के लिए, A/B टेस्ट करें. वेबसाइट के फ़ोल्ड के ऊपर मौजूद इमेज को तेज़ी से लोड करने से, आपको फ़ायदा मिल सकता है. अगर आपके पास WordPress साइट है, तो उम्मीद है कि जल्द ही WordPress कोर में पैच लैंडिंग पेज उपलब्ध होगा. अगर किसी दूसरे सीएमएस का इस्तेमाल किया जा रहा है, तो पक्का करें कि उसे परफ़ॉर्मेंस से जुड़ी यहां बताई गई समस्याओं के बारे में पता हो.
नए वेब प्लैटफ़ॉर्म एपीआई को आज़माने से जोखिम और इनाम, दोनों मिल सकते हैं. इसी वजह से, इन्हें बेहतरीन सुविधाएं कहा जाता है. हमें नेटिव इमेज की लेज़ी लोडिंग की समस्या के बारे में पता चलने लगा है, लेकिन हमें यह भी पता चल रहा है कि बेहतर परफ़ॉर्मेंस पाने के लिए इसका इस्तेमाल कैसे किया जाए.
Unsplash पर फ़्रैंकी लोपेज़ की फ़ोटो