ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS
ทำความเข้าใจว่า Largest Contentful Paint, First Input Delay และ Cumulative Layout Shift ใช้วัดอะไร และเหตุใด Google จึงใช้สิ่งเหล่านี้เป็นสัญญาณจัดอันดับ
ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดประสิทธิภาพจึงสำคัญ
หน้าเว็บที่ช้าทำให้สูญเสียผู้ใช้ Google ใช้ประสิทธิภาพเป็นสัญญาณจัดอันดับ เว็บไซต์ที่มีคะแนน Core Web Vitals ต่ำจะมีอันดับในผลการค้นหาต่ำกว่า นอกเหนือจาก SEO แล้ว ความล่าช้าทุก 100 มิลลิวินาทียังลดอัตราการเปลี่ยนเป็นลูกค้าและการมีส่วนร่วมอย่างวัดผลได้
Core Web Vitals ทั้งสามรายการ
Google วัดเมตริกประสบการณ์ผู้ใช้สามรายการ ได้แก่ LCP (ความเร็วในการโหลด), FID (การโต้ตอบ) และ CLS (ความเสถียรทางภาพ) แต่ละรายการมีเกณฑ์ระดับ “ดี” “ควรปรับปรุง” และ “แย่”
Largest Contentful Paint (LCP)
LCP วัดเวลาที่องค์ประกอบเนื้อหาขนาดใหญ่ที่สุดที่มองเห็นได้ เช่น รูปภาพ โปสเตอร์วิดีโอ หรือบล็อกข้อความ แสดงผลเสร็จสมบูรณ์ ระดับดีคือต่ำกว่า 2.5 วินาที ระดับแย่คือเกิน 4 วินาที ควรปรับปรุงด้วยการโหลดรูปภาพส่วนฮีโร่ล่วงหน้า ลดทรัพยากรที่ขัดขวางการแสดงผล และใช้ CDN ที่รวดเร็ว
First Input Delay (FID) และ INP
FID วัดความล่าช้าระหว่างการโต้ตอบครั้งแรกของผู้ใช้ เช่น การคลิกหรือการแตะ กับการตอบสนองของเบราว์เซอร์ ระดับดีคือต่ำกว่า 100 มิลลิวินาที ในปี 2024 FID ถูกแทนที่ด้วย การโต้ตอบจนถึงการวาดครั้งถัดไป (INP) ซึ่งวัดการโต้ตอบทั้งหมด ไม่ใช่เฉพาะครั้งแรก
การเลื่อนเค้าโครงสะสม (CLS)
CLS ใช้วัดการเลื่อนเค้าโครงที่เกิดขึ้นโดยไม่คาดคิดระหว่างโหลดหน้าเว็บ ค่าที่ดี: ต่ำกว่า 0.1 ค่าที่ควรปรับปรุง: สูงกว่า 0.25 สาเหตุได้แก่ รูปภาพที่ไม่ระบุขนาด แบบอักษรที่โหลดล่าช้า และโฆษณาที่แทรกหลังจากการแสดงผลครั้งแรก
การวัด CWV ในเบราว์เซอร์
ใช้แพ็กเกจ npm web-vitals เพื่อเก็บตัวชี้วัดจากผู้ใช้จริงและส่งข้อมูลเหล่านั้นไปยังปลายทางการวิเคราะห์ข้อมูลของคุณ
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}การแก้ไข LCP: โหลดภาพหลักล่วงหน้า
แจ้งให้เบราว์เซอร์ดาวน์โหลดภาพหลักตั้งแต่เนิ่น ๆ ก่อนแยกวิเคราะห์ HTML ส่วนที่เหลือ
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">การแก้ไข CLS: จองพื้นที่
ระบุ width และ height ให้รูปภาพและสื่อฝังทุกครั้ง เพื่อให้เบราว์เซอร์จองพื้นที่ไว้ก่อนที่ทรัพยากรจะมาถึง ใช้ CSS aspect-ratio สำหรับคอนเทนเนอร์ที่ปรับตามขนาดหน้าจอ
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">การแก้ไข INP: แบ่งงานที่ใช้เวลานาน
งาน JavaScript ที่ใช้เวลานานจะบล็อกเธรดหลัก ทำให้การตอบสนองต่อการคลิกล่าช้า แบ่งงานเป็นส่วนย่อยด้วย scheduler.yield() หรือ setTimeout เพื่อให้เบราว์เซอร์แสดงผลและตอบสนองต่อข้อมูลป้อนเข้าได้
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}ข้อมูลจากห้องทดลองเทียบกับข้อมูลภาคสนาม
ข้อมูลจากห้องทดลอง (ไลต์เฮาส์) คือการทดสอบจำลองในสภาพแวดล้อมที่ควบคุมไว้ ส่วนข้อมูลภาคสนาม (CrUX, RUM) เก็บจากผู้ใช้จริงบนอุปกรณ์จริง ข้อมูลภาคสนามคือแหล่งข้อมูลหลักสำหรับการจัดอันดับในเครื่องมือค้นหา
งบประมาณด้านประสิทธิภาพ
กำหนดขีดจำกัดที่ชัดเจน เช่น LCP ต่ำกว่า 2 วินาที และชุดรวม JavaScript ต่ำกว่า 200KB บังคับใช้ในกระบวนการผสานรวมอย่างต่อเนื่องด้วย Lighthouse CI หรือตัววิเคราะห์ชุดรวม เพื่อให้การสร้างโปรเจกต์ล้มเหลวเมื่อประสิทธิภาพถดถอย
ตรวจสอบอย่างรวดเร็ว
ตัวชี้วัด Core Web Vital ใดใช้วัดการกระโดดของภาพที่เกิดขึ้นโดยไม่คาดคิดระหว่างโหลดหน้าเว็บ
สรุป: Core Web Vitals
LCP: ความเร็วในการโหลดองค์ประกอบที่ใหญ่ที่สุด เป้าหมายต่ำกว่า 2.5 วินาที INP (เดิมคือ FID): การตอบสนอง เป้าหมายต่ำกว่า 200 มิลลิวินาที CLS: ความเสถียรของภาพ เป้าหมายต่ำกว่า 0.1 วัดผลด้วยแพ็กเกจ web-vitals ในสภาพแวดล้อมจริง และใช้ไลต์เฮาส์ในกระบวนการผสานรวมอย่างต่อเนื่อง การจัดอันดับในเครื่องมือค้นหาอาศัยข้อมูลภาคสนาม ไม่ใช่ข้อมูลจากห้องทดลอง
คำถามที่พบบ่อย
บทเรียน “ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS”
ทำความเข้าใจว่า Largest Contentful Paint, First Input Delay และ Cumulative Layout Shift ใช้วัดอะไร และเหตุใด Google จึงใช้สิ่งเหล่านี้เป็นสัญญาณจัดอันดับ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตัวชี้วัด Core Web Vitals: LCP, FID และ CLS
- การตรวจสอบและให้คะแนนด้วย Lighthouse
- การปรับปรุงรูปภาพ: การโหลดแบบ lazy และรูปแบบ WebP
- การแยกโค้ดและเส้นทางแบบ Lazy