Core Web Vitals Optimization: LCP, FID & CLS for eCommerce Sites

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

मुख्य बातें

• 2.5 सेकंड से कम के सबसे बड़े कंटेंटफुल पेंट (एलसीपी) के लिए सर्वर प्रतिक्रिया समय और महत्वपूर्ण संसाधन लोडिंग दोनों को अनुकूलित करने की आवश्यकता होती है
• 200 एमएस से कम के नेक्स्ट पेंट (आईएनपी) से इंटरेक्शन का अर्थ है लंबे जावास्क्रिप्ट कार्यों को तोड़ना और गैर-महत्वपूर्ण निष्पादन को स्थगित करना
• 0.1 से कम संचयी लेआउट शिफ्ट (सीएलएस) के लिए सभी छवियों, एम्बेड और गतिशील रूप से इंजेक्ट की गई सामग्री पर स्पष्ट आयाम की आवश्यकता होती है
• ईकॉमर्स साइटों को अद्वितीय सीडब्ल्यूवी चुनौतियों का सामना करना पड़ता है: भारी उत्पाद छवियां, तृतीय-पक्ष स्क्रिप्ट (एनालिटिक्स, चैट, विज्ञापन), और गतिशील मूल्य निर्धारण तत्व

---

कोर वेब वाइटल्स को समझना

कोर वेब वाइटल्स तीन उपयोगकर्ता-केंद्रित प्रदर्शन मेट्रिक्स हैं जिनका उपयोग Google रैंकिंग सिग्नल के रूप में करता है। वे लोडिंग गति, अन्तरक्रियाशीलता और दृश्य स्थिरता को मापते हैं - पृष्ठ अनुभव के तीन पहलू जिन्हें उपयोगकर्ता सबसे अधिक नोटिस करते हैं।

नोट: मार्च 2024 में आधिकारिक प्रतिक्रिया मीट्रिक के रूप में FID (फर्स्ट इनपुट डिले) को INP (इंटरेक्शन टू नेक्स्ट पेंट) से बदल दिया गया था। INP केवल पहले वाले को ही नहीं, बल्कि संपूर्ण पृष्ठ जीवनचक्र में सभी इंटरैक्शन को मापता है।

ईकॉमर्स साइटें संघर्ष क्यों करती हैं

ईकॉमर्स साइटों को अद्वितीय प्रदर्शन चुनौतियों का सामना करना पड़ता है जो सामग्री साइटों को नहीं आती:

• भारी उत्पाद छवियां -- उच्च-रिज़ॉल्यूशन वाली उत्पाद तस्वीरें रूपांतरण के लिए महत्वपूर्ण हैं लेकिन लोड होने में धीमी हैं
• तृतीय-पक्ष स्क्रिप्ट--एनालिटिक्स (Google Analytics, मेटा पिक्सेल), चैट विजेट (इंटरकॉम, ज़ेंडेस्क), वैयक्तिकरण इंजन और ए/बी परीक्षण उपकरण सभी मुख्य थ्रेड समय के लिए प्रतिस्पर्धा करते हैं
• गतिशील सामग्री -- मूल्य परिवर्तन, स्टॉक संकेतक, प्रचार बैनर, और वैयक्तिकृत अनुशंसाएँ लेआउट और ब्लॉक रेंडरिंग में बदलाव लाती हैं
• जटिल चेकआउट प्रवाह - भुगतान प्रसंस्करण स्क्रिप्ट, पता सत्यापन, और धोखाधड़ी का पता लगाने से जावास्क्रिप्ट का महत्व बढ़ जाता है

---

सबसे बड़े कंटेंटफुल पेंट (एलसीपी) का अनुकूलन

LCP तब मापता है जब सबसे बड़ा दृश्यमान तत्व रेंडरिंग समाप्त कर देता है। उत्पाद पृष्ठों के लिए, यह आमतौर पर हीरो उत्पाद छवि है। श्रेणी पृष्ठों के लिए, यह पहली उत्पाद कार्ड छवि या प्रचार बैनर हो सकता है।

सर्वर रिस्पांस टाइम (TTFB)

LCP आपके सर्वर प्रतिक्रिया समय से तेज़ नहीं हो सकता। टाइम टू फ़र्स्ट बाइट (TTFB) मापता है कि ब्राउज़र HTML की पहली बाइट के लिए कितनी देर तक प्रतीक्षा करता है। लक्ष्य TTFB 600ms से कम, आदर्श रूप से 200ms से कम।

अनुकूलन तकनीक:

• सर्वर-साइड रेंडरिंग (एसएसआर) - एक खाली शेल भेजने के बजाय सर्वर पर HTML प्रस्तुत करें जिसे पॉप्युलेट करने के लिए जावास्क्रिप्ट की आवश्यकता होती है। रिएक्ट सर्वर कंपोनेंट्स के साथ Next.js ऐप राउटर इसे डिफ़ॉल्ट रूप से प्रदान करता है।
• एज कंप्यूटिंग - वर्सेल एज फ़ंक्शंस या क्लाउडफ्लेयर वर्कर्स जैसे प्लेटफ़ॉर्म का उपयोग करने वाले उपयोगकर्ताओं के नज़दीकी किनारे वाले स्थानों पर सर्वर-साइड रेंडरिंग को तैनात करें
• डेटाबेस अनुकूलन -- उत्पाद पृष्ठों पर धीमी डेटाबेस क्वेरीज़ सीधे टीटीएफबी बढ़ाती हैं। डेटाबेस क्वेरी अनुकूलन पर हमारी मार्गदर्शिका देखें
• कैशिंग -- अज्ञात उपयोगकर्ताओं के लिए कैश रेंडर किए गए पृष्ठ। एक सीडीएन-कैश्ड उत्पाद पृष्ठ मूल से 20 एमएस बनाम 200 एमएस में कार्य करता है। कैशिंग रणनीतियाँ देखें

महत्वपूर्ण संसाधन लोड हो रहा है

HTML आने के बाद, LCP तत्व को प्रस्तुत करने से पहले ब्राउज़र को CSS, फ़ॉन्ट और छवियों को लोड करना होगा।

एलसीपी के लिए छवि अनुकूलन:

• LCP छवि के लिए ब्राउज़र को इसे प्राथमिकता देने के लिए कहने के लिए fetchpriority="high" के साथ <img> का उपयोग करें
• आधुनिक प्रारूपों का उपयोग करें: वेबपी (जेपीईजी से 30% छोटा) या एवीआईएफ (जेपीईजी से 50% छोटा)
• 400px मोबाइल स्क्रीन पर 2000px छवि लोड करने से बचने के लिए srcset और sizes के साथ प्रतिक्रियाशील छवियां प्रस्तुत करें
• दस्तावेज़ <head> में LCP छवि को <link rel="preload" as="image"> के साथ प्रीलोड करें
• एलसीपी छवि को आलस्य से लोड करने से बचें - जब आप इसे तुरंत लोड करना चाहते हैं तो आलस्यपूर्ण लोडिंग इसे विलंबित कर देती है

सीएसएस अनुकूलन:

• रेंडर-ब्लॉकिंग सीएसएस अनुरोधों से बचने के लिए HTML <head> में इनलाइन महत्वपूर्ण सीएसएस
• media="print" के साथ गैर-महत्वपूर्ण सीएसएस (एनिमेशन, नीचे-फोल्ड शैलियाँ) को स्थगित करें और लोड होने पर media="all" पर स्वैप करें
• अप्रयुक्त सीएसएस हटाएं - पर्जसीएसएस जैसे उपकरण मृत नियमों को खत्म करते हैं

फ़ॉन्ट अनुकूलन:

• कस्टम फ़ॉन्ट लोड होने पर तुरंत फ़ॉलबैक फ़ॉन्ट के साथ टेक्स्ट दिखाने के लिए font-display: swap का उपयोग करें
• प्राथमिक फ़ॉन्ट फ़ाइल को <link rel="preload" as="font" crossorigin> के साथ प्रीलोड करें
• सबसेट फ़ॉन्ट में केवल आपके द्वारा उपयोग किए जाने वाले अक्षर शामिल होंगे (पूर्ण यूनिकोड के बजाय लैटिन सबसेट)
• बॉडी टेक्स्ट के लिए सिस्टम फ़ॉन्ट स्टैक पर विचार करें - वे शून्य नेटवर्क अनुरोधों के साथ तुरंत लोड होते हैं

---

अगले पेंट के लिए इंटरेक्शन अनुकूलित करना (आईएनपी)

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

लंबे कार्यों को तोड़ना

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

मुख्य थ्रेड अवरोधन को कम करने की तकनीकें:

• कोड विभाजन -- केवल वर्तमान पृष्ठ के लिए आवश्यक जावास्क्रिप्ट लोड करें। Next.js यह स्वचालित रूप से प्रति रूट करता है, लेकिन एक पृष्ठ के भीतर गतिशील आयात बेहतर नियंत्रण प्रदान करता है
• गैर-महत्वपूर्ण जावास्क्रिप्ट को स्थगित करें - पृष्ठ के इंटरैक्टिव होने से पहले एनालिटिक्स, चैट विजेट और सोशल मीडिया एम्बेड को लोड करने की आवश्यकता नहीं है। defer या async विशेषताओं का उपयोग करें, या उपयोगकर्ता इंटरेक्शन के बाद उन्हें लोड करें
• वेब वर्कर्स - भारी गणना (मूल्य गणना, बड़ी उत्पाद सूचियों को फ़िल्टर करना, खोज अनुक्रमणिका) को एक वेब वर्कर थ्रेड पर ले जाएं जो मुख्य थ्रेड को अवरुद्ध नहीं करता है
• requestIdleCallback - निष्क्रिय अवधि के दौरान कम-प्राथमिकता वाले कार्य (भविष्य के पृष्ठों को प्रीलोड करना, ऑफ-स्क्रीन घटकों को प्री-रेंडर करना) शेड्यूल करें

जलयोजन अनुकूलन

सर्वर-रेंडर किए गए रिएक्ट एप्लिकेशन को "हाइड्रेट" करना होगा - इवेंट श्रोताओं को जोड़ना और क्लाइंट-साइड स्थिति के साथ सर्वर-रेंडर किए गए HTML को समेटना। कई इंटरैक्टिव घटकों वाले बड़े पृष्ठों के लिए, हाइड्रेशन में 500ms या अधिक का समय लग सकता है।

हाइड्रेशन रणनीतियाँ:

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

तृतीय-पक्ष स्क्रिप्ट प्रबंधन

ईकॉमर्स साइटों पर तृतीय-पक्ष स्क्रिप्ट सबसे बड़ी INP अपराधी हैं। एक विशिष्ट शॉपिफाई स्टोर 15-25 तृतीय-पक्ष स्क्रिप्ट लोड करता है जो सामूहिक रूप से 1-3 एमबी जावास्क्रिप्ट जोड़ते हैं और मुख्य थ्रेड समय के लिए प्रतिस्पर्धा करते हैं।

---

संचयी लेआउट शिफ्ट (सीएलएस) को रोकना

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

सामान्य सीएलएस कारण और समाधान

बिना आयाम वाली छवियाँ: प्रत्येक <img> तत्व में स्पष्ट width और height विशेषताएँ या CSS aspect-ratio होनी चाहिए। आयामों के बिना, ब्राउज़र छवि के लिए शून्य स्थान आवंटित करता है, फिर छवि लोड होने पर सामग्री को स्थानांतरित करता है और स्थान लेता है।

गतिशील रूप से इंजेक्ट की गई सामग्री: प्रमोशनल बैनर, कुकी सहमति बार, और अधिसूचना टोस्ट जो मौजूदा सामग्री से ऊपर इंजेक्ट होते हैं, बदलाव का कारण बनते हैं। इन तत्वों के लिए स्थान आरक्षित करें या उन्हें इस तरह से इंजेक्ट करें जो सामग्री को नीचे न धकेले (निश्चित स्थिति, ओवरले)।

वेब फ़ॉन्ट पाठ पुनर्प्रवाह का कारण बन रहे हैं: जब कोई कस्टम फ़ॉन्ट लोड होता है और फ़ॉलबैक फ़ॉन्ट को प्रतिस्थापित करता है, तो विभिन्न वर्ण चौड़ाई के कारण पाठ पुनः प्रवाहित हो सकता है। सावधानीपूर्वक मिलान किए गए फ़ॉलबैक फ़ॉन्ट मेट्रिक्स के साथ font-display: optional (यदि आप कभी-कभी फ़ॉलबैक डिस्प्ले स्वीकार करते हैं) या font-display: swap का उपयोग करें।

** देर से लोड होने वाले विज्ञापन और एम्बेड:** CSS min-height या aspect-ratio का उपयोग करके विज्ञापन स्लॉट और एम्बेड के लिए स्थान आरक्षित करें। भले ही विज्ञापन सर्वर धीमा हो, लेआउट स्थिर रहता है।

पृष्ठ प्रकार के अनुसार सीएलएस बजट

---

सीडब्ल्यूवी को मापना और निगरानी करना

लैब उपकरण (सिंथेटिक परीक्षण)

• लाइटहाउस -- क्रोम डेवटूल्स में एकीकृत, अनुकूलन सुझावों के साथ सीडब्ल्यूवी स्कोर प्रदान करता है
• वेबपेजटेस्ट-फिल्मस्ट्रिप दृश्य के साथ विस्तृत झरना विश्लेषण, जो दिखाता है कि प्रत्येक तत्व वास्तव में कब प्रस्तुत होता है
• पेजस्पीड इनसाइट्स - एक संपूर्ण चित्र के लिए प्रयोगशाला डेटा (लाइटहाउस) को फ़ील्ड डेटा (CrUX) के साथ जोड़ता है

फ़ील्ड डेटा (वास्तविक उपयोगकर्ता निगरानी)

प्रयोगशाला उपकरण नियंत्रित परिस्थितियों में परीक्षण करते हैं। फ़ील्ड डेटा विभिन्न उपकरणों, नेटवर्क और स्थितियों में वास्तविक उपयोगकर्ता अनुभव को कैप्चर करता है।

• क्रोम उपयोगकर्ता अनुभव रिपोर्ट (CrUX) -- वास्तविक Chrome उपयोगकर्ताओं से एकत्रित CWV डेटा, पेजस्पीड इनसाइट्स और BigQuery में उपलब्ध है
• वेब-विटल्स लाइब्रेरी -- जावास्क्रिप्ट लाइब्रेरी जो उत्पादन में सीडब्ल्यूवी को मापती है और आपके एनालिटिक्स को रिपोर्ट करती है
• आरयूएम प्रदाता - डेटाडॉग आरयूएम, स्पीडकर्व और सेंट्री परफॉर्मेंस बिजनेस मेट्रिक्स के साथ सीडब्ल्यूवी को कैप्चर करते हैं

सतत निगरानी

स्वचालित सीडब्ल्यूवी मॉनिटरिंग स्थापित करें जो स्कोर घटने पर अलर्ट करती है:

1. तैनाती से पहले प्रतिगमन को पकड़ने के लिए अपने सीआई/सीडी पाइपलाइन में लाइटहाउस सीआई चलाएं
2. अपने सबसे महत्वपूर्ण पृष्ठों के रुझानों के लिए मासिक रूप से CrUX डेटा की निगरानी करें
3. सीडब्ल्यूवी स्कोर को बिजनेस मेट्रिक्स (रूपांतरण दर, बाउंस दर, प्रति सत्र राजस्व) के साथ सहसंबंधित करने के लिए आरयूएम का उपयोग करें।
4. व्यावसायिक प्रभाव को सीधे मापने के लिए ए/बी परीक्षण प्रदर्शन में परिवर्तन होता है

व्यापक निगरानी सेटअप के लिए, हमारी अवलोकन योग्यता और एपीएम गाइड देखें।

---

ईकॉमर्स-विशिष्ट अनुकूलन चेकलिस्ट

अपनी ईकॉमर्स साइट पर सीडब्ल्यूवी को व्यवस्थित रूप से बेहतर बनाने के लिए इस चेकलिस्ट का उपयोग करें:

---

अक्सर पूछे जाने वाले प्रश्न

क्या कोर वेब वाइटल्स वास्तव में Google रैंकिंग को प्रभावित करते हैं?

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

मैं सर्वर कॉन्फ़िगरेशन तक पहुंच के बिना Shopify पर CWV कैसे ठीक करूं?

आप जो नियंत्रित कर सकते हैं उस पर ध्यान केंद्रित करें: छवियों को अनुकूलित करें (Shopify की अंतर्निहित छवि अनुकूलन या Crush.pics जैसे ऐप्स का उपयोग करें), इंस्टॉल किए गए ऐप्स को छोटा करें (प्रत्येक जावास्क्रिप्ट जोड़ता है), हल्के थीम का उपयोग करें, आलसी लोडिंग के साथ तृतीय-पक्ष स्क्रिप्ट को स्थगित करें, और सभी छवियों में स्पष्ट आयाम जोड़ें। उन्नत अनुकूलन के लिए, हमारी Shopify स्पीड ऑप्टिमाइज़ेशन सेवाएँ देखें।

क्या मुझे एलसीपी, आईएनपी, या सीएलएस को प्राथमिकता देनी चाहिए?

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

CWV सुधारों को SEO को प्रभावित करने में कितना समय लगता है?

रैंकिंग सिग्नल के लिए Google 28-दिवसीय रोलिंग CrUX डेटा का उपयोग करता है। सुधारों को लागू करने के बाद, CrUX डेटा में परिवर्तन दिखाई देने में 4-6 सप्ताह और संभावित रूप से रैंकिंग परिवर्तन दिखाई देने में अधिक समय लग सकता है। प्रगति को ट्रैक करने के लिए सर्च कंसोल में CrUX डेटा की निगरानी करें।

प्रतिस्पर्धी ईकॉमर्स के लिए मुझे कौन से सीडब्ल्यूवी स्कोर का लक्ष्य रखना चाहिए?

"अच्छी" श्रेणी में सभी तीन मेट्रिक्स को लक्षित करें: 2.5 सेकंड से कम एलसीपी, 200 एमएस से कम आईएनपी, 0.1 से कम सीएलएस। प्रतिस्पर्धी श्रेणियों के लिए, शीर्ष स्तरीय प्रदर्शन का लक्ष्य रखें: 1.5 सेकंड से कम एलसीपी, 100 एमएस से कम आईएनपी, 0.05 से कम सीएलएस। ये स्कोर आपको 80-90% ईकॉमर्स साइटों से आगे रखते हैं।

---

आगे क्या है

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

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

ECOSIRE ईकॉमर्स प्लेटफॉर्म के लिए Shopify स्पीड ऑप्टिमाइज़ेशन और कोर वेब वाइटल्स ऑडिट प्रदान करता है। व्यापक सीडब्ल्यूवी विश्लेषण के लिए हमारी प्रदर्शन टीम से संपर्क करें।

---

ECOSIRE द्वारा प्रकाशित - Odoo ERP, Shopify eCommerce, और OpenClaw AI में AI-संचालित समाधानों के साथ व्यवसायों को बढ़ाने में मदद करना।