वेब विटल मेज़र करने की सुविधा का इस्तेमाल शुरू करना

Katie Hempenius
Katie Hempenius

अपनी साइट की वेब विटल मेट्रिक को बेहतर बनाने के लिए, सबसे पहले उनका डेटा इकट्ठा करना ज़रूरी है. बेहतर विश्लेषण से, रीयल-वर्ल्ड और लैब, दोनों तरह के एनवायरमेंट से परफ़ॉर्मेंस का डेटा इकट्ठा किया जाएगा. वेब विटल को मेज़र करने के लिए, कोड में कम से कम बदलाव करने की ज़रूरत होती है. साथ ही, मुफ़्त टूल का इस्तेमाल करके भी ऐसा किया जा सकता है.

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

शुरू करना

अगर आपने आरयूएम सेट अप नहीं किया है, तो यहां दिए गए टूल से आपको अपनी साइट की असल परफ़ॉर्मेंस का डेटा तुरंत मिल जाएगा. ये सभी टूल, एक ही डेटासेट (Chrome उपयोगकर्ता अनुभव रिपोर्ट) पर आधारित हैं. हालांकि, इनका इस्तेमाल अलग-अलग तरह से किया जाता है:

  • Chrome DevTools, परफ़ॉर्मेंस पैनल के लाइव मेट्रिक व्यू में CrUX डेटासेट के साथ इंटिग्रेट होता है. एक ही पेज पर, अपने लोकल अनुभव की तुलना असल उपयोगकर्ता अनुभव से करके, यह फ़ैसला लिया जा सकता है कि आपको डीबग करने के लिए किन चीज़ों पर ध्यान देना है. अगर आपको अपनी साइट की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक को मेज़र करने और उसे बेहतर बनाने के लिए, एक ही कार्रवाई करनी है, तो हमारा सुझाव है कि आप Chrome DevTools के परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
  • PageSpeed Insights (PSI), पिछले 28 दिनों में पेज-लेवल और ऑरिजिन-लेवल की कुल परफ़ॉर्मेंस की रिपोर्ट दिखाता है. साथ ही, यह परफ़ॉर्मेंस को बेहतर बनाने के सुझाव भी देता है. पीएसआई, वेब और एपीआई के तौर पर उपलब्ध है.
  • Search Console, हर पेज के हिसाब से परफ़ॉर्मेंस डेटा रिपोर्ट करता है. इसलिए, यह उन पेजों की पहचान करने के लिए सबसे सही है जिनमें सुधार की ज़रूरत है. PageSpeed Insights के उलट, Search Console की रिपोर्टिंग में परफ़ॉर्मेंस का पुराना डेटा शामिल होता है. Search Console का इस्तेमाल सिर्फ़ उन साइटों के लिए किया जा सकता है जिनका मालिकाना हक आपके पास है और जिनके मालिकाना हक की पुष्टि हो चुकी है.
  • CrUX डैशबोर्ड, पहले से बना डैशबोर्ड है. इसमें, आपकी चुनी गई ऑरिजिन के लिए CrUX डेटा दिखता है. इसे Data Studio के साथ बनाया गया है. इसे सेटअप करने में करीब एक मिनट लगता है. PageSpeed Insights और Search Console की तुलना में, CrUX डैशबोर्ड रिपोर्टिंग में ज़्यादा डाइमेंशन शामिल होते हैं. उदाहरण के लिए, डेटा को डिवाइस और कनेक्शन टाइप के हिसाब से बांटा जा सकता है.

ध्यान दें कि ऊपर दिए गए टूल, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करने के लिए "शुरू करने" के लिहाज़ से काफ़ी सही हैं. हालांकि, ये टूल दूसरे संदर्भों में भी काम के हो सकते हैं. खास तौर पर, CrUX और PSI, दोनों एपीआई के तौर पर उपलब्ध हैं. इनका इस्तेमाल डैशबोर्ड बनाने और अन्य रिपोर्टिंग के लिए किया जा सकता है.

आरयूएम डेटा इकट्ठा करना

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

RUM की सेवा देने वाली किसी कंपनी का इस्तेमाल करके या खुद का टूल सेट अप करके, अपना RUM डेटा इकट्ठा किया जा सकता है.

खास तौर पर RUM की सेवा देने वाली कंपनियां, RUM डेटा को इकट्ठा करने और उसकी रिपोर्टिंग करने में माहिर होती हैं. इन सेवाओं के साथ Core Web Vitals का इस्तेमाल करने के लिए, अपनी साइट के लिए Core Web Vitals की निगरानी की सुविधा चालू करने के बारे में, आरयूएम की सेवा देने वाली कंपनी से पूछें.

अगर आपके पास आरयूएम की सेवा देने वाली कंपनी नहीं है, तो web-vitals JavaScript लाइब्रेरी का इस्तेमाल करके, इन मेट्रिक को इकट्ठा और रिपोर्ट करने के लिए, अपने मौजूदा Analytics सेटअप को बेहतर बनाया जा सकता है. इस तरीके के बारे में ज़्यादा जानकारी आगे दी गई है.

वेब-विटल्स JavaScript लाइब्रेरी

अगर वेब विटल्स के लिए अपना RUM सेटअप लागू किया जा रहा है, तो वेब विटल्स मेज़रमेंट इकट्ठा करने का सबसे आसान तरीका, web-vitals JavaScript लाइब्रेरी का इस्तेमाल करना है. web-vitals एक छोटी, मॉड्यूलर लाइब्रेरी (~2KB) है. यह फ़ील्ड से मेज़र की जा सकने वाली वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली हर मेट्रिक को इकट्ठा करने और उसकी रिपोर्ट करने के लिए, एक आसान एपीआई उपलब्ध कराती है.

वेब विटल में शामिल मेट्रिक, ब्राउज़र में पहले से मौजूद परफ़ॉर्मेंस एपीआई से सीधे तौर पर नहीं मिलती हैं. ये मेट्रिक, एपीआई के ऊपर बनाई जाती हैं. उदाहरण के लिए, कुल लेआउट शिफ़्ट (सीएलएस) को लेआउट में होने वाले बदलावों को ट्रैक करने वाले एपीआई का इस्तेमाल करके लागू किया जाता है. web-vitals का इस्तेमाल करके, आपको इन मेट्रिक को खुद लागू करने की ज़रूरत नहीं है. इससे यह भी पक्का होता है कि इकट्ठा किया गया डेटा, हर मेट्रिक के लिए इस्तेमाल किए गए तरीके और सबसे सही तरीकों से मेल खाता हो.

web-vitals को लागू करने के बारे में ज़्यादा जानने के लिए, दस्तावेज़ और फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करने के सबसे सही तरीके गाइड देखें.

डेटा एग्रीगेशन

यह ज़रूरी है कि आप web-vitals से इकट्ठा किए गए मेज़रमेंट की रिपोर्ट दें. अगर इस डेटा को मेज़र किया जाता है, लेकिन उसकी रिपोर्ट नहीं दी जाती है, तो आपको यह डेटा कभी नहीं दिखेगा. web-vitals दस्तावेज़ में ऐसे उदाहरण शामिल हैं जिनमें सामान्य एपीआई एंडपॉइंट, Google Analytics या Google Tag Manager में डेटा भेजने का तरीका बताया गया है.

अगर आपके पास पहले से ही रिपोर्टिंग टूल है, तो उसका इस्तेमाल करें. अगर ऐसा नहीं है, तो Google Analytics का इस्तेमाल किया जा सकता है. यह बिना किसी शुल्क के उपलब्ध है.

यह तय करते समय कि किस टूल का इस्तेमाल करना है, यह सोचना ज़रूरी है कि डेटा का ऐक्सेस किसे देना है. आम तौर पर, कारोबारों को परफ़ॉर्मेंस में सबसे ज़्यादा फ़ायदा तब मिलता है, जब किसी एक विभाग के बजाय पूरी कंपनी परफ़ॉर्मेंस को बेहतर बनाने में दिलचस्पी लेती है. अलग-अलग विभागों से सहमति लेने का तरीका जानने के लिए, वेबसाइट की स्पीड को अलग-अलग फ़ंक्शन के हिसाब से ठीक करना लेख पढ़ें.

डेटा का विश्लेषण

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

वेब विटल्स के लिए, Google मेडियन या औसत जैसे आंकड़ों के बजाय, "अच्छा" अनुभव देने वाले पेजों के प्रतिशत का इस्तेमाल करता है. इससे यह तय किया जाता है कि कोई साइट या पेज, सुझाई गई थ्रेशोल्ड को पूरा करता है या नहीं. खास तौर पर, किसी साइट या पेज को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले थ्रेशोल्ड के मुताबिक माना जा सकता है. इसके लिए, हर मेट्रिक के लिए 75% पेज व्यू, "अच्छा" थ्रेशोल्ड के मुताबिक होने चाहिए.

लैब डेटा का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी मेज़र करना

लैब डेटा को सिंथेटिक डेटा भी कहा जाता है. इसे असली उपयोगकर्ताओं के बजाय, कंट्रोल किए गए माहौल से इकट्ठा किया जाता है. आरयूएम डेटा के उलट, लैब डेटा को प्री-प्रोडक्शन एनवायरमेंट से इकट्ठा किया जा सकता है. इसलिए, इसे डेवलपर वर्कफ़्लो और लगातार इंटिग्रेशन की प्रोसेस में शामिल किया जा सकता है. सिंथेटिक डेटा इकट्ठा करने वाले टूल के उदाहरणों में Lighthouse और WebPageTest शामिल हैं.

ज़रूरी बातें

आरयूएम डेटा और लैब डेटा में हमेशा अंतर रहेगा. खास तौर पर, अगर लैब एनवायरमेंट के नेटवर्क की स्थिति, डिवाइस का टाइप या जगह, उपयोगकर्ताओं के नेटवर्क की स्थिति, डिवाइस के टाइप या जगह से काफ़ी अलग है. हालांकि, खास तौर पर वेब विटल्स मेट्रिक के लिए लैब डेटा इकट्ठा करते समय, कुछ खास बातों का ध्यान रखना ज़रूरी है:

  • सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी), लैब एनवायरमेंट में मेज़र किया जाता है. यह RUM डेटा के साथ फ़ील्ड में मेज़र किए गए एलसीपी से अलग हो सकता है. ऐसा, पेज लोड होने में लगने वाले समय (रीडायरेक्ट, सर्वर से कनेक्ट होने में लगने वाले समय या कैश मेमोरी में सेव नहीं किए गए डेटा की वजह से) या स्क्रीन के हिसाब से अलग-अलग उपयोगकर्ताओं को दिखाए जाने वाले अलग-अलग कॉन्टेंट की वजह से हो सकता है. इसके अलावा, कुकी बैनर, उपयोगकर्ताओं के हिसाब से कॉन्टेंट दिखाने जैसी अन्य वजहों से भी ऐसा हो सकता है.
  • लैब एनवायरमेंट में मेज़र किए गए कुल लेआउट शिफ़्ट (सीएलएस), आरयूएम डेटा में दिखने वाले सीएलएस से कृत्रिम रूप से कम हो सकता है. लैब के कई टूल सिर्फ़ पेज को लोड करते हैं—वे उससे इंटरैक्ट नहीं करते. इस वजह से, वे सिर्फ़ पेज के लोड होने के शुरुआती दौर में होने वाले लेआउट शिफ़्ट को कैप्चर करते हैं. वहीं दूसरी ओर, आरयूएम टूल से मेज़र की गई सीएलएस, पेज के पूरे लाइफ़स्पैन के दौरान होने वाले अचानक होने वाले लेआउट शिफ़्ट को कैप्चर करती है.
  • इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) को लैब एनवायरमेंट में मेज़र नहीं किया जा सकता, क्योंकि इसके लिए पेज पर उपयोगकर्ता के इंटरैक्शन की ज़रूरत होती है. इसलिए, INP के लिए ब्लॉकिंग का कुल समय (टीबीटी) प्रॉक्सी का सुझाव दिया जाता है. टीबीटी, "फ़र्स्ट कॉन्टेंटफ़ुल पेंट और टाइम टू इंटरैक्टिव के बीच के कुल समय को मेज़र करता है. इस दौरान, पेज को उपयोगकर्ता के इनपुट का जवाब देने से ब्लॉक किया जाता है". हालांकि, INP और TBT का हिसाब अलग-अलग तरीके से लगाया जाता है, लेकिन दोनों ही बूटस्ट्रैप प्रोसेस के दौरान ब्लॉक की गई मुख्य थ्रेड को दिखाते हैं. मुख्य थ्रेड के ब्लॉक होने पर, ब्राउज़र को उपयोगकर्ता के इंटरैक्शन का जवाब देने में देरी होती है.

टूलिंग

इन टूल का इस्तेमाल, वेब विटल्स के लैब मेज़रमेंट इकट्ठा करने के लिए किया जा सकता है:

  • Chrome DevTools, परफ़ॉर्मेंस पैनल के लाइव मेट्रिक व्यू में किसी पेज के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करता है और उसकी रिपोर्ट देता है. इस व्यू से, डेवलपर को कोड में बदलाव करते समय परफ़ॉर्मेंस के बारे में रीयल-टाइम में फ़ीडबैक मिलता है.
  • Lighthouse Lighthouse, एलसीपी, सीएलएस, और टीबीटी के बारे में रिपोर्ट करता है. साथ ही, परफ़ॉर्मेंस में होने वाले संभावित सुधारों को भी हाइलाइट करता है. Lighthouse, Chrome DevTools में npm पैकेज के तौर पर उपलब्ध है. साथ ही, Lighthouse CI का इस्तेमाल करके, इसे लगातार इंटिग्रेशन वर्कफ़्लो में भी शामिल किया जा सकता है.
  • WebPageTest में, स्टैंडर्ड रिपोर्टिंग के हिस्से के तौर पर वेब वाइटल शामिल होते हैं. WebPageTest, किसी खास डिवाइस और नेटवर्क की स्थितियों में वेब विटल के बारे में जानकारी इकट्ठा करने के लिए मददगार है.