वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को बेहतर बनाने के लिए सबसे ज़रूरी है डेटा इकट्ठा करना. अच्छे से विश्लेषण करने के लिए, रीयल-वर्ल्ड और लैब, दोनों एनवायरमेंट से परफ़ॉर्मेंस का डेटा इकट्ठा किया जाएगा. वेब वाइटल को मेज़र करने के लिए, कोड में छोटे-मोटे बदलाव करने पड़ते हैं. साथ ही, इसे बिना किसी शुल्क के उपलब्ध टूल का इस्तेमाल करके पूरा किया जा सकता है.
आरयूएम डेटा का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मेज़र करना
असली उपयोगकर्ता की मॉनिटरिंग (आरयूएम) डेटा को फ़ील्ड डेटा भी कहा जाता है. यह डेटा, किसी साइट के असली उपयोगकर्ताओं की परफ़ॉर्मेंस को कैप्चर करता है. Google, RUM डेटा का इस्तेमाल यह तय करने के लिए करता है कि कोई साइट, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के सुझाए गए थ्रेशोल्ड को पूरा करती है या नहीं.
शुरू करना
अगर आपने RUM सेटअप नहीं किया है, तो यहां दिए गए टूल से आपको अपनी साइट की रीयल-वर्ल्ड परफ़ॉर्मेंस के बारे में तुरंत डेटा मिल जाएगा. ये सभी टूल, एक ही बुनियादी डेटासेट (Chrome उपयोगकर्ता अनुभव रिपोर्ट) पर आधारित हैं. हालांकि, इनके इस्तेमाल के तरीके थोड़े अलग हैं:
- Chrome DevTools, परफ़ॉर्मेंस पैनल की लाइव मेट्रिक व्यू में CrUX डेटासेट के साथ इंटिग्रेट होता है. उसी पेज पर, अपने लोकल अनुभव की तुलना असल उपयोगकर्ता अनुभव से करके, यह तय किया जा सकता है कि आपको डीबग करने के लिए कहां ध्यान देना है. अगर आपको अपनी साइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक को मेज़र करने और उसे बेहतर बनाने के लिए, कोई एक कार्रवाई करनी है, तो हमारा सुझाव है कि Chrome DevTools के परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
- PageSpeed Insights (PSI), पिछले 28 दिनों में पेज-लेवल और ऑरिजिन-लेवल की परफ़ॉर्मेंस की रिपोर्ट दिखाता है. इसके अलावा, यह परफ़ॉर्मेंस को बेहतर बनाने के बारे में सुझाव भी देता है. पीएसआई, वेब पर और एपीआई के तौर पर उपलब्ध है.
- Search Console, हर पेज के हिसाब से परफ़ॉर्मेंस डेटा की रिपोर्ट दिखाता है. इसलिए, यह उन पेजों की पहचान करने के लिए सबसे सही है जिनमें सुधार करने की ज़रूरत है. PageSpeed Insights के उलट, Search Console की रिपोर्टिंग में परफ़ॉर्मेंस का पुराना डेटा शामिल होता है. Search Console का इस्तेमाल सिर्फ़ उन साइटों के लिए किया जा सकता है जिनका मालिकाना हक आपके पास है और आपने मालिकाना हक की पुष्टि की है.
- CrUX Vis एक पहले से बना हुआ डैशबोर्ड है. यह आपकी पसंद के यूआरएल या ऑरिजिन के लिए, CrUX के इतिहास का डेटा दिखाता है. हालांकि, यह डेटा सिर्फ़ उन यूआरएल या ऑरिजिन के लिए उपलब्ध होता है जो CrUX डेटासेट में शामिल हैं. इसे CrUX History API के आधार पर बनाया गया है. इसे सेटअप करने में करीब एक मिनट लगता है. PageSpeed Insights और Search Console की तुलना में, CrUX Vis में ज़्यादा डेटा शामिल होता है. उदाहरण के लिए, एलसीपी के सबपार्ट, नेविगेशन टाइप वगैरह.
- CrUX Vis एक पुराना डैशबोर्ड है. यह आपकी पसंद के ऑरिजिन या यूआरएल के लिए CrUX डेटा दिखाता है. इसे CrUX History API के आधार पर बनाया गया है. PageSpeed Insights और Search Console की तुलना में, CrUX Vis रिपोर्टिंग में ज़्यादा जानकारी शामिल होती है. उदाहरण के लिए, CrUX Vis में नेविगेशन टाइप और एलसीपी और आरटीटी डेटा उपलब्ध होता है.
ध्यान दें कि ऊपर दिए गए टूल, वेब वाइटल को मेज़र करने के लिए "शुरुआत करने" के लिए सबसे सही हैं. हालांकि, इनका इस्तेमाल अन्य संदर्भों में भी किया जा सकता है. खास तौर पर, CrUX और PSI, दोनों एपीआई के तौर पर उपलब्ध हैं. इनका इस्तेमाल डैशबोर्ड और अन्य रिपोर्टिंग बनाने के लिए किया जा सकता है.
आरयूएम डेटा इकट्ठा करना
वेबसाइट कैसा प्रदर्शन कर रही है, इसकी जांच करने के लिए CrUX पर आधारित टूल का इस्तेमाल किया जा सकता है. हालांकि, हमारा सुझाव है कि आप अपने RUM का इस्तेमाल करें. खुद इकट्ठा किए गए आरयूएम डेटा से, आपको अपनी साइट की परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी और तुरंत सुझाव मिल सकते हैं. इससे समस्याओं का पता लगाना और संभावित समाधानों को आज़माना आसान हो जाता है.
आरयूएम डेटा इकट्ठा करने के लिए, आरयूएम सेवा देने वाली कंपनी का इस्तेमाल किया जा सकता है. इसके अलावा, अपने टूल सेट अप करके भी आरयूएम डेटा इकट्ठा किया जा सकता है.
RUM की सेवाएं देने वाली कंपनियां, RUM डेटा इकट्ठा करने और उसकी रिपोर्टिंग करने में विशेषज्ञ होती हैं. इन सेवाओं के साथ Core Web Vitals का इस्तेमाल करने के लिए, अपने आरयूएम सेवा देने वाले से अपनी साइट के लिए Core Web Vitals मॉनिटरिंग चालू करने के लिए कहें.
अगर आपके पास RUM सेवा देने वाली कंपनी नहीं है, तो web-vitals JavaScript लाइब्रेरी का इस्तेमाल करके, अपने मौजूदा Analytics सेटअप को बेहतर बनाया जा सकता है. इससे इन मेट्रिक को इकट्ठा करने और उनकी रिपोर्ट बनाने में मदद मिलेगी. इस तरीके के बारे में यहां ज़्यादा जानकारी दी गई है.
web-vitals JavaScript लाइब्रेरी
अगर आपको Web Vitals के लिए, खुद का RUM सेटअप लागू करना है, तो Web Vitals के मेज़रमेंट इकट्ठा करने का सबसे आसान तरीका है कि web-vitals JavaScript लाइब्रेरी का इस्तेमाल किया जाए. web-vitals एक छोटी और मॉड्यूलर लाइब्रेरी (~2 केबी) है. यह फ़ील्ड में मेज़र की जा सकने वाली Web Vitals मेट्रिक को इकट्ठा करने और उनकी रिपोर्ट बनाने के लिए, एक आसान एपीआई उपलब्ध कराती है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक, ब्राउज़र के परफ़ॉर्मेंस एपीआई से सीधे तौर पर नहीं मिलती हैं. हालांकि, ये मेट्रिक इन एपीआई के आधार पर तैयार की जाती हैं. उदाहरण के लिए, लेआउट शिफ़्ट होने में लगा समय (सीएलएस) को लेआउट इंस्टेबिलिटी एपीआई का इस्तेमाल करके लागू किया जाता है. web-vitals का इस्तेमाल करने पर, आपको इन मेट्रिक को खुद लागू करने की ज़रूरत नहीं होती. इससे यह भी पक्का होता है कि आपने जो डेटा इकट्ठा किया है वह हर मेट्रिक के लिए, तरीके और सबसे सही तरीकों से मेल खाता हो.
web-vitals को लागू करने के बारे में ज़्यादा जानने के लिए, दस्तावेज़ और फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करने के सबसे सही तरीके वाली गाइड देखें.
डेटा एग्रीगेशन
यह ज़रूरी है कि web-vitals से इकट्ठा किए गए मेज़रमेंट की रिपोर्ट की जाए. अगर इस डेटा को मेज़र किया जाता है, लेकिन इसकी रिपोर्ट नहीं दी जाती है, तो आपको यह कभी नहीं दिखेगा. web-vitals दस्तावेज़ में ऐसे उदाहरण शामिल हैं जिनसे पता चलता है कि डेटा को सामान्य एपीआई एंडपॉइंट, Google Analytics या Google Tag Manager को कैसे भेजा जाता है.
अगर आपके पास पहले से कोई पसंदीदा रिपोर्टिंग टूल है, तो उसका इस्तेमाल करें. अगर ऐसा नहीं है, तो Google Analytics का इस्तेमाल बिना किसी शुल्क के किया जा सकता है.
यह तय करते समय कि किस टूल का इस्तेमाल करना है, यह ध्यान रखना ज़रूरी है कि डेटा को ऐक्सेस करने की ज़रूरत किसे होगी. आम तौर पर, कारोबारों को सबसे ज़्यादा फ़ायदा तब मिलता है, जब परफ़ॉर्मेंस को बेहतर बनाने में पूरी कंपनी दिलचस्पी दिखाती है, न कि सिर्फ़ कोई एक विभाग. अलग-अलग विभागों से मंज़ूरी पाने का तरीका जानने के लिए, वेबसाइट की स्पीड को बेहतर बनाने के लिए अलग-अलग विभागों के साथ मिलकर काम करना लेख पढ़ें.
डेटा इंटरप्रिटेशन
परफ़ॉर्मेंस डेटा का विश्लेषण करते समय, डिस्ट्रिब्यूशन के टेल पर ध्यान देना ज़रूरी है. आरयूएम डेटा से अक्सर पता चलता है कि परफ़ॉर्मेंस में काफ़ी अंतर होता है. कुछ उपयोगकर्ताओं को तेज़ परफ़ॉर्मेंस मिलती है, जबकि कुछ को धीमी. हालांकि, डेटा की खास जानकारी देने के लिए मीडियन का इस्तेमाल करने से, इस व्यवहार का पता नहीं चल पाता.
वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी के लिए, Google "अच्छे" अनुभव के प्रतिशत का इस्तेमाल करता है. इसके बजाय, वह मीडियन या औसत जैसे आंकड़ों का इस्तेमाल यह तय करने के लिए करता है कि कोई साइट या पेज, सुझाई गई थ्रेशोल्ड को पूरा करता है या नहीं. खास तौर पर, किसी साइट या पेज को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड को पूरा करने वाला माना जाता है. इसके लिए, पेज पर आने वाले 75% लोगों को हर मेट्रिक के लिए "अच्छा" थ्रेशोल्ड पूरा करना होगा.
लैब के डेटा का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मेज़र करना
लैब डेटा को सिंथेटिक डेटा भी कहा जाता है. इसे असली उपयोगकर्ताओं के बजाय, कंट्रोल किए गए एनवायरमेंट से इकट्ठा किया जाता है. आरयूएम डेटा के उलट, लैब डेटा को प्री-प्रोडक्शन एनवायरमेंट से इकट्ठा किया जा सकता है. इसलिए, इसे डेवलपर के वर्कफ़्लो और लगातार इंटिग्रेशन की प्रोसेस में शामिल किया जा सकता है. सिंथेटिक डेटा इकट्ठा करने वाले टूल के उदाहरण, Lighthouse और WebPageTest हैं.
ज़रूरी बातें
आरयूएम डेटा और लैब डेटा में हमेशा अंतर रहेगा. ऐसा खास तौर पर तब होता है, जब नेटवर्क की स्थितियां, डिवाइस का टाइप या लैब एनवायरमेंट की जगह, उपयोगकर्ताओं की स्थितियों से काफ़ी अलग होती है. हालांकि, खास तौर पर वेब वाइटल्स मेट्रिक का लैब डेटा इकट्ठा करते समय, कुछ बातों का ध्यान रखना ज़रूरी है:
- सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी) को लैब एनवायरमेंट में मेज़र किया जाता है. यह फ़ील्ड में RUM डेटा से मेज़र किए गए एलसीपी से अलग हो सकता है. ऐसा पेज लोड होने में देरी (रीडायरेक्ट, सर्वर से कनेक्ट होने में लगने वाला समय या अनकैश्ड डेटा), स्क्रीन के हिसाब से अलग-अलग उपयोगकर्ताओं को दिखाया गया अलग-अलग कॉन्टेंट या अन्य वजहों (जैसे, कुकी बैनर, निजीकरण) से हो सकता है.
- लेआउट शिफ़्ट होने में लगा समय (सीएलएस) को लैब एनवायरमेंट में मापा जाता है. यह आरयूएम डेटा में देखे गए सीएलएस से कम हो सकता है. लैब में मौजूद कई टूल सिर्फ़ पेज लोड करते हैं. वे पेज के साथ इंटरैक्ट नहीं करते. इस वजह से, ये सिर्फ़ पेज लोड होने के शुरुआती समय में होने वाली लेआउट शिफ़्ट को कैप्चर करते हैं. इसके उलट, आरयूएम टूल से मेज़र किया गया सीएलएस, पेज के पूरे लाइफ़स्पैन के दौरान होने वाले अनचाहे लेआउट शिफ़्ट को कैप्चर करता है.
- पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) को लैब एनवायरमेंट में मेज़र नहीं किया जा सकता, क्योंकि इसके लिए पेज पर उपयोगकर्ता के इंटरैक्शन की ज़रूरत होती है. इसलिए, टोटल ब्लॉकिंग टाइम (टीबीटी) को आईएनपी के लिए, लैब प्रॉक्सी के तौर पर इस्तेमाल करने का सुझाव दिया जाता है. टीबीटी, "फ़र्स्ट कॉन्टेंटफ़ुल पेंट और टाइम टू इंटरैक्टिव के बीच के कुल समय को मापता है. इस दौरान, पेज को उपयोगकर्ता के इनपुट का जवाब देने से ब्लॉक कर दिया जाता है". आईएनपी और टीबीटी का हिसाब अलग-अलग तरीके से लगाया जाता है. हालांकि, दोनों बूटस्ट्रैप प्रोसेस के दौरान ब्लॉक की गई मुख्य थ्रेड को दिखाते हैं. मुख्य थ्रेड ब्लॉक होने पर, ब्राउज़र को उपयोगकर्ता के इंटरैक्शन का जवाब देने में देरी होती है.
टूलिंग
इन टूल का इस्तेमाल करके, वेब वाइटल के लैब मेज़रमेंट इकट्ठा किए जा सकते हैं:
- Chrome DevTools, परफ़ॉर्मेंस पैनल की लाइव मेट्रिक व्यू में, किसी पेज के लिए वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मापता है और उसकी रिपोर्ट देता है. इस व्यू से, डेवलपर को कोड में बदलाव करते समय, परफ़ॉर्मेंस के बारे में रीयल-टाइम में फ़ीडबैक मिलता है.
- Lighthouse Lighthouse, एलसीपी, सीएलएस, और टीबीटी के बारे में रिपोर्ट देता है. साथ ही, परफ़ॉर्मेंस में सुधार करने के संभावित तरीकों के बारे में भी बताता है. Lighthouse, Chrome DevTools में npm पैकेज के तौर पर उपलब्ध है. इसे Lighthouse CI का इस्तेमाल करके, लगातार इंटिग्रेशन वाले वर्कफ़्लो में भी शामिल किया जा सकता है.
- WebPageTest, अपनी स्टैंडर्ड रिपोर्टिंग में वेब वाइटल को शामिल करता है. WebPageTest, किसी डिवाइस और नेटवर्क की खास स्थितियों में वेब वाइटल के बारे में जानकारी इकट्ठा करने के लिए मददगार है.