इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

1. शुरू करने से पहले

इस कोडलैब में, web-vitals JavaScript लाइब्रेरी की मदद से, वेब पेज की परफ़ॉर्मेंस की अहम जानकारी का आकलन करने का तरीका बताया गया है.

Google का सुझाव है कि आप वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मेज़र करें. साथ ही, यह पक्का करें कि मोबाइल और डेस्कटॉप डिवाइसों पर पेज लोड होने की स्पीड, 75वें पर्सेंटाइल में हो.

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

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

ज़रूरी शर्तें

आपको क्या करना होगा

वेब पेज में web-vitals लाइब्रेरी जोड़ें.
Google Chrome Developer Tools में, वेब पेज की परफ़ॉर्मेंस की अहम जानकारी मेट्रिक को मेज़र करें.
ज़रूरी नहीं: Google Analytics को वेब पेज की परफ़ॉर्मेंस की अहम जानकारी भेजें.

आपको किन चीज़ों की ज़रूरत होगी

अपनी पसंद का कोई टेक्स्ट एडिटर, जैसे कि Sublime Text या Visual Studio Code
Chromium पर आधारित वेब ब्राउज़र, जैसे कि Google Chrome या Microsoft Edge. (Chromium पर आधारित वेब ब्राउज़र की ज़रूरत क्यों होती है, इस बारे में ज़्यादा जानने के लिए ब्राउज़र की सुविधा देखें.)

2. किसी वेब पेज में web-vitals लाइब्रेरी जोड़ना

अपने टेक्स्ट एडिटर में, web-vitals-test.html फ़ाइल बनाएं. इसके बाद, इस एचटीएमएल कोड को फ़ाइल में डालें:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

इस कोड से वह वेब पेज बनता है जिसका इस्तेमाल इस कोडलैब के लिए किया जाता है.

एचटीएमएल कोड के <body> एलिमेंट में, दूसरे <p> एलिमेंट के बाद यह मॉड्यूल स्क्रिप्ट डालें. इसके बाद, फ़ाइल सेव करें:

web-vitals-test.html

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>

यह मॉड्यूल स्क्रिप्ट, कॉन्टेंट डिलीवरी नेटवर्क से web-vitals लाइब्रेरी को लोड करती है. अब आपकी फ़ाइल इस कोड स्निपेट की तरह दिखती है:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

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

3. Google Chrome Developer Tools में, वेब पेज की परफ़ॉर्मेंस की अहम जानकारी को मेज़र करना

अपने वेब ब्राउज़र में, सेव की गई फ़ाइल खोलें.
वेब पेज पर राइट क्लिक करें. इसके बाद, डायलॉग बॉक्स में जांच करें पर क्लिक करें.
Google Chrome Developer Tools पैनल में, Console टैब पर क्लिक करें. इसके बाद, Console settings > Preserve log को चुनें. इस सेटिंग से यह पक्का होता है कि वेब पेज को रीफ़्रेश करने पर भी लॉग बने रहें.

नेटवर्क टैब पर क्लिक करें. इसके बाद, थ्रॉटलिंग के ड्रॉप-डाउन मेन्यू के एक्सपैंडर ऐरो पर क्लिक करें और Slow 3G चुनें. इस सेटिंग से, नेटवर्क कनेक्शन की स्पीड धीमी हो जाती है.

इस इमेज में, नेटवर्क टैब दिखाया गया है. इसमें थ्रॉटलिंग ड्रॉप-डाउन मेन्यू में, Slow 3G सेटिंग को चुना गया है.

Console टैब पर वापस जाएं. इसके बाद, वेब पेज पर कहीं भी क्लिक करें. एलसीपी मेट्रिक, कंसोल टैब में प्रिंट होती है.

एलसीपी मेट्रिक प्रिंट होने के बाद, Console टैब.

वेब पेज को रीफ़्रेश करें. सीएलएस मेट्रिक, कंसोल टैब में प्रिंट होती है.

सीएलएस मेट्रिक प्रिंट होने के बाद, Console टैब.

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

एलसीपी मेट्रिक के फिर से प्रिंट होने के बाद, Console टैब.

वेब पेज को रीफ़्रेश करें. सीएलएस मेट्रिक, कंसोल टैब में फिर से दिखती है. हालांकि, यह पहले से बेहतर है.

सीएलएस मेट्रिक के फिर से प्रिंट होने के बाद, Console टैब.

4. ज़रूरी नहीं: Google Analytics को वेब पेज की परफ़ॉर्मेंस की अहम जानकारी भेजें

मॉड्यूल स्क्रिप्ट के इंपोर्ट स्टेटमेंट के बाद, web-vitals-test.html फ़ाइल में यह sendToGoogleAnalytics() फ़ंक्शन डालें. इसके बाद, फ़ाइल सेव करें:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

onCLS(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);

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

Google Analytics में टॉप इवेंट रिपोर्ट

अब आपकी फ़ाइल इस कोड स्निपेट की तरह दिखती है:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  onCLS(sendToGoogleAnalytics);
  onINP(sendToGoogleAnalytics);
  onLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. बधाई हो

बधाई हो! आपने web-vitals लाइब्रेरी की मदद से, वेब पेज की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक का आकलन करने और उसकी रिपोर्ट बनाने का तरीका सीखा.

ज़्यादा जानें

Web Vitals