बहुत ज़्यादा लेज़ी लोडिंग के परफ़ॉर्मेंस असर

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

Felix Arntz

Rick Viscomi

लेज़ी लोडिंग एक ऐसी तकनीक है जो किसी संसाधन को तब तक डाउनलोड करने से रोकती है, जब तक कि उसकी ज़रूरत न हो. इससे, डेटा सुरक्षित रहता है और ज़रूरी ऐसेट के लिए नेटवर्क के विवाद को कम किया जा सकता है. 2019 में यह वेब स्टैंडर्ड बन गया था. अब ज़्यादातर बड़े ब्राउज़र, इमेज के लिए loading="lazy" का इस्तेमाल कर सकते हैं.

इस गाइड में इस बारे में खास जानकारी दी गई है कि सार्वजनिक तौर पर उपलब्ध वेब पारदर्शिता डेटा और ऐड-हॉक A/B टेस्टिंग का विश्लेषण कैसे किया जाता है. इससे, ब्राउज़र लेवल पर इमेज लेज़ी लोडिंग के तरीके को अपनाने और उसकी परफ़ॉर्मेंस के बारे में जानकारी मिलती है. रिपोर्ट में पाया गया कि लेज़ी लोडिंग, इमेज बाइट को कम करने के लिए एक बेहतरीन टूल है. हालांकि, इसका ज़्यादा इस्तेमाल करने से परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. सीधे तौर पर, इस विश्लेषण से पता चलता है कि शुरुआती व्यूपोर्ट में इमेज तेज़ी से लोड होती हैं और बाकी के हिस्सों को तेज़ी से लोड किया जाता है. इससे हमें कम बाइट लोड होने और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में सुधार करने में मदद मिलती है.

बच्चा गोद लेना

एचटीटीपी संग्रह के हाल ही के डेटा के मुताबिक, 29% वेबसाइटें, पहले से मौजूद इमेज लेज़ी लोडिंग का इस्तेमाल कर रही हैं. साथ ही, इन वेबसाइटों के इस्तेमाल में तेज़ी से बढ़ोतरी हो रही है.

एचटीटीपी संग्रह प्रोजेक्ट में रॉ डेटा के बारे में क्वेरी करने से, हमें साफ़ तौर पर पता चलता है कि किस तरह की वेबसाइटें इसका इस्तेमाल कर रही हैं: ब्राउज़र लेवल की इमेज लेज़ी लोडिंग का इस्तेमाल करने वाली 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 पेजों में ड्रिल-डाउन करने पर यही पैटर्न दिखता है. लेज़ी लोडिंग का इस्तेमाल करने वाले पेजों पर एलसीपी की परफ़ॉर्मेंस धीमी होती है. लेज़ी लोडिंग के बिना, WordPress पेज का मीडियन 75वां पर्सेंटाइल एलसीपी है. यह 3,495 मिलीसेकंड है. लेज़ी लोडिंग वाले मीडियन पेज के लिए, यह 3,768 मिलीसेकंड है.

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

कैज़ुअल परफ़ॉर्मेंस

A/B टेस्ट का मकसद, इस अनुमान को साबित करना या खारिज करना था कि WordPress कोर में लागू की गई इमेज लेज़ी लोडिंग की वजह से एलसीपी परफ़ॉर्मेंस धीमी थी और इमेज बाइट कम हुए. इस तरीके का इस्तेमाल करके, twentytwentyone थीम के साथ WordPress की डेमो वेबसाइट का टेस्ट किया गया था. WebPageTest का इस्तेमाल करके, डेस्कटॉप और एम्युलेट किए गए मोबाइल डिवाइस पर, संग्रह और सिंगल पेज टाइप, दोनों की जांच की गई. ये दोनों तरह के पेज, होम और लेख वाले पेज होते हैं. लेज़ी लोडिंग की सुविधा वाले और बिना लेज़ी लोडिंग वाले पेजों के हर कॉम्बिनेशन की जांच की गई. साथ ही, हर टेस्ट को नौ बार चलाया गया, ताकि औसत एलसीपी वैल्यू और इमेज बाइट की संख्या हासिल की जा सके.

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

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

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

A/B टेस्ट के नतीजों की खास जानकारी देने के लिए, WordPress की लेज़ी लोडिंग तकनीक का इस्तेमाल किया गया है. इसकी मदद से, देरी से एलसीपी को पूरा करने में, इमेज बाइट को कम किया जा सकता है.

समस्या ठीक करने की जांच करना

WordPress के इस प्रयोग के लिए, लेज़ी-लोडिंग को लागू करने का सबसे अहम पहलू यह है कि यह व्यूपोर्ट (फ़ोल्ड के ऊपर) में इमेज को लेज़ी-लोड करता है. कॉन्टेंट मैनेजमेंट सिस्टम की ब्लॉग पोस्ट में, इसे ऐसे पैटर्न के तौर पर स्वीकार किया गया है जिससे बचना है. हालांकि, उस समय के एक्सपेरिमेंट के डेटा से पता चलता है कि WordPress कोर में, एलसीपी को लागू करना आसान नहीं था. साथ ही, इस पर बहुत कम असर पड़ा था.

इस नए डेटा की मदद से, एक्सपेरिमेंट के तौर पर एक सुधार किया गया है. इसमें पेज के ऊपरी हिस्से में, लेज़ी लोडिंग से बचने के लिए सुधार किया गया है. साथ ही, पहले A/B टेस्ट में जिन स्थितियों में गड़बड़ी को ठीक किया गया था उन ही स्थितियों में उसकी जांच की गई थी.

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

इमेज बाइट के हिसाब से, डिफ़ॉल्ट तरीके के मुकाबले, समाधान में कोई बदलाव नहीं हुआ है. यह बहुत अच्छी बात है, क्योंकि यह हमारे मौजूदा दृष्टिकोण की ताकत है.

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

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

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

लागू करना (:#लागू करना)

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

ये सबसे सही तरीके सभी वेब डेवलपर पर लागू होते हैं. इसलिए, लाइटहाउस जैसे टूल में लेज़ी लोडिंग एंटीपैटर्न को फ़्लैग करना भी फ़ायदेमंद हो सकता है. अगर आपको उस ऑडिट की प्रोग्रेस के बारे में जानना है, तो 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 कोर में एक पैच दिखेगा. अगर किसी दूसरे कॉन्टेंट मैनेजमेंट सिस्टम का इस्तेमाल किया जा रहा है, तो पक्का करें कि उन्हें यहां बताई गई परफ़ॉर्मेंस की समस्याओं के बारे में पता हो.

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

Unस्प्लैश पर फ़्रैंकी लोपेज़ की फ़ोटो