מדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) באינטרנט בדף אינטרנט

1. לפני שמתחילים

במעבדה זו של הקוד, לומדים את מדידת מדדי חוויית המשתמש הבסיסיים של דפי אינטרנט באמצעות ספריית ה-JavaScript של web-vitals.

ההמלצה של Google היא למדוד את מדדי חוויית המשתמש הבסיסיים (Core Web Vitals), שהם נמצאים באחוזון ה-75 של טעינת דפים שמפולחים בין מכשירים ניידים למחשבים.

דוח המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) כוללים את שלושת המדדים האלה, שרלוונטיים לכל דפי האינטרנט ומספקים תובנות חשובות לגבי חוויית המשתמש:

  • Largest Contentful Paint (LCP). מתבצעת מדידה של ביצועי הטעינה והשינוי אמור להתרחש תוך 2.5 שניות מרגע טעינת הדף.
  • השהיה לאחר קלט ראשוני (FID). מתבצעת מדידה של אינטראקטיביות שאמורה להתרחש תוך 100 אלפיות השנייה.
  • Cumulative Layout Shift (CLS). משמש למדידת יציבות חזותית ועליו להיות בטווח של 0.1.

דרישות מוקדמות

מה צריך לעשות

  • יש להוסיף את הספרייה web-vitals לדף אינטרנט.
  • מדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) בדף האינטרנט ב-Google Chrome Developer Tools.
  • אופציונלי: דיווח על דוח ה-Web Vitals הבסיסיים של דף האינטרנט ב-Google Analytics.

מה תצטרך להכין

  • עורך טקסט שתבחרו, כמו Sublime Text או Visual Studio
  • דפדפן אינטרנט מבוסס Chromium, כמו Google Chrome או Microsoft Edge (מידע נוסף על הסיבות לכך שצריך דפדפן אינטרנט מבוסס Chromium) אפשר לקרוא תמיכה בדפדפן.)

2. הוספת הספרייה של אתרי האינטרנט לדף אינטרנט

  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>

הקוד הזה יוצר את דף האינטרנט שבו משתמשים ב-Codelab הזה.

  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). דפדפנים שלא תומכים במודולים או בממשקי API של Web Vitals בסיסיים לא ינסו לטעון את הסקריפט הזה.

3. מדידת המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) בדף האינטרנט ב-Google Chrome Developer

  1. פותחים את הקובץ השמור בדפדפן האינטרנט.
  2. לוחצים לחיצה ימנית על דף האינטרנט ולאחר מכן לוחצים על בדיקה בתיבת הדו-שיח.
  3. בחלונית Google Chrome Developer Tools, לוחצים על הכרטיסייה Console ואז בוחרים באפשרות Console settings 6a9a7d8992edcd2c.png > Preserve log (שמירת יומן). הגדרה זו מבטיחה שהיומנים יישמרו גם לאחר רענון של דף האינטרנט.

74044d63a2f32916.png

  1. לוחצים על הכרטיסייה Network (רשת) ולאחר מכן לוחצים על חץ ההרחבה של c5262a3662ee288c.png בתפריט הנפתח של ויסות הנתונים, ובוחרים באפשרות איטי 3G. ההגדרה הזו מדמה חיבור רשת איטי.

הכרטיסייה &#39;רשת&#39; עם הגדרת 3G איטי

  1. חוזרים לכרטיסייה Console ולוחצים על מקום כלשהו בדף האינטרנט. המדדים של LCP ו-FID מודפסים בכרטיסייה Console.

הכרטיסייה Console לאחר ההדפסה של מדדי ה-LCP ו-FID.

  1. מרעננים את דף האינטרנט. בכרטיסייה Console, מתבצעת הדפסה של מדד ה-CLS.

הכרטיסייה &#39;מסוף&#39; אחרי ההדפסה של מדד ה-CLS.

  1. חוזרים לכרטיסייה Network (רשת) ולוחצים על חץ ההרחבה של c5262a3662ee288c.png בתפריט הנפתח של ויסות הנתונים, ובוחרים באפשרות Fast 3G. ההגדרה הזו מדמה חיבור רשת מהיר.
  2. מנווטים שוב אל הכרטיסייה Console, ולוחצים על מקום כלשהו בדף האינטרנט.מדדי ה-LCP ו-FID מודפסים שוב בכרטיסייה Console, אבל הם השתפרו מהגרסה הקודמת.

הכרטיסייה &#39;מסוף&#39; אחרי שהמדדים LCP ו-FID מדפיסים שוב.

  1. מרעננים את דף האינטרנט. מדד ה-CLS מודפס שוב בכרטיסייה Console, אבל הוא השתפר מתחילתו.

הכרטיסייה &#39;מסוף&#39; אחרי שמדד ה-CLS יודפס שוב.

4. אופציונלי: דיווח על דוח ה-Web Vitals הבסיסיים של דף האינטרנט ב-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,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

הקוד הזה שולח את המדדים הבסיסיים של חוויית המשתמש (Core Web Vitals) אל Google Analytics, שם אפשר לראות אותם בדוח 'אירועים מובילים':

הדוח &#39;אירועים מובילים&#39; ב-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.

מידע נוסף