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