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

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

Felix Arntz

Rick Viscomi

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

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

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

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

एचटीटीपी संग्रह प्रोजेक्ट में रॉ डेटा के बारे में क्वेरी करने से, हमें यह समझने में मदद मिलती है कि किस तरह की वेबसाइटें इस सुविधा को अपना रही हैं: ब्राउज़र-लेवल पर इमेज लेज़ी लोडिंग का इस्तेमाल करने वाली 84% साइटें, WordPress का इस्तेमाल करती हैं. वहीं, 2% साइटें किसी अन्य कॉन्टेंट मैनेजमेंट सिस्टम का इस्तेमाल करती हैं. बाकी 14% साइटें, किसी जाने-माने कॉन्टेंट मैनेजमेंट सिस्टम का इस्तेमाल नहीं करती हैं. इन नतीजों से साफ़ तौर पर पता चलता है कि WordPress, इस मामले में सबसे आगे है.

इसे अपनाने की दर पर भी ध्यान देना ज़रूरी है. एक साल पहले जुलाई 2020 में, लेज़ी लोडिंग का इस्तेमाल करने वाली WordPress साइटों की संख्या, करीब 60 लाख वेबसाइटों के कॉर्पस में हज़ारों में थी. यह कुल संख्या का 1% है. इसके बाद से, सिर्फ़ WordPress में लेज़ी लोडिंग का इस्तेमाल करने वाली वेबसाइटों की संख्या बढ़कर 10 लाख से ज़्यादा हो गई है. यह कुल वेबसाइटों का 14% है.

कोरिलेशनल परफ़ॉर्मेंस

एचटीटीपी संग्रह के बारे में ज़्यादा जानकारी पाने के लिए, ब्राउज़र-लेवल पर इमेज लेज़ी लोडिंग की सुविधा वाले और बिना सुविधा वाले पेजों की तुलना, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) की मेट्रिक से की जा सकती है. एलसीपी का डेटा, लैब में की गई सिंथेटिक टेस्टिंग के बजाय, Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX) से मिलता है. यह रिपोर्ट, असल उपयोगकर्ताओं के अनुभवों के आधार पर तैयार की जाती है. नीचे दिए गए चार्ट में, हर पेज के 75वें पर्सेंटाइल एलसीपी के डिस्ट्रिब्यूशन को विज़ुअलाइज़ करने के लिए, बॉक्स-ऐंड-व्हिस्कर प्लॉट का इस्तेमाल किया गया है: लाइनें 10वें और 90वें पर्सेंटाइल को दिखाती हैं. वहीं, बॉक्स 25वें और 75वें पर्सेंटाइल को दिखाते हैं.

लेज़ी लोडिंग के बिना मीडियन पेज का 75वां पर्सेंटाइल एलसीपी 2,922 मिलीसेकंड है. वहीं, लेज़ी लोडिंग वाले मीडियन पेज का 75वां पर्सेंटाइल एलसीपी 3,546 मिलीसेकंड है. आम तौर पर, लेज़ी लोडिंग का इस्तेमाल करने वाली वेबसाइटों की एलसीपी परफ़ॉर्मेंस खराब होती है.

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

हालांकि, WordPress पेजों के बारे में ज़्यादा जानकारी देखने पर भी यही पैटर्न दिखता है. लेज़ी लोडिंग का इस्तेमाल करने वाले पेजों की एलसीपी परफ़ॉर्मेंस धीमी होती है. लेज़ी लोडिंग के बिना, WordPress पेज के मीडियन का 75वां पर्सेंटाइल एलसीपी 3,495 मिलीसेकंड है. वहीं, लेज़ी लोडिंग वाले मीडियन पेज का 75वां पर्सेंटाइल एलसीपी 3,768 मिलीसेकंड है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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

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