Web Vitals

Philip Walton

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

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

खास जानकारी

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

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

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

Core Web Vitals

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

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

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

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

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

जीवनचक्र

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

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

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

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

• LCP: स्टेबल
• सीएलएस: स्थिर
• INP: स्थिर

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

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

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

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

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

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

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

स्थिर रुझान

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

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

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

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

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

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

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% पेज विज़िट के लिए सुझाए गए थ्रेशोल्ड को पूरा कर रहे हैं या नहीं.

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

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

• JavaScript में एलसीपी मेज़र करना
• JavaScript में INP मेज़र करना
• JavaScript में सीएलएस मेज़र करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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