Web Vitals

Philip Walton

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

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

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

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

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

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

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

जीवनचक्र

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

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

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

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

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

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

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

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

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

अभी बाकी है

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

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

स्थिर दिखाना

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

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

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

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

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

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

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

  एलसीपी आईएनपी सीएलएस
Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट
PageSpeed Insights
Search Console (वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली रिपोर्ट)

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

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

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

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

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

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);

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

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

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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले Chrome एक्सटेंशन का इस्तेमाल करके, कोई कोड लिखे बिना भी वेबसाइट की परफ़ॉर्मेंस की जानकारी की रिपोर्ट तैयार की जा सकती है. यह एक्सटेंशन, इनमें से हर मेट्रिक को मेज़र करने के लिए, web-vitals लाइब्रेरी का इस्तेमाल करता है. साथ ही, वेब ब्राउज़ करते समय उन्हें उपयोगकर्ताओं को दिखाता है.

यह एक्सटेंशन आपकी अपनी साइटों, आपके प्रतिस्पर्धी की साइटों और बड़े पैमाने पर वेब के प्रदर्शन को समझने में सहायता कर सकता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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