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

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

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

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

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

CrUX डेटा सिर्फ़ तब उपलब्ध होता है, जब साइटें कुछ ज़रूरी शर्तें पूरी करती हैं. इनमें साइट की लोकप्रियता से जुड़ी थ्रेशोल्ड भी शामिल हैं. जब किसी पेज या ऑरिजिन के लिए CrUX डेटा उपलब्ध नहीं होता है, तो 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 डेटासेट में न दिखाया गया हो.

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

लाइटहाउस

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाए रखने के लिए, तीन चरणों वाला वर्कफ़्लो

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

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

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

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

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

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

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

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

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

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

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

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

सीएलएस के लिए, 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 चलाता है. Lighthouse को Chrome DevTools से भी चलाया जा सकता है. इससे, स्थानीय तौर पर सुधारों की पुष्टि करने में मदद मिलती है. हालांकि, परफ़ॉर्मेंस पैनल (इसके बारे में अगले लेख में बताया गया है) एक बेहतर टूल है. इससे, स्थानीय तौर पर परफ़ॉर्मेंस से जुड़ी समस्याओं की पहचान करने और उन्हें ठीक करने में मदद मिलती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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