लेज़ी लोड वाली ऑफ़स्क्रीन इमेज

केटी हेम्पेनियस

इस कोडलैब को फ़ॉलो करने के लिए, दूसरे टैब में इस ग्लिच को खोलें.

लेज़ी लोडिंग एक ऐसा तरीका है जिसमें संसाधनों को पहले से लोड करने के बजाय, उन्हें ज़रूरत के मुताबिक लोड होने तक इंतज़ार किया जाता है. यह शुरुआत में लोड होने और पार्स होने वाले संसाधनों की संख्या को कम करके, परफ़ॉर्मेंस को बेहतर बना सकता है.

इस तकनीक का इस्तेमाल करने के लिए, ऐसी इमेज सबसे सही होती हैं जो शुरुआती पेजलोड के दौरान ऑफ़स्क्रीन होती हैं. सबसे अच्छी बात यह है कि लेज़ीसाइज़, इसे लागू करने की एक आसान रणनीति बनाता है.

पेज पर लेज़ीसाइज़ स्क्रिप्ट जोड़ें

• प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

lazysizes.min.js को पहले ही डाउनलोड करके इस Glitch में जोड़ा जा चुका है. इसे पेज में शामिल करने के लिए:

• यहां दिया गया <script> टैग, index.html में जोड़ें:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

ध्यान दें: lazysizes.min.js फ़ाइल को इस प्रोजेक्ट में पहले ही जोड़ा जा चुका है. इसलिए, इसे अलग से जोड़ने की ज़रूरत नहीं है. आपने अभी जो स्क्रिप्ट जोड़ी है, वह इस स्क्रिप्ट का इस्तेमाल कर सकती है.

लेज़ीसाइज़, उपयोगकर्ता के पेज स्क्रोल करने पर बेहतर तरीके से इमेज लोड करेगा. साथ ही, उन इमेज को प्राथमिकता देगा जो उपयोगकर्ता को जल्द ही दिखेगी.

इमेज को लेज़ी लोड के लिए दिखाएं

• lazyload क्लास को उन इमेज में जोड़ें जिन्हें लेज़ी लोड किया जाना चाहिए. इसके अलावा, src एट्रिब्यूट को बदलकर data-src करें.

उदाहरण के लिए, flower3.png के लिए किए गए बदलाव इस तरह दिखेंगे:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

उदाहरण के लिए, flower3.png, flower4.jpg, और flower5.jpg को लेज़ी लोड करने की कोशिश करें.

ध्यान दें: आपको लग रहा होगा कि src एट्रिब्यूट को data-src में बदलना क्यों ज़रूरी है. अगर इस एट्रिब्यूट को नहीं बदला जाता है, तो सभी इमेज लेज़ी लोड होने के बजाय तुरंत लोड हो जाएंगी. data-src ऐसा एट्रिब्यूट नहीं है जिसे ब्राउज़र पहचानता है. इसलिए, जब उसे इस एट्रिब्यूट वाला कोई इमेज टैग मिलता है, तो यह इमेज लोड नहीं करता. इस मामले में, यह अच्छी बात है, क्योंकि इससे लेज़ीसाइज़ स्क्रिप्ट को यह तय करने की अनुमति मिलती है कि ब्राउज़र के बजाय इमेज को कब लोड किया जाए.

उदाहरण देखें

हो गया! इन बदलावों को देखने के लिए, यह तरीका अपनाएं:

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.

• कंसोल खोलें और हाल ही में जोड़ी गई इमेज ढूंढें. पेज पर नीचे की ओर स्क्रोल करने पर, उनकी क्लास lazyload से lazyloaded में बदल जानी चाहिए.

• नेटवर्क पैनल देखें और नीचे की ओर स्क्रोल करने पर, इमेज फ़ाइलें अलग-अलग लोड होती हैं.

Lighthouse का इस्तेमाल करके पुष्टि करें

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

1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
2. DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
3. लाइटहाउस टैब पर क्लिक करें.
4. पक्का करें कि कैटगरी सूची में परफ़ॉर्मेंस चेकबॉक्स को चुना गया हो.
5. रिपोर्ट जनरेट करें बटन पर क्लिक करें.
6. पुष्टि करें कि ऑफ़स्क्रीन इमेज को रोकें ऑडिट पास हो गया है.

हो गया! आपने अपने पेज पर इमेज को लेज़ी लोड करने के लिए लेज़ीसाइज़ का इस्तेमाल किया है.