स्टैंडर्ड लोडिंग एट्रिब्यूट को अपनाने के बारे में जानकारी
इस पोस्ट का मेरा मकसद, सीएमएस प्लैटफ़ॉर्म के डेवलपर और योगदान देने वाले लोगों (यानी सीएमएस कोर डेवलपर) को यह समझाना है कि अब ब्राउज़र-लेवल पर इमेज को धीरे-धीरे लोड करने की सुविधा को लागू करने का समय आ गया है. हम आपको लैज़ी लोडिंग लागू करते समय, उपयोगकर्ताओं को बेहतर अनुभव देने और अन्य डेवलपर को पसंद के मुताबिक बनाने की सुविधा देने के बारे में सुझाव भी देंगे. ये दिशा-निर्देश, WordPress के साथ काम करने के हमारे अनुभव के आधार पर बनाए गए हैं. साथ ही, इनसे Joomla, Drupal, और TYPO3 को इस सुविधा को लागू करने में भी मदद मिलती है.
भले ही, आप सीएमएस प्लैटफ़ॉर्म डेवलपर हों या सीएमएस उपयोगकर्ता (यानी सीएमएस की मदद से वेबसाइटें बनाने वाला व्यक्ति), अपने सीएमएस में ब्राउज़र-लेवल पर लेज़ी लोडिंग के फ़ायदों के बारे में ज़्यादा जानने के लिए, इस पोस्ट का इस्तेमाल किया जा सकता है. अपने सीएमएस प्लैटफ़ॉर्म पर, लैज़ी लोडिंग लागू करने के सुझाव पाने के लिए, अगले चरण सेक्शन देखें.
बैकग्राउंड
पिछले साल, loading एट्रिब्यूट का इस्तेमाल करके इमेज और iframe को धीरे-धीरे लोड करने की सुविधा, WHATWG एचटीएमएल स्टैंडर्ड का हिस्सा बन गई है. साथ ही, इसे कई ब्राउज़र ने अपनाया है.
हालांकि, ये माइलस्टोन सिर्फ़ ज़्यादा तेज़ और संसाधनों की बचत करने वाले वेब के लिए बुनियादी बातें बताते हैं.
अब डिस्ट्रिब्यूटेड वेब नेटवर्क पर, loading एट्रिब्यूट का इस्तेमाल किया जा सकता है.
कॉन्टेंट मैनेजमेंट सिस्टम, लगभग 60% वेबसाइटों को चलाते हैं. इसलिए, वेब पर आधुनिक ब्राउज़र की सुविधाओं को अपनाने में, ये प्लैटफ़ॉर्म अहम भूमिका निभाते हैं. WordPress, Joomla, और TYPO3 जैसे कुछ लोकप्रिय ओपन-सोर्स सीएमएस में, इमेज पर loading एट्रिब्यूट के लिए पहले से ही सहायता लागू है. आइए, इनके तरीकों और उन बातों पर एक नज़र डालें जो अन्य सीएमएस प्लैटफ़ॉर्म में भी इस सुविधा को अपनाने के लिए काम की हैं. धीमी रफ़्तार से कॉन्टेंट लोड होने की सुविधा, वेब की परफ़ॉर्मेंस को बेहतर बनाने वाली एक अहम सुविधा है. इससे साइटों को बड़े पैमाने पर फ़ायदा मिलता है. इसलिए, हमारा सुझाव है कि इसे सीएमएस के मुख्य लेवल पर अपनाएं.
लेज़ी लोडिंग की सुविधा को अभी लागू करने की वजह
स्टैंडर्डाइज़ेशन
सीएमएस में ब्राउज़र की ऐसी सुविधाओं को अपनाने से, बड़े पैमाने पर जांच करने में मदद मिलती है. साथ ही, इससे सुधार के संभावित क्षेत्रों का पता चल सकता है. हालांकि, सभी सीएमएस के लिए आम राय यह है कि जब तक ब्राउज़र की कोई सुविधा स्टैंडर्ड नहीं हो जाती, तब तक उसे संबंधित प्लैटफ़ॉर्म के लिए एक्सटेंशन या प्लग इन के तौर पर लागू किया जाना चाहिए. किसी सुविधा को प्लैटफ़ॉर्म के मुख्य हिस्से में शामिल करने के लिए, उसे स्टैंडर्ड बनाने के बाद ही विचार किया जा सकता है.
ब्राउज़र समर्थन
इस सुविधा के लिए ब्राउज़र की सहायता भी एक ऐसी ही समस्या है: सीएमएस के ज़्यादातर उपयोगकर्ताओं को इस सुविधा का फ़ायदा मिलना चाहिए. अगर ब्राउज़र का काफ़ी प्रतिशत हिस्सा ऐसा है जहां यह सुविधा अब तक काम नहीं करती है, तो यह सुविधा यह पक्का करेगी कि उन पर इसका कोई बुरा असर न पड़े.
व्यूपोर्ट से दूरी के थ्रेशोल्ड
लेज़ी लोडिंग लागू करने से जुड़ी एक आम समस्या यह है कि इससे यह संभावना बढ़ जाती है कि उपयोगकर्ता के व्यूपोर्ट में दिखने के बाद भी इमेज लोड न हो. ऐसा इसलिए होता है, क्योंकि लोडिंग साइकल बाद में शुरू होता है. JavaScript पर आधारित पिछले समाधानों के उलट, ब्राउज़र इस तरीके को सावधानी से अपनाते हैं. इसके अलावा, वे असल दुनिया में उपयोगकर्ता अनुभव के डेटा के आधार पर अपने तरीके को बेहतर बना सकते हैं. इससे, ब्राउज़र पर लेज़ी लोडिंग का असर कम हो जाता है. इसलिए, सीएमएस प्लैटफ़ॉर्म के लिए, ब्राउज़र-लेवल पर लेज़ी लोडिंग का इस्तेमाल करना सुरक्षित है.
उपयोगकर्ता अनुभव से जुड़े सुझाव
एलिमेंट पर डाइमेंशन एट्रिब्यूट की ज़रूरत होती है
लेआउट में बदलाव से बचने के लिए, यह सुझाव लंबे समय से दिया जा रहा है कि एम्बेड किए गए कॉन्टेंट, जैसे कि इमेज या iframe में हमेशा डाइमेंशन एट्रिब्यूट width और height शामिल होने चाहिए. इससे ब्राउज़र, उन एलिमेंट को लोड करने से पहले ही उनके आसपेक्ट रेशियो का अनुमान लगा सकता है. यह सुझाव तब भी काम का होता है, जब किसी एलिमेंट को लैज़ी लोड किया जा रहा हो या नहीं. हालांकि, व्यूपोर्ट में आने के बाद भी इमेज के पूरी तरह से लोड न होने की संभावना 0.1% ज़्यादा होने की वजह से, लेज़ी लोडिंग की सुविधा का इस्तेमाल करना ज़्यादा सही रहता है.
सीएमएस को सभी इमेज और iframe पर डाइमेंशन एट्रिब्यूट देना चाहिए. अगर हर एलिमेंट के लिए ऐसा करना मुमकिन नहीं है, तो हमारा सुझाव है कि वे ऐसी इमेज को धीरे-धीरे लोड होने की सुविधा से हटा दें जिनमें ये दोनों एट्रिब्यूट शामिल नहीं हैं.
फ़ोल्ड के ऊपर मौजूद एलिमेंट को धीरे-धीरे लोड होने से रोकना
फ़िलहाल, सीएमएस के लिए यह सुझाव दिया जाता है कि वे सिर्फ़ उन इमेज और iframe में loading="lazy" एट्रिब्यूट जोड़ें जो फ़ोल्ड के नीचे मौजूद हैं. इससे सबसे ज़्यादा कॉन्टेंट वाला पेंट मेट्रिक में देरी से बचने में मदद मिलती है. यह मेट्रिक कुछ मामलों में अहम हो सकती है, जैसा कि जुलाई 2021 में पता चला था. हालांकि, यह स्वीकार करना होगा कि रेंडरिंग की प्रोसेस से पहले, व्यूपोर्ट के हिसाब से किसी एलिमेंट की पोज़िशन का आकलन करना मुश्किल होता है. यह बात खास तौर पर तब लागू होती है, जब सीएमएस loading एट्रिब्यूट जोड़ने के लिए, ऑटोमेटेड तरीके का इस्तेमाल करता है. हालांकि, मैन्युअल तरीके से भी कई फ़ैक्टर को ध्यान में रखना पड़ता है. जैसे, अलग-अलग व्यूपोर्ट साइज़ और आसपेक्ट रेशियो. इसके बावजूद, हमारा सुझाव है कि फ़ोल्ड के ऊपर दिखने वाली हीरो इमेज और अन्य इमेज या iframe को लेज़ी लोड न करें.
JavaScript फ़ॉलबैक से बचना
JavaScript का इस्तेमाल, ऐसे ब्राउज़र के लिए लेज़ी लोडिंग की सुविधा देने के लिए किया जा सकता है जो फ़िलहाल loading एट्रिब्यूट के साथ काम नहीं करते. हालांकि, ऐसे तरीके हमेशा किसी इमेज या iframe के src एट्रिब्यूट को शुरू में हटाने पर निर्भर करते हैं. इससे, उन ब्राउज़र के लिए देरी होती है जो एट्रिब्यूट के साथ काम करते हैं. इसके अलावा, बड़े पैमाने पर इस्तेमाल होने वाले कॉन्टेंट मैनेजमेंट सिस्टम के फ़्रंटएंड में, JavaScript पर आधारित इस तरह के समाधान को रोल आउट करने से, संभावित समस्याओं की संभावना बढ़ जाती है. यही वजह है कि ब्राउज़र की स्टैंडर्ड सुविधा से पहले, किसी भी बड़े कॉन्टेंट मैनेजमेंट सिस्टम ने अपने कोर में लेज़ी लोडिंग को अपनाया नहीं था.
तकनीकी सुझाव
लेज़ी लोडिंग की सुविधा को डिफ़ॉल्ट रूप से चालू करना
ब्राउज़र-लेवल पर लेज़ी लोडिंग लागू करने वाले सीएमएस के लिए, हमारा सुझाव है कि वे इसे डिफ़ॉल्ट रूप से चालू करें.इसका मतलब है कि loading="lazy" को इमेज और iframe में जोड़ा जाना चाहिए. हालांकि, इसे सिर्फ़ उन एलिमेंट के लिए जोड़ा जाना चाहिए जिनमें डाइमेंशन एट्रिब्यूट शामिल हैं.
इस सुविधा को डिफ़ॉल्ट रूप से चालू करने पर, नेटवर्क संसाधनों की ज़्यादा बचत होगी. ऐसा तब होगा, जब इसे मैन्युअल तरीके से चालू करना पड़े. उदाहरण के लिए, हर इमेज के लिए.
loading="lazy" को ज़्यादा से ज़्यादा, सिर्फ़ उन एलिमेंट में जोड़ा जाना चाहिए जो फ़ोल्ड के नीचे दिख सकते हैं.
क्लाइंट-साइड की जानकारी और अलग-अलग व्यूपोर्ट साइज़ की कमी की वजह से, सीएमएस के लिए इस ज़रूरी शर्त को लागू करना मुश्किल हो सकता है. हालांकि, हमारा सुझाव है कि कम से कम ऐसे एलिमेंट को हटाने के लिए अनुमानित हेयुरिस्टिक्स का इस्तेमाल करें जो लेज़ी-लोड होने की वजह से, फ़ोल्ड के ऊपर दिख सकते हैं. जैसे, हीरो इमेज.
हर एलिमेंट में बदलाव करने की अनुमति दें
loading="lazy" को इमेज और iframe में डिफ़ॉल्ट रूप से जोड़ा जाना चाहिए. हालांकि, कुछ इमेज पर इस एट्रिब्यूट को छोड़ने की अनुमति देना ज़रूरी है. उदाहरण के लिए, LCP के लिए ऑप्टिमाइज़ करने के लिए. अगर सीएमएस की ऑडियंस को औसतन ज़्यादा तकनीकी समझ रखने वाला माना जाता है, तो यह हर इमेज और iframe के लिए एक्सपोज़ किया गया यूज़र इंटरफ़ेस (यूआई) कंट्रोल हो सकता है. इससे उस एलिमेंट के लिए, लेज़ी लोडिंग से ऑप्ट आउट करने की अनुमति मिलती है.
इसके अलावा, तीसरे पक्ष के डेवलपर को एपीआई का ऐक्सेस दिया जा सकता है, ताकि वे कोड की मदद से उसी तरह के बदलाव कर सकें.
उदाहरण के लिए, WordPress में loading एट्रिब्यूट को पूरे एचटीएमएल टैग या कॉन्टेक्स्ट के लिए या कॉन्टेंट में मौजूद किसी खास एचटीएमएल एलिमेंट के लिए स्किप किया जा सकता है.
मौजूदा कॉन्टेंट को फिर से अपलोड करना
कॉन्टेंट मैनेजमेंट सिस्टम में एचटीएमएल एलिमेंट में loading एट्रिब्यूट जोड़ने के लिए, दो तरीके अपनाए जा सकते हैं:
- बैकएंड में कॉन्टेंट एडिटर से एट्रिब्यूट जोड़ें और उसे डेटाबेस में हमेशा सेव करें.
- फ़्रंटएंड में डेटाबेस से कॉन्टेंट रेंडर करते समय, एट्रिब्यूट को फ़्लाइट पर जोड़ें.
हमारा सुझाव है कि सीएमएस, रेंडर करते समय एट्रिब्यूट को फ़्लाई पर जोड़ने का विकल्प चुनें, ताकि किसी भी मौजूदा कॉन्टेंट में भी, लेज़ी लोडिंग के फ़ायदे मिल सकें. अगर एट्रिब्यूट को सिर्फ़ एडिटर की मदद से जोड़ा जा सकता है, तो सिर्फ़ नए या हाल ही में बदले गए कॉन्टेंट को फ़ायदा मिलेगा. इससे, नेटवर्क संसाधनों को सेव करने पर सीएमएस का असर काफ़ी कम हो जाएगा. इसके अलावा, ब्राउज़र-लेवल पर लेज़ी लोडिंग की सुविधाओं को और बेहतर बनाने पर, 'एट्रिब्यूट' को फ़्लाई पर जोड़ने से, आने वाले समय में आसानी से बदलाव किए जा सकेंगे.
एलिमेंट में एट्रिब्यूट को फ़्लाई पर जोड़ने से, एलिमेंट में मौजूद loading एट्रिब्यूट की वैल्यू का इस्तेमाल किया जा सकता है. साथ ही, इस एट्रिब्यूट को प्राथमिकता दी जा सकती है. इस तरह, कॉन्टेंट मैनेजमेंट सिस्टम या इसके लिए बने एक्सटेंशन में, डुप्लीकेट एट्रिब्यूट से कोई समस्या आए बिना, एडिटर के हिसाब से एट्रिब्यूट लागू किए जा सकते हैं.
सर्वर साइड की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना
उदाहरण के लिए, सर्वर-साइड मिडलवेयर का इस्तेमाल करके, कॉन्टेंट में loading एट्रिब्यूट को फ़्लाई पर जोड़ते समय, स्पीड को ध्यान में रखा जाता है. कॉन्टेंट मैनेजमेंट सिस्टम (सीएमएस) के आधार पर, एट्रिब्यूट को डीओएम ट्रैवल या रेगुलर एक्सप्रेशन की मदद से जोड़ा जा सकता है. परफ़ॉर्मेंस के लिए, रेगुलर एक्सप्रेशन का सुझाव दिया जाता है.
रेगुलर एक्सप्रेशन का इस्तेमाल कम से कम किया जाना चाहिए. उदाहरण के लिए, एक ऐसा रेगुलर एक्सप्रेशन जो कॉन्टेंट में मौजूद सभी img और iframe टैग को इकट्ठा करता है. इसमें उनके एट्रिब्यूट भी शामिल होते हैं. इसके बाद, हर टैग स्ट्रिंग में loading एट्रिब्यूट को लागू करता है. उदाहरण के लिए, WordPress में कुछ एलिमेंट पर फ़्लाइट के दौरान कई तरह के ऑपरेशन करने के लिए, एक सामान्य रेगुलर एक्सप्रेशन होता है. इसमें loading="lazy" जोड़ना सिर्फ़ एक तरीका है. इसमें एक रेगुलर एक्सप्रेशन का इस्तेमाल करके, कई सुविधाओं को आसानी से इस्तेमाल किया जा सकता है. ऑप्टिमाइज़ेशन के इस तरीके के अलावा, एक और वजह है कि सीएमएस के कोर में एक्सटेंशन के बजाय, लेज़ी लोडिंग को अपनाने का सुझाव दिया जाता है - इससे सर्वर साइड की परफ़ॉर्मेंस को बेहतर तरीके से ऑप्टिमाइज़ किया जा सकता है.
अगले चरण
अपने सीएमएस में सुविधा के लिए सहायता जोड़ने के लिए, देखें कि सुविधा के अनुरोध का कोई मौजूदा टिकट है या नहीं. अगर कोई टिकट नहीं है, तो नया टिकट खोलें. अपने प्रस्ताव को सही साबित करने के लिए, ज़रूरत के हिसाब से इस पोस्ट के रेफ़रंस का इस्तेमाल करें.
सवाल पूछने या टिप्पणी करने के लिए, मुझे ट्वीट करें (felixarntz@). इसके अलावा, अगर ब्राउज़र-लेवल पर लैज़ी लोडिंग की सुविधा जोड़ी गई है, तो अपने सीएमएस को इस पेज पर शामिल कराने के लिए भी ट्वीट करें. अगर आपको कोई और समस्या आती है, तो हमें इसके बारे में ज़्यादा जानकारी दें. इससे हमें समस्या हल करने में मदद मिलेगी.
अगर आप कॉन्टेंट मैनेजमेंट सिस्टम (सीएमएस) प्लैटफ़ॉर्म डेवलपर हैं, तो जानें कि अन्य सीएमएस ने लैज़ी लोडिंग को कैसे लागू किया है:
अपनी रिसर्च से मिली जानकारी और इस पोस्ट में दिए गए तकनीकी सुझावों का इस्तेमाल करके, अपने कॉन्टेंट मैनेजमेंट सिस्टम में कोड का योगदान दिया जा सकता है. उदाहरण के लिए, पैच या पुल-रिक्वेस्ट के तौर पर.
Unsplash पर कोलिन वॉटस की ओर से ली गई हीरो फ़ोटो.