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

Katie Hempenius

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

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

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

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

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

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

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

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

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

• उन इमेज में 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 की लेज़ी लोडिंग देखें.

उदाहरण देखें

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

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

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

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

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

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

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

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