Web Vitals

Philip Walton

पब्लिश करने की तारीख: 4 मई, 2020, पिछली बार अपडेट करने की तारीख: 31 अक्टूबर, 2024

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

खास जानकारी

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

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

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

Core Web Vitals

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

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

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

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

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

लाइफ़साइकल

Core Web Vitals ट्रैक करने वाली मेट्रिक, तीन चरणों वाली लाइफ़साइकल से गुज़रती हैं: एक्सपेरिमेंटल, पेंडिंग, और स्टेबल.

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

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

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

• LCP: स्टेबल
• CLS: स्टेबल
• आईएनपी: स्टेबल

एक्सपेरिमेंट के तौर पर उपलब्ध

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

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

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

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

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

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

स्थिर रुझान

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

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

Core Web Vitals को मेज़र करने और उनकी रिपोर्ट बनाने वाले टूल

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

Core Web Vitals को मेज़र करने के लिए फ़ील्ड टूल

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

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

JavaScript में Core Web Vitals को मेज़र करना

स्टैंडर्ड वेब एपीआई का इस्तेमाल करके, JavaScript में हर Core Web Vitals को मेज़र किया जा सकता है.

वेबसाइट की परफ़ॉर्मेंस से जुड़ी सभी अहम जानकारी (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 को मेज़र करने में मदद मिलेगी.

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

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

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

Core Web Vitals को मेज़र करने के लिए लैब टूल

हालांकि, सभी Core Web Vitals सबसे पहले फ़ील्ड मेट्रिक हैं, लेकिन उनमें से कई को लैब में भी मापा जा सकता है.

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

लैब एनवायरमेंट में Core Web Vitals को मेज़र करने के लिए, इन टूल का इस्तेमाल किया जा सकता है:

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

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

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

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

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

Core Web Vitals को बेहतर बनाने के कई तरीके हैं. हर तरीके का असर, काम का होना, और इस्तेमाल में आसानी अलग-अलग होती है. Chrome टीम के सबसे अहम सुझावों की छोटी सूची देखने के लिए, Core Web Vitals को बेहतर बनाने के सबसे असरदार तरीके लेख पढ़ें.

अन्य Web Vitals

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

ये अन्य मेट्रिक, प्रॉक्सी के तौर पर काम कर सकती हैं. इसके अलावा, ये Core Web Vitals के लिए, पूरक मेट्रिक के तौर पर भी काम कर सकती हैं. इससे, परफ़ॉर्मेंस से जुड़ी ज़्यादा जानकारी इकट्ठा करने या किसी खास समस्या का पता लगाने में मदद मिलती है.

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

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

Web Vitals में हुए बदलाव

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

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

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

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