Core Web Vitals یک صفحه وب را با کتابخانه web-vitals اندازه گیری کنید

1. قبل از شروع

در این آزمایشگاه کد، یاد می گیرید که چگونه Core Web Vitals یک صفحه وب را با کتابخانه JavaScript web-vitals vitals اندازه گیری کنید.

Google توصیه می‌کند که Core Web Vitals را اندازه‌گیری کنید و در صدک 75 بارگذاری صفحه در دستگاه‌های تلفن همراه و دسکتاپ قرار بگیرند.

Core Web Vitals شامل این سه معیار است که برای همه صفحات وب اعمال می شود و بینش مهمی را در مورد تجربه کاربر به شما ارائه می دهد:

  • بزرگترین رنگ محتوایی (LCP). عملکرد بارگذاری را اندازه گیری می کند و باید در عرض 2.5 ثانیه پس از شروع بارگیری صفحه رخ دهد.
  • تاخیر ورودی اول (FID). تعامل را اندازه گیری می کند و باید در عرض 100 میلی ثانیه رخ دهد.
  • تغییر چیدمان تجمعی (CLS). ثبات بصری را اندازه گیری می کند و باید در محدوده 0.1 باشد.

پیش نیازها

کاری که خواهی کرد

  • کتابخانه web-vitals را به یک صفحه وب اضافه کنید.
  • Core Web Vitals صفحه وب را در Google Chrome Developer Tools اندازه گیری کنید.
  • اختیاری: Core Web Vitals صفحه وب را به Google Analytics گزارش کنید.

آنچه شما نیاز دارید

  • یک ویرایشگر متن به انتخاب شما، مانند Sublime Text یا Visual Studio Code
  • یک مرورگر وب مبتنی بر Chromium، مانند Google Chrome یا Microsoft Edge (برای اطلاعات بیشتر در مورد اینکه چرا به مرورگر وب مبتنی بر Chromium نیاز دارید، به پشتیبانی مرورگر مراجعه کنید.)

2. کتابخانه web-vitals را به یک صفحه وب اضافه کنید

  1. در ویرایشگر متن خود، یک web-vitals-test.html ایجاد کنید و سپس این کد 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. در عنصر <body> کد HTML بعد از عنصر <p> دوم، این اسکریپت ماژول را وارد کرده و سپس فایل را ذخیره کنید:

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>

همه مرورگرهای مدرن از اسکریپت‌های ماژول پشتیبانی می‌کنند، که مناسب کدهایی هستند که فقط از APIهای جدید استفاده می‌کنند، مانند مواردی که برای اندازه‌گیری Core Web Vitals مورد نیاز است. مرورگرهایی که از ماژول ها یا Core Web Vitals API ها پشتیبانی نمی کنند، سعی در بارگیری این اسکریپت ندارند.

3. Core Web Vitals صفحه وب را در Google Chrome Developer Tools اندازه گیری کنید

  1. در مرورگر وب خود، فایل ذخیره شده را باز کنید.
  2. روی صفحه وب کلیک راست کرده و سپس Inspect را در گفتگو کلیک کنید.
  3. در قسمت Google Chrome Developer Tools ، روی تب Console کلیک کنید و سپس Console settings را انتخاب کنید 6a9a7d8992edcd2c.png > حفظ گزارش این تنظیم تضمین می‌کند که هنگام بازخوانی صفحه وب، گزارش‌ها باقی می‌مانند.

74044d63a2f32916.png

  1. روی زبانه Network کلیک کنید و سپس روی آن کلیک کنید c5262a3662ee288c.png فلش گسترش دهنده منوی کشویی throttling و Slow 3G را انتخاب کنید. این تنظیم اتصال شبکه کند را شبیه سازی می کند.

تب Network با تنظیم Slow 3G در منوی کشویی Throttling انتخاب شده است.

  1. به تب Console برگردید و سپس در هر نقطه از صفحه وب کلیک کنید. معیارهای LCP و FID در تب Console چاپ می شوند.

تب Console پس از چاپ معیارهای LCP و FID.

  1. صفحه وب را بازخوانی کنید. متریک CLS در تب Console چاپ می شود.

برگه Console بعد از متریک CLS چاپ می شود.

  1. به تب Network برگردید و سپس روی آن کلیک کنید c5262a3662ee288c.png فلش گسترش دهنده منوی کشویی throttling و Fast 3G را انتخاب کنید. این تنظیم اتصال سریع شبکه را شبیه سازی می کند.
  2. به برگه Console برگردید، و سپس در هر نقطه از صفحه وب کلیک کنید. معیارهای LCP و FID دوباره در تب Console چاپ می‌شوند، اما نسبت به قبل بهبود یافته‌اند.

تب Console بعد از معیارهای LCP و FID دوباره چاپ می شود.

  1. صفحه وب را بازخوانی کنید. متریک CLS دوباره در تب Console چاپ می شود، اما نسبت به قبل بهبود یافته است.

تب Console بعد از متریک CLS دوباره چاپ می شود.

4. اختیاری: Core Web Vitals صفحه وب را به Google Analytics گزارش دهید

  • در web-vitals-test.html بعد از دستور import اسکریپت ماژول، تابع 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);

این کد Core Web Vitals را به 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. تبریک می گویم

تبریک می گویم! شما یاد گرفتید که چگونه Core Web Vitals یک صفحه وب را با کتابخانه web-vitals اندازه گیری و گزارش دهید.

بیشتر بدانید