लेज़ी लोडिंग क्या है और यह कैसे काम करती है?

पेज की हर इमेज को एक ही समय पर लोड होने की ज़रूरत नहीं होती। इमेज की लेज़ी लोडिंग उन इमेज का डाउनलोड टालती है जो अभी विज़िटर के व्यूपोर्ट में दिख नहीं रहीं, ताकि ब्राउज़र पूरा पेज एक साथ लोड करने की जगह उस कंटेंट पर ध्यान दे जो विज़िटर असल में देख सकता है। जिन पेजों पर बहुत सारी इमेज हैं, उनमें यही एक बदलाव शुरुआती लोड टाइम काफ़ी घटा सकता है और उन मेट्रिक्स को सुधार सकता है जो विज़िटर के अनुभव और सर्च रैंकिंग दोनों के लिए मायने रखते हैं। इस लेख में बताया गया है कि लेज़ी लोडिंग क्या है, तकनीकी रूप से कैसे काम करती है, किन चीज़ों को लेज़ी लोड करना चाहिए और किन्हें नहीं, और यह Core Web Vitals स्कोर को कैसे प्रभावित करती है।

जब ब्राउज़र लेज़ी लोडिंग के बिना पेज लोड करता है, तो वह पेज की हर इमेज डाउनलोड करता है, चाहे उनमें से कोई अभी दिख रही हो या नहीं। जो विज़िटर पेज खोलकर तुरंत लौट जाता है, वह भी फ़ोल्ड के नीचे की हर इमेज का डाउनलोड शुरू करवा देता है। यह बर्बाद बैंडविड्थ है, और इससे फ़ोल्ड के ऊपर की वह हर चीज़ धीमी लोड होती है जो विज़िटर असल में देखता है। लेज़ी लोडिंग इसे ऐसे बदलती है कि सिर्फ़ वही कंटेंट डाउनलोड हो जो अभी नज़र में है। पेज लोडिंग स्पीड की बड़ी तस्वीर में यह कैसे फ़िट होता है, इसके संदर्भ के लिए अपनी वेबसाइट का लोडिंग टाइम कैसे घटाएं वाला लेख देखें।

लेज़ी लोडिंग क्या है?

लेज़ी लोडिंग एक तकनीक है जो गैर-ज़रूरी रिसोर्स का लोड होना तब तक टालती है जब तक उनकी ज़रूरत न पड़े। इमेज के संदर्भ में इसका मतलब है कि इमेज तब तक डाउनलोड नहीं होती जब तक विज़िटर स्क्रॉल करके उसके पास न पहुंचे। पेज लोड पर ब्राउज़र हर इमेज मांगने की जगह सिर्फ़ वही इमेज मांगता है जो दिख रही हैं या विज़िटर के पेज से इंटरैक्ट करते हुए दिखने वाली हैं।

लेज़ी लोडिंग लोडिंग क्रम में क्या बदलती है

• लेज़ी लोडिंग के बिना: पेज पहली बार लोड होने पर ब्राउज़र सारी इमेज मांगता है, चाहे वे व्यूपोर्ट में हों या नहीं
• लेज़ी लोडिंग के साथ: ब्राउज़र सिर्फ़ वे इमेज मांगता है जो मौजूदा व्यूपोर्ट में या उसके पास हैं। बाकी तब मांगी जाती हैं जब विज़िटर उनकी ओर स्क्रॉल करता है
• पूरे पेज को स्क्रॉल करने के दौरान ट्रांसफ़र हुए डेटा की कुल मात्रा वही रहती है, पर शुरुआती लोड काफ़ी हल्का होता है
• जो विज़िटर पेज पर किसी बिंदु से आगे स्क्रॉल नहीं करते, वे उन इमेज का डाउनलोड शुरू ही नहीं करवाते जहां वे कभी पहुंचते ही नहीं

लेज़ी लोडिंग तकनीकी रूप से कैसे काम करती है?

इमेज के लिए लेज़ी लोडिंग लागू करने के दो तरीके हैं: नेटिव ब्राउज़र एट्रिब्यूट और JavaScript-आधारित हल।

नेटिव लेज़ी लोडिंग

• सभी मुख्य ब्राउज़र इमेज टैग में सीधे जोड़े गए loading="lazy" एट्रिब्यूट से नेटिव लेज़ी लोडिंग सपोर्ट करते हैं
• किसी JavaScript या बाहरी लाइब्रेरी की ज़रूरत नहीं। लोडिंग का व्यवहार ब्राउज़र खुद संभालता है
• वेब पर इमेज की लेज़ी लोडिंग के लिए अब यही मानक तरीका है और इसे लागू करने के लिए बहुत कम तकनीकी जानकारी चाहिए
• ब्राउज़र तय करता है कि इमेज लोड करना कब शुरू करे, यह व्यूपोर्ट से उसकी दूरी पर निर्भर करता है, और यह सीमा अलग-अलग ब्राउज़र में थोड़ी बदलती है

JavaScript-आधारित लेज़ी लोडिंग

• नेटिव लेज़ी लोडिंग के व्यापक रूप से सपोर्ट होने से पहले, डेवलपर JavaScript लाइब्रेरी इस्तेमाल करते थे जो स्क्रॉल पोज़िशन पर नज़र रखती थीं और इमेज के व्यूपोर्ट में आने पर लोड शुरू करती थीं
• Intersection Observer API मानक JavaScript तरीका है, जो स्क्रॉल इवेंट लिसनर पर निर्भर हुए बिना पता लगाता है कि कोई एलिमेंट व्यूपोर्ट में आया या निकला
• JavaScript-आधारित लेज़ी लोडिंग अब भी ज़्यादा जटिल स्थितियों में इस्तेमाल होती है, जैसे CSS में सेट की गई बैकग्राउंड इमेज या वीडियो कंटेंट की लेज़ी लोडिंग
• सामान्य इमेज एलिमेंट के लिए, loading="lazy" के साथ नेटिव लेज़ी लोडिंग ज़्यादा सरल और भरोसेमंद है

इमेज के अलावा और क्या लेज़ी लोड हो सकता है?

Iframe

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

वीडियो

• वीडियो फ़ाइलें इमेज से काफ़ी बड़ी होती हैं और फ़ोल्ड के नीचे रखे जाने पर शुरुआती लोड टाइम पर बड़ा असर डाल सकती हैं
• वीडियो की लेज़ी लोडिंग के लिए JavaScript तरीका चाहिए, क्योंकि नेटिव loading एट्रिब्यूट वीडियो एलिमेंट पर लागू नहीं होता
• आम तरीका है शुरू में सिर्फ़ थंबनेल या पोस्टर इमेज लोड करना, और वीडियो फ़ाइल तब लोड करना शुरू करना जब विज़िटर उससे इंटरैक्ट करे या उस तक स्क्रॉल करे

कंपोनेंट और सेक्शन

• JavaScript-भारी एप्लिकेशन में, पेज के पूरे सेक्शन या कंपोनेंट लेज़ी लोड हो सकते हैं, यानी उनका कोड और कंटेंट तब तक नहीं लाया जाता जब तक विज़िटर पेज के उस हिस्से तक न पहुंचे
• यह जटिल वेब एप्लिकेशन में इस्तेमाल होने वाली उन्नत तकनीक है और आमतौर पर हाथ से लागू करने की जगह फ़्रेमवर्क संभालता है

क्या लेज़ी लोड नहीं करना चाहिए?

लेज़ी लोडिंग सही जगह लगाने पर परफ़ॉर्मेंस सुधारती है, पर गलत जगह लगाने पर समस्याएं ठीक करने की जगह खड़ी करती है।

फ़ोल्ड के ऊपर की इमेज

• हीरो इमेज, लोगो, या पेज पहली बार खुलने पर दिखने वाला कोई भी प्रमुख विज़ुअल कंटेंट तुरंत लोड होना चाहिए
• फ़ोल्ड के ऊपर की इमेज पर लेज़ी लोडिंग लगाने से LCP में देरी होती है, जिससे Core Web Vitals स्कोर और विज़िटर का अनुभव बिगड़ते हैं
• नियम सीधा है: जो कुछ बिना स्क्रॉल किए दिखता है, उसे तुरंत लोड होना चाहिए। फ़ोल्ड के नीचे का सब कुछ लेज़ी लोड हो सकता है

फ़ोल्ड के पास की इमेज

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

तेज़ लोड होने वाले पेजों पर ज़रूरी कंटेंट

• जिन पेजों में बहुत कम कंटेंट और सिर्फ़ कुछ इमेज हैं, वहां लोडिंग क्रम पहले से तेज़ है। इन मामलों में लेज़ी लोडिंग बिना अर्थपूर्ण फ़ायदे के जटिलता जोड़ती है
• लेज़ी लोडिंग उन पेजों पर सबसे कीमती है जिनमें बहुत इमेज हैं या लंबा स्क्रॉल होने वाला कंटेंट है

लेज़ी लोडिंग Core Web Vitals को कैसे प्रभावित करती है?

सही तरह से लगाई जाए, तो लेज़ी लोडिंग का दो Core Web Vitals मेट्रिक्स पर सीधा असर होता है और तीसरे पर कोई असर नहीं।

Largest Contentful Paint (LCP)

• लेज़ी लोडिंग उस एलिमेंट पर कभी नहीं लगानी चाहिए जो LCP का उम्मीदवार हो सकता है, आमतौर पर हीरो इमेज
• सही तरह लगाने पर, लेज़ी लोडिंग शुरुआती लोड के दौरान बैंडविड्थ के लिए होड़ करने वाले रिसोर्स की संख्या घटाती है, जो फ़ोल्ड के ऊपर के कंटेंट को तेज़ लोड होने देकर LCP सुधार सकती है
• फ़ोल्ड के ऊपर की इमेज पर गलत तरह लगाने पर, लेज़ी लोडिंग सबसे बड़े दिखने वाले एलिमेंट में देरी करके सीधे LCP बिगाड़ती है

Interaction to Next Paint (INP)

• शुरुआत में कम इमेज लोड होने का मतलब है कि अहम लोडिंग अवधि के दौरान JavaScript चलने से होड़ करने वाली नेटवर्क गतिविधि कम है
• इससे अप्रत्यक्ष रूप से मुख्य थ्रेड की ब्लॉकिंग घट सकती है और उन पेजों पर INP स्कोर सुधर सकते हैं जो पहले एक साथ बहुत सारी इमेज लोड कर रहे थे

Cumulative Layout Shift (CLS)

• लेज़ी लोडिंग CLS को सीधे प्रभावित नहीं करती, पर बिना तय चौड़ाई और ऊंचाई एट्रिब्यूट वाली लेज़ी-लोड इमेज लोड होने पर लेआउट शिफ़्ट पैदा कर सकती हैं
• लेज़ी-लोड इमेज पर हमेशा साफ़ साइज़ सेट करें ताकि इमेज लोड होने से पहले ब्राउज़र सही जगह रिज़र्व रखे

LCP, INP और CLS कैसे स्कोर होते हैं और सीमाएं क्या हैं, इसके पूरे ब्रेकडाउन के लिए Core Web Vitals क्या हैं वाला लेख देखें।

क्या लेज़ी लोडिंग SEO को प्रभावित करती है?

सही तरह लागू होने पर लेज़ी लोडिंग SEO को नुकसान नहीं पहुंचाती और बेहतर पेज स्पीड स्कोर के ज़रिए बेहतर सर्च प्रदर्शन में योगदान दे सकती है।

सर्च इंजन लेज़ी-लोड कंटेंट को कैसे संभालते हैं

• सर्च इंजन क्रॉलर पेजों को ब्राउज़र जैसा ही रेंडर करते हैं और लेज़ी लोड हुए कंटेंट को इंडेक्स कर सकते हैं
• जो इमेज लेज़ी लोड होती हैं, वे फिर भी क्रॉल हो सकती हैं और इमेज सर्च नतीजों में दिख सकती हैं
• SEO का फ़ायदा मुख्य रूप से उन स्पीड सुधारों से आता है जो लेज़ी लोडिंग संभव बनाती है। बेहतर Core Web Vitals स्कोर वाले पेज, जिन्हें सुधारने में लेज़ी लोडिंग मदद कर सकती है, रैंकिंग में बढ़त रखते हैं

Alt टेक्स्ट अब भी लागू होता है

• लेज़ी-लोड इमेज को भी किसी दूसरी इमेज जितना ही alt टेक्स्ट चाहिए। alt एट्रिब्यूट में इमेज का विवरण भरा होना चाहिए, चाहे वह लेज़ी लोड हो या नहीं
• असरदार alt टेक्स्ट लिखने के मार्गदर्शन के लिए अपनी वेबसाइट पर इमेज का इस्तेमाल कैसे करें वाला लेख देखें

अपनी वेबसाइट में लेज़ी लोडिंग कैसे जोड़ें?

HTML में अलग-अलग इमेज के लिए

• फ़ोल्ड के नीचे के किसी भी इमेज टैग में loading="lazy" जोड़ें
• पक्का करें कि हर लेज़ी-लोड इमेज में साफ़ width और height एट्रिब्यूट हों ताकि इमेज लोड होते समय लेआउट शिफ़्ट न हों
• हीरो इमेज या बिना स्क्रॉल किए दिखने वाली किसी भी इमेज में loading="lazy" न जोड़ें

अपने वेबसाइट प्लेटफ़ॉर्म से

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

लेज़ी लोडिंग से आगे इमेज ऑप्टिमाइज़ करने की पूरी गाइड के लिए, जिसमें फ़ाइल फ़ॉर्मेट, कंप्रेशन और रिस्पॉन्सिव साइज़िंग शामिल हैं, तेज़ लोडिंग के लिए इमेज कैसे ऑप्टिमाइज़ करें वाला लेख देखें।

WEMASY लेज़ी लोडिंग को कैसे संभालता है

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

लेज़ी लोडिंग हर WEMASY प्लान पर इमेज कंप्रेशन और CDN डिलीवरी के साथ काम करती है। ये तीनों सुधार मिलकर इमेज के शुरुआती पेज वज़न और डिलीवरी टाइम दोनों घटाते हैं, जो सीधे तेज़ LCP और एनालिटिक्स डैशबोर्ड में बेहतर Core Web Vitals स्कोर में योगदान देता है।

क्या-क्या शामिल है, यह WEMASY वेबसाइट बिल्डर पर देखें, या प्राइसिंग पेज पर प्लान के विकल्प देखें।

अक्सर पूछे जाने वाले सवाल