किसी वेबसाइट के सामान्य पेलोड में इमेज और वीडियो का हिस्सा अहम हो सकता है. माफ़ करें, प्रोजेक्ट के हिस्सेदार, शायद अपने मौजूदा आवेदनों से किसी भी मीडिया संसाधन को काटना न चाहें. इस तरह की दिक्कतों से निराशा होती है, खास तौर पर, जब सभी पक्ष साइट की परफ़ॉर्मेंस को बेहतर बनाना चाहते हैं, लेकिन वे दोनों तरह के काम करने के बारे में सहमत नहीं हो पाते. अच्छी बात यह है कि लेज़ी लोडिंग एक ऐसा समाधान है जिससे पेज पेलोड और लोड होने में लगने वाले समय को कम किया जा सकता है. हालांकि, इससे कॉन्टेंट पर असर नहीं पड़ता.
लेज़ी लोडिंग क्या होती है?
लेज़ी लोडिंग एक ऐसी तकनीक है जो पेज लोड होने के समय, गैर-ज़रूरी रिसॉर्स को लोड होने से रोकती है. इसके बजाय, ये गैर-ज़रूरी संसाधन ज़रूरत के समय लोड किए जाते हैं. जब इमेज के बारे में बात की जाती है, तो "गैर-ज़रूरी" को अक्सर "ऑफ़-स्क्रीन" शब्द का ही माना जाता है. अगर आपने लाइटहाउस का इस्तेमाल किया है और इसे बेहतर बनाने के कुछ अवसरों की जांच की है, तो शायद आपको इस दायरे में कुछ दिशा-निर्देश मिले हों. जैसे, ऑफ़स्क्रीन इमेज वाले ऑडिट को बंद करें:
आपने शायद पहले से ही लेज़ी लोडिंग का काम देखा होगा और यह कुछ ऐसा ही होता है:
- आप एक पेज पर पहुंचते हैं और कॉन्टेंट पढ़ते समय, उसे स्क्रोल करने लगते हैं.
- कभी-कभी, आप प्लेसहोल्डर इमेज को व्यूपोर्ट में स्क्रोल करते हैं.
- प्लेसहोल्डर इमेज को अचानक से फ़ाइनल इमेज में बदल दिया जाता है.
इमेज लेज़ी लोडिंग का एक उदाहरण लोकप्रिय पब्लिशिंग प्लैटफ़ॉर्म मीडियम पर मिल सकता है. यह प्लैटफ़ॉर्म, पेज लोड होने पर लाइटवेट प्लेसहोल्डर इमेज लोड करता है और व्यूपोर्ट में स्क्रोल किए जाने पर, लेज़ी लोडेड इमेज को उनकी जगह ले लेता है.
अगर आपको लेज़ी लोडिंग के बारे में नहीं पता है, तो आपको यह जानने में दिलचस्पी होगी कि यह तकनीक कितनी काम की है और इसके क्या फ़ायदे हैं. यह जानने के लिए आगे पढ़ें!
इमेज या वीडियो को सिर्फ़ लोड करने के बजाय, लेज़ी-लोड क्यों करें?
क्योंकि हो सकता है कि आप कुछ ऐसा लोड कर रहे हों जो उपयोगकर्ता को कभी न दिखे. यह कई वजहों से समस्या है:
- इससे डेटा की बर्बादी होती है. बिना मीटर वाले कनेक्शन पर, ऐसा होना ज़्यादा गलत नहीं है (हालांकि, हो सकता है कि आप उस कीमती बैंडविड्थ का इस्तेमाल ऐसे अन्य संसाधनों को डाउनलोड करने के लिए कर रहे हों जो असल में उपयोगकर्ता को ही दिखेंगे). हालांकि, सीमित डेटा प्लान में, ऐसी चीज़ें लोड करना जो उपयोगकर्ता को कभी नहीं दिखती, वह उनके पैसे की बर्बादी हो सकती है.
- इससे प्रोसेस करने में लगने वाला समय, बैटरी, और सिस्टम के अन्य संसाधनों की बर्बादी होती है. मीडिया संसाधन डाउनलोड होने के बाद, ब्राउज़र को इसे डिकोड करना होगा और व्यूपोर्ट में इसके कॉन्टेंट को रेंडर करना होगा.
इमेज और वीडियो लेज़ी लोड होने से, शुरुआत में पेज लोड होने में लगने वाला समय, पेज का शुरुआती वज़न, और सिस्टम के रिसॉर्स के इस्तेमाल में कमी आती है. इन सभी चीज़ों की परफ़ॉर्मेंस पर अच्छा असर पड़ता है.
लेज़ी लोडिंग लागू करना
लेज़ी लोडिंग लागू करने के कई तरीके हैं. आपको जिस ब्राउज़र पर काम करना है उस पर ध्यान देना चाहिए. साथ ही, इस बात को भी ध्यान में रखना चाहिए कि आपको किस तरह की लेज़ी लोड करनी है.
मॉडर्न ब्राउज़र, ब्राउज़र-लेवल पर लेज़ी लोडिंग लागू करते हैं. इसे इमेज और iframe पर loading एट्रिब्यूट का इस्तेमाल करके चालू किया जा सकता है.
पुराने ब्राउज़र के साथ काम करने
या बिल्ट-इन लेज़ी लोडिंग के बिना, एलिमेंट पर लेज़ी लोडिंग
करने के लिए, अपने JavaScript के साथ समाधान लागू किया जा सकता है.
ऐसा करने में आपकी मदद करने के लिए कई मौजूदा लाइब्रेरी भी मौजूद हैं.
इन सभी तरीकों के बारे में पूरी जानकारी पाने के लिए, इस साइट पर मौजूद पोस्ट देखें:
साथ ही, हमने लेज़ी लोडिंग की संभावित समस्याओं और लागू करने के दौरान ध्यान रखने लायक चीज़ों की एक सूची बनाई है.
नतीजा
इमेज और वीडियो का इस्तेमाल सावधानी से करें. इससे आपकी साइट पर, शुरुआत में लोड होने में लगने वाला समय और पेज पेलोड कम हो सकते हैं. इनमें वेबसाइट की परफ़ॉर्मेंस की जानकारी भी शामिल है. उपयोगकर्ताओं को बेवजह नेटवर्क गतिविधि नहीं करनी पड़ेगी. इसमें, धीमे कनेक्शन पर नेटवर्क की वजह से होने वाला विवाद शामिल है. साथ ही, ऐसे मीडिया संसाधनों की प्रोसेसिंग लागत भी नहीं आती जो उन्हें शायद न दिखें. हालांकि, वे चाहें तो उन संसाधनों को देख सकते हैं.
जहां तक परफ़ॉर्मेंस को बेहतर बनाने की तकनीकों की बात है, तो लेज़ी लोडिंग का कोई मुकाबला नहीं होता. अगर आपकी साइट पर बहुत सारी इनलाइन इमेज हैं, तो यह गैर-ज़रूरी डाउनलोड को कम करने का सबसे अच्छा तरीका है. आपकी साइट के उपयोगकर्ता और प्रोजेक्ट के हिस्सेदार इसे पसंद करेंगे!