Kapsule Orbit Web Vitals

The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…

Orbit Web Vitals टैब आपके प्रोजेक्ट के वास्तविक विज़िटर्स से एकत्र किए गए Core Web Vitals की रिपोर्ट देता है, सिंथेटिक टेस्ट से नहीं, इसलिए आप जो देखते हैं वह वास्तव में लोग अपने स्वयं के डिवाइस और कनेक्शन पर अनुभव कर रहे हैं।

Web Vitals कहां है

Orbit खोलें, प्रोजेक्ट पर क्लिक करें, और प्रोजेक्ट टैब स्ट्रिप में Observability ग्रुप के तहत Web Vitals चुनें। पेज का शीर्षक Web Vitals है और यह अपने स्वयं के हेडलाइन नंबर को समझाता है: p75, Page Experience के लिए उपयोग किया जाने वाला स्कोर है।

जब तक आप अपनी साइट पर कलेक्टर नहीं जोड़ते, पेज के पास दिखाने के लिए कुछ नहीं है, इसलिए सेटअप कार्ड से शुरू करें जो नीचे है।

कलेक्टर जोड़ना

सेटअप कार्ड आपको अपनी साइट के <head> में जोड़ने के लिए एक लाइन स्क्रिप्ट टैग देता है:

<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>

सटीक लाइन, आपके प्रोजेक्ट के स्लग के साथ पहले से भरी हुई, पेज पर है। इसे वहां से कॉपी करें, न कि इसे टाइप करें।

स्क्रिप्ट पांच मेट्रिक्स एकत्र करती है क्योंकि विज़िटर्स प्रत्येक पेज को छोड़ते हैं, और उन्हें एक एकल बैच में रिपोर्ट करती है। कोई व्यक्तिगत रूप से पहचान योग्य जानकारी कैप्चर नहीं की जाती है और कोई कुकीज़ सेट नहीं की जाती हैं, इसलिए यह अपने आप में कोई सहमति आवश्यकता नहीं जोड़ता है।

पहले वास्तविक पेज व्यू के लगभग तीस सेकंड के भीतर डेटा दिखाई देने लगता है। यदि उसके बाद कुछ नहीं दिखता है, तो स्क्रिप्ट लोड नहीं हो रही है: लाइव साइट पर अपने ब्राउज़र के नेटवर्क टैब की जांच करें।

Settings के तहत Web Analytics कार्ड में समान कलेक्टर की दूसरी प्रति दी गई है, जो पैनल डोमेन से लोड होती है और समापन </body> टैग से पहले जाती है। दोनों में से कोई भी काम करता है और दोनों एक ही डेटा को फीड करते हैं। एक का उपयोग करें, दोनों का नहीं, अन्यथा प्रत्येक पेज व्यू को दो बार गिना जाता है।

पांच मेट्रिक्स

मेट्रिक	यह क्या मापता है
LCP	Largest Contentful Paint: मुख्य सामग्री दिखाई देने तक कितना समय लगता है
INP	Interaction to Next Paint: पेज इनपुट पर कितनी जल्दी प्रतिक्रिया देता है
CLS	Cumulative Layout Shift: लोडिंग के दौरान लेआउट कितना कूदता है
FCP	First Contentful Paint: कुछ भी खींचे जाने तक कितना समय लगता है
TTFB	Time to First Byte: सर्वर को प्रतिक्रिया देना शुरू करने में कितना समय लगा

पहली तीन Core Web Vitals हैं। FCP और TTFB डायग्नोस्टिक हैं: वे आपको बताते हैं कि क्या खराब LCP एक धीमा सर्वर है या एक धीमा पेज है।

p75 को पढ़ना

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

वह चुनाव महत्वपूर्ण है। एक औसत अच्छे कनेक्शन पर कई तेज़ विज़िट द्वारा प्रभावित होता है और पूंछ को छुपाता है। p75 नहीं: यदि आपका p75 LCP चार सेकंड है, तो चार में से एक विज़िटर उससे अधिक समय प्रतीक्षा कर रहा है।

प्रत्येक मेट्रिक कार्ड Good, Needs improvement या Poor की रेटिंग के साथ आता है, साथ ही नमूने की गणना की गई संख्या भी। LCP के लिए पेज सीमाएं सीधे बताता है: अच्छा 2500ms या उससे कम है, और खराब 4000ms से अधिक है।

कम नमूना संख्या वाले किसी भी कार्ड पर संदेह करें। एक दर्जन से अधिक नमूनों पर p75 शोर है। पेज के शीर्ष पर सिलेक्टर के साथ विंडो को चौड़ा करें, या इस पर कार्रवाई करने से पहले अधिक ट्रैफिक की प्रतीक्षा करें।

ट्रेंड चार्ट

ट्रेंड चार्ट चुनी गई विंडो के पार LCP और CLS के लिए दैनिक p75 को प्लॉट करता है, अच्छे और खराब थ्रेशोल्ड को चिह्नित किया जाता है। उपशीर्षक आपको बताता है कि आप क्या देख रहे हैं: सपाट लाइनें स्वस्थ हैं।

एक विशिष्ट दिन पर एक चरण परिवर्तन उपयोगी सिग्नल है, क्योंकि यह लगभग हमेशा एक डिप्लॉय के साथ संरेखित होता है। Deployments टैब के विरुद्ध तारीख को क्रॉस-रेफरेंस करें, या प्रोजेक्ट टाइमलाइन पर इवेंट को चिह्नित करें ताकि अगली बार इसे एनोटेट किया जा सके: Orbit Timeline Annotations देखें।

कई हफ्तों में धीमी गति से ऊपर की ओर बढ़ना एक अलग समस्या है, आमतौर पर एक एकल परिवर्तन के बजाय संचित पेज वजन।

शीर्ष देश

Top countries एज हेडर से निकाले गए देश के अनुसार नमूना वॉल्यूम दिखाता है। यह एनालिटिक्स के बजाय संदर्भ के लिए है: एक p75 जो कुल मिलाकर खराब दिखता है, अक्सर आपके मुख्य बाजार के लिए ठीक निकलता है और एक छोटे, अधिक दूर के दर्शकों द्वारा प्रभावित होता है।

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

Pages Needing Attention

Pages needing attention टेबल प्रत्येक मेट्रिक के लिए अच्छे थ्रेशोल्ड से ऊपर अपना p75 कितना बैठता है, साथ ही प्रत्येक पंक्ति के लिए नमूना संख्या के द्वारा पथ को रैंक करता है।

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

सामान्य कारण, जिन्हें जांचने के लायक हैं:

एक हीरो इमेज जिसे आकार दिया नहीं गया है या प्रीलोड नहीं किया गया है। यह सबसे लगातार LCP समस्या है।
एक तीसरे पक्ष की स्क्रिप्ट जो मुख्य थ्रेड को ब्लॉक करती है। चैट विजेट, टैग मैनेजर और एनालिटिक्स स्टैक सामान्य संदिग्ध हैं, और वे INP को सबसे अधिक नुकसान पहुंचाते हैं।
आयाम के बिना इमेज और एम्बेड। ये लोडिंग के दौरान लेआउट को कूदने का कारण बनते हैं, जो ठीक वही है जो CLS मापता है।
एक धीमी उत्पत्ति प्रतिक्रिया। यदि TTFB खराब है, तो ऊपर दिए गए कोई भी आपको बचा नहीं सकते; ठीक करने में कैशिंग या तेजी से प्रतिक्रिया है, फ्रंट-एंड कार्य नहीं।

इस विंडो में कोई नमूना नहीं

यदि पेज कहता है कि कोई नमूना नहीं हैं, तो तीन चीजों में से एक सत्य है:

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

पहले विंडो को चौड़ा करें, चूंकि वह मुफ़्त है, फिर जांचें कि स्क्रिप्ट लाइव साइट के परोसे जाने वाले HTML में है, न कि केवल आपके स्रोत में।

डेटा कितने समय तक रखा जाता है

व्यक्तिगत नमूनों को स्वचालित रूप से एक रात्रिकालीन कार्य द्वारा एक बार 30 दिन पुराने हो जाने पर काट दिया जाता है। विंडो सिलेक्टर आपको बनाए गए इतिहास के पार देखने देता है; इसके आगे कोई संग्रह नहीं है।

यदि आपको एक दीर्घकालिक रिकॉर्ड की आवश्यकता है, तो एक स्क्रीनशॉट लें या p75 मानों को एक बिंदु पर नोट करें, उदाहरण के लिए प्रदर्शन परियोजना से पहले और बाद में, ताकि आपके पास एक से पहले और बाद में हो जिसे आप बाद में उद्धृत कर सकें।

सार्वजनिक स्टेटस पेज पर Vitals

यदि आप प्रोजेक्ट के लिए एक स्टेटस पेज प्रकाशित करते हैं, तो यह अपटाइम और हाल के डिप्लॉय के साथ, आपके विज़िटर्स को समान Core Web Vitals सारांश दिखा सकता है। Orbit Status Page देखें।

अगला कहां जाएं

Orbit Project Analytics बिल्ड-साइड नंबर और एक संक्षिप्त vitals सारांश के लिए।
Orbit Timeline Annotations एक चरण परिवर्तन के पीछे डिप्लॉय और घटनाओं को चिह्नित करने के लिए।
Website Speed सामान्य प्रदर्शन सलाह के लिए।