Web Vitals

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

खास जानकारी

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

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

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

Core Web Vitals

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

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

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

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

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

जीवनचक्र

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

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

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

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

• एलसीपी: स्थिर
• सीएलएस: स्थिर
• आईएनपी: स्थिर

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

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

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

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

अभी बाकी है

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

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

स्थिर दिखाना

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

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

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

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

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

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

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

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

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

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

वेब-वाइट्स लाइब्रेरी की मदद से, सिंगल फ़ंक्शन कॉल करके हर मेट्रिक को मेज़र किया जा सकता है. इस्तेमाल और 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 एक्सटेंशन का इस्तेमाल करके, कोई कोड लिखे बिना भी वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी दी जा सकती है. यह एक्सटेंशन इनमें से हर मेट्रिक को मापने के लिए वेब ज़रूरी जानकारी लाइब्रेरी का इस्तेमाल करता है. साथ ही, वेब ब्राउज़ करते समय उन्हें उपयोगकर्ताओं को दिखाता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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