Web Vitals

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

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

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

Google ने पिछले कुछ सालों में, परफ़ॉर्मेंस को मेज़र करने और उसकी रिपोर्ट बनाने के लिए कई टूल उपलब्ध कराए हैं. कुछ डेवलपर इन टूल का इस्तेमाल करने में माहिर होते हैं, जबकि कुछ को टूल और मेट्रिक, दोनों का इस्तेमाल करने में मुश्किल होती है.

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

Core Web Vitals

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

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

सबसे बड़े कॉन्टेंटफ़ुल पेंट के थ्रेशोल्ड के लिए सुझाव इंटरैक्शन टू नेक्स्ट पेंट थ्रेशोल्ड सुझावों के लिए कुल लेआउट शिफ़्ट थ्रेशोल्ड के लिए सुझाव

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

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

जीवनचक्र

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

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

हर चरण को इस तरह से डिज़ाइन किया गया है कि डेवलपर को यह पता चल सके कि उन्हें हर मेट्रिक के बारे में कैसे सोचना चाहिए:

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

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

प्रयोग के तौर पर उपलब्ध

जब किसी मेट्रिक को शुरुआत में डेवलप किया जाता है और उसे इकोसिस्टम में शामिल किया जाता है, तो उसे प्रयोग के तौर पर बनाई गई मेट्रिक माना जाता है.

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

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

मंज़ूरी बाकी है

जब Chrome की टीम यह तय करती है कि किसी प्रयोग के तौर पर उपलब्ध मेट्रिक के बारे में ज़रूरत के मुताबिक सुझाव/शिकायत/राय मिली है और इसकी परफ़ॉर्मेंस अच्छी है, तो उसे मंज़ूरी बाकी है वाली मेट्रिक के तौर पर मार्क कर दिया जाता है. उदाहरण के लिए, साल 2023 में INP को एक्सपेरिमेंट के तौर पर उपलब्ध कराने के बाद, इसे 'मंज़ूरी बाकी है' स्टेटस में अपग्रेड किया गया था. ऐसा इसलिए किया गया था, ताकि FID को बंद किया जा सके.

नेटवर्क को ऑप्टिमाइज़ होने के लिए समय देने के लिए, मेट्रिक को इस चरण में कम से कम छह महीने तक रोककर रखा जाता है. इस चरण में, कम्यूनिटी का सुझाव या राय देना अहम है, क्योंकि ज़्यादा से ज़्यादा डेवलपर इस मेट्रिक का इस्तेमाल करना शुरू कर रहे हैं.

स्थिर रुझान

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करने और रिपोर्ट करने के लिए टूल

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

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

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

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

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

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

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

वेब-विटल्स लाइब्रेरी की मदद से, हर मेट्रिक को मेज़र करने के लिए एक ही फ़ंक्शन को कॉल किया जा सकता है. इस्तेमाल और एपीआई की पूरी जानकारी के लिए, दस्तावेज़ देखें.

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 लाइब्रेरी का इस्तेमाल करने के लिए अपनी साइट को कॉन्फ़िगर करने के बाद, अगला चरण उस डेटा को इकट्ठा करना और उसकी रिपोर्ट बनाना है. इससे यह पता चलता है कि आपके पेज, कम से कम 75% पेज विज़िट के लिए सुझाए गए थ्रेशोल्ड को पूरा कर रहे हैं या नहीं.

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

जो डेवलपर मौजूदा वेब एपीआई का इस्तेमाल करके, इन मेट्रिक को सीधे मेज़र करना चाहते हैं वे लागू करने से जुड़ी जानकारी के लिए इन मेट्रिक गाइड का इस्तेमाल कर सकते हैं:

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करने के लिए लैब टूल

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

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

लैब एनवायरमेंट में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करने के लिए, इन टूल का इस्तेमाल किया जा सकता है:

  एलसीपी आईएनपी सीएलएस
Chrome DevTools
Lighthouse (इसके बजाय TBT का इस्तेमाल करें)

बेहतर अनुभव देने के लिए, लैब मेज़रमेंट एक ज़रूरी हिस्सा है. हालांकि, यह फ़ील्ड मेज़रमेंट का विकल्प नहीं है.

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

स्कोर को बेहतर बनाने के लिए सुझाव

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

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

वेबसाइट की अन्य ज़रूरी जानकारी

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

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

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में हुए बदलाव

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

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

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

सभी वेब विटल के लिए, बदलावों को सार्वजनिक CHANGELOG में साफ़ तौर पर दस्तावेज़ में दर्ज किया जाएगा.