👨🏼‍🚀 👩🏾‍🤝‍👨🏻 👼🏼 IntersectionObserver का उपयोग करके आलसी लोडिंग छवियां 👩‍🔧 🧛🏼 👨🏿‍🤝‍👨🏼

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

सामान्य प्रावधान

उदाहरण के लिए, वॉलमार्ट में गृह विभाग के शुरुआती पृष्ठ पर विचार करें।

कई छवियों वाला एक पृष्ठ

इस पृष्ठ को बनाने के लिए कितने चित्र लोड किए गए हैं, इसकी जानकारी यहां दी गई है:

पेज बनाने के दौरान लोड की गई छवियाँ

जैसा कि आप देख सकते हैं, 137 चित्र हैं! इसका मतलब है कि पृष्ठ को प्रदर्शित करने और नेटवर्क पर प्रसारित करने के लिए आवश्यक 80% से अधिक डेटा को ग्राफिक फ़ाइलों के रूप में प्रस्तुत किया गया है।

अब हम पृष्ठ लोड होने पर निष्पादित नेटवर्क अनुरोधों का विश्लेषण करते हैं:

पृष्ठ निर्माण के दौरान निष्पादित नेटवर्क अनुरोध

इस स्थिति में, प्रोजेक्ट कोड के अलग होने से उत्पन्न फ़ाइलों को बाद में डाउनलोड किया जा सकता है। यह इस तथ्य के कारण है कि आपको पहले मुख्य बंडल cp_ny.bundle लोड करने की आवश्यकता है। यह बंडल बहुत तेजी से डाउनलोड किया जा सकता है यदि यह बैंडविड्थ के लिए एक-दूसरे के साथ प्रतिस्पर्धा करने वाली 18 छवियों से परेशान नहीं हुआ है।

इसे कैसे ठीक करें? वास्तव में, वास्तव में "ठीक" करने के लिए यह काम नहीं करेगा, लेकिन आप छवि लोडिंग को अनुकूलित करने के लिए बहुत सारी चीजें कर सकते हैं। वेब पृष्ठों पर उपयोग की जाने वाली छवियों के अनुकूलन के लिए कई दृष्टिकोण हैं। इनमें विभिन्न ग्राफिक फ़ाइल स्वरूपों का उपयोग, डेटा संपीड़न, ब्लर एनिमेशन तकनीक का उपयोग, सीडीएन का उपयोग शामिल हैं। मैं छवियों के तथाकथित "आलसी लोडिंग" (आलसी लोडिंग) पर ध्यान देना चाहूंगा। विशेष रूप से, हम इस तकनीक को रिएक्ट साइटों पर लागू करने के तरीके के बारे में बात करेंगे, लेकिन चूंकि यह जावास्क्रिप्ट तंत्र पर आधारित है, इसलिए इसे किसी भी वेब परियोजना में एकीकृत किया जा सकता है।

पायलट प्रोजेक्ट

आइए शुरू करते हैं ऐसे ही बेहद आसान Image रिएक्ट घटक से:

 class Image extends PureComponent { render() {   const { src } = this.props;   return <img align="center" src={src} />; } }

यह एक संपत्ति, एक URL के रूप में लेता है, और इसका उपयोग img HTML तत्व को प्रस्तुत करने के लिए करता है। यहाँ प्रासंगिक JSFiddle कोड है। निम्न छवि इस घटक वाले पृष्ठ को दिखाती है। कृपया ध्यान दें कि उसके द्वारा प्रदर्शित छवि को देखने के लिए, आपको पृष्ठ की सामग्री को स्क्रॉल करना होगा।

वह घटक जिसका चित्र प्रदर्शित होता है

इस घटक में छवियों के आलसी लोडिंग की तकनीक को लागू करने के लिए, आपको निम्नलिखित तीन चरण करने होंगे:

डाउनलोड करने के तुरंत बाद छवि रेंडर न करें।
पृष्ठ सामग्री के देखने के क्षेत्र में एक छवि की उपस्थिति का पता लगाने के लिए उपकरण सेट करें।
यह पता लगाने के बाद कि यह देखने के क्षेत्र में गिर गया, छवि प्रदर्शित करें।

आइए इन चरणों पर एक नज़र डालें।

चरण 1

इस चरण पर, लोड करने के तुरंत बाद की छवि प्रदर्शित नहीं होती है।

 render() { return <img />; }

चरण 2

यहां हम उन तंत्रों को कॉन्फ़िगर करते हैं जो हमें उस क्षण का पता लगाने की अनुमति देते हैं जो छवि को देखने के क्षेत्र में प्रवेश करता है।

 componentDidMount() { this.observer = new IntersectionObserver(() => {   //        }, {   root: document.querySelector(".container") }); this.observer.observe(this.element); } .... render() { return <img ref={el => this.element = el} />; }

आइए इस कोड का विश्लेषण करें। यहाँ क्या किया गया है:

रेफरी तत्व को img तत्व में जोड़ा गया है। यह आपको बाद में घटक को फिर से प्रस्तुत किए बिना src में छवि लिंक को अपडेट करने की अनुमति देता है।
IntersectionObserver एक नया उदाहरण IntersectionObserver (हम इस बारे में नीचे बात करेंगे)।
IntersectionObserver ऑब्जेक्ट को observe(this.element) इस। निर्माण observe(this.element) का उपयोग करके छवि को देखने के लिए प्रेरित किया जाता है।

IntersectionObserver क्या है? यह देखते हुए कि "चौराहे" शब्द का अनुवाद "चौराहे" के रूप में किया गया है और "पर्यवेक्षक" "पर्यवेक्षक" है, कोई पहले ही इस वस्तु की भूमिका का अनुमान लगा सकता है। यदि आप MDN पर इसके बारे में जानकारी खोजते हैं , तो आप यह पता लगा सकते हैं कि Intersection Observer API वेब अनुप्रयोगों को अपने माता-पिता या व्यूपोर्ट दस्तावेज़ के दायरे के साथ किसी तत्व के चौराहे में होने वाले परिवर्तनों की निगरानी करने की अनुमति देता है।

पहली नज़र में, एपीआई की यह विशेषता विशेष रूप से समझ में नहीं आ सकती है, लेकिन, वास्तव में, यह संरचना में बहुत सरल है। IntersectionObserver उदाहरण कई मापदंडों को पारित किया है। विशेष रूप से, हमने root पैरामीटर का उपयोग किया, जो हमें रूट डोम तत्व को सेट करने की अनुमति देता है, जिसे हम एक कंटेनर के रूप में मानते हैं, जिस तत्व की सीमा के साथ हमें पता होना चाहिए। डिफ़ॉल्ट रूप से, यह वह क्षेत्र है जिसमें पृष्ठ का दृश्य टुकड़ा (व्यूपोर्ट) स्थित है, लेकिन मैंने स्पष्ट रूप से इसे JSFiddle के iframe तत्व में स्थित कंटेनर का उपयोग करने के लिए सेट किया है। ऐसा करने के लिए, बाद में, एक संभावना पर विचार करें जो iframe तत्वों का उपयोग करने के लिए डिज़ाइन नहीं किया गया है।

कारण यह है कि जब एक आइटम दिखाई देता है यह निर्धारित करने के लिए IntersectionObserver का उपयोग करना अधिक पारंपरिक तरीकों से अधिक लोकप्रिय है, जैसे कि onScroll और getBoundingClientRect() एक साथ उपयोग करना, क्योंकि IntersectionObserver तंत्र मुख्य धागे के बाहर चलता है। हालाँकि, IntersectionObserver बाद कॉलबैक कॉल का पता लगाता है कि कंटेनर के साथ तत्व के चौराहे को मुख्य धागे में स्वाभाविक रूप से निष्पादित किया जाता है, इसलिए इसका कोड बहुत भारी नहीं होना चाहिए।

चरण 3

अब हमें उस कॉलबैक को कॉन्फ़िगर करने की आवश्यकता है जिसे root कंटेनर (हमारे मामले में, हमारे मामले में यह एक div तत्व है .container ) के साथ target तत्व ( this.element हमारे मामले में) को चौराहे का पता लगाता है।

 .... this.observer = new IntersectionObserver( entries => {   entries.forEach(entry => {     const { isIntersecting } = entry;     if (isIntersecting) {       this.element.src = this.props.src;       this.observer = this.observer.disconnect();     }   }); }, {   root: document.querySelector(".container") } ); ....

जब चौराहे का पता लगाया जाता है, तो entries की सरणी entries स्थानांतरित हो जाती है, जो सभी लक्षित तत्वों की स्थिति के स्नैपशॉट का एक सेट जैसा दिखता है, जिसके लिए निर्दिष्ट सीमा के प्रतिच्छेदन का पता लगाया जाता है। isIntersecting संपत्ति isIntersecting की दिशा को इंगित करती है। यदि निगरानी की जा रही वस्तु जड़ तत्व के बाहर है, तो यह true । यदि कोई तत्व मूल तत्व को छोड़ता है, तो यह false ।

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

चरण 4 (गुप्त)

अब, हमारे काम के चौथे, गुप्त चरण में, आप परिणाम की प्रशंसा कर सकते हैं और सफलता का आनंद ले सकते हैं। यहाँ वह कोड है जो हमारे बारे में अभी बात करता है।

आलसी छवि लोड करने की तकनीक को लागू करने का परिणाम है

हालाँकि, यदि आप हमारे पास मौजूद चीज़ों पर ध्यान देते हैं, तो यह पता चलता है कि यहाँ आपको कुछ अच्छा नहीं मिल रहा है। यह देखने के लिए, मैंने नेटवर्क कनेक्शन की गति को धीमा करते हुए, पृष्ठ को जल्दी से स्क्रॉल किया।

पृष्ठ व्यवहार जब यह जल्दी से स्क्रॉल करता है और नेटवर्क कनेक्शन की गति को धीमा कर देता है

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

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

 rootMargin: "0px 0px 200px 0px"

rootMargin प्रॉपर्टी में, एक लाइन लिखें जिसकी संरचना तत्वों के इंडेंटेशन को कॉन्फ़िगर करने के लिए इस्तेमाल किए गए CSS नियमों का अनुपालन करती है। हमारे मामले में, हम इस प्रणाली को सूचित करते हैं कि निचली सीमा एक कंटेनर के साथ एक तत्व के चौराहे का पता लगाने के लिए इस्तेमाल की जाती है जिसे 200 पिक्सेल तक बढ़ाना होगा। इसका मतलब यह है कि जब तत्व उस क्षेत्र में गिरता है, जो रूट तत्व की निचली सीमा से 200 पिक्सेल नीचे होता है, तो इसी कॉलबैक को कहा जाएगा (डिफ़ॉल्ट मान 0 है)।

यहाँ कोड है जो इस तकनीक को लागू करता है।

आलसी लोडिंग छवियों की तकनीक में सुधार

नतीजतन, यह पता चला है कि जब हम पृष्ठ को केवल सूची के 4 तत्व तक स्क्रॉल करते हैं, तो छवि को उस क्षेत्र में लोड किया जाता है जो पृष्ठ के दृश्य क्षेत्र से 200 पिक्सेल नीचे है।
अब, यह प्रतीत होता है, जो आवश्यक है वह किया जाता है। लेकिन ऐसा है नहीं।

छवि ऊंचाई की समस्या

यदि आपने उपरोक्त GIF-चित्र का ध्यानपूर्वक अध्ययन किया है, तो आप ध्यान दे सकते हैं कि स्क्रॉल बार छवि लोड करने के बाद "जंप" करता है। सौभाग्य से, इस समस्या को संभालना आसान है। इसका कारण यह है कि छवि को प्रदर्शित करने वाले तत्व की शुरुआत में 0 की ऊंचाई होती है, जो छवि को लोड करने के बाद, 300 पिक्सेल से बाहर हो जाती है। इसलिए, समस्या को ठीक करने के लिए, छवि को विशेषता height={300} जोड़कर तत्व को एक निश्चित ऊंचाई पर सेट करना पर्याप्त है।

अनुकूलन परिणामों के बारे में

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

अनुकूलन से पहले उत्पन्न लाइटहाउस रिपोर्ट

अनुकूलन के बाद उत्पन्न लाइटहाउस रिपोर्ट

परिणाम

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

प्रिय पाठकों! आप छवियों और उनकी लोडिंग को कैसे अनुकूलित करते हैं?

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