आलसी लोड हो रहा है छवियाँ: पूरा गाइड प्लस 3 इसे लागू करने के तरीके

आलसी लोड हो रहा है छवियाँ: पूरा गाइड


जैसे-जैसे वेब पर कार्यक्षमता और अन्तरक्रियाशीलता बढ़ती है, पिछले कुछ वर्षों में वेब पेज के आकार में लगातार वृद्धि हुई है। 2018 की शुरुआत में, औसत पृष्ठ का आकार इंटरनेट पर 2 एमबी से अधिक खड़ा था! इससे कैसे लड़ें? आलसी लोडिंग छवियों नामक एक छोटी सी चीज बेहतर समाधानों में से एक है.

इस गाइड में, हम गुजरते हैं आलसी लोडिंग छवियों की सभी जटिलताओं, और इसे लागू करने के तीन अलग-अलग तरीकों पर बात करें.

आइये जाने की सामग्री की तालिका के साथ शुरू करें:

  • आलसी लोडिंग मामले क्यों?
  • आलसी लोडिंग क्या है?
  • आलसी लोडिंग के लाभ
  • आलसी लोडिंग छवियों पर क्या विचार करें
  • विकल्प 1: आलसी लोडिंग को खरोंच से लागू करें (शुरुआत के अनुकूल:: / 5)
  • विकल्प 2: एक जावास्क्रिप्ट प्लगइन का उपयोग करें (शुरुआत के अनुकूल:: / 5)
  • विकल्प 3: एक वर्डप्रेस प्लगइन का उपयोग करें (शुरुआत के अनुकूल:: / 5)
  • निष्कर्ष

आलसी लोडिंग मामले क्यों?

एक वेब पेज के भारी पेलोड में मुख्य रूप से चित्र, स्क्रिप्ट, स्टाइलशीट, फोंट और वीडियो होते हैं। हालांकि, छवियां एक विशिष्ट वेब पेज के आकार का 60% से अधिक लेती हैं। छवियां वेब पेज के डिजाइन के लिए भी महत्वपूर्ण हैं, इसलिए ऐसा नहीं है कि आप उनसे छुटकारा पा सकते हैं.

किसी भी अनुकूलन के बिना, उपयोगकर्ता का वेब ब्राउज़र किसी पृष्ठ को पूरी तरह से प्रस्तुत करने से पहले सभी संसाधनों को डाउनलोड करता है। इससे लोड समय बढ़ जाता है, जो लोगों को खींच सकता है. WooCommerce का अनुमान है पृष्ठ गति में सुधार के प्रत्येक 100ms के लिए, एक ई-कॉमर्स वेबसाइट राजस्व में 1% की वृद्धि कर सकती है.

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

आलसी लोडिंग क्या है?

यह समझने के लिए कि आलसी लोडिंग कैसे काम करता है, यहां एक त्वरित एनिमेटेड जीआईएफ प्रदर्शित किया गया है कि कोडिनडब्ल्यूपी पर छवियां कैसे प्रस्तुत की जाती हैं.

आलसी लोड हो रहा है छवियाँ डेमोCodeinWP पर आलसी लोडिंग प्रदर्शन

जब पृष्ठ लोड होता है, तो सभी छवियां तुरंत डाउनलोड नहीं होती हैं। जब आप किसी छवि पर स्क्रॉल करते हैं, तो आपको पहली बार इसका धुंधला संस्करण दिखाई देता है, और वास्तविक छवि पृष्ठभूमि में लोड होने लगती है। यह धुंधली छवि आकार के एक अंश पर अंतिम छवि का एक कम-परिभाषा संस्करण है। उपयोगकर्ता द्वारा इस पर स्क्रॉल करने तक छवि को डाउनलोड करने और रेंडर करने की यह घटना ठीक वही है जिसे आलसी लोडिंग कहा जाता है.

हालांकि "आलसी" आम तौर पर नकारात्मक रूप से जुड़ा हुआ है, आलसी लोडिंग वास्तव में एक अच्छा अभ्यास है और आपकी साइट को समग्र रूप से अनुकूलित करके पृष्ठ लोड समय को कम करता है.

ध्यान दें। इस पोस्ट में, हम आलसी लोडिंग छवियों की प्रक्रिया को देखते हैं, लेकिन आलसी लोडिंग केवल छवियों तक ही सीमित नहीं है – आप वीडियो, टिप्पणियों जैसे किसी अन्य संसाधन का प्रतिपादन करते समय एक ही विचार का उपयोग कर सकते हैं (यह कैसे करना है पर एक पूरा अनुभाग है) में ये पद), और यहां तक ​​कि फोंट.

आलसी लोडिंग के लाभ

जैसा कि वेब पेज का लोडिंग समय परित्याग में एक प्रमुख योगदानकर्ता होता है, आलसी लोडिंग छवियों से उपयोगकर्ताओं के उत्थान में काफी कमी आती है जो पेज पर तब तक रहते हैं जब तक यह लोड नहीं होता है, जो अंततः उच्च बिक्री या रूपांतरण का कारण बन सकता है।.

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

सामने की सभी छवियों को लोड करना संभावित रूप से आपके पाठकों के लिए हानिकारक है। यदि उपयोगकर्ता वेब के लिए असीमित डेटा प्लान पर है, तो शायद यह मायने नहीं रखना चाहिए। हालाँकि, सीमित डेटा वाली योजनाओं पर, आप अपने दर्शकों के डेटा को आलसी लोडिंग छवियों द्वारा सहेज रहे हैं.

आलसी लोडिंग छवियों पर क्या विचार करें

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

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

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

केवल वे चित्र जो ऑफ़ स्क्रीन हैं और पृष्ठ की संरचना में योगदान नहीं करते हैं, उन्हें आलसी लोडिंग के लिए माना जाना चाहिए। आमतौर पर, ये चित्र हैं  पृष्ठ के मुख्य भाग में दिखाई देने वाले तत्व.

आप छवि प्लेसहोल्डर चुनें

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

दो दिशाएँ हैं जो डेवलपर्स आमतौर पर इस संबंध में लेते हैं:

  • पृष्ठभूमि के रूप में छवि के प्रमुख रंग का उपयोग करें
  • छवि के निम्न गुणवत्ता संस्करण का उपयोग करें

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

यहाँ सही विकल्प आपकी साइट के डिज़ाइन पर निर्भर करता है और छवि को लोड करने की प्रतीक्षा करते समय आप उपयोगकर्ता को क्या दिखाना पसंद करेंगे.

हालाँकि एक तकनीक चित्रों को लोड करने के लिए है जैसे ही वे दृश्य बंदरगाह में प्रवेश करते हैं, आप जगह लेने से पहले एक बफर समय जोड़ने पर विचार कर सकते हैं – ताकि उपयोगकर्ता प्लेसहोल्डर को कभी न देख सके.

छवियों को लोड करते समय पृष्ठ संरचना को बदलने से सावधान रहें

छवि लोड होने से पहले, इसे 0 px आयामों का उपयोग करके दिखाया जा सकता है। यह आपके डिज़ाइन संरचना को बनाए रखने के लिए आदर्श नहीं है.

यह पृष्ठ के लेआउट और पाठ की स्थिति को आसानी से बदल सकता है। एक सरल समाधान यह है कि छवि को सही आयामों को तुरंत जोड़ा जाए – यह सुनिश्चित करता है कि लोड के बाद छवि तत्व का आकार समान रहता है.

उपरोक्त विचारों के साथ, आइए अब देखें कि हम वास्तव में वर्डप्रेस साइट पर आलसी लोडिंग को कैसे लागू कर सकते हैं.

विकल्प 1: आलसी लोडिंग को खरोंच से लागू करें

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

  1. पेज लोडिंग के दौरान इमेज लोडिंग को रोकें: जब आप छवि के URL या पथ को src विशेषता में निर्दिष्ट करते हैं  टैग, छवि पेज लोड के दौरान ब्राउज़र द्वारा डाउनलोड की जाएगी। ब्राउज़र को छवि को डाउनलोड करने से रोकने के लिए, आपको डेटा के src विशेषता में छवि का स्थान निर्दिष्ट करना होगा  इसके बजाय टैग.
  2. लोड करने और स्क्रॉल करने के लिए दो घटनाओं पर तत्वों की जांच करने के लिए जावास्क्रिप्ट में ईवेंट हैंडलर फ़ंक्शन को पंजीकृत करें.
  3. जब कोई तत्व व्यू पोर्ट में आता है, तो src तत्व में डेटा-src तत्व का मान लोड करता है, जो इमेज को लोड करने के लिए ब्राउज़र को ट्रिगर करता है।.

इस प्रक्रिया का एक सरल कार्यान्वयन द्वारा समझाया गया है रॉबिन ओसबोर्न और डेमो उपलब्ध है CodePen पर.

विकल्प 1.1: चौराहे पर्यवेक्षक एपीआई का उपयोग करें

चौराहा पर्यवेक्षक एपीआई समय में किसी भी बिंदु पर दृश्य पोर्ट में मौजूद DOM तत्वों की पहचान करने में मदद करता है। यह घटना हैंडलर कार्यों को लिखने के बिना आलसी लोड को लागू करने का एक क्लीनर तरीका है। आलसी लोड को लागू करने के लिए कोड की लाइनों की संख्या काफी कम हो जाती है। हालाँकि, ब्राउज़र संगतता एक समस्या बनी हुई है.

Google डेवलपर्स ब्लॉग के माध्यम से प्रतिच्छेदन पर्यवेक्षक एपीआई के कार्यान्वयन की व्याख्या करता है इस CodePen डेमो.

विकल्प 2: एक जावास्क्रिप्ट प्लगइन का उपयोग करें

ऊपर दिए गए दो विकल्पों पर जावास्क्रिप्ट के मध्यवर्ती स्तर के ज्ञान की आवश्यकता है। यदि आप सर्वर में लोड करने वाले भारी प्लगइन का उपयोग किए बिना आलसी लोडिंग के आसान कार्यान्वयन की तलाश कर रहे हैं, तो आप सादे जावास्क्रिप्ट प्लगइन की कोशिश कर सकते हैं, Blazy.

 b आलसी पुस्तकालय 2 केबी से कम के आकार में पेलोड पर कोई अतिरिक्त भार नहीं पड़ता है, जबकि आप आलसी लोडिंग छवियों को आसानी से संभाल सकते हैं.

BLazy लाइब्रेरी का उपयोग करने के लिए, आपको आरंभ करने की आवश्यकता है  निम्नलिखित विशेषताओं वाले तत्व:

  • वर्ग: सभी का वर्ग निर्धारित करें  बी-आलसी को टैग
  • src: प्लेसहोल्डर इमेज का लिंक
  • data-src: इमेज को लोड करने के लिए लिंक
  • data-src-small: 420 पिक्सल से कम स्क्रीन पर लोड करने के लिए छवि के लिए लिंक

आपको कोड की कुछ लाइनों में bLazy लाइब्रेरी को इनिशियलाइज़ करना होगा और आपकी सभी छवियों को lazy loading के माध्यम से प्रस्तुत किया जाएगा.

;(समारोह() {
// आरंभ करें
var bLazy = new Blazy ();
}) ();

एक CodePen डेमो उपलब्ध है यहाँ.

विकल्प 3: एक वर्डप्रेस प्लगइन का उपयोग करें

वहाँ विकल्पों में से एक जोड़े हैं जो आपको आलसी लोडिंग दे सकते हैं। सबसे एहम:

ये सभी प्लगइन्स आपके लिए आलसी लोडिंग को स्वचालित रूप से हैंडल करेंगे। प्रत्येक में कुछ अच्छे साइड फीचर्स भी आते हैं.

उदाहरण के लिए, WP Rocket द्वारा Lazy Load, YouTube वीडियो को भी आलसी लोड करता है और उन्हें थंबनेल से प्रतिस्थापित करता है.

ऑप्टिमोल, ThemeIsle परिवार में सबसे नया जोड़ होने के अलावा, आपको रॉक-सॉलिड इमेज ऑप्टिमाइज़ेशन भी देता है (जैसा कि यहाँ परीक्षण किया गया है) उस संबंध में काफी उन्नत सुविधाओं के साथ। उदाहरण के लिए, यह आपको उपयोगकर्ता के स्क्रीन आकार के आधार पर गतिशील आकार देता है.


ऑप्टिमोल द्वारा छवि अनुकूलन और आलसी लोड छवि अनुकूलन & ऑप्टिमोल द्वारा आलसी लोड

लेखक (ओं): Optimole

वर्तमान संस्करण: 2.3.1

अंतिम अपडेट: 21 अप्रैल, 2020

optimole-wp.zip


96% रेटिंग


50,000 + इंस्टॉल


WP 4.7 + की आवश्यकता है

अधिकांश प्लगइन्स के साथ, आलसी लोडिंग प्राप्त करने के लिए, बस प्लगइन स्थापित करें और प्लगइन के नियंत्रण कक्ष में सुविधा को सक्षम करें:

आलसी लोड हो रहा है छवियों के लिए ऑप्टिमोल

निष्कर्ष

इस पोस्ट ने आलसी लोडिंग छवियों की आवश्यकता और लाभों का पता लगाया। हमने वर्डप्रेस वेबसाइट पर आलसी लोडिंग को लागू करने के तीन अलग-अलग तरीकों पर भी चर्चा की:

  • यदि आपके पास जावास्क्रिप्ट में मध्यवर्ती दक्षता है, तो आप स्क्रैच से आलसी लोडिंग को लागू कर सकते हैं
  • यदि आप कुछ प्रोग्रामिंग जानते हैं, लेकिन कोई प्लगइन्स नहीं चाहते हैं, तो एक हल्का जावास्क्रिप्ट लाइब्रेरी, bLazy एक विकल्प है
  • यदि आप अपनी वेबसाइट पर आलसी लोडिंग छवियों के लिए एक-क्लिक समाधान चाहते हैं, तो आपको ऑप्टिमोल जैसे प्लगइन के लिए जाना चाहिए

आप आलसी लोडिंग के बारे में क्या सोचते हैं? क्या आपने अपनी वेबसाइट के प्रदर्शन को बेहतर बनाने के लिए इसका उपयोग करने की कोशिश की है?

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map