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

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

पब्लिश किया गया: 28 मई, 2020

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

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट को खास तौर पर इस तरह से डिज़ाइन किया गया है कि इससे यह पता चल सके कि उपयोगकर्ताओं को आपकी वेबसाइट का अनुभव कैसा रहा. ये उपयोगकर्ता के हिसाब से मेट्रिक हैं. 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 डेटासेट में ज़रूरत के मुताबिक सैंपल हों. BigQuery डेटा को CrUX डैशबोर्ड में भी देखा जा सकता है, जिससे साइटें अपनी साइट के पुराने रुझानों की समीक्षा कर सकती हैं.

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

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

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

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

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

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

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

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

PageSpeed Insights (PSI)

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

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

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

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

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

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

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

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

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

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

Search Console

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

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

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

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

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

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

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

लाइटहाउस

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

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

लाइटहाउस का इस्तेमाल कब करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

यह पक्का करने के लिए कि आपकी वेबसाइट की Core Web Vitals मेट्रिक सही हैं, तीन चरणों का वर्कफ़्लो

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• एलसीपी को ऑप्टिमाइज़ करना
• सीएलएस को ऑप्टिमाइज़ करना
• आईएनपी मेट्रिक को ऑप्टिमाइज़ करना

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

PageSpeed Insights आपके लिए Lighthouse चलाता है. हालांकि, लोकल डेवलपमेंट के लिए, Chrome DevTools से भी Lighthouse को चलाया जा सकता है. इससे, लोकल तौर पर ठीक की गई समस्याओं की पुष्टि करने में मदद मिलती है.

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

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

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

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

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

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

इस व्यू में, परफ़ॉर्मेंस से जुड़ी समस्याओं की पहचान करने में मदद करने वाली काफ़ी अहम जानकारी मिलती है. हालांकि, ज़्यादा जानकारी के लिए, ट्रैक की मदद से ड्रिल-डाउन किया जा सकता है.

परफ़ॉर्मेंस पैनल की मदद से ड्रिल-डाउन करना

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

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

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

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

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

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

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

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

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

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

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

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

फ़ील्ड डेटा की मदद से, वेबसाइट की परफ़ॉर्मेंस के रुझान देखना

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

जिन साइटों पर आरयूएम (रियल यूज़र मेज़रमेंट) का समाधान नहीं है उनके लिए, फ़ील्ड डेटा के रुझान के बुनियादी विश्लेषण के तौर पर CrUX डैशबोर्ड का इस्तेमाल किया जा सकता है. यह CrUX में साइटों के लिए, इन चीज़ों की रिपोर्ट करता है:

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

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

नतीजा

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