Google के टूल का इस्तेमाल करके, अपनी वेबसाइट को ऑडिट, बेहतर, और मॉनिटर करें.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, मेट्रिक का एक ऐसा सेट है जो उपयोगकर्ताओं के अनुभव का आकलन करता है. इन मेट्रिक में, पेज लोड होने की परफ़ॉर्मेंस, उपयोगकर्ता के इनपुट का जवाब, और लेआउट की स्थिरता जैसी चीज़ें शामिल हैं.
आपकी वेबसाइट के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली सुविधा को बेहतर बनाने के वर्कफ़्लो को इस गाइड में एक्सप्लोर किया जाएगा. हालांकि, वर्कफ़्लो की शुरुआत कहां से होती है, यह इस बात पर निर्भर करता है कि आप अपना फ़ील्ड डेटा इकट्ठा कर रहे हैं या नहीं. यह इस पर निर्भर कर सकता है कि जहां यह खत्म होता है, वहां Google के कौनसे टूल आपको उपयोगकर्ता अनुभव से जुड़ी समस्याओं का पता लगाने और उन्हें ठीक करने में उपयोगी लगते हैं.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, फ़ील्ड में सबसे अच्छी तरह मापी जाती है
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को खास तौर पर यह मेज़र करने के लिए डिज़ाइन किया गया है कि आपकी वेबसाइट पर लोगों को कैसा अनुभव मिलता है. ये उपयोगकर्ताओं को ध्यान में रखकर बनाई गई मेट्रिक हैं. लाइटहाउस जैसे लैब आधारित टूल, परफ़ॉर्मेंस से जुड़ी संभावित समस्याओं और सबसे सही तरीकों को हाइलाइट करने के लिए, गड़बड़ी का पता लगाने वाले टूल हैं. लैब में इस्तेमाल किए जाने वाले टूल, पहले से तय की गई कुछ स्थितियों में ही चलाए जाते हैं. ऐसा हो सकता है कि इन टूल की मदद से, लोगों को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी मिल जाए.
उदाहरण के लिए, लाइटहाउस लैब में काम करने वाला टूल है. यह सिम्युलेटेड डेस्कटॉप या मोबाइल एनवायरमेंट में, सिम्युलेटेड थ्रॉटलिंग के साथ जांच करता है. हालांकि, धीमे नेटवर्क और डिवाइस की स्थितियों के ऐसे सिम्युलेशन से परफ़ॉर्मेंस से जुड़ी समस्याओं का पता लगाने में मदद मिलती है, लेकिन नेटवर्क और डिवाइस की क्षमता से जुड़ी अलग-अलग चीज़ों का सिर्फ़ एक छोटा सा हिस्सा दिखता है. इसलिए, हो सकता है कि आपकी साइटों पर उपयोगकर्ताओं को अनुभव न मिले.
लाइटहाउस जैसे लैब में काम करने वाले टूल भी आम तौर पर "कोल्ड लोड" का काम करते हैं एक पूरी तरह से नए विज़िटर के रूप में गिने जाते हैं. आम तौर पर, यह सबसे धीमा लोड होता है. हालांकि, असल में वेबसाइट पर आने वाले लोगों को कुछ ऐसेट कैश मेमोरी में सेव होती हैं. ऐसा तब होता है, जब वे पहले कभी साइट पर गए हों या साइट पर ब्राउज़ कर रहे हों. वेबसाइट पर आने वाले नए लोगों और टूल को भी साइट का अनुभव, कुकी बैनर या अन्य कॉन्टेंट की वजह से अलग तरह से दिख सकता है.
कम शब्दों में कहें, तो लैब में काम करने वाले टूल, परफ़ॉर्मेंस से जुड़ी संभावित समस्याओं का पता लगाने के साथ-साथ, डीबग करने और उसे बार-बार करने में आपकी मदद कर सकते हैं. हालांकि, हो सकता है कि वे यह न बताएं कि आपकी वेबसाइट पर आने वाले कितने लोगों ने असल में वेबसाइट का इस्तेमाल किया. असल दुनिया में प्रॉडक्ट की परफ़ॉर्मेंस का आकलन करने के लिए, फ़ील्ड डेटा का इस्तेमाल करें. साथ ही, इसे बेहतर बनाने के लिए, लाइटहाउस जैसे लैब वाले टूल का इस्तेमाल करें. Lighthouse का इस्तेमाल कब करें सेक्शन भी देखें.
Google, Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX) की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन करता है. यह सार्वजनिक डेटासेट है, जिसे Chrome के असली उपयोगकर्ताओं से इकट्ठा किया गया है. यह Google और तीसरे पक्ष के उन कई टूल का अहम हिस्सा है जो किसी साइट की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देते हैं.
हालांकि, CrUX की अपनी सीमाएं हैं. आम तौर पर, इससे आपको यह पता चल सकता है कि कोई समस्या कब हुई. हालांकि, इसके वजह के बारे में बताने के लिए अक्सर डेटा काफ़ी नहीं होता.
अगर हो सके, तो अपना फ़ील्ड डेटा इकट्ठा करें
आपने जो डेटासेट बनाया है, वह फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने के लिए सबसे अच्छा डेटासेट है. इसके लिए सबसे पहले, आपकी वेबसाइट पर आने वाले लोगों का फ़ील्ड डेटा इकट्ठा किया जाता है. इसे करने का तरीका आपके संगठन के साइज़ पर निर्भर करता है. साथ ही, आपको तीसरे पक्ष के किसी समाधान के लिए पेमेंट करना है या अपना खाता बनाना है.
पैसे चुकाकर ली गई सुविधाएं, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और परफ़ॉर्मेंस की अन्य मेट्रिक को ज़रूर मापती हैं. साथ ही, आम तौर पर इन मेट्रिक से मिलने वाले डेटा को बेहतर तरीके से समझने के लिए, अलग-अलग तरह के टूल उपलब्ध कराए जाते हैं. अहम संसाधनों वाले बड़े संगठनों में, यह एक पसंदीदा तरीका हो सकता है.
हालांकि, ऐसा हो सकता है कि आप किसी बड़े संगठन का हिस्सा न हों या आपके पास तीसरे पक्ष का समाधान उपलब्ध कराने का तरीका भी हो. ऐसे मामलों में, Google की web-vitals
लाइब्रेरी आपको वेबसाइट की सभी ज़रूरी जानकारी इकट्ठा करने में मदद करेगी. हालांकि, उस डेटा को रिपोर्ट करने, सेव करने, और उसका विश्लेषण करने के तरीके की ज़िम्मेदारी आपकी होगी.
अगर आपने पहले से ही Google Analytics का इस्तेमाल किया है, लेकिन आपने अपना फ़ील्ड डेटा इकट्ठा करना शुरू नहीं किया है, तो हो सकता है कि आप web-vitals
लाइब्रेरी का इस्तेमाल करके, फ़ील्ड में इकट्ठा की गई वेब की ज़रूरी जानकारी वाला डेटा Google Analytics को भेजें. साथ ही, डेटा की रिपोर्ट पाने के लिए, GA4 के BigQuery Export इस्तेमाल करें.
Google के टूल को समझें
भले ही, आप अपना फ़ील्ड डेटा खुद इकट्ठा कर रहे हों, Google के ऐसे कई टूल हैं जिनकी मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का विश्लेषण किया जा सकता है. वर्कफ़्लो शुरू करने से पहले, हर टूल के बारे में खास जानकारी से आपको यह समझने में मदद मिल सकती है कि आपके लिए कौनसे टूल बेहतर काम कर सकते हैं और कौनसे नहीं.
Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX)
जैसा कि पहले बताया गया है, CrUX, फ़ील्ड डेटा का सार्वजनिक डेटासेट है जो लाखों वेबसाइटों से Google Chrome का इस्तेमाल करने वाले असली उपयोगकर्ताओं के सेगमेंट से इकट्ठा किया जाता है. इसमें वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक और अन्य मेट्रिक शामिल होती हैं. ये ऐसी वेबसाइटें होती हैं जिन पर ज़रूरत के मुताबिक ट्रैफ़िक आता है.
CrUX, ऑरिजिन लेवल पर हर महीने के BigQuery डेटासेट के तौर पर या यूआरएल या ऑरिजिन-लेवल पर रोज़ के एपीआई के तौर पर उपलब्ध होता है. हालांकि, इसके लिए ज़रूरी है कि यूआरएल या ऑरिजिन में, CrUX डेटासेट में ज़रूरत के मुताबिक सैंपल मौजूद हों. BigQuery डेटा को CrUX डैशबोर्ड में भी देखा जा सकता है, जो साइटों को अपनी साइट के पुराने रुझानों की समीक्षा करने की अनुमति देता है.
CrUX का इस्तेमाल कब करना चाहिए
भले ही आप अपना फ़ील्ड डेटा खुद इकट्ठा करें, तब भी CrUX काम का होता है. हालांकि, CrUX, Chrome इस्तेमाल करने वाले लोगों के एक सबसेट को दिखाता है, लेकिन अपनी वेबसाइट के फ़ील्ड डेटा की तुलना करके यह जाना जा सकता है कि यह CrUX डेटा के साथ कैसे काम करता है. दोनों के अपने फ़ायदे और नुकसान हैं, जिनकी वजह से इनमें अंतर हो सकता है. अगर वेबसाइट के लिए कोई फ़ील्ड डेटा इकट्ठा नहीं किया जाता है, तो ज़्यादा जानकारी देने के लिए CrUX खास तौर पर काम करता है. हालांकि, इसके लिए ज़रूरी है कि आपकी वेबसाइट को इसके डेटासेट में दिखाया गया हो.
CrUX का इस्तेमाल सीधे तौर पर किया जा सकता है या किसी दूसरे टूल का इस्तेमाल किया जा सकता है. इनमें यहां बताए गए टूल भी शामिल हैं. BigQuery या एपीआई का इस्तेमाल करके सीधे CrUX डेटासेट का इस्तेमाल करने से, वह डेटा देखने में मदद मिलती है जो दूसरे टूल में नहीं दिखाया जाता. उदाहरण के लिए, दूसरे टूल में देश के स्तर का डेटा अक्सर उपलब्ध नहीं होता. इसके अलावा, CrUX में अतिरिक्त मेट्रिक देखने से भी मदद मिलती है, जो आम तौर पर अन्य टूल में नहीं दिखती.
CrUX का इस्तेमाल कब नहीं करना चाहिए
CrUX सिर्फ़ Chrome के उपयोगकर्ताओं का प्रतिनिधित्व करता है. भले ही, यह Chrome उपयोगकर्ताओं का सिर्फ़ एक सबसेट हो. RUM की पूरी जानकारी वाले समाधान में, Chrome और ऐसे दूसरे ब्राउज़र के लिए ज़्यादा अनुभव शामिल किए जा सकते हैं जहां वे वेब वाइटल मेट्रिक के साथ काम करते हैं.
जिन वेबसाइटों को ज़रूरी ट्रैफ़िक नहीं मिलता उन्हें CrUX डेटासेट में नहीं दिखाया जाता. अगर आपके मामले में ऐसा है, तो आपको यह समझने के लिए अपना फ़ील्ड डेटा इकट्ठा करना होगा कि आपकी वेबसाइट उस फ़ील्ड में कैसा परफ़ॉर्म कर रही है. ऐसा इसलिए, क्योंकि CrUX का इस्तेमाल नहीं किया जा सकता. इसके अलावा, आपको लैब डेटा का इस्तेमाल करना होगा. हालांकि, कुछ सीमाओं के साथ ऐसा हो सकता है कि यह पहले बताई गई शर्तों के मुताबिक न हो.
CrUX से जो डेटा मिलता है वह पिछले 28 दिनों का रोलिंग औसत है. इसलिए, डेवलपमेंट के दौरान यह टूल बेहतर नहीं होगा. ऐसा इसलिए है, क्योंकि CrUX डेटासेट में सुधार दिखने में काफ़ी समय लगेगा.
आखिर में, सार्वजनिक डेटासेट के तौर पर, CrUX इस बात तक सीमित है कि वह कितनी जानकारी उपलब्ध करा सकता है और इस डेटा के लिए किस तरह से क्वेरी की जा सकती है. अपने आरयूएम डेटा को कैप्चर करके, ज़्यादा जानकारी इकट्ठा की जा सकती है, जैसे कि एलसीपी एलिमेंट. साथ ही, समस्याओं की पहचान करने के लिए, डेटा को सेगमेंट में बांटा जा सकता है. क्या लॉग आउट करने वाले उपयोगकर्ताओं के मुकाबले, लॉग इन किए हुए उपयोगकर्ताओं को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का अनुभव बेहतर या खराब लगता है? क्या धीमे एलसीपी वाले उपयोगकर्ताओं में कोई खास एलसीपी एलिमेंट होता है? किन इंटरैक्शन की वजह से एफ़आईडी और आईएनपी की वैल्यू ज़्यादा है?
PageSpeed Insights (PSI)
PSI एक ऐसा टूल है जो किसी पेज के लिए, CrUX और लाइटहाउस से फ़ील्ड डेटा को रिपोर्ट करता है. ज़्यादा जानकारी के लिए, अलग-अलग सेक्शन को देखें.
पीएसआई का इस्तेमाल कब करना चाहिए
PSI, मोबाइल और डेस्कटॉप, दोनों के उपयोगकर्ताओं के लिए पेज के लेवल या ऑरिजिन लेवल पर CrUX परफ़ॉर्मेंस का आकलन करने का एक बेहतरीन तरीका है. किसी पेज या साइट के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला यह एक अच्छा विकल्प है. इससे आपको प्रतिस्पर्धियों जैसी अन्य साइटों के लिए, Core Web Vitals का डेटा भी दिखेगा.
पीएसआई, लाइटहाउस का डेटा भी उपलब्ध कराता है. अगर मेट्रिक एक जैसी हो, तो वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को बेहतर बनाने के लिए, यह ज़रूरी सुझाव देता है. अगर ये एक जैसी नहीं हैं, तो हो सकता है कि लाइटहाउस के सुझाव आपके लिए कम काम के हों.
लाइटहाउस सर्वर से चलाया जाता है, इसलिए यह DevTools से लाइटहाउस चलाने के मुकाबले ज़्यादा एक जैसी बेसलाइन बना सकता है.
PSI का इस्तेमाल कब नहीं करना चाहिए
पीएसआई सिर्फ़ सार्वजनिक यूआरएल के लिए उपलब्ध है. इसका इस्तेमाल ऐसी डेवलपमेंट साइटों पर नहीं किया जा सकता जिन्हें सार्वजनिक तौर पर ऐक्सेस नहीं किया जा सकता.
CrUX डेटा सिर्फ़ तब उपलब्ध होता है, जब साइटें कुछ ज़रूरी शर्तें पूरी करती हों. इनमें, साइट की लोकप्रियता के लिए तय की गई सीमाएं भी शामिल हैं. PSI तब कम मददगार होता है, जब किसी पेज या ऑरिजिन के लिए CrUX डेटा उपलब्ध न हो, क्योंकि इन मामलों में यह सिर्फ़ लाइटहाउस लैब का डेटा दिखा सकता है.
इसी तरह, अगर आपके पास जांच किए जा रहे किसी खास यूआरएल के बजाय, सिर्फ़ ऑरिजिन-लेवल का CrUX डेटा है, तो इससे ऑरिजिन-लेवल फ़ील्ड के डेटा को पेज लेवल के लैब डाइग्नोस्टिक्स के साथ जोड़ने की ज़रूरत भी सीमित हो जाती है. ऑरिजिन-लेवल फ़ील्ड का डेटा, साइट की परफ़ॉर्मेंस की खास जानकारी के तौर पर अब भी काफ़ी काम का है. साथ ही, लाइटहाउस ऑडिट से मदद मिल सकती है. हालांकि, इस मामले में ज़्यादा सावधानी बरतनी चाहिए.
अगर CrUX में पेज लेवल का डेटा उपलब्ध है, लेकिन यह लाइटहाउस लैब डेटा से अलग है, तो लाइटहाउस से मिलने वाले सुझाव सीमित संख्या में हो सकते हैं. ऐसा खास तौर पर, लोड होने के बाद सीएलएस से जुड़ी समस्याओं के साथ-साथ, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक (एफ़आईडी और आईएनपी) में हो सकता है, जहां लैब वाले ऑडिट ज़्यादा काम के नहीं होते.
Search Console
Search Console, आपकी साइट के खोज ट्रैफ़िक और परफ़ॉर्मेंस का आकलन करता है. इसमें वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी भी शामिल है. यह सुविधा सिर्फ़ साइट के उन मालिकों के लिए उपलब्ध है जिन्होंने साइट पर अपने मालिकाना हक की पुष्टि की हो.
Search Console की एक खास सुविधा यह है कि यह मिलते-जुलते पेजों (जैसे, एक ही टेंप्लेट का इस्तेमाल करने वाले पेज) को एक ग्रुप में बांटता है. Search Console में, CrUX के फ़ील्ड डेटा के आधार पर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट भी शामिल होती है.
Search Console का इस्तेमाल कब करना चाहिए
Search Console, डेवलपर के साथ-साथ उन लोगों के लिए भी सही है जो डेवलपर के तौर पर काम नहीं करते. साथ ही, यह Search और पेज की परफ़ॉर्मेंस का आकलन ऐसे तरीकों से करता है जो Google के अन्य टूल काम नहीं करते. CrUX डेटा के इस प्रज़ेंटेशन और मिलते-जुलते पेजों के ग्रुप बनाने से, इस बात की अहम जानकारी मिलती है कि परफ़ॉर्मेंस में सुधार करने से, पेजों की सभी कैटगरी पर क्या असर पड़ता है.
Search Console का इस्तेमाल कब नहीं करना चाहिए
ऐसा हो सकता है कि Search Console उन प्रोजेक्ट के लिए सही न हो जो तीसरे पक्ष के अलग-अलग टूल का इस्तेमाल करते हैं. ये टूल, एक जैसे पेजों का ग्रुप बनाते हैं या अगर CrUX डेटासेट में किसी वेबसाइट को नहीं दिखाया जाता है.
पेज ग्रुपिंग की सुविधा तब भी मुश्किल हो सकती है, जब किसी ग्रुप में मौजूद उदाहरण वाले पेजों की विशेषताएं, बाकी ग्रुप के पेजों से अलग हों. उदाहरण के लिए, जब सभी पेज, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली किसी खास मेट्रिक में फ़ेल हो जाते हों, लेकिन उदाहरण वाले सभी पेज एक ही वेबसाइट की परफ़ॉर्मेंस की एक जैसी जानकारी पास कर रहे हों. ऐसा तब हो सकता है, जब किसी ग्रुप में ज़्यादा पेज शामिल हों या जिन पेजों को कभी-कभी विज़िट किया गया हो. इन पेजों को लोड होने में ज़्यादा समय लग सकता है, क्योंकि लोगों के कैश मेमोरी में सेव होने की संभावना कम होती है. जब लॉन्ग टेल में इन पेजों की संख्या काफ़ी होती है, तो ये ग्रुप के पास होने की कुल दर पर असर डाल सकती हैं.
लाइटहाउस
Lighthouse एक लैब टूल है, जो पेज की परफ़ॉर्मेंस को बेहतर बनाने के खास अवसर उपलब्ध कराता है. Lighthouse यूज़र फ़्लो की मदद से डेवलपर, पेज लोड के अलावा अन्य तरीकों से परफ़ॉर्मेंस की जांच करने के लिए, इंटरैक्शन फ़्लो को स्क्रिप्ट कर सकते हैं.
Lighthouse-CI इससे जुड़ा एक टूल है. यह प्रोजेक्ट बनाने के दौरान लाइटहाउस का इस्तेमाल करता है और परफ़ॉर्मेंस रिग्रेशन टेस्टिंग में मदद के लिए उसे डिप्लॉय करता है. यह पुल के अनुरोधों के साथ लाइटहाउस रिपोर्ट दिखाता है. साथ ही, यह समय के साथ परफ़ॉर्मेंस मेट्रिक को ट्रैक करता है.
लाइटहाउस का इस्तेमाल कब करें
लाइटहाउस, लोकल और स्टेजिंग, दोनों प्लैटफ़ॉर्म में डेवलपमेंट के दौरान परफ़ॉर्मेंस को बेहतर बनाने के अवसर खोजने के लिए बेहतरीन है. लाइटहाउस सीआई उसी तरह से काम आता है जिसका इस्तेमाल प्लैटफ़ॉर्म को स्टेजिंग और प्रोडक्शन में, अलग-अलग चरणों को बनाने और डिप्लॉय करने में किया जाता है. यहां परफ़ॉर्मेंस रिग्रेशन की जांच करने की ज़रूरत होती है, ताकि उपयोगकर्ताओं को अच्छा अनुभव मिल सके.
लाइटहाउस का इस्तेमाल कब नहीं करना है
लाइटहाउस या लाइटहाउस CI, फ़ील्ड डेटा का विकल्प नहीं है. लाइटहाउस मुख्य रूप से गड़बड़ी की जानकारी देने वाला एक टूल है. इसमें, पहले से तय पेज के लोड होने से जुड़ी संभावित समस्याओं और सबसे सही तरीकों की जानकारी मौजूद होती है. ऐसा हो सकता है कि दिखाए जाने वाले सुझाव, आपके उपयोगकर्ताओं की परफ़ॉर्मेंस से हमेशा मेल न खाएं.
हालांकि, लाइटहाउस का इस्तेमाल PageSpeed Insights जैसे टूल की मदद से प्रोडक्शन साइटों का पता लगाने के लिए किया जा सकता है, लेकिन आम तौर पर लाइटहाउस का इस्तेमाल डेवलपमेंट और लगातार इंटिग्रेशन के एनवायरमेंट में किया जाता है, ताकि प्रोडक्शन से पहले ही परफ़ॉर्मेंस की समस्याओं को ठीक किया जा सके.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला एक्सटेंशन
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला Chrome एक्सटेंशन, गड़बड़ी की जानकारी देने वाला एक टूल है. यह टूल, वेब ब्राउज़ करते समय वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक की जानकारी देता है. अगर मौजूदा पेज को CrUX डेटासेट में दिखाया गया है, तो इसमें उसका CrUX डेटा भी शामिल होता है. साथ ही, डीबग करने की जानकारी भी मिलती है, जिससे आपको वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली समस्याओं का पता लगाने में मदद मिलती है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले एक्सटेंशन का इस्तेमाल कब करना चाहिए
'वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी' के एक्सटेंशन का इस्तेमाल कोई भी व्यक्ति, पेज की लाइफ़साइकल के दौरान किसी भी समय, किसी पेज की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन कर सकता है. यह एक "लाइव" के रूप में उपयोगी है परफ़ॉर्मेंस की समस्याओं का पता लगाने के लिए, पेज के साथ इंटरैक्ट करते समय परफ़ॉर्मेंस का व्यू. खास तौर पर, सीएलएस और आईएनपी मेट्रिक की मदद से लोड होने के बाद की समस्याओं के बारे में.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले एक्सटेंशन का इस्तेमाल कब नहीं करना चाहिए
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले एक्सटेंशन से, पेज की परफ़ॉर्मेंस का पूरा आकलन नहीं होता है. साथ ही, यह जिन मेट्रिक की रिपोर्ट करता है वे उस एनवायरमेंट पर काफ़ी निर्भर करती हैं जिसमें यह सिस्टम चलता है. साथ ही, डेवलपर के पास अक्सर ज़्यादा क्षमता वाली मशीनें या तेज़ रफ़्तार वाले नेटवर्क का ऐक्सेस होता है.
Chrome DevTools में परफ़ॉर्मेंस पैनल
Chrome DevTools, ब्राउज़र डेवलपमेंट टूल का एक कलेक्शन है. इसमें परफ़ॉर्मेंस पैनल भी शामिल है. परफ़ॉर्मेंस पैनल, एक लैब टूल है. यह पेज लोड होने या रिकॉर्ड की गई समयावधि के दौरान, पेज पर होने वाली सभी गतिविधियों की प्रोफ़ाइल बनाता है. इस रिपोर्ट में अलग-अलग डाइमेंशन में होने वाली हर गतिविधि के बारे में अहम जानकारी मिलती है. इन डाइमेंशन में नेटवर्क, रेंडरिंग, पेंटिंग, और स्क्रिप्टिंग गतिविधि शामिल है. साथ ही, यहां किसी पेज की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी भी दी जाती है.
परफ़ॉर्मेंस पैनल का इस्तेमाल कब करना चाहिए
डेवलपर को परफ़ॉर्मेंस पैनल का इस्तेमाल, डेवलपमेंट के दौरान पेज की परफ़ॉर्मेंस के बारे में बेहतर जानकारी पाने के लिए करना चाहिए. इससे खास तौर पर, एफ़आईडी या आईएनपी पर असर डालने वाली समस्याओं को डीबग करने में मदद मिलती है. खराब तरीके से काम करने वाले इंटरैक्शन की पहचान करने और उसे बार-बार दोहराने से, परफ़ॉर्मेंस पैनल से यह पता चलता है कि ब्राउज़र में क्या चल रहा है. इससे, समस्या को समझने में मदद मिलती है. इसमें मुख्य थ्रेड को ब्लॉक करने से लेकर, JavaScript कॉल स्टैक तक और काम को रेंडर करने के तरीके शामिल हैं.
परफ़ॉर्मेंस पैनल का इस्तेमाल कब नहीं करना चाहिए
परफ़ॉर्मेंस पैनल एक डेवलपर टूल है, जो सिर्फ़ लैब का डेटा उपलब्ध कराता है. यह फ़ील्ड डेटा का विकल्प नहीं है. इसमें डीबग करने के बारे में बहुत सारी जानकारी है. हालांकि, इस वजह से नए डेवलपर या डेवलपर के अलावा अन्य लोगों को इसे समझने में परेशानी हो सकती है.
यह पक्का करने के लिए कि आपकी वेबसाइट की Core Web Vitals मेट्रिक सही हैं, तीन चरणों का वर्कफ़्लो
उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, इस प्रोसेस को एक लगातार चलने वाली प्रोसेस के तौर पर देखना बेहतर होगा. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और अन्य परफ़ॉर्मेंस मेट्रिक को बेहतर बनाने के लिए, इनमें से कोई एक तरीका अपनाया जा सकता है:
- वेबसाइट की परफ़ॉर्मेंस का आकलन करें और समस्याओं की पहचान करें.
- डीबग और ऑप्टिमाइज़ करें.
- रिग्रेशन की पहचान करने और उसे रोकने के लिए, लगातार इंटिग्रेशन टूल की मदद से मॉनिटर करें.
पहला चरण: वेबसाइट की परफ़ॉर्मेंस का आकलन करना और उसे बेहतर बनाने के अवसरों की पहचान करना
वेबसाइट की परफ़ॉर्मेंस का आकलन करने के लिए, बेहतर होगा कि आप फ़ील्ड डेटा से शुरुआत करें.
- PageSpeed Insights का इस्तेमाल करके, ऑरिजिन पेज पर वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के साथ-साथ किसी एक यूआरएल की खास जानकारी देखें.
- Search Console के ज़रिए ऐसे पेजों की पहचान की जा सकती है जिनमें सुधार की ज़रूरत है. साथ ही, जहां पेज ग्रुपिंग सुविधा आपकी साइट के लिए अच्छी तरह काम करती है.
- अगर आपके पास आरयूएम डेटा है, तो खास तौर पर उन पेजों या ट्रैफ़िक सेगमेंट की पहचान करने का यह सबसे अच्छा विकल्प होता है जिनमें समस्याएं हैं.
चाहे आप खुद इकट्ठा किए गए फ़ील्ड डेटा या CrUX डेटा का विश्लेषण करें, यह पहला कदम ज़रूरी है. अगर फ़ील्ड का डेटा इकट्ठा नहीं किया जा रहा है, तो फिर से निर्देश देने के लिए CrUX डेटा काफ़ी हो सकता है. हालांकि, इसके लिए ज़रूरी है कि आपकी वेबसाइट को डेटासेट में दिखाया गया हो.
PageSpeed Insights की मदद से साइट की परफ़ॉर्मेंस का विश्लेषण करें
PageSpeed Insights टूल, 75वें पर्सेंटाइल पर उपयोगकर्ता अनुभव से जुड़े पिछले 28 दिनों के CrUX डेटा को दिखाता है. इसका मतलब है कि अगर 75% उपयोगकर्ता अनुभव किसी मेट्रिक के लिए तय की गई सीमा से ज़्यादा मेल खाते हैं, तो अनुभव को "अच्छा" माना जाता है.
अगर आपने किसी खास पेज की परफ़ॉर्मेंस देखने के बारे में सोचा है, तो उसी पेज का इस्तेमाल करें. जब आप पहली बार ऑप्टिमाइज़ करना शुरू करते हैं, तो साइट के पूरे व्यू के लिए, हो सकता है कि आप होम पेज से शुरू करना चाहें. ऐसा इसलिए, क्योंकि आम तौर पर यह कई साइटों के सबसे लोकप्रिय पेजों में से एक होता है.
शुरुआत में पीएसआई के आपके असल उपयोगकर्ताओं को क्या अनुभव हो रहा है सेक्शन पर ध्यान दें. आपको डेटा के चार व्यू दिखेंगे: डाले गए यूआरएल और पूरे ऑरिजिन के लिए, मोबाइल और डेस्कटॉप. इनकी तुलना करें और देखें कि इनमें क्या अंतर है. डेस्कटॉप की तुलना में मोबाइल की परफ़ॉर्मेंस आम तौर पर कम होती है. ऐसा इसलिए होता है, क्योंकि इस पर कम संसाधनों वाला डिवाइस काम करता है और यह नेटवर्क के साथ काम नहीं करता है. अगर यूआरएल और ऑरिजिन डेटा काफ़ी अलग-अलग हैं, तो इसकी वजह समझने की कोशिश करें: होम पेज अक्सर सबसे पहले देखे गए पेज (यानी, लैंडिंग पेज) होते हैं, इसलिए वे उस ऑरिजिन से धीमे हो सकते हैं जिस पर उपयोगकर्ताओं को बिना प्राथमिकता वाले ब्राउज़र कैश का पूरा असर पड़ता है. बाद वाले पेज तेज़ी से लोड होंगे, क्योंकि शेयर की गई सभी ऐसेट कैश मेमोरी में सेव होंगी. इससे, ऑरिजिन-लेवल का कुल डेटा कम हो जाएगा.
पीएसआई, वेबसाइट की परफ़ॉर्मेंस की सभी तीन मेट्रिक (एलसीपी, सीएलएस, और एफ़आईडी) और आईएनपी मेट्रिक की मंज़ूरी बाकी है. साथ ही, टीटीएफ़बी और एफ़सीपी की परफ़ॉर्मेंस से जुड़ी जानकारी भी दिखाता है. क्या कोई वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक में कोई गड़बड़ी है या कोई गड़बड़ी है? इससे यह पता चलेगा कि आपको कौनसी कोशिश करनी है.
इन संख्याओं के बीच के संबंधों को समझें—खास तौर पर एलसीपी के लिए. अगर एलसीपी धीमी है, तो जैसा कि इस उदाहरण में दिखाया गया है, टीटीएफ़बी और एफ़सीपी देखें. ये दोनों मेट्रिक के लिए माइलस्टोन हैं. इस उदाहरण में हमने 1.8 सेकंड का TTFB बनाया है. इसकी वजह से, अच्छे एलसीपी के लिए सुझाए गए 2.5 सेकंड के थ्रेशोल्ड को पूरा करना बहुत मुश्किल हो गया है. इससे पता चलता है कि बैकएंड धीमा हो सकता है (सर्वर की समस्याएं या सीडीएन की कमी), नेटवर्क धीमा होना या पहले एचटीएमएल बाइट में देरी करने वाले रीडायरेक्ट. ज़्यादा जानकारी के लिए टीटीएफ़बी ऑप्टिमाइज़ करने से जुड़ी गाइड देखें. एफ़सीपी को ध्यान में रखकर एक और बार एफ़सीपी ली जाती है. यह फिर से धीमे नेटवर्क का संकेत हो सकता है. इस उदाहरण में, एफ़सीपी के बाद एलसीपी का कोई जवाब नहीं है. इसमें बताया गया है कि पेज लोड होने के बाद, एलसीपी संसाधन को अच्छी तरह से ऑप्टिमाइज़ किया गया है.
सीएलएस के लिए, CrUX CLS और लाइटहाउस CLS का स्कोर देखें. इससे यह पता लगाया जा सकता है कि क्या यह लोड होने वाली सीएलएस समस्या है (जिस पर लाइटहाउस, उसे पकड़ेगा और सुझाव देगा) या लोड होने के बाद की सीएलएस समस्या है, जिसे लाइटहाउस नहीं पकड़ पाएगा. ज़्यादा जानकारी के लिए, Optimize की सीएलएस गाइड देखें.
रिस्पॉन्सिवनेस के लिए, एफ़आईडी और आईएनपी स्कोर देखें. लाइटहाउस में टीबीटी ऑडिट देखें और पता लगाएं कि क्या शुरुआती पेज लोड होने के दौरान बहुत ज़्यादा JavaScript प्रोसेसिंग हो रही है. इससे आईएनपी पर असर पड़ने की संभावना है. आईएनपी को बेहतर बनाने के लिए मेट्रिक में थोड़ी मुश्किल हो सकती है. ज़्यादा जानकारी के लिए, आईएनपी ऑप्टिमाइज़ करने की गाइड देखें.
Search Console में खराब परफ़ॉर्मेंस वाले पेजों की पहचान करना
पीएसआई तब काम आता है, जब आपके पास कोई ऐसा यूआरएल हो जिसकी आपको जांच करनी है या पूरी साइट. Search Console, खास तरह के पेजों के लिए आपकी कोशिशों को टारगेट करने में मदद कर सकता है. यह सुविधा खास तौर पर तब काम आती है, जब कई पेजों पर एक जैसी थीम या टेक्नोलॉजी मिलती हों और Search Console इन पेजों को पहचान सकता हो.
Search Console में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट से आपको वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी मिलती है. हालांकि, आपको अब भी कुछ ऐसे पेजों की जानकारी पाने का विकल्प मिलता है जिन पर ध्यान देने की ज़रूरत है. Search Console की मदद से, ये काम भी किए जा सकते हैं:
- ऐसे अलग-अलग पेज ग्रुप की पहचान करें जिनमें सुधार की ज़रूरत है और जो बेहतर उपयोगकर्ता अनुभव देते हैं.
- स्टेटस, मेट्रिक, और मिलते-जुलते वेब पेजों के ग्रुप (जैसे, किसी ई-कॉमर्स वेबसाइट पर प्रॉडक्ट की जानकारी वाले पेज) के हिसाब से, यूआरएल की परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी वाला डेटा पाएं.
- ज़्यादा जानकारी वाली रिपोर्ट पाएं. इसमें मोबाइल और डेस्कटॉप, दोनों के लिए उपयोगकर्ता अनुभव की हर क्वालिटी की कैटगरी में बकेट यूआरएल शामिल करें.
जब आपके पास देखने के लिए कुछ खास पेज हों, तो उन पेजों की समस्याओं के बारे में ज़्यादा समझने के लिए, पीएसआई का इस्तेमाल किया जा सकता है. इसका तरीका ऊपर बताया गया है.
दूसरा चरण: डीबग और ऑप्टिमाइज़ करना
पहले चरण में, आपको ऐसे पेजों की पहचान करनी चाहिए जिनकी परफ़ॉर्मेंस में सुधार करना ज़रूरी है. साथ ही, आपको यह भी बताना होगा कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली किन मेट्रिक में आपको सुधार करना है. Google टूल का इस्तेमाल करके, समस्या की असल वजह को समझा जा सकता है. इससे, आपको समस्या की ज़्यादा जानकारी मिल सकती है.
- पेज-लेवल पर दिशा-निर्देश पाने के लिए, Lighthouse ऑडिट करें
- वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले एक्सटेंशन का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का रीयल टाइम में विश्लेषण करें.
- परफ़ॉर्मेंस की समस्याओं को डीबग करने और कोड में हुए बदलावों की जांच करने के लिए, Chrome DevTools में परफ़ॉर्मेंस पैनल का इस्तेमाल करें.
ज़्यादा जानकारी के लिए, ये गाइड देखें:
लाइटहाउस की मदद से नए-नए मौके पाएं
PageSpeed Insights टूल आपके लिए लाइटहाउस चलाता है. हालांकि, लोकल डेवलपमेंट के लिए, Chrome DevTools से लाइटहाउस को चलाया जा सकता है. इसकी मदद से, स्थानीय तौर पर सुधारों की पुष्टि की जा सकती है.
खास बात यह है कि इस बात की पुष्टि की जा सकती है कि लाइटहाउस ऑडिट उन समस्याओं की नकल कर रहा है जिन्हें आपको हल करना है. उदाहरण के लिए, एलसीपी धीमी या सीएलएस से जुड़ी समस्याएं. लाइटहाउस सिर्फ़ पेज लोड होने के दौरान उपयोगकर्ता अनुभव का आकलन करता है. यह एक लैब टूल है. इसलिए, टीबीटी के लिए एफ़आईडी और आईएनपी को भी शामिल नहीं किया गया है.
जब लाइटहाउस की मेट्रिक, उस समस्या से मिलती-जुलती समस्या का सुझाव देती है जिसे हल करने की कोशिश की जा रही है, तो ऑडिट में मौजूद ज़रूरी जानकारी से समस्याओं की पहचान करने और उन्हें हल करने के सुझाव मिल सकते हैं.
ऑडिट को सिर्फ़ वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के हिसाब से फ़िल्टर किया जा सकता है. इससे आपको किसी मेट्रिक से जुड़ी समस्याओं को ठीक करने पर ध्यान देने में मदद मिलेगी:
एफ़आईडी और आईएनपी के लिए, टीबीटी ऑडिट का इस्तेमाल करके उन समस्याओं की पहचान करें जो उन मेट्रिक पर असर डाल सकती हैं. हालांकि, ध्यान रखें कि इंटरैक्शन के बिना, लाइटहाउस सीमित तौर पर ही विश्लेषण कर सकता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले एक्सटेंशन की मदद से, रीयल टाइम में विश्लेषण करना
वेब की परफ़ॉर्मेंस की जानकारी देने वाला Chrome एक्सटेंशन, पेज लोड होने के दौरान और किसी पेज को ब्राउज़ करते समय, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को रीयल टाइम में दिखाता है. इस वजह से, यह एफ़आईडी और आईएनपी के साथ-साथ लोड होने के बाद होने वाले लेआउट शिफ़्ट को भी कैप्चर कर सकता है. डीबग करने के विकल्प, हर मेट्रिक के बारे में ज़्यादा जानकारी दिखाते हैं:
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले एक्सटेंशन को परफ़ॉर्मेंस की समस्याओं का पता लगाने के लिए, स्पॉट चेक करने वाले टूल के तौर पर काम करना चाहिए. यह, डीबग करने वाला एक ऐसा टूल नहीं है जो किसी भी तरह की समस्या को ठीक करने में मदद करता हो. यह Chrome DevTools में परफ़ॉर्मेंस पैनल के लिए काम करता है.
परफ़ॉर्मेंस पैनल में ड्रिल-डाउन करना
Chrome DevTools में परफ़ॉर्मेंस पैनल, रिकॉर्ड किए गए समय के दौरान सभी पेज के व्यवहार की प्रोफ़ाइल बनाता है.
खास समय—जैसे कि एलसीपी, 'टाइमिंग ट्रैक' में दिखाए जाते हैं. ज़्यादा जानकारी के लिए, इन पर क्लिक करें.
लेआउट शिफ़्ट, लेआउट शिफ़्ट को हाइलाइट करते हैं. इन पर क्लिक करने से, सीएलएस डीबग करने के लिए शिफ़्ट होने वाले एलिमेंट के बारे में ज़्यादा जानकारी मिलती है.
लंबे टास्क (जिनकी वजह से एफ़आईडी और आईएनपी से जुड़ी समस्याएं आ सकती हैं) को भी लाल त्रिभुज से हाइलाइट किया जाता है.
इन सुविधाओं के साथ-साथ परफ़ॉर्मेंस पैनल के दूसरे हिस्सों में मौजूद जानकारी से, आपको यह तय करने में मदद मिल सकती है कि ठीक किए गए तरीकों का, किसी पेज की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट पर कोई असर पड़ रहा है या नहीं.
फ़ील्ड में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को डीबग करना
कभी-कभी लैब के टूल, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली उन सभी समस्याओं की वजह नहीं पहचान पाते जो आपके उपयोगकर्ताओं पर असर डालती हैं. यह एक वजह है कि अपने फ़ील्ड का डेटा इकट्ठा करना इतना ज़रूरी है, क्योंकि यह ध्यान में रखता है कि लैब डेटा ऐसा नहीं कर सकता.
ज़्यादा जानकारी के लिए, फ़ील्ड में डीबग परफ़ॉर्मेंस देखें.
तीसरा चरण: बदलावों को मॉनिटर करना
किसी भी समस्या को ठीक करने के बाद, आपको यह पक्का करना होगा कि वे ज़रूरी असर डाल रही हों और नई समस्याएं आपकी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर कोई असर न डालें. इसके लिए, डेवलपर वर्कफ़्लो के तहत परफ़ॉर्मेंस की समस्याओं पर नज़र रखना ज़रूरी होता है, ताकि परफ़ॉर्मेंस से जुड़ी समस्याओं को प्रोडक्शन में रिलीज़ होने से रोका जा सके. साथ ही, इस स्थिति को पक्का करने के लिए फ़ील्ड डेटा को नियमित तौर पर मॉनिटर किया जाता है.
कंटिन्यूअस इंटिग्रेशन (सीआई) एनवायरमेंट में, परफ़ॉर्मेंस से जुड़ी ज़रूरी शर्तों पर नज़र रखना
Lighthouse-CI की मदद से, कोड के लिए तय किए गए कोड पर लाइटहाउस ऑडिट अपने-आप चल सकता है, ताकि कोड में परफ़ॉर्मेंस का रिग्रेशन न हो. यह कोड में गलत तरीकों को रोकने के लिए, लिंटिंग टूल के तौर पर परफ़ॉर्मेंस के समय की जांच कर सकता है (जिसमें बदलाव हो सकते हैं). इसके अलावा, सिर्फ़ परफ़ॉर्मेंस ऑडिट की भी जांच की जा सकती है.
फ़ील्ड डेटा के साथ वेबसाइट हेल्थ ट्रेंड देखें
आपको प्रोडक्शन में शामिल होने से पहले, परफ़ॉर्मेंस से जुड़ी सभी समस्याओं की पहचान करके उन्हें ठीक करना चाहिए. हालांकि, आरयूएम का इस्तेमाल करके फ़ील्ड डेटा पर नज़र रखना ज़रूरी है, ताकि आप किसी गड़बड़ी को खोज सकें. ऐसे कई व्यावसायिक आरयूएम प्रॉडक्ट हैं जो इस काम को करने में आपकी मदद कर सकते हैं. web-vitals
JavaScript लाइब्रेरी की मदद से, किसी वेबसाइट के फ़ील्ड का डेटा अपने-आप इकट्ठा होता है. साथ ही, कस्टम डैशबोर्ड और सूचना देने वाले सिस्टम को बेहतर बनाने के लिए, इस डेटा का इस्तेमाल किया जा सकता है.
जिन साइटों में आरयूएम का समाधान नहीं होता है उनके लिए, फ़ील्ड डेटा के बेसिक रुझान विश्लेषण के तौर पर CrUX डैशबोर्ड का इस्तेमाल किया जा सकता है. यह CrUX में साइटों के लिए, इन चीज़ों की रिपोर्ट करता है:
- साइट की खास जानकारी, जो वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को डेस्कटॉप और मोबाइल डिवाइस के हिसाब से बांटती है.
- मेट्रिक टाइप के हिसाब से पुराने रुझान में, CrUX रिपोर्ट के डेटा की, हर महीने रिलीज़ होने वाले हर महीने के हिसाब से मेट्रिक का डिस्ट्रिब्यूशन दिखाया जाता है.
- उपयोगकर्ता की डेमोग्राफ़िक्स: इसमें हर डेमोग्राफ़िक (उम्र, लिंग, आय, शिक्षा वगैरह) के उपयोगकर्ताओं के लिए, पूरे ऑरिजिन के पेज व्यू के डिस्ट्रिब्यूशन की जानकारी मिलती है. इसमें डिवाइस और असरदार कनेक्शन टाइप भी शामिल हैं.
CrUX डैशबोर्ड, CrUX BigQuery डेटासेट पर आधारित होता है, जिसे महीने में एक बार अपडेट किया जाता है. अपनी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को समय-समय पर देखते रहने के लिए, यह एक अच्छा रिमाइंडर हो सकता है.
नतीजा
उपयोगकर्ता को तेज़ी से और अच्छा अनुभव देने के लिए, परफ़ॉर्मेंस को प्राथमिकता देने वाली सोच होनी चाहिए. साथ ही, वर्कफ़्लो को अपनाने की ज़रूरत है, ताकि यह पक्का हो सके कि गेम आगे बढ़ता जा रहा है. ऑडिट, डीबग, और मॉनिटर करने के लिए सही टूल और प्रोसेस की मदद से, उपयोगकर्ताओं को बेहतरीन अनुभव दिया जा सकता है. साथ ही, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड को बनाए रखा जा सकता है.