Web Vitals

Philip Walton

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

खास जानकारी

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

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

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

Core Web Vitals

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

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

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

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

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

जीवनचक्र

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

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

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

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

• LCP: स्थिर
• CLS: स्थिर
• INP: स्थिर

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

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

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

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

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

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

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

स्थिर रुझान

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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