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

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

Felix Arntz
Rick Viscomi

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

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

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

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

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

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

लेज़ी लोडिंग को अपनाने के बारे में टाइमसीरीज़ चार्ट. इसमें WordPress, अन्य सीएमएस और नॉन-सीएमएस की तुलना में सबसे ज़्यादा इस्तेमाल किया जा रहा है. यह पिछले चार्ट से मिलता-जुलता है. दिखाया गया है कि जुलाई 2020 से जून 2021 के बीच, इसे इस्तेमाल करने वालों की संख्या तेज़ी से 1% से बढ़कर 17% तक बढ़ी है.
ब्राउज़र-लेवल पर इमेज को धीरे-धीरे लोड करने की सुविधा का इस्तेमाल करने वाली वेबसाइटों के टाइप के बारे में जानकारी. (सोर्स).

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

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

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

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

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

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

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

माफ़ करें, 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-desktop 1,655 1,726 4%
twentytwentyone-single-mobile 1,352 1,384 2%
WordPress के सैंपल पेजों पर, ब्राउज़र लेवल पर इमेज की लेज़ी लोडिंग की सुविधा बंद करके, एलसीपी (मिलीसेकंड) में बदलाव.

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

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

सीरीज़ डिफ़ॉल्ट बंद है डिफ़ॉल्ट से अंतर
twentytwentyone-archive-desktop 577 1173 103%
twentytwentyone-archive-mobile 172 378 120%
twentytwentyone-single-desktop 301 850 183%
twentytwentyone-single-mobile 114 378 233%
WordPress के सैंपल पेजों पर, ब्राउज़र-लेवल पर इमेज की लेज़ी लोडिंग की सुविधा बंद करके, इमेज बाइट (केबी) की संख्या में बदलाव करें.

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

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

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

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

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

सीरीज़ डिफ़ॉल्ट बंद है ठीक करो डिफ़ॉल्ट से अंतर बंद होने की स्थिति से अंतर
twentytwentyone-archive-desktop 2,029 1,759 1,749 -14% -1%
twentytwentyone-archive-mobile 1,657 1,403 1,352 -18% -4%
twentytwentyone-single-desktop 1,655 1,726 1,676 1% -3%
twentytwentyone-single-mobile 1,352 1,384 1,342 -1% -3%
WordPress के सैंपल पेजों पर, ब्राउज़र लेवल पर इमेज की लेज़ी लोडिंग के लिए सुझाए गए सुधार से, एलसीपी (मिलीसेकंड) में बदलाव.

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

सीरीज़ डिफ़ॉल्ट बंद है ठीक करो डिफ़ॉल्ट से अंतर बंद होने की स्थिति से अंतर
twentytwentyone-archive-desktop 577 1173 577 0% -51%
twentytwentyone-archive-mobile 172 378 172 0% -54% से कम
twentytwentyone-single-desktop 301 850 301 0% -65%
twentytwentyone-single-mobile 114 378 114 0% -70%
WordPress के सैंपल पेजों पर, ब्राउज़र-लेवल पर इमेज को धीरे-धीरे लोड करने की सुविधा को ठीक करने के लिए सुझाए गए तरीके से, इमेज के बाइट (केबी) की संख्या में बदलाव.

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

इस समस्या को ठीक करने के लिए, कुछ बातों का ध्यान रखना ज़रूरी है. 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 पर फ़्रैंक लोपेज़ की फ़ोटो