वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मापना शुरू करना

Katie Hempenius
Katie Hempenius

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

उपयोगकर्ता की असल मॉनिटरिंग (आरयूएम) डेटा को फ़ील्ड डेटा भी कहा जाता है. यह डेटा, साइट के असल उपयोगकर्ताओं की परफ़ॉर्मेंस के बारे में बताता है. 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 एक छोटी मॉड्यूलर लाइब्रेरी (~2 केबी) है. यह फ़ील्ड के हिसाब से मेज़र की जा सकने वाली वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली हर मेट्रिक को इकट्ठा और रिपोर्ट करने के लिए, एक आसान एपीआई उपलब्ध कराती है.

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

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

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

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

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

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

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

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

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

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

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

ज़रूरी बातें

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

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

टूलिंग

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

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