एक तेज़ वेबसाइट के लिए आलसी छवियां

एक तेज़ वेबसाइट के लिए आलसी छवियां

यदि आप एक प्रदर्शनकारी वेब पेज चाहते हैं, तो अपलोड करने से पहले अपनी छवियों को सही ढंग से रीसाइज़ और कंप्रेस करना आवश्यक है।

लेकिन इमेज अपलोड होने के बाद क्या होता है? क्या उन्हें थोड़ा और अनुकूलित करने और पेज लोडिंग समय में सुधार करने का कोई तरीका है?

इसका जवाब है हाँ!

इस लेख में, हम आलसी लोडिंग के सिद्धांत पर एक नज़र डालने जा रहे हैं, एक लाभकारी तकनीक जो छवियों को लोड होने से रोकती है, जब तक आपको उनकी आवश्यकता नहीं होती तब तक उन्हें “ऑफ-स्क्रीन” छोड़ दिया जाता है। हम लेज़ी लोडिंग से संबंधित मुख्य प्रश्नों के उत्तर भी देंगे, जैसे कि लेज़ी लोडिंग एक अच्छा एसईओ अभ्यास क्यों है और आपको इसका उपयोग कब करना चाहिए।

आइए देखें कि यह कैसे काम करता है!

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

आलसी लोडिंग का मूल विचार केवल छवियों या iframes को लोड करना है जब उपयोगकर्ताओं को उन्हें प्रदर्शित करने की आवश्यकता होती है: उन्हें पृष्ठ के सभी तत्वों के लोड होने की प्रतीक्षा नहीं करनी होगी और इसलिए, वेब पेज का उपयोग जल्द ही शुरू कर सकते हैं।

इसका अर्थ है कि आपके पृष्ठ केवल तह के ऊपर की छवियां दिखाएंगे; जैसे ही उपयोगकर्ता पृष्ठ को स्क्रॉल करेगा, शेष आ जाएगा।

तकनीकी रूप से, आलसी लोडिंग एक जावास्क्रिप्ट है जो आपके विज़िटर के वर्तमान व्यूपोर्ट की जांच करता है और केवल ऊपर-नीचे की छवियों को लोड करता है, यानी छवियां (लगभग) उन्हें दिखाई देती हैं।

यह स्क्रिप्ट आपकी छवियों पर एक प्लगइन या प्रोग्रामेटिक रूप से लागू की जा सकती है, और यह कथित और वास्तविक प्रदर्शन दोनों को अनुकूलित करने का एक शानदार तरीका है।

वेब पेज आमतौर पर कैसे लोड होता है?

जब भी आप अपने ब्राउज़र से URL खोलने के लिए कहते हैं, तो ऐसा होता है:

  • एक लिंक पर क्लिक एक अनुरोध ट्रिगर करता है
  • पृष्ठ अपने सभी संसाधनों (फ़ाइलों) के साथ डाउनलोड किया गया है
  • वेब ब्राउजर इसमें निहित संसाधनों का उपयोग करके पेज बनाता है
  • पृष्ठ अब उपयोगकर्ता को प्रदर्शित (रेंडर) किया गया है

आइए प्रक्रिया के दूसरे चरण पर ध्यान दें: आमतौर पर एक पृष्ठ में कौन से संसाधन शामिल होते हैं?

  • HTML (लगभग 15 से 120 KB कोड का)
  • JavaScript और CSS फ़ाइलें (कोड के 5 से 200 KB तक)
  • छवियां और iframes (200 KB से ऊपर की ओर—लेकिन यदि आप छवि का आकार बदलने के बारे में हमारे पिछले ट्यूटोरियल पढ़ते हैं, तो आपकी छवियां पहले से ही नियंत्रण में हैं, है ना?)

जैसा कि आप देख सकते हैं, चित्र और iframe आमतौर पर पृष्ठ पर डाउनलोड किए जाने वाले संसाधनों के अंतिम भाग होते हैं, और कभी-कभी सबसे महत्वपूर्ण भाग होते हैं।

इसका मतलब यह है कि जब तक सभी छवियों का डाउनलोड होना समाप्त नहीं हो जाता, तब तक आपका पेज पूरी तरह से काम नहीं करेगा।

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

इस व्यवहार पर काबू पाने और प्रक्रिया को “धोखाधड़ी” करने के लिए आलसी लोडिंग बनाई गई है, जिससे उपयोगकर्ता पृष्ठ का उपयोग कर सकते हैं, भले ही इसकी सभी छवियां और आईफ्रेम डाउनलोड नहीं किए गए हों।

जब आपकी छवियों पर आलसी लोडिंग स्क्रिप्ट लागू की जाती है, तो यह तब होता है जब आप किसी पृष्ठ पर उतरते हैं:

  1. पृष्ठ की सामग्री को पढ़ते ही आप स्क्रॉल करना प्रारंभ कर देते हैं
  2. जब व्यूपोर्ट में एक छवि दिखाई देने वाली होती है, तो इसके बजाय एक प्लेसहोल्डर छवि दिखाई देगी
  3. मूल छवि जल्दी से प्लेसहोल्डर छवि को बदल देगी

इसलिए, जब छवियों को आलसी लोड किया जाता है, तो वे एक पृष्ठ पर संग्रहीत होते हैं, लेकिन वे मूल छवि के समान आकार के पारदर्शी प्लेसहोल्डर से ढके होते हैं।

जब तक उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करने और उन्हें “अनावरण” करने का निर्णय नहीं लेता, तब तक छवियां तह के नीचे “पारदर्शी प्लेसहोल्डर” के नीचे रहेंगी।

छवियों को तेज़ी से लोड करने के लिए आपको आलसी लोडिंग का उपयोग क्यों करना चाहिए?

आप सोच रहे होंगे कि क्या लेज़ी लोडिंग है वास्तव में महत्वपूर्ण। सच तो यह है कि कई कारण हैं कि आपको अपनी छवियों को एक साथ लोड करने देने के बजाय आलसी लोड क्यों करना चाहिए। बेशक, आलसी लोडिंग लाभ आपकी साइट को गति देने और आपकी साइट को अनुकूलित करने से संबंधित हैं – इसे हाथ से न जाने दें!

प्रदर्शन के लिए 6 आलसी लोडिंग लाभ

1. आपके पृष्ठों के लिए कथित और वास्तविक लोडिंग समय दोनों में सुधार

छवियों से भरपूर लंबे पृष्ठ लोड होने में अधिक समय लेते हैं: जैसा कि हमने देखा, पृष्ठ के 100% उपयोग करने योग्य होने से पहले छवि डेटा की मात्रा पूरी तरह से डाउनलोड होनी चाहिए। यदि हम इसके बजाय अपनी छवियों को लोड करने में आलस्य करते हैं, तो समस्या हल हो जाएगी क्योंकि पहली बार में केवल तह के ऊपर रखी गई छवियों को ही लोड किया जाएगा। इसके परिणामस्वरूप प्रथम-पृष्ठ लोड समय में भी वास्तविक कमी आएगी।

2. Browser के लिए काम कम करना

यदि छवियां लेज़ी-लोडेड हैं, तो आपके ब्राउज़र को संसाधनों को तब तक पार्स या डीकोड करने की आवश्यकता नहीं होगी जब तक कि पृष्ठ को स्क्रॉल करके उनसे अनुरोध नहीं किया जाता है।

3. प्रथम पृष्ठ लोड के दौरान HTTP अनुरोधों की संख्या में कमी

पिछले बिंदु के प्रत्यक्ष परिणाम के रूप में, आप HTTP अनुरोधों की संख्या भी कम कर देंगे और सबसे बड़े कंटेंटफुल पेंट ग्रेड में सुधार करेंगे

4. आपके पेजस्पीड इनसाइट्स ऑडिट में सुधार

अपनी छवियों को आलसी लोड करते समय, आप डेफर ऑफस्क्रीन छवियों पर पेजस्पीड इनसाइट्स ऑडिट को संबोधित करेंगे।

5. सर्वर या सीडीएन द्वारा कम डेटा परोसा गया

पिछले बिंदुओं की तरह ही, सर्वर या सीडीएन को कम डेटा डाउनलोड करना होगा, जिसके परिणामस्वरूप आपके लिए सस्ते बिल होंगे!

6. डेटा और बैंडविड्थ की बचत (विशेष रूप से मोबाइल से)

यदि आपके पृष्ठों पर डेटा का सबसे महत्वपूर्ण हिस्सा — आमतौर पर छवियों द्वारा लिया जाता है — केवल स्क्रॉल पर डाउनलोड किया जाता है, तो मोबाइल उपकरणों से आपकी साइट पर आने वाले उपयोगकर्ता अत्यधिक आभारी होंगे! आलसी लोड की गई छवियां आपके पाठकों के डेटा और बैंडविड्थ को बचाएंगी, उन लोगों के लिए एक असाधारण उपहार जो तेज़ इंटरनेट नेटवर्क या अनुमोदित डेटा योजनाओं पर भरोसा नहीं करते हैं।

क्या Image Lazy Loading SEO के लिए अच्छा है?

हो सकता है कि आपने राय पर ठोकर खाई हो कि आलसी लोड एसईओ के लिए महत्वपूर्ण हो सकता है क्योंकि Google आलसी लोड छवियों को अनुक्रमण से बाहर कर सकता है।

सच्चाई यह है: यह निर्भर करता है। ध्यान में रखने के दो कारक हैं:

  • आलसी भार कैसे लागू किया जाता है
  • खोज इंजन क्रॉलर क्षमताओं।

आलसी भार कार्यान्वयन के लिए, नेटिव लेज़ी लोड एक एसईओ-संगत प्रारूप है क्योंकि यह विचार करने के लिए खोज इंजनों के लिए src गुण को दृश्यमान रखता है। वास्तव में, खोज इंजनों को छवियों की जांच और अनुक्रमण करने देने के लिए src विशेषता आवश्यक है।

विचार करने के लिए अन्य छवि विशेषता srcset संपत्ति है, जो सभी खोज इंजनों द्वारा पढ़ने योग्य नहीं है। इसलिए फ़ॉलबैक के रूप में ‘src’ जोड़ना सबसे अच्छा अभ्यास है। ऐसा करके, आप सुनिश्चित करेंगे कि आलसी लोडिंग छवि अनुक्रमण को प्रभावित नहीं करती है।

यह सुनिश्चित करने के लिए कि खोज इंजन आपकी छवियों को सही ढंग से अनुक्रमित करते हैं (भले ही वे आलसी-लोडेड हों या नहीं), आपको एक छवि साइटमैप का भी उपयोग करना चाहिए।

खोज इंजन क्रॉलर क्षमताओं के लिए: Google जैसे कुछ सर्च इंजन पेज की जांच करते समय जावास्क्रिप्ट को फ़ायर कर सकते हैं। ये जावास्क्रिप्ट संचालित आलसी लोड और देशी आलसी लोडिंग के साथ ठीक काम करेंगे। यह WP रॉकेट के आलसी लोड फीचर के साथ ठीक काम करता है।
दूसरी ओर, कुछ खोज इंजन पृष्ठों की जाँच करते समय जावास्क्रिप्ट सक्रिय नहीं करते हैं। इन्हें कवर करने के लिए, आपको एक

कुल मिलाकर, आलसी लोडिंग एसईओ के लिए एक अच्छा अभ्यास है, और अगर सही तरीके से लागू किया जाए तो एसईओ पर कोई नकारात्मक प्रभाव नहीं पड़ता है।

वही गूगल अपने डेवलपर्स गाइड में लेज़ी लोडिंग के उपयोग को बढ़ावा देता है:

जहाँ तक प्रदर्शन सुधार तकनीकों की बात है, आलसी लोडिंग यथोचित रूप से विवादास्पद है। यदि आपकी साइट पर बहुत अधिक इनलाइन इमेजरी है, तो यह अनावश्यक डाउनलोड को कम करने का एक बिल्कुल अच्छा तरीका है। आपकी साइट के उपयोगकर्ता और परियोजना हितधारक इसकी सराहना करेंगे!

आपको छवि आलसी लोडिंग का उपयोग कब करना चाहिए?

और अब सवाल यह है कि आलसी लोडिंग का उपयोग करने की सिफारिश कब की जाती है?

तह के नीचे की छवियों के लिए आपको हमेशा आलसी लोडिंग का उपयोग करना चाहिए. जैसा कि हमने समझाया, आलसी लोडिंग वास्तविक और कथित लोडिंग समय को कम कर देगी। उपयोगकर्ता अनुभव इससे लाभान्वित होगा – और आप उपयोगकर्ता आपको धन्यवाद देंगे।

आपको फ़ोल्ड के ऊपर की छवियों के लिए लेज़ी लोडिंग का उपयोग नहीं करना चाहिए — जिन्हें जितनी जल्दी हो सके लोड किया जाना चाहिए। इसके विपरीत, आलसी लोडिंग इन छवियों के लोडिंग को धीमा कर देगी और एक महत्वपूर्ण प्रदर्शन मीट्रिक को प्रभावित करेगी जैसे कि सबसे बड़ा कंटेंटफुल पेंट। सबसे बड़ा सामग्रीपूर्ण पेंट तत्व संभवतः एक तह के ऊपर की छवि है – यही कारण है कि तह के ऊपर की सभी छवियों को जल्दी से लोड किया जाना चाहिए।

छवियों को आलसी लोड कैसे करें

आप छवियों को मैन्युअल रूप से और प्लगइन्स दोनों के साथ आलसी लोड कर सकते हैं।

यदि आपके पास कुछ तकनीकी पृष्ठभूमि है और आप इसे स्वयं लागू करना चाहते हैं, तो आप CSS-tricks जैसे मैन्युअल मार्गदर्शिका देख सकते हैं।

दूसरी ओर, यदि आप समय बचाना चाहते हैं और अपनी वर्डप्रेस साइट के लिए एक आसान समाधान खोजना चाहते हैं, तो आप सबसे अच्छे आलसी लोड प्लगइन्स में से एक चुन सकते हैं।

अन्य शक्तिशाली सुविधाओं के लिए धन्यवाद, आप कुछ ही क्लिक में अपनी साइट को तेज करते हुए अपनी छवियों को आलसी लोड करने के लिए WP रॉकेट जैसे कैशिंग प्लगइन का लाभ उठा सकते हैं।

मीडिया टैब में, आपको LazyLoad विशेषताएँ मिलेंगी। आपको केवल “छवियों के लिए सक्षम करें” विकल्प को फ़्लैग करना होगा। यदि आप आलसी लोड iframes और वीडियो चाहते हैं तो वही होता है। आपके पास छवियों या iframes को बहिष्कृत करने का अवसर भी है। इतना आसान!

एक तेज़ वेबसाइट के लिए आलसी छवियां
आलसी लोड सुविधा – WP रॉकेट

💡 वर्डप्रेस पर अपनी छवियों को आलसी लोड करने के बारे में अधिक जानने के लिए हमारा समर्पित लेख पढ़ें।

कैसे जांचें कि आलसी लोडिंग काम कर रही है या नहीं

यदि आप सुनिश्चित नहीं हैं कि आलसी लोडिंग ठीक से काम कर रही है या नहीं, तो आप Chrome DevTools खोल सकते हैं और जाँच सकते हैं कि चित्र स्क्रॉल होने तक लोड नहीं हुए हैं। आपको ये कदम उठाने चाहिए:

  • Chrome DevTools खोलें, नेटवर्क टैब और Img फ़िल्टर पर जाएँ। इस बिंदु पर, पृष्ठ को पुनः लोड करें। आपको छवि सूची में शामिल केवल तह के ऊपर की छवियों को देखना चाहिए।
अगर आलसी लोडिंग काम कर रही है तो कैसे चेक करें - चरण 1
अगर आलसी लोडिंग काम कर रही है तो कैसे चेक करें – चरण 1
अगर आलसी लोडिंग काम कर रही है तो कैसे चेक करें - चरण 2
अगर आलसी लोडिंग काम कर रही है तो कैसे चेक करें – चरण 2

यदि आप एक WP रॉकेट ग्राहक हैं, तो आप हमारे समर्पित संसाधन में अधिक जानकारी प्राप्त कर सकते हैं।

ऊपर लपेटकर

इस लेख में, आपने आलसी लोडिंग की नींव सीखी, यह क्या है से लेकर क्यों और आपको इसे कब लागू करना चाहिए।

आलसी लोडिंग को सक्षम और अक्षम करना कठिन और समय लेने वाला हो सकता है। WP रॉकेट कुछ ही क्लिक में आपकी साइट के प्रदर्शन को बढ़ाते हुए समय और ऊर्जा बचाने में आपकी मदद कर सकता है!

आप हमेशा हमारी 100% मनी-बैक गारंटी पर भरोसा कर सकते हैं। हालांकि हमें नहीं लगता कि आप कभी भी एक चाहते हैं, अगर आप खरीद के 14 दिनों के भीतर अनुरोध करते हैं तो हम खुशी से धनवापसी प्रदान करेंगे।

🚀 हमारे प्लगइन के साथ आप जो एकमात्र जोखिम उठा रहे हैं, वह है आपकी वेबसाइट की गति बढ़ाना। WP रॉकेट स्वचालित रूप से 80% वेब प्रदर्शन सर्वोत्तम प्रथाओं को लागू करता है, तुरंत आपके कोर वेब विटल्स स्कोर को बढ़ाता है।



एक तेज़ वेबसाइट के लिए आलसी छवियां एक तेज़ वेबसाइट के लिए आलसी छवियां

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *