Google के टूल का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाले वर्कफ़्लो

अपनी वेबसाइट का ऑडिट करने, उसे बेहतर बनाने, और उस पर नज़र रखने के लिए, Google के टूल का एक साथ इस्तेमाल करें.

पब्लिश होने की तारीख: 28 मई, 2020

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को फ़ील्ड में सबसे अच्छी तरह से मेज़र किया जाता है

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

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

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

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

Google, Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) के ज़रिए वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक का आकलन करता है. यह एक सार्वजनिक डेटासेट है. इसे Chrome का इस्तेमाल करने वाले असली उपयोगकर्ताओं से इकट्ठा किया जाता है. यह Google और तीसरे पक्ष के कई टूल का मुख्य हिस्सा है. ये टूल, किसी साइट की परफ़ॉर्मेंस की अहम जानकारी देते हैं.

हालांकि, CrUX की कुछ सीमाएं हैं. यह अक्सर आपको यह बता सकता है कि समस्या कब हुई, लेकिन अक्सर इसके पास यह बताने के लिए ज़रूरी डेटा नहीं होता कि समस्या क्यों हुई.

अगर हो सके, तो अपना फ़ील्ड डेटा इकट्ठा करें

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

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

हालांकि, ऐसा हो सकता है कि आप किसी बड़े संगठन का हिस्सा न हों या आपके पास तीसरे पक्ष के समाधान का इस्तेमाल करने के लिए संसाधन न हों. ऐसे मामलों में, Google की web-vitals लाइब्रेरी की मदद से, सभी वेब वाइटल इकट्ठा किए जा सकते हैं. हालांकि, उस डेटा को रिपोर्ट करने, सेव करने, और उसका विश्लेषण करने की ज़िम्मेदारी आपकी होगी.

अगर Google Analytics का इस्तेमाल पहले से किया जा रहा है, लेकिन आपने फ़ील्ड डेटा इकट्ठा करना शुरू नहीं किया है, तो आपके पास web-vitals लाइब्रेरी का इस्तेमाल करने का विकल्प है. इससे फ़ील्ड में इकट्ठा किए गए वेब वाइटल को Google Analytics में भेजा जा सकता है. साथ ही, डेटा की रिपोर्ट बनाने के लिए GA4 के BigQuery एक्सपोर्ट का इस्तेमाल किया जा सकता है.

Google के टूल के बारे में जानकारी

चाहे आपने फ़ील्ड डेटा इकट्ठा किया हो या नहीं, Google के कई ऐसे टूल हैं जो कोर वेब वाइटल का विश्लेषण करने में आपकी मदद कर सकते हैं. वर्कफ़्लो सेट अप करने से पहले, हर टूल के बारे में खास जानकारी देने से आपको यह समझने में मदद मिल सकती है कि आपके लिए कौनसा टूल सबसे अच्छा है या कौनसा टूल आपके लिए सही नहीं है.

Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX)

जैसा कि पहले बताया गया है, CrUX एक सार्वजनिक डेटासेट है. इसमें फ़ील्ड डेटा होता है. यह डेटा, लाखों वेबसाइटों से Google Chrome का इस्तेमाल करने वाले लोगों के एक सेगमेंट से इकट्ठा किया जाता है. इसमें वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक और उन वेबसाइटों के लिए अन्य मेट्रिक शामिल होती हैं जिन पर काफ़ी ट्रैफ़िक आता है.

CrUX, ओरिजिन लेवल पर हर महीने के BigQuery डेटासेट के तौर पर उपलब्ध होता है. इसके अलावा, यह यूआरएल या ओरिजिन-लेवल पर हर दिन के एपीआई के तौर पर भी उपलब्ध होता है. हालांकि, इसके लिए ज़रूरी है कि CrUX डेटासेट में किसी यूआरएल या ओरिजिन के लिए, ज़रूरत के मुताबिक सैंपल मौजूद हों. CrUX डेटा, CrUX के अलग-अलग टूल के ज़रिए उपलब्ध होता है. इसका इस्तेमाल प्रोग्रामैटिक ऐक्सेस और विज़ुअल टूल, दोनों के लिए किया जा सकता है.

CrUX का इस्तेमाल कब करें

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

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

CrUX का इस्तेमाल कब नहीं करना चाहिए

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

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

CrUX, पिछले 28 दिनों का रोलिंग एवरेज डेटा उपलब्ध कराता है. इसलिए, डेवलपमेंट के दौरान यह एक सही टूल नहीं है. ऐसा इसलिए, क्योंकि CrUX डेटासेट में सुधारों को दिखने में काफ़ी समय लगेगा.

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

PageSpeed Insights (PSI)

PSI एक ऐसा टूल है जो किसी पेज के लिए, CrUX और Lighthouse से मिले लैब डेटा की रिपोर्ट करता है. ज़्यादा जानकारी के लिए, उन सेक्शन को अलग-अलग देखें.

पीएसआई का इस्तेमाल कब करें

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

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

Lighthouse को सर्वर से चलाया जाता है. इसलिए, यह DevTools से Lighthouse चलाने की तुलना में ज़्यादा सटीक बेसलाइन बना सकता है.

पीएसआई का इस्तेमाल कब नहीं करना चाहिए

पीएसआई सिर्फ़ सार्वजनिक यूआरएल के लिए उपलब्ध है. इसका इस्तेमाल उन डेवलपमेंट साइटों पर नहीं किया जा सकता जिन्हें सार्वजनिक तौर पर ऐक्सेस नहीं किया जा सकता.

CrUX डेटा सिर्फ़ तब उपलब्ध होता है, जब साइटें ज़रूरी शर्तें पूरी करती हों. इनमें साइट की लोकप्रियता से जुड़ी थ्रेशोल्ड वैल्यू भी शामिल है. अगर किसी पेज या ऑरिजिन के लिए CrUX डेटा उपलब्ध नहीं है, तो PSI का इस्तेमाल करना ज़्यादा फ़ायदेमंद नहीं होता. ऐसा इसलिए, क्योंकि इन मामलों में PSI सिर्फ़ Lighthouse लैब डेटा दिखा सकता है.

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

आखिर में, जहां CrUX में पेज-लेवल का डेटा उपलब्ध है, लेकिन वह Lighthouse के लैब डेटा से अलग है वहां Lighthouse से मिले सुझाव कम काम के हो सकते हैं. ऐसा खास तौर पर पोस्ट-लोड सीएलएस की समस्याओं के लिए हो सकता है. साथ ही, इंटरैक्टिविटी Core Web Vitals (एफ़आईडी और आईएनपी) के लिए भी ऐसा हो सकता है, जहां लैब-आधारित ऑडिट कम मददगार होते हैं.

Search Console

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

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

Search Console का इस्तेमाल कब करना चाहिए

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

Search Console का इस्तेमाल कब नहीं करना चाहिए

Search Console, उन प्रोजेक्ट के लिए सही नहीं हो सकता जो तीसरे पक्ष के ऐसे टूल इस्तेमाल करते हैं जो मिलते-जुलते पेजों को ग्रुप करते हैं. इसके अलावा, अगर कोई वेबसाइट CrUX डेटासेट में शामिल नहीं है, तो भी Search Console का इस्तेमाल नहीं किया जा सकता.

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

लाइटहाउस

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

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

Lighthouse का इस्तेमाल कब करना चाहिए

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

Lighthouse का इस्तेमाल कब नहीं करना चाहिए

Lighthouse (या Lighthouse CI), फ़ील्ड डेटा का विकल्प नहीं है. Lighthouse मुख्य रूप से एक डायग्नोस्टिक टूल है. यह पहले से तय किए गए पेज लोड से, संभावित समस्याओं और सबसे सही तरीकों की सूची बनाता है. ऐसा हो सकता है कि इसके सुझाव, आपके उपयोगकर्ताओं को मिलने वाली परफ़ॉर्मेंस से हमेशा मेल न खाएं.

लाइटहाउस का इस्तेमाल, प्रोडक्शन साइटों की समस्याओं का पता लगाने के लिए किया जा सकता है. इसके लिए, PageSpeed Insights जैसे टूल का इस्तेमाल किया जाता है. हालांकि, लाइटहाउस का इस्तेमाल डेवलपमेंट और लगातार इंटिग्रेशन वाले एनवायरमेंट में किया जाना चाहिए, ताकि परफ़ॉर्मेंस से जुड़ी समस्याओं को प्रोडक्शन में पहुंचने से पहले ही ठीक किया जा सके.

Lighthouse की ओर से उपलब्ध कराए गए ऑडिट, Chrome DevTools के परफ़ॉर्मेंस पैनल में "खास जानकारी" के ज़रिए भी उपलब्ध होते हैं. इससे किसी पेज की परफ़ॉर्मेंस का ज़्यादा बेहतर तरीके से विश्लेषण किया जा सकता है.

Chrome DevTools में परफ़ॉर्मेंस पैनल

Chrome DevTools, ब्राउज़र में मौजूद डेवलपमेंट टूल का एक कलेक्शन है. इसमें परफ़ॉर्मेंस पैनल भी शामिल है. परफ़ॉर्मेंस पैनल, एक लैब टूल है. इसमें दो "मोड" होते हैं:

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

दूसरा, परफ़ॉर्मेंस पैनल की मदद से डेवलपर, पेज लोड होने या रिकॉर्ड की गई समयावधि के दौरान, पेज की सभी गतिविधियों की प्रोफ़ाइल (या ट्रेस) कैप्चर कर सकते हैं. इस व्यू में, हर डाइमेंशन के बारे में ज़्यादा जानकारी मिलती है. जैसे, नेटवर्क, रेंडरिंग, पेंटिंग, और स्क्रिप्टिंग ऐक्टिविटी. साथ ही, पेज की Core Web Vitals के बारे में भी जानकारी मिलती है. इसमें Lighthouse की तरह ही अहम जानकारी भी शामिल होती है.

परफ़ॉर्मेंस पैनल का इस्तेमाल कब करना चाहिए

डेवलपर को परफ़ॉर्मेंस पैनल का इस्तेमाल करना चाहिए, ताकि उन्हें किसी पेज की परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी मिल सके.

लाइव मेट्रिक व्यू का इस्तेमाल करके, पेज की मौजूदा परफ़ॉर्मेंस की विशेषताओं को तुरंत समझा जा सकता है. साथ ही, पेज के साथ इंटरैक्ट किए जाने पर संभावित समस्याओं का पता लगाया जा सकता है.

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

परफ़ॉर्मेंस पैनल का इस्तेमाल कब नहीं करना चाहिए

परफ़ॉर्मेंस पैनल, डेवलपर टूल है. यह मुख्य रूप से लैब डेटा उपलब्ध कराता है. हालांकि, इसमें CrUX से कुछ फ़ील्ड कॉन्टेक्स्ट भी शामिल होता है. यह फ़ील्ड डेटा का विकल्प नहीं है.

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

यह तीन चरणों वाला वर्कफ़्लो है. इससे यह पक्का किया जा सकता है कि आपकी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक बेहतर बनी रहें

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, प्रोसेस को लगातार चलने वाले साइकल के तौर पर देखना सबसे अच्छा होता है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक और परफ़ॉर्मेंस की अन्य मेट्रिक को बेहतर बनाने के लिए, यह तरीका अपनाया जा सकता है:

  1. वेबसाइट की परफ़ॉर्मेंस का आकलन करना और समस्याओं का पता लगाना.
  2. डीबग और ऑप्टिमाइज़ करें.
  3. लगातार इंटिग्रेशन करने वाले टूल की मदद से मॉनिटर करें, ताकि रिग्रेशन का पता लगाया जा सके और उन्हें रोका जा सके.
तीन चरणों वाली प्रोसेस को लगातार चलने वाले साइकल के तौर पर दिखाया गया है. पहले चरण में, 'वेबसाइट की परफ़ॉर्मेंस का आकलन करें और पेंट पॉइंट की पहचान करें' लिखा है. दूसरे चरण में, 'डीबग करें और ऑप्टिमाइज़ करें' लिखा है. तीसरे चरण में, 'मॉनिटर करें और लगातार डेवलपमेंट करें' लिखा है.
तीन चरणों वाला वर्कफ़्लो

पहला चरण: वेबसाइट की परफ़ॉर्मेंस का आकलन करना और उसे बेहतर बनाने के मौके पहचानना

वेबसाइट की परफ़ॉर्मेंस का आकलन करने के लिए, फ़ील्ड डेटा से शुरुआत करना सबसे अच्छा होता है.

  1. ऑरिजिन पर वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक और किसी यूआरएल के बारे में खास जानकारी देखने के लिए, PageSpeed Insights का इस्तेमाल करें.
  2. Search Console की मदद से, उन पेजों की पहचान की जा सकती है जिनमें सुधार करने की ज़रूरत है. साथ ही, यह भी पता लगाया जा सकता है कि आपकी साइट के लिए, पेज ग्रुप करने की सुविधा बेहतर तरीके से काम कर रही है या नहीं.
  3. अगर आपके पास आरयूएम डेटा है, तो यह अक्सर उन पेजों या ट्रैफ़िक सेगमेंट की पहचान करने का सबसे अच्छा विकल्प होता है जिनमें समस्याएं हैं.

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

PageSpeed Insights की मदद से साइट की परफ़ॉर्मेंस का विश्लेषण करना

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

PageSpeed Insights, CrUX डेटा दिखाता है. इसमें उपयोगकर्ता अनुभव के पिछले 28 दिनों का डेटा, 75वें पर्सेंटाइल पर दिखाया जाता है. इसका मतलब है कि अगर 75% उपयोगकर्ता अनुभव, किसी मेट्रिक के लिए तय की गई थ्रेशोल्ड वैल्यू को पूरा करते हैं, तो अनुभव को "अच्छा" माना जाता है.

अगर आपको किसी खास पेज की परफ़ॉर्मेंस देखनी है, तो उस पेज का इस्तेमाल करें. ऑप्टिमाइज़ेशन शुरू करते समय, किसी साइट की खास जानकारी देखने के लिए, होम पेज से शुरुआत करें. ऐसा इसलिए, क्योंकि यह आम तौर पर कई साइटों पर सबसे ज़्यादा लोकप्रिय पेजों में से एक होता है.

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

PSI, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली तीनों मेट्रिक (एलसीपी, सीएलएस, और आईएनपी) के साथ-साथ, डाइग्नोस्टिक टीटीएफ़बी और एफ़सीपी मेट्रिक भी दिखाता है. क्या वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली कोई मेट्रिक, थ्रेशोल्ड से कम है और कितनी कम है? इससे आपको पता चलेगा कि आपको किस दिशा में काम करना है.

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

सीएलएस के लिए, CrUX सीएलएस और Lighthouse सीएलएस के स्कोर देखें. इससे पता चलेगा कि यह लोड सीएलएस की समस्या है या लोड होने के बाद सीएलएस की समस्या है. लोड सीएलएस की समस्या को Lighthouse पकड़ लेगा और इसके बारे में सलाह देगा. हालांकि, लोड होने के बाद सीएलएस की समस्या को Lighthouse नहीं पकड़ पाएगा. ज़्यादा जानकारी के लिए, सीएलएस को ऑप्टिमाइज़ करने से जुड़ी गाइड देखें.

रिस्पॉन्सिवनेस के लिए, आईएनपी स्कोर देखें. लाइटहाउस में टीबीटी ऑडिट देखें. इससे पता चलेगा कि शुरुआती पेज लोड के दौरान, क्या JavaScript की ज़्यादा प्रोसेसिंग हो रही है. इससे INP पर असर पड़ सकता है. आईएनपी को बेहतर बनाना मुश्किल हो सकता है. इसलिए, ज़्यादा जानकारी के लिए आईएनपी को ऑप्टिमाइज़ करने की गाइड देखें.

Search Console में, खराब परफ़ॉर्मेंस वाले पेजों की पहचान करना

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

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

Search Console में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट से, आपको अपनी वेबसाइट की परफ़ॉर्मेंस के बारे में खास जानकारी मिलती है. हालांकि, अब भी उन पेजों के बारे में ज़्यादा जानकारी देखी जा सकती है जिन पर ध्यान देने की ज़रूरत है. Search Console की मदद से, ये काम भी किए जा सकते हैं:

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

जब आपको कुछ खास पेजों की जांच करनी हो, तो उन पेजों से जुड़ी समस्याओं के बारे में ज़्यादा जानकारी पाने के लिए, PSI का इस्तेमाल किया जा सकता है. इसके बारे में पहले बताया जा चुका है.

दूसरा चरण: डीबग करना और ऑप्टिमाइज़ करना

पहले चरण में, आपको उन पेजों की पहचान करनी चाहिए जिनकी परफ़ॉर्मेंस को बेहतर बनाने की ज़रूरत है. साथ ही, यह भी तय करना चाहिए कि आपको वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली किन मेट्रिक को बेहतर बनाना है. समस्या की वजह जानने के लिए, Google के टूल का इस्तेमाल किया जा सकता है.

  1. Lighthouse ऑडिट देखें और पेज के लिए बेहतर दिशा-निर्देश पाएं
  2. रीयल टाइम में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का विश्लेषण करने के लिए, परफ़ॉर्मेंस पैनल में लाइव मेट्रिक व्यू का इस्तेमाल करें.
  3. परफ़ॉर्मेंस से जुड़ी समस्याओं को ठीक करने और कोड में किए गए बदलावों की जांच करने के लिए, परफ़ॉर्मेंस पैनल ट्रेसिंग का इस्तेमाल करें.

ज़्यादा जानकारी के लिए, ये गाइड देखें:

Lighthouse की मदद से अवसरों का पता लगाना

PageSpeed Insights, आपके लिए Lighthouse को चलाता है. Chrome DevTools से भी Lighthouse को चलाया जा सकता है. इससे, गड़बड़ियों को स्थानीय तौर पर ठीक करने की पुष्टि करने में मदद मिलती है. हालांकि, परफ़ॉर्मेंस पैनल (इसके बारे में आगे बताया गया है) एक ज़्यादा बेहतर टूल है. इससे, परफ़ॉर्मेंस से जुड़ी समस्याओं का पता लगाया जा सकता है और उन्हें स्थानीय तौर पर ठीक किया जा सकता है.

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

जब Lighthouse की मेट्रिक से पता चलता है कि आपकी समस्या और उससे मिलती-जुलती समस्या पहले भी आ चुकी है, तो ऑडिट में मौजूद जानकारी से समस्याओं का पता लगाने और उन्हें हल करने के सुझाव पाने में मदद मिल सकती है.

ऑडिट को सिर्फ़ उन वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के लिए फ़िल्टर किया जा सकता है जिनमें आपकी दिलचस्पी है. इससे, किसी खास मेट्रिक से जुड़ी समस्याओं को ठीक करने पर फ़ोकस किया जा सकता है:

अहम मेट्रिक के लिए Lighthouse फ़िल्टर करने के विकल्प
Lighthouse के फ़िल्टर के विकल्प

आईएनपी के लिए, टीबीटी ऑडिट का इस्तेमाल करके उन समस्याओं का पता लगाएं जो इन मेट्रिक पर असर डाल सकती हैं. हालांकि, ध्यान रखें कि इंटरैक्शन के बिना, Lighthouse सीमित तौर पर ही समस्याओं का पता लगा सकता है.

Chrome DevTools की लाइव मेट्रिक स्क्रीन की मदद से, रीयल टाइम में विश्लेषण करना

परफ़ॉर्मेंस पैनल में मौजूद Chrome DevTools की लाइव मेट्रिक स्क्रीन, पेज लोड होने और पेज ब्राउज़ करने के दौरान, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को रीयल टाइम में दिखाती है. इस वजह से, यह लोड होने के बाद होने वाली लेआउट शिफ़्ट के साथ-साथ आईएनपी को भी कैप्चर कर सकता है. हर मेट्रिक के बारे में ज़्यादा जानकारी भी देखी जा सकती है:

Chrome DevTools के परफ़ॉर्मेंस पैनल में लाइव मेट्रिक व्यू
Chrome DevTools के परफ़ॉर्मेंस पैनल में लाइव मेट्रिक व्यू

इस व्यू में, परफ़ॉर्मेंस से जुड़ी समस्याओं की पहचान करने के लिए, कई काम की जानकारी मिलती है. यह CrUX से फ़ील्ड की जानकारी भी इकट्ठा कर सकता है. ज़्यादा जानकारी के लिए, ट्रेस की मदद से और भी बारीकी से जांच की जा सकती है.

परफ़ॉर्मेंस पैनल की मदद से ज़्यादा जानकारी देखना

Chrome DevTools में मौजूद परफ़ॉर्मेंस पैनल की मदद से, रिकॉर्ड की गई समयावधि के दौरान पेज के सभी व्यवहार की प्रोफ़ाइल (या ट्रेस) रिकॉर्ड की जा सकती है.

Chrome DevTools के परफ़ॉर्मेंस पैनल के ट्रेस में, फ़्लेम चार्ट दिखाया गया है. इसमें एक लंबे टास्क को हाइलाइट किया गया है
Chrome DevTools Performance Panel trace

परफ़ॉर्मेंस के बारे में अहम जानकारी, अहम जानकारी वाले साइड पैनल में उपलब्ध होती है. इसमें वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक भी दिखती हैं. साथ ही, उपलब्ध होने पर उनके लिए फ़ील्ड वैल्यू भी दिखती हैं.

लेआउट शिफ़्ट ट्रैक, लेआउट शिफ़्ट को हाइलाइट करता है. इन पर क्लिक करने से, उन एलिमेंट के बारे में ज़्यादा जानकारी मिलती है जो सीएलएस को डीबग करने के लिए शिफ़्ट हुए हैं.

एलसीपी जैसी मुख्य टाइमिंग, ट्रेस के सबसे नीचे मौजूद टाइमिंग में दिखती हैं. ज़्यादा जानकारी के लिए, इन पर क्लिक करें.

लंबे समय तक चलने वाले टास्क (जिनकी वजह से आईएनपी से जुड़ी समस्याएं हो सकती हैं) को भी फ़्लेम चार्ट में लाल रंग के त्रिकोण से हाइलाइट किया जाता है.

इन सुविधाओं के साथ-साथ, परफ़ॉर्मेंस पैनल के अन्य हिस्सों में मौजूद जानकारी से, यह पता लगाया जा सकता है कि सुधारों का किसी पेज की Core Web Vitals पर कोई असर पड़ रहा है या नहीं.

फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी से जुड़ी गड़बड़ियों को डीबग करना

लैब टूल, हमेशा उन सभी समस्याओं की वजह का पता नहीं लगा सकते जो आपके उपयोगकर्ताओं पर असर डालती हैं. इसी वजह से, फ़ील्ड का डेटा इकट्ठा करना बहुत ज़रूरी है. इसमें ऐसे फ़ैक्टर शामिल होते हैं जिन्हें लैब का डेटा शामिल नहीं कर सकता.

ज़्यादा जानकारी के लिए, फ़ील्ड में परफ़ॉर्मेंस को डीबग करना लेख पढ़ें.

तीसरा चरण: बदलावों पर नज़र रखना

Google के टूल के आइकॉन का कलेक्शन. बाईं से दाईं ओर, आइकॉन 'CrUX on BigQuery', 'CrUX API', 'PSI API', 'web-vitals.js' को दिखाते हैं. सबसे दाईं ओर 'Lighthouse CI' आइकॉन है.
बदलावों को मॉनिटर करने के लिए Google के टूल

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

कंटिन्यूअस इंटिग्रेशन (सीआई) एनवायरमेंट में परफ़ॉर्मेंस से जुड़ी ज़रूरी शर्तों को मॉनिटर करना

Lighthouse-CI की मदद से, कोड कमिट पर Lighthouse ऑडिट अपने-आप चलाए जा सकते हैं. इससे कोड में परफ़ॉर्मेंस रिग्रेशन को रोकने में मदद मिलती है. यह परफ़ॉर्मेंस टाइमिंग (जो बदल सकती हैं) या सिर्फ़ परफ़ॉर्मेंस ऑडिट की जांच कर सकता है. साथ ही, कोड में खराब तरीकों को रोकने के लिए, इसे लिंटिंग टूल के तौर पर इस्तेमाल किया जा सकता है.

आपको प्रोडक्शन से पहले ही परफ़ॉर्मेंस से जुड़ी सभी समस्याओं का पता लगाकर उन्हें ठीक कर लेना चाहिए. हालांकि, फ़ील्ड डेटा की निगरानी करने के लिए RUM का इस्तेमाल करना ज़रूरी है, ताकि कोई भी समस्या नज़रअंदाज़ न हो. ऐसे कई कमर्शियल आरयूएम प्रॉडक्ट उपलब्ध हैं जो इस काम में आपकी मदद कर सकते हैं. web-vitals JavaScript लाइब्रेरी, किसी वेबसाइट के फ़ील्ड डेटा को अपने-आप इकट्ठा कर सकती है. साथ ही, इस डेटा का इस्तेमाल कस्टम डैशबोर्ड और सूचना देने वाली सिस्टम को बेहतर बनाने के लिए किया जा सकता है.

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

नतीजा

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