วัด Core Web Vitals ของหน้าเว็บด้วยไลบรารี Web-vitals บนเว็บ

1. ข้อควรทราบก่อนที่จะเริ่มต้น

ใน Codelab นี้ คุณจะได้ดูวิธีวัด Core Web Vitals ของหน้าเว็บด้วยไลบรารี JavaScript ของ web-vitals

Google ขอแนะนําให้คุณวัด Core Web Vitals และระบุจํานวนดังกล่าวภายในเปอร์เซ็นไทล์ที่ 75 ของการโหลดหน้าเว็บที่แบ่งกลุ่มในอุปกรณ์เคลื่อนที่และเดสก์ท็อป

Core Web Vitals มีเมตริก 3 รายการต่อไปนี้ ซึ่งจะใช้กับหน้าเว็บทุกหน้า และให้ข้อมูลเชิงลึกที่สําคัญเกี่ยวกับประสบการณ์ของผู้ใช้

  • การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP) วัดประสิทธิภาพในการโหลดและควรเกิดขึ้นภายใน 2.5 วินาทีหลังจากที่หน้าเว็บเริ่มโหลด
  • ความล่าช้าของอินพุตแรก (FID) วัดการโต้ตอบและควรเกิดขึ้นภายใน 100 มิลลิวินาที
  • Cumulative Layout Shift (CLS) วัดความเสถียรภาพและควรอยู่ภายใน 0.1

สิ่งที่ต้องมีก่อน

สิ่งที่คุณจะทํา

  • เพิ่มไลบรารี web-vitals ลงในหน้าเว็บ
  • วัด Core Web Vitals ของหน้าเว็บในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome
  • ไม่บังคับ: รายงาน Core Web Vitals ของหน้าเว็บไปยัง Google Analytics

สิ่งที่ต้องมี

  • เครื่องมือแก้ไขข้อความที่ต้องการ เช่น Sublime Text หรือ Visual Studio Code
  • เว็บเบราว์เซอร์แบบ Chromium เช่น Google Chrome หรือ Microsoft Edge (โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับสาเหตุที่จําเป็นต้องใช้เว็บเบราว์เซอร์แบบ Chromium ที่หัวข้อการรองรับเบราว์เซอร์)

2. เพิ่มไลบรารี Vi-vital ในหน้าเว็บ

  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> รายการที่ 2 ให้ป้อนสคริปต์โมดูลนี้ แล้วบันทึกไฟล์

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

  1. เปิดไฟล์ในเว็บเบราว์เซอร์
  2. คลิกขวาที่หน้าเว็บ แล้วคลิกตรวจสอบในกล่องโต้ตอบ
  3. ในแผงเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของ Google Chrome ให้คลิกแท็บคอนโซลแล้วเลือกการตั้งค่าคอนโซล 6a9a7d8992edcd2c.png > Preserve log การตั้งค่านี้จะช่วยให้มั่นใจว่าบันทึกจะยังคงอยู่เมื่อคุณรีเฟรชหน้าเว็บ

74044d63a2f32916.png

  1. คลิกแท็บเครือข่าย แล้วคลิกลูกศรขยาย c5262a3662ee288c.png ของเมนูแบบเลื่อนลงและเลือก 3G ที่ช้า การตั้งค่านี้จะจําลองการเชื่อมต่อเครือข่ายที่ช้า

แท็บ &quot;เครือข่าย&quot; ที่มีการตั้งค่า 3G ช้าอยู่ในเมนูแบบเลื่อนลง

  1. กลับไปที่แท็บคอนโซล แล้วคลิกที่ใดก็ได้ในหน้าเว็บ เมตริก LCP และ FID ที่พิมพ์ในแท็บคอนโซล

แท็บ Console หลังจากพิมพ์เมตริก LCP และ FID

  1. รีเฟรชหน้าเว็บ เมตริก CLS จะพิมพ์ในแท็บคอนโซล

แท็บ Console หลังจากที่มีการพิมพ์เมตริก CLS

  1. กลับไปที่แท็บเครือข่าย แล้วคลิกลูกศรขยาย c5262a3662ee288c.png ของเมนูแบบเลื่อนลงและเลือก 3G ที่รวดเร็ว การตั้งค่านี้จะจําลองการเชื่อมต่อเครือข่ายที่รวดเร็ว
  2. กลับไปที่แท็บ Console แล้วคลิกที่ใดก็ได้ในหน้าเว็บ เมตริก LCP และ FID จะพิมพ์ในแท็บ Console อีกครั้ง แต่เมตริกเหล่านั้นปรับปรุงจากเดิม

แท็บคอนโซลหลังจากมีเมตริก LCP และ FID พิมพ์อีกครั้ง

  1. รีเฟรชหน้าเว็บ เมตริก CLS จะพิมพ์ในแท็บคอนโซลอีกครั้ง แต่เมตริกนี้ปรับปรุงจากเดิม

ในแท็บคอนโซลหลังจากเมตริก CLS จะพิมพ์อีกครั้ง

4. ไม่บังคับ: รายงาน Core Web Vitals ของหน้าเว็บไปยัง Google Analytics

  • ในไฟล์ web-vitals-test.html หลังจากคําสั่งนําเข้าโมดูล&#39 ให้ป้อนฟังก์ชัน 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 ซึ่งคุณจะดูได้ในรายงานเหตุการณ์ยอดนิยม

รายงานเหตุการณ์ยอดนิยมใน 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 แล้ว

ดูข้อมูลเพิ่มเติม