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

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

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

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

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

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

ज़रूरी बातें

आप क्या कर सकते हैं

  • web-vitals लाइब्रेरी को किसी वेब पेज में जोड़ें.
  • Google Chrome डेवलपर टूल में वेब पेज's Core Web Vitals का आकलन करें.
  • ज़रूरी नहीं: Google Analytics को वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली वेबसाइट और #39; की परफ़ॉर्मेंस रिपोर्ट.

आपको इनकी ज़रूरत होगी

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

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

  1. अपने टेक्स्ट एडिटर में 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>

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

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

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(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 {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

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

3. Google Chrome डेवलपर टूल में वेब पेज और #39;s Core Web Vitals का आकलन करें

  1. अपने वेब ब्राउज़र में, सेव की गई फ़ाइल खोलें.
  2. वेब पेज पर दायां क्लिक करें. इसके बाद, डायलॉग में जांच करें पर क्लिक करें.
  3. Google Chrome डेवलपर टूल पैनल में, कंसोल टैब पर क्लिक करें और फिर कंसोल सेटिंग 6a9a7d8992eretail2c.png > लॉग बचाएं पर क्लिक करें. इस सेटिंग से यह पक्का होता है कि जब आप वेब पेज को रीफ़्रेश करते हैं, तब भी लॉग बना रहता है.

74044d63a2f32916.png

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

थ्रॉटलिंग ड्रॉप-डाउन मेन्यू में स्लो 3G सेटिंग वाला नेटवर्क टैब.

  1. कंसोल टैब पर वापस जाएं और फिर वेब पेज पर कहीं भी क्लिक करें. एलसीपी और एफ़आईडी मेट्रिक कंसोल टैब में प्रिंट होती हैं.

एलसीपी और एफ़आईडी मेट्रिक के प्रिंट के बाद कंसोल टैब.

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

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

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

एलसीपी और एफ़आईडी मेट्रिक के फिर से प्रिंट होने पर, Console टैब.

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

सीएलएस मेट्रिक के फिर से कंसोल होने पर.

4. ज़रूरी नहीं: Google Analytics को वेब पेज और #39; कोर वेब वाइटल रिपोर्ट करें

  • मॉड्यूल स्क्रिप्ट के # स्टेटमेंट के बाद 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,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(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 {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?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,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. बधाई हो

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

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