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