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

वेबसाइट की गति इन दिनों अधिक महत्वपूर्ण हो गई है क्योंकि अध्ययनों से पता चलता है कि 70% उपभोक्ताओं का कहना है कि पृष्ठ गति उनके ऑनलाइन खरीदारी निर्णयों को प्रभावित करती है। लेकिन उपभोक्ता अनुभव से परे जाकर, Google ने हाल ही में अपनी कोर वेब विटल्स (CWV) रिपोर्ट को अपडेट किया है और पृष्ठ प्रदर्शन के बारे में सबसे महत्वपूर्ण मेट्रिक्स पर मार्गदर्शन प्रदान किया है। इसका मतलब यह है कि उपयोगकर्ता अनुभव और पृष्ठ प्रदर्शन की गुणवत्ता अब इसके खोज एल्गोरिदम की बात करते समय अधिक से अधिक माना जाता है।

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

उन तीन तकनीकों के अलावा, आप अपने PageSpeed Insights विश्लेषण में सुधार के अवसरों में से एक के रूप में Defer Offscreen Images, जिसे आलसी लोडिंग भी कहते हैं, देखेंगे। ब्लरहैश जैसे प्लेसहोल्डर्स का उपयोग करना भी कथित लोड समय को बेहतर बनाने और बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए बढ़िया विकल्प हैं, जब कोई कनेक्शन या साइट छवियों को लोड करने में धीमी होती है।

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

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

आलसी लोडिंग वह तकनीक है जो ऑफ़स्क्रीन छवियों को तब तक लोड होने से रोकती है जब तक विज़िटर स्क्रॉल नहीं करता है और छवियां व्यूपोर्ट में प्रवेश करती हैं। यह किसी भी समय कम छवियों को लोड करने की अनुमति देता है और प्रत्येक छवि के लिए लोड समय को गति देता है, जो सबसे बड़े कंटेंटफुल पेंट को बेहतर बना सकता है।

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

आलसी लोडिंग कैसे लागू करें

आप आलसी लोडिंग को कैसे कार्यान्वित करते हैं यह आपके कोड बेस और आपके द्वारा समर्थित ब्राउज़रों पर निर्भर करता है। लोडिंग = "आलसी" के अलावा, क्रोम-समर्थित HTML विशेषता, डेवलपर्स जावास्क्रिप्ट और / या का उपयोग कर सकते हैं चौराहा पर्यवेक्षक एपीआई अनुरोध। निम्नलिखित चार्ट से caniuse.com दिखाता है कि कौन से ब्राउज़र HTML आलसी लोडिंग विशेषता का समर्थन करते हैं:

हालाँकि, यह देखते हुए कि ब्राउज़र कितनी तेजी से बदल रहे हैं और उनकी अनूठी क्षमताएं हैं, डेवलपर्स तेजी से एक सर्वोत्तम अभ्यास के रूप में lazysizes.js जावास्क्रिप्ट का उपयोग करने पर विचार कर रहे हैं। निम्नलिखित वीडियो में, कैंटिलीवर में हमारे सहयोगी लोडिंग = "आलसी" और आलसी आकार.जेएस कार्यान्वयन का प्रदर्शन और तुलना करते हैं।

सर्वोत्तम अभ्यास: lazysizes.js + imgix.js

imgix.js के साथ मिलकर lazysizes.js का उपयोग करना imgix इमेज ऑप्टिमाइज़ेशन और लेज़ी लोडिंग के लाभों को संयोजित करने का एक शानदार तरीका है। यहां एक उदाहरण दिया गया है कि इसे मेटा प्रॉपर्टी के रूप में कैसे किया जाता है:

<सिर>

<मेटा प्रॉपर्टी = "ix: srcAttribute" सामग्री = "डेटा-src">

<मेटा संपत्ति = "ix: srcsetAttribute" सामग्री = "डेटा-srcset">

<मेटा संपत्ति = "ix: आकार एट्रिब्यूट" सामग्री = "डेटा-आकार">

</ सिर>

और यहाँ एक उदाहरण है कि यह कैसे जावास्क्रिप्ट में किया जाता है:

imgix.config.srcAttribute = 'डेटा-src';

imgix.config.srcsetAttribute = 'डेटा-srcset';

imgix.config.sizesAttribute = 'डेटा-आकार';

लेज़ी लोडिंग वाले प्लेसहोल्डर्स का उपयोग करें

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

एक बार जब आप अपनी छवि पर ब्लरहैश कोड लागू कर देते हैं, तो परिणामी प्लेसहोल्डर इस तरह दिखाई देगा:

अपने प्लेसहोल्डर के रूप में ब्लरहैश का उपयोग करना

ब्लरहैश एक एल्गोरिदम है जो आपको इमेज प्लेसहोल्डर का कॉम्पैक्ट संस्करण बनाने देता है। एल्गोरिथ्म वर्णों की एक स्ट्रिंग बनाता है जो छवि की गुणवत्ता द्वारा निर्धारित वर्णों की मात्रा के साथ छवि के धुंधले प्रतिनिधित्व को एन्कोड करता है। स्ट्रिंग इतनी छोटी है कि आप इसे सीधे अपने पेज के मार्कअप में सर्व कर सकते हैं और फिर स्ट्रिंग को धुंधली इमेज में डिकोड किया जा सकता है—बिना किसी इमेज फ़ाइल को लाने और डाउनलोड किए।

ब्लरहैश का एक प्रमुख लाभ यह है कि आप बड़ी छवि फ़ाइलों को डेटा की एक छोटी मात्रा में परिवर्तित कर सकते हैं ताकि मूल फ़ाइल के लोड होने के दौरान छवि का धुंधला प्रतिनिधित्व दिखाई दे। वोल्ट में एक इंजीनियर ब्लरहैश का विचार आया धीमी इंटरनेट कनेक्शन पर छवियों को कैसे लोड किया जाएगा इसके लिए एक बेहतर समाधान खोजने का प्रयास करते समय।

ब्लरहैश फ़ीचर का उपयोग कैसे करें

धुंधली इमेज बनाने के लिए, बस किसी भी इमेज में fm=blurhash जोड़ें और BlurHash स्ट्रिंग प्राप्त करें। एक बार आपके पास ब्लरहैश स्ट्रिंग हो जाने के बाद, आप इसे ब्लरहैश घटक में उपयोग कर सकते हैं। ब्लरहैश घटक हैश को एक ऐसी छवि में डिकोड करने के लिए जिम्मेदार है जिसे प्रदर्शित किया जा सकता है।

इस विशेष उदाहरण में, रिएक्ट ब्लरहैश घटक अंतिम मार्कअप में एक कैनवास तत्व उत्पन्न करता है। नोट: किस लाइब्रेरी या फ्रेमवर्क डिकोडर का उपयोग किया जाता है, इसके आधार पर उत्पन्न मार्कअप थोड़ा भिन्न हो सकता है।

आयात './App.css';

"रिएक्ट-इमगिक्स" से इम्गिक्स आयात करें;

"रिएक्ट-ब्लरश" से इम्पोर्ट {ब्लरहाश};

फ़ंक्शन ऐप () {

वापसी (

<div className = "ऐप">

<सेक्शन क्लासनाम = "ऐप-हेडर">

<धुंधला

हैश="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"

चौड़ाई ={600}

ऊँचाई = {400}

/>

<इमगिक्स

src="https://assets.imgix.net/example-images/puffins.jpg"

चौड़ाई ={600}

ऊँचाई = {400}

/>

</अनुभाग>

</div>

);

}

एक बार जब आप अपनी छवि पर ब्लरहैश कोड लागू कर देते हैं, तो परिणामी प्लेसहोल्डर इस तरह दिखाई देगा:

बिल्ड समय पर अपने मार्कअप के साथ ब्लरहैश स्ट्रिंग शामिल करें ताकि यह सुनिश्चित हो सके कि उपयोगकर्ताओं को छवि का धुंधला संस्करण तुरंत दिखाई दे।

टेकअवे

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