पब्लिश किया गया: 4 मई, 2020
उपयोगकर्ता अनुभव की क्वालिटी को ऑप्टिमाइज़ करने से, वेब पर किसी भी साइट को आगे बढ़ाने में मदद मिलती है. आप कारोबार के मालिक हों, मार्केटर हों या डेवलपर हों, वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी आपकी साइट के अनुभव का आकलन करने और बेहतर अवसरों की पहचान करने में आपकी मदद कर सकती है.
खास जानकारी
वेबसाइट की परफ़ॉर्मेंस की जानकारी, Google से मिलने वाली एक तरह की रिपोर्ट है. इसमें क्वालिटी सिग्नल के लिए ज़रूरी सभी दिशा-निर्देश उपलब्ध होते हैं. ये सिग्नल, वेब पर शानदार उपयोगकर्ता अनुभव देने के लिए ज़रूरी होते हैं.
Google ने परफ़ॉर्मेंस को मेज़र करने और उसकी रिपोर्ट बनाने के लिए, पिछले कुछ सालों में कई टूल उपलब्ध कराए हैं. कुछ डेवलपर इन टूल का इस्तेमाल करने में माहिर हैं. वहीं, कुछ डेवलपर को इन टूल और मेट्रिक की ज़्यादा संख्या की वजह से, इनका इस्तेमाल करने में मुश्किल हो रही है.
साइट के मालिकों को यह समझने के लिए परफ़ॉर्मेंस एक्सपर्ट होने की ज़रूरत नहीं है कि वे अपने उपयोगकर्ताओं को किस तरह का अनुभव दे रहे हैं. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को आसान बनाने के लिए, Web Vitals पहल शुरू की गई है. इससे साइटों को उन मेट्रिक पर फ़ोकस करने में मदद मिलती है जो सबसे ज़्यादा मायने रखती हैं. जैसे, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी.
Core Web Vitals
वेबसाइट की परफ़ॉर्मेंस की जानकारी, वेब वाइटल का सबसेट है. यह सभी वेब पेजों पर लागू होता है. इसे साइट के सभी मालिकों को मेज़र करना चाहिए. साथ ही, यह Google के सभी टूल पर दिखेगा. वेबसाइट की परफ़ॉर्मेंस की हर अहम जानकारी, उपयोगकर्ता अनुभव के अलग-अलग पहलुओं को दिखाती है. इसे फ़ील्ड में मेज़र किया जा सकता है. साथ ही, इससे उपयोगकर्ता के हिसाब से अहम नतीजे के बारे में पता चलता है.
Core Web Vitals की मेट्रिक, समय के साथ बेहतर होती रहेंगी. फ़िलहाल, मौजूदा सेट उपयोगकर्ता अनुभव से जुड़े इन तीन पहलुओं पर फ़ोकस करता है: लोडिंग, इंटरैक्टिविटी, और विज़ुअल स्टेबिलिटी. इसमें यहां बताई गई मेट्रिक और उनके थ्रेशोल्ड शामिल हैं:
- सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी): इससे लोडिंग की परफ़ॉर्मेंस का पता चलता है. ऑडियंस को बेहतर अनुभव देने के लिए, ज़रूरी है कि जब पेज लोड होना शुरू हो, तब 2.5 सेकंड के अंदर एलसीपी हो जाना चाहिए.
- पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी): इससे इंटरैक्टिविटी का पता चलता है. ऑडियंस को बेहतर अनुभव देने के लिए पेजों का आईएनपी, 200 मिलीसेकंड या इससे कम होना चाहिए.
- लेआउट शिफ़्ट होने में लगने वाला समय (सीएलएस): इससे विज़ुअल स्टेबिलिटी का आकलन किया जाता है. ऑडियंस को बेहतर अनुभव देने के लिए, पेजों का सीएलएस 0.1 या इससे कम होना चाहिए.
यह पक्का करें कि आप ज़्यादातर ऑडियंस के लिए, इन मेट्रिक का सुझाया गया टारगेट थ्रेशोल्ड पूरा कर पाएं. इसका एक अच्छा तरीका यह है कि मोबाइल और कंप्यूटर, दोनों के लिए कुल पेज लोड का 75वां पर्सेंटाइल मेज़र करें.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के थ्रेशोल्ड को हासिल करने के लिए, यह ज़रूरी है कि सभी तीन मेट्रिक के लिए, 75वें पर्सेंटाइल पर सुझाई गई वैल्यू को पूरा किया गया हो.
जीवनचक्र
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक, तीन चरणों से गुज़रती हैं: एक्सपेरिमेंटल, पेंडिंग, और स्टेबल.
हर चरण को इस तरह से डिज़ाइन किया गया है कि डेवलपर को यह पता चल सके कि उन्हें हर मेट्रिक के बारे में कैसे सोचना चाहिए:
- एक्सपेरिमेंट के तौर पर उपलब्ध मेट्रिक, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली संभावित मेट्रिक होती हैं. टेस्टिंग और कम्यूनिटी से मिले सुझाव/राय के आधार पर, इनमें अब भी बड़े बदलाव किए जा सकते हैं.
- आने वाली मेट्रिक, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली ऐसी मेट्रिक होती हैं जो टेस्टिंग और सुझाव/राय देने या शिकायत करने के चरण को पूरा कर चुकी हैं. साथ ही, इनके स्टेबल होने की समयसीमा तय होती है.
- स्टेबल मेट्रिक, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक का मौजूदा सेट है. Chrome, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए इन मेट्रिक को ज़रूरी मानता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, लाइफ़साइकल के इन चरणों में होती है:
एक्सपेरिमेंट के तौर पर उपलब्ध
जब किसी मेट्रिक को पहली बार बनाया जाता है और वह इकोसिस्टम में शामिल होती है, तो उसे एक्सपेरिमेंटल मेट्रिक माना जाता है.
एक्सपेरिमेंट के तौर पर उपलब्ध होने के दौरान, किसी मेट्रिक का आकलन किया जाता है. इसके लिए, सबसे पहले उस समस्या का पता लगाया जाता है जिसे हल करना है. साथ ही, यह भी देखा जाता है कि पिछली मेट्रिक से उस समस्या को हल क्यों नहीं किया जा सका. उदाहरण के लिए, इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) को शुरुआत में एक एक्सपेरिमेंटल मेट्रिक के तौर पर डेवलप किया गया था. इसका मकसद, वेब पर मौजूद रनटाइम परफ़ॉर्मेंस से जुड़ी समस्याओं को फ़र्स्ट इनपुट डिले (एफ़आईडी) की तुलना में ज़्यादा बेहतर तरीके से हल करना था.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के एक्सपेरिमेंटल फ़ेज़ का मकसद, मेट्रिक के डेवलपमेंट में लचीलापन लाना है. इसके लिए, बग की पहचान करना और मेट्रिक की शुरुआती परिभाषा में बदलाव करना शामिल है. यह ऐसा चरण भी है जिसमें कम्यूनिटी से मिलने वाला सुझाव, शिकायत या राय सबसे ज़्यादा अहम होती है.
मंज़ूरी बाकी है
जब Chrome की टीम को लगता है कि एक्सपेरिमेंट के तौर पर उपलब्ध मेट्रिक के बारे में ज़रूरी सुझाव/शिकायत/राय मिल गई है और यह मेट्रिक असरदार साबित हुई है, तो यह पेंडिंग मेट्रिक बन जाती है. उदाहरण के लिए, 2023 में आईएनपी को एक्सपेरिमेंटल से प्रमोट करके, 'कार्रवाई ज़रूरी है' स्टेटस पर ले जाया गया था. ऐसा इसलिए किया गया था, ताकि आखिर में एफआईडी को बंद किया जा सके.
इस फ़ेज़ में, लंबित मेट्रिक को कम से कम छह महीने तक होल्ड किया जाता है, ताकि इकोसिस्टम को बदलावों के हिसाब से ढलने का समय मिल सके. इस चरण में, कम्यूनिटी से मिले सुझाव/राय काफ़ी अहम होते हैं. ऐसा इसलिए, क्योंकि ज़्यादा डेवलपर इस मेट्रिक का इस्तेमाल करना शुरू कर देते हैं.
स्थिर रुझान
जब वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के तौर पर इस्तेमाल की जाने वाली किसी मेट्रिक को मंज़ूरी मिल जाती है, तो वह स्टेबल मेट्रिक बन जाती है. इसके बाद, यह मेट्रिक वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक बन सकती है.
स्टेबल मेट्रिक के लिए सहायता उपलब्ध है. साथ ही, इनमें गड़बड़ियां ठीक की जा सकती हैं और इनकी परिभाषाओं में बदलाव किया जा सकता है. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली स्टेबल मेट्रिक, साल में एक से ज़्यादा बार नहीं बदलेंगी. अगर Core Web Vital में कोई बदलाव होता है, तो इसकी जानकारी मेट्रिक के आधिकारिक दस्तावेज़ में दी जाएगी. साथ ही, मेट्रिक के बदलाव के लॉग में भी इसकी जानकारी दी जाएगी. किसी भी आकलन में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को भी शामिल किया जाता है.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र और रिपोर्ट करने के लिए टूल
Google का मानना है कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, वेब पर मिलने वाले सभी अनुभवों के लिए ज़रूरी है. इसलिए, यह अपने सभी लोकप्रिय टूल में इन मेट्रिक को दिखाने के लिए प्रतिबद्ध है. यहां दिए गए सेक्शन में, उन टूल के बारे में बताया गया है जो वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के साथ काम करते हैं.
Core Web Vitals को मेज़र करने के लिए फ़ील्ड टूल
Chrome उपयोगकर्ता अनुभव रिपोर्ट, हर कोर वेब वाइटल के लिए, असली उपयोगकर्ता के मेज़रमेंट का डेटा इकट्ठा करती है. इस डेटा में उपयोगकर्ता की पहचान ज़ाहिर नहीं की जाती. इस डेटा की मदद से, साइट के मालिक अपनी परफ़ॉर्मेंस का तुरंत आकलन कर सकते हैं. इसके लिए, उन्हें अपने पेजों पर मैन्युअल तरीके से आंकड़ों को इकट्ठा करने की ज़रूरत नहीं होती. साथ ही, यह Chrome DevTools, PageSpeed Insights, और Search Console की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली रिपोर्ट जैसे टूल को बेहतर बनाता है.
| एलसीपी | आईएनपी | सीएलएस | |
| Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट | |||
| Chrome DevTools | |||
| PageSpeed Insights | |||
| Search Console (वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली रिपोर्ट) |
Chrome उपयोगकर्ता अनुभव रिपोर्ट से मिले डेटा की मदद से, साइटों की परफ़ॉर्मेंस का तुरंत आकलन किया जा सकता है. हालांकि, इससे हर पेजव्यू के लिए टेलीमेट्री की पूरी जानकारी नहीं मिलती है. इस जानकारी की ज़रूरत अक्सर, रिग्रेशन का सटीक तरीके से पता लगाने, उसकी निगरानी करने, और उस पर तुरंत कार्रवाई करने के लिए होती है. इसलिए, हमारा सुझाव है कि साइटें, असली उपयोगकर्ता की निगरानी करने की सुविधा सेट अप करें.
JavaScript में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक मेज़र करना
स्टैंडर्ड वेब एपीआई का इस्तेमाल करके, JavaScript में हर Core Web Vitals को मेज़र किया जा सकता है.
वेबसाइट की परफ़ॉर्मेंस से जुड़ी सभी अहम जानकारी को मेज़र करने का सबसे आसान तरीका है, web-vitals JavaScript लाइब्रेरी का इस्तेमाल करना. यह एक छोटी लाइब्रेरी है, जो वेब एपीआई के चारों ओर प्रोडक्शन-रेडी रैपर के तौर पर काम करती है. यह हर मेट्रिक को इस तरह से मेज़र करती है कि वह पहले बताए गए सभी Google टूल से रिपोर्ट किए गए डेटा से सटीक तरीके से मेल खाती है.
web-vitals लाइब्रेरी की मदद से, हर मेट्रिक को मेज़र करने के लिए सिर्फ़ एक फ़ंक्शन को कॉल किया जा सकता है. इस्तेमाल और एपीआई के बारे में पूरी जानकारी के लिए, दस्तावेज़ देखें.
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
अपनी साइट को web-vitals लाइब्रेरी का इस्तेमाल करने के लिए कॉन्फ़िगर करने के बाद, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक का डेटा मेज़र किया जा सकता है. साथ ही, इसे Analytics एंडपॉइंट पर भेजा जा सकता है. इसके बाद, उस डेटा को इकट्ठा करके उसकी रिपोर्ट बनाई जा सकती है. इससे यह पता चलेगा कि क्या आपकी साइट के पेज, पेज पर आने वाले कम से कम 75% लोगों के लिए, सुझाई गई थ्रेशोल्ड वैल्यू को पूरा कर रहे हैं.
कुछ Analytics सेवा देने वाली कंपनियों के टूल में, Core Web Vitals मेट्रिक के लिए पहले से ही सहायता उपलब्ध होती है. हालांकि, जिन कंपनियों के टूल में यह सुविधा उपलब्ध नहीं है उनमें भी कस्टम मेट्रिक की बुनियादी सुविधाएं शामिल होनी चाहिए. इससे आपको उनके टूल में Core Web Vitals को मेज़र करने में मदद मिलेगी.
जो डेवलपर इन मेट्रिक को सीधे तौर पर वेब एपीआई का इस्तेमाल करके मेज़र करना चाहते हैं वे लागू करने की जानकारी के लिए, इन मेट्रिक गाइड का इस्तेमाल कर सकते हैं:
लोकप्रिय Analytics सेवाओं या अपने इन-हाउस Analytics टूल का इस्तेमाल करके, इन मेट्रिक को मेज़र करने के बारे में ज़्यादा जानकारी पाने के लिए, फ़ील्ड में वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी को मेज़र करने के सबसे सही तरीके लेख पढ़ें.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करने के लिए लैब टूल
वेबसाइट की परफ़ॉर्मेंस की सभी मेट्रिक, फ़ील्ड मेट्रिक होती हैं. हालांकि, इनमें से कई को लैब में भी मेज़र किया जा सकता है.
लैब मेज़रमेंट, डेवलपमेंट के दौरान सुविधाओं की परफ़ॉर्मेंस की जांच करने का सबसे अच्छा तरीका है. इससे यह पता चलता है कि उपयोगकर्ताओं के लिए सुविधाएं जारी होने से पहले, वे कैसे काम करती हैं. इससे परफ़ॉर्मेंस में होने वाली गिरावट का पता पहले ही चल जाता है.
लैब एनवायरमेंट में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करने के लिए, इन टूल का इस्तेमाल किया जा सकता है:
| एलसीपी | आईएनपी | सीएलएस | |
|---|---|---|---|
| Chrome DevTools | |||
| Lighthouse | (इसके बजाय, TBT का इस्तेमाल करें) |
लैब मेज़रमेंट, बेहतरीन अनुभव देने के लिए ज़रूरी है. हालांकि, यह फ़ील्ड मेज़रमेंट का विकल्प नहीं है.
किसी साइट की परफ़ॉर्मेंस, उपयोगकर्ता के डिवाइस की क्षमताओं, नेटवर्क की स्थितियों, डिवाइस पर चल रही अन्य प्रोसेस, और पेज के साथ इंटरैक्ट करने के तरीके के आधार पर अलग-अलग हो सकती है. दरअसल, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली हर मेट्रिक के स्कोर पर, उपयोगकर्ता के इंटरैक्शन का असर पड़ सकता है. सिर्फ़ फ़ील्ड मेज़रमेंट से, पूरी जानकारी सटीक तरीके से कैप्चर की जा सकती है.
स्कोर को बेहतर बनाने के लिए सुझाव
यहां दी गई गाइड में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली हर मेट्रिक के लिए, पेजों को ऑप्टिमाइज़ करने के बारे में खास सुझाव दिए गए हैं:
Core Web Vitals को बेहतर बनाने के कई तरीके हैं. हर तरीके का असर, काम का होना, और इस्तेमाल में आसानी अलग-अलग होती है. Chrome टीम के सबसे अहम सुझावों की छोटी सूची देखने के लिए, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाने के सबसे असरदार तरीके लेख पढ़ें.
वेबसाइट की परफ़ॉर्मेंस की अन्य अहम जानकारी
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, उपयोगकर्ता अनुभव को बेहतर बनाने और उसे समझने के लिए ज़रूरी मेट्रिक हैं. हालांकि, इसके अलावा भी कुछ अन्य मेट्रिक हैं.
ये अन्य मेट्रिक, प्रॉक्सी के तौर पर काम कर सकती हैं. इसके अलावा, ये वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली तीन मेट्रिक के लिए, पूरक मेट्रिक के तौर पर भी काम कर सकती हैं. इससे, परफ़ॉर्मेंस से जुड़ी ज़्यादा जानकारी पाने या किसी खास समस्या का पता लगाने में मदद मिलती है.
उदाहरण के लिए, पहले बाइट को मिलने में लगने वाला समय (टीटीएफ़बी) और सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी), दोनों ही लोडिंग के अनुभव के लिए ज़रूरी हैं. साथ ही, दोनों ही एलसीपी से जुड़ी समस्याओं का पता लगाने में मददगार होते हैं. जैसे, सर्वर से जवाब मिलने में लगने वाला समय या रेंडर रोकने वाले रिसॉर्स.
इसी तरह, टोटल ब्लॉकिंग टाइम (टीबीटी) जैसी मेट्रिक, लैब मेट्रिक होती है. यह इंटरैक्टिविटी से जुड़ी संभावित समस्याओं का पता लगाने और उनका विश्लेषण करने के लिए ज़रूरी है. इन समस्याओं का असर आईएनपी पर पड़ सकता है. हालांकि, ये वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक के सेट का हिस्सा नहीं हैं, क्योंकि इन्हें फ़ील्ड में मेज़र नहीं किया जा सकता. साथ ही, ये उपयोगकर्ता के हिसाब से नतीजे नहीं दिखाती हैं.
वेबसाइट की परफ़ॉर्मेंस के बारे में अहम जानकारी में हुए बदलाव
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और वेबसाइट की परफ़ॉर्मेंस की जानकारी, ऐसे सबसे अच्छे सिग्नल हैं जो डेवलपर को वेब पर उपयोगकर्ता अनुभव की क्वालिटी का आकलन करने के लिए मिलते हैं. हालांकि, ये सिग्नल पूरी तरह से सटीक नहीं होते. इसलिए, आने वाले समय में इनमें सुधार या बदलाव किए जा सकते हैं.
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, सभी वेब पेजों के लिए ज़रूरी होती है. साथ ही, यह Google के सभी ज़रूरी टूल में दिखती है. इन मेट्रिक में होने वाले बदलावों का असर काफ़ी ज़्यादा होगा. इसलिए, डेवलपर को उम्मीद करनी चाहिए कि वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक की परिभाषाएं और थ्रेशोल्ड स्थिर हों. साथ ही, अपडेट के बारे में पहले से सूचना दी जाए और अपडेट, सालाना तौर पर तय समय पर किए जाएं.
अन्य वेब वाइटल, अक्सर कॉन्टेक्स्ट या टूल के हिसाब से होते हैं. साथ ही, ये वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी से ज़्यादा एक्सपेरिमेंटल हो सकते हैं. इसलिए, इनकी परिभाषाओं और थ्रेशोल्ड में ज़्यादा बार बदलाव हो सकता है.
सभी वेब वाइटल के लिए, बदलावों के बारे में इस सार्वजनिक CHANGELOG में साफ़ तौर पर बताया जाएगा.