React Academy · บทเรียน

การวัด Core Web Vitals ในแอป React

ใช้ Lighthouse, WebPageTest และไลบรารี web-vitals เพื่อรวบรวมคะแนน LCP, INP และ CLS

การวัด Core Web Vitals ในแอป React เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

ตัวชี้วัดประสิทธิภาพเว็บหลักคืออะไร

ตัวชี้วัดประสิทธิภาพเว็บหลักคือเมตริกประสบการณ์ผู้ใช้ของ Google ที่ส่งผลต่ออันดับการค้นหา ได้แก่ LCP (การวาดเนื้อหาขนาดใหญ่ที่สุด — การโหลด), INP (การโต้ตอบจนถึงการวาดครั้งถัดไป — การตอบสนอง) และ CLS (การเปลี่ยนตำแหน่งเค้าโครงสะสม — ความเสถียรของภาพ)

เกณฑ์ที่ดี

ค่าเป้าหมายคือ LCP ≤ 2.5s, INP ≤ 200ms และ CLS ≤ 0.1 ค่าที่สูงกว่าเกณฑ์ 'แย่' (LCP > 4s, INP > 500ms และ CLS > 0.25) จะส่งผลเสียอย่างมากต่อประสบการณ์ผู้ใช้และอันดับการค้นหา

ไลบรารี web-vitals

แพ็กเกจ npm web-vitals ใช้ API แบบเรียบง่ายเพื่อวัด CWV ใน browser จริง

npm install web-vitals

import { onCLS, onINP, onLCP } from 'web-vitals';

onCLS(metric => console.log('CLS:', metric.value));
onINP(metric => console.log('INP:', metric.value));
onLCP(metric => console.log('LCP:', metric.value));

การส่งตัวชี้วัดไปยังระบบวิเคราะห์ข้อมูล

ส่งตัวชี้วัดไปยังปลายทางระบบวิเคราะห์ข้อมูลเพื่อทำการติดตามผู้ใช้จริง (RUM) โดย Lighthouse วัดประสิทธิภาพในห้องปฏิบัติการ แต่ RUM แสดงสิ่งที่ผู้ใช้จริงพบเจอ

function sendToAnalytics(metric) {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify(metric),
    headers: { 'Content-Type': 'application/json' },
  });
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

ตัวชี้วัดในตัวของ Next.js

Next.js เก็บข้อมูลตัวชี้วัดประสิทธิภาพเว็บหลักโดยอัตโนมัติ ส่งออกฟังก์ชัน reportWebVitals จาก _app.js (Pages) หรือใช้การรองรับในตัวของ App Router

// pages/_app.js (Pages Router)
export function reportWebVitals(metric) {
  if (metric.label === 'web-vital') {
    console.log(metric.name, metric.value);
  }
}

Lighthouse ใน Chrome DevTools

เรียกใช้การตรวจสอบด้วย Lighthouse ใน Chrome DevTools (แท็บ Lighthouse) เพื่อวัด CWV จากห้องปฏิบัติการ ใช้โหมดไม่ระบุตัวตนเพื่อหลีกเลี่ยงผลกระทบจากส่วนขยาย และจำกัดความเร็วเครือข่ายเพื่อจำลองการใช้งานบนมือถือ

WebPageTest

WebPageTest.org ให้แผนภูมิลำดับการโหลดแบบละเอียด การบันทึกวิดีโอ และการวัด CWV จากอุปกรณ์จริงในสถานที่ทางภูมิศาสตร์ต่าง ๆ จึงสมจริงกว่า Lighthouse ที่เรียกใช้ในเครื่อง

รายงานประสบการณ์ผู้ใช้ Chrome (CrUX)

ชุดข้อมูล CrUX ของ Google รวบรวมข้อมูล CWV จากผู้ใช้จริงของเว็บไซต์หลายล้านแห่ง คุณเข้าถึงข้อมูลนี้ได้ผ่าน Google Search Console, PageSpeed Insights หรือ CrUX API

PerformanceObserver สำหรับ LCP

ใช้ API PerformanceObserver ในเบราว์เซอร์เพื่อสังเกตรายการ LCP และทำความเข้าใจว่าองค์ประกอบใดเป็นเนื้อหาที่มีการวาดขนาดใหญ่ที่สุด

const po = new PerformanceObserver(entries => {
  for (const entry of entries.getEntries()) {
    console.log('LCP element:', entry.element, 'time:', entry.startTime);
  }
});
po.observe({ type: 'largest-contentful-paint', buffered: true });

การแก้ไขข้อผิดพลาดของ CLS

ใช้ Layout Shift Regions ของ Chrome DevTools (ในแผง Rendering) เพื่อเน้นองค์ประกอบที่ทำให้เค้าโครงเลื่อน โดยแสดงการซ้อนทับสีแดง

ข้อมูลการระบุสาเหตุ

ไลบรารี web-vitals ให้ข้อมูลการระบุสาเหตุที่บอกว่า สิ่งใด ทำให้เมตริกมีค่าไม่ดี เช่น องค์ประกอบ LCP การโต้ตอบของ INP หรือองค์ประกอบที่ทำให้เกิด CLS

onLCP(metric => {
  const { element, url } = metric.attribution.lcpEntry;
  console.log('LCP element:', element);
}, { reportAllChanges: true });

ตรวจสอบความเข้าใจ

ตัวชี้วัดประสิทธิภาพเว็บหลักใดใช้วัดการตอบสนอง โดยเฉพาะความเร็วที่หน้าตอบสนองต่อการโต้ตอบของผู้ใช้

สรุปทบทวน

วัด CWV ด้วยไลบรารี web-vitals หรือ Lighthouse ส่งเมตริกไปยังระบบวิเคราะห์ข้อมูลเพื่อการติดตามผู้ใช้จริง ตั้งเป้าให้ LCP ≤ 2.5s, INP ≤ 200ms และ CLS ≤ 0.1 ใช้ข้อมูลการระบุสาเหตุเพื่อค้นหาองค์ประกอบหรือการโต้ตอบเฉพาะที่ทำให้คะแนนไม่ดี

คำถามที่พบบ่อย

บทเรียน “การวัด Core Web Vitals ในแอป React” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การวัด Core Web Vitals ในแอป React” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การวัด Core Web Vitals ในแอป React”

ใช้ Lighthouse, WebPageTest และไลบรารี web-vitals เพื่อรวบรวมคะแนน LCP, INP และ CLS คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การวัด Core Web Vitals ในแอป React” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ React Academy