Web Vitals เป็นโครงการริเริ่มของ Google ที่ให้คำแนะนำแบบรวมสำหรับสัญญาณคุณภาพหน้าเว็บที่สำคัญต่อการมอบประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้บนเว็บ โดยมีเป้าหมายเพื่อลดความซับซ้อนของเครื่องมือวัดประสิทธิภาพที่มีอยู่หลากหลาย และช่วยให้เจ้าของเว็บไซต์มุ่งเน้นไปที่เมตริกที่สำคัญที่สุด ซึ่งก็คือ Core Web Vitals
Core Web Vitals
Core Web Vitals เป็นชุดย่อยของ Web Vitals ที่นำไปใช้กับหน้าเว็บทุกหน้า ซึ่งเจ้าของเว็บไซต์ทุกรายควรวัดผล และแสดงไว้ในเครื่องมือทั้งหมดของ Google Core Web Vitals แต่ละรายการแสดงถึงประสบการณ์ของผู้ใช้ในด้านต่างๆ ที่วัดผลได้ในภาคสนาม และสะท้อนให้เห็นถึงประสบการณ์จริงของผลลัพธ์ที่มุ่งเน้นผู้ใช้เป็นสำคัญ
เมตริกที่ประกอบเป็น Core Web Vitals จะพัฒนาขึ้นเมื่อเวลาผ่านไป ชุดปัจจุบันจะมุ่งเน้นที่ประสบการณ์ของผู้ใช้ 3 ด้าน ได้แก่ การโหลด การโต้ตอบ และความเสถียรของภาพ โดยมีเมตริกต่อไปนี้
- Largest Contentful Paint (LCP): วัดประสิทธิภาพของการโหลด เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี LCP ต้องเกิดขึ้นภายใน 2.5 วินาทีนับจากที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก
- การโต้ตอบกับ Next Paint (INP): วัดการโต้ตอบ หน้าเว็บต้องมี INP ไม่เกิน 200 มิลลิวินาที เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี
- Cumulative Layout Shift (CLS): วัดความเสถียรของภาพ หากต้องการมอบประสบการณ์ที่ดีแก่ผู้ใช้ ควรคง CLS ไว้ที่ 0.1. หรือน้อยกว่านั้น
สำหรับเมตริกแต่ละรายการเหล่านี้ เพื่อให้มั่นใจว่าคุณบรรลุเป้าหมายที่แนะนำสำหรับผู้ใช้ส่วนใหญ่ เกณฑ์ที่ดีในการวัดคือเปอร์เซ็นไทล์ที่ 75 ของการโหลดหน้าเว็บที่แบ่งกลุ่มในอุปกรณ์เคลื่อนที่และเดสก์ท็อป
เครื่องมือที่ประเมินการปฏิบัติตามข้อกำหนดของ Core Web Vitals ควรพิจารณาว่าหน้าเว็บเป็นไปตามข้อกำหนดหากหน้าเว็บบรรลุเป้าหมายที่แนะนำที่เปอร์เซ็นไทล์ที่ 75 สำหรับแต่ละเมตริกทั้ง 3 รายการนี้
อายุการใช้งาน
เมตริกในแทร็ก Core Web Vitals จะผ่านวงจรที่ประกอบด้วย 3 ระยะ ได้แก่ ทดลอง รอดำเนินการ และเสถียร
โดยแต่ละระยะได้รับการออกแบบมาเพื่อส่งสัญญาณให้นักพัฒนาแอปทราบความคิดเกี่ยวกับเมตริกแต่ละรายการ ดังนี้
- เมตริกทดลองคือ Core Web Vitals ที่คาดหวังซึ่งอาจยังอยู่ระหว่างการเปลี่ยนแปลงที่สําคัญ ทั้งนี้ขึ้นอยู่กับการทดสอบและความคิดเห็นของชุมชน
- เมตริกที่รอดำเนินการคือ Core Web Vitals ในอนาคตซึ่งผ่านขั้นตอนการทดสอบและความคิดเห็น รวมถึงมีลำดับเวลาที่ชัดเจนในความเสถียร
- เมตริกที่เสถียรคือชุด Core Web Vitals ปัจจุบันที่ Chrome พิจารณาว่าจำเป็นต่อประสบการณ์การใช้งานที่ยอดเยี่ยมของผู้ใช้
Core Web Vitals มีขั้นตอนอยู่ในวงจรต่อไปนี้
รุ่นทดลอง
เมื่อเมตริกได้รับการพัฒนาและเข้าสู่ระบบนิเวศเป็นครั้งแรก ระบบจะถือว่าเป็นเมตริกทดลอง
วัตถุประสงค์ของระยะทดลองคือการประเมินสมรรถภาพของเมตริก โดยขั้นแรกคือการสำรวจปัญหาที่จะแก้ไข และอาจทำซ้ำเมตริกก่อนหน้าที่อาจระบุไม่สำเร็จ ตัวอย่างเช่น INP เพิ่งเปิดตัวเป็นเมตริกทดลองในปี 2022 เพื่อแก้ไขปัญหาด้านประสิทธิภาพรันไทม์ของเว็บที่ครอบคลุมมากกว่า First Input Delay (FID)
ช่วงทดลองของวงจร Core Web Vitals มีวัตถุประสงค์เพื่อเพิ่มความยืดหยุ่นในการพัฒนาเมตริกโดยการระบุข้อบกพร่องและสำรวจการเปลี่ยนแปลงคําจํากัดความเริ่มต้น และยังเป็นช่วงที่ความคิดเห็นของชุมชน สำคัญที่สุดเช่นกัน
รอดำเนินการ
เมื่อทีม Chrome ระบุว่าเมตริกทดลองได้รับความคิดเห็นมากพอและพิสูจน์แล้วว่ามีประสิทธิภาพ เมตริกนั้นจะกลายเป็นเมตริกที่รอดำเนินการ ตัวอย่างเช่น มีการโปรโมต INP ในปี 2023 จากสถานะ "ทดลอง" เป็น "รอดำเนินการ" โดยมีความตั้งใจที่จะเลิกใช้ FID ในท้ายที่สุด
ระบบจะเก็บรักษาเมตริกที่รอดำเนินการในขั้นตอนนี้เป็นเวลาอย่างน้อย 6 เดือนเพื่อให้เวลาระบบนิเวศในการปรับตัว ความคิดเห็นของชุมชนยังคงเป็นแง่มุมที่สำคัญของระยะนี้ เนื่องจากนักพัฒนาซอฟต์แวร์จำนวนมากขึ้นเริ่มใช้เมตริกนี้
คงที่
เมื่อสรุปเมตริกของตัวเลือก Core Web Vitals เมตริกนั้นจะกลายเป็นเมตริกที่เสถียร เมื่อถึงตอนนั้นเมตริกจะกลายเป็น Core Web Vitals
เรารองรับเมตริกที่เสถียรอย่างสม่ำเสมอและอาจต้องมีการแก้ไขข้อบกพร่องและเปลี่ยนแปลงคำจำกัดความ เมตริก Core Web Vitals ที่เสถียรจะไม่เปลี่ยนแปลงมากกว่า 1 ครั้งต่อปี การเปลี่ยนแปลงใดก็ตามใน Core Web Vitals จะแจ้งอย่างชัดเจนในเอกสารอย่างเป็นทางการของเมตริก รวมทั้งในบันทึกการเปลี่ยนแปลงของเมตริกด้วย Core Web Vitals จะรวมอยู่ในการประเมินด้วย
เมตริกที่เสถียรไม่จำเป็นต้องเป็นแบบถาวร เมตริกที่เสถียรอาจมีการเลิกใช้และแทนที่ด้วยเมตริกอื่นที่จัดการกับพื้นที่ที่เป็นปัญหาได้อย่างมีประสิทธิภาพมากขึ้น สิ่งที่เกิดขึ้นกับ FID คือ INP กลายเป็นเมตริก Core Web Vitals ที่มีความเสถียรในปี 2024
วัดและรายงาน Core Web Vitals
Google เชื่อว่า Core Web Vitals มีความสำคัญต่อประสบการณ์การใช้งานเว็บทั้งหมด ด้วยเหตุนี้ บริษัทจึงมุ่งมั่นที่จะแสดงเมตริกเหล่านี้ในเครื่องมือยอดนิยมทั้งหมด ส่วนต่อไปนี้จะแสดงรายละเอียดเครื่องมือ ที่รองรับ Core Web Vitals
เครื่องมือภาคสนามสำหรับวัดผล Core Web Vitals
รายงานประสบการณ์ของผู้ใช้ Chrome จะรวบรวมข้อมูลการวัดผลจากผู้ใช้จริงที่ไม่ระบุตัวตนสำหรับ Core Web Vitals แต่ละรายการ ข้อมูลนี้ช่วยให้เจ้าของเว็บไซต์ประเมินประสิทธิภาพได้อย่างรวดเร็วโดยที่ไม่ต้องตั้งค่าข้อมูลวิเคราะห์สำหรับหน้าเว็บด้วยตนเอง และยังขับเคลื่อนเครื่องมือต่างๆ เช่น PageSpeed Insights และรายงาน Core Web Vitals ของ Search Console ได้ด้วย
| LCP | INP | CLS | |
| รายงานประสบการณ์ของผู้ใช้ Chrome | |||
| PageSpeed Insights | |||
| Search Console (รายงาน Core Web Vitals) |
ข้อมูลจากรายงานประสบการณ์ของผู้ใช้ Chrome ช่วยให้ประเมินประสิทธิภาพของเว็บไซต์ได้อย่างรวดเร็ว แต่ไม่ได้ให้การวัดและส่งข้อมูลทางไกลในการดูหน้าเว็บอย่างละเอียด ซึ่งมักจะจำเป็นในการวินิจฉัย ตรวจสอบ และตอบสนองต่อการถดถอยอย่างรวดเร็ว ด้วยเหตุนี้ เราจึงขอแนะนำให้เว็บไซต์ตั้งค่าการตรวจสอบผู้ใช้จริงด้วยตนเอง
วัด Core Web Vitals ใน JavaScript
ซึ่งจะวัด Core Web Vitals แต่ละรายการใน JavaScript ได้โดยใช้ API เว็บมาตรฐาน
วิธีที่ง่ายที่สุดในการวัด Core Web Vitals ทั้งหมดคือการใช้ไลบรารี JavaScript web-vitals ซึ่งเป็น Wrapper API ขนาดเล็กที่พร้อมสำหรับการใช้งานจริงซึ่งวัดเมตริกแต่ละรายการในลักษณะที่ตรงกับวิธีที่เครื่องมือของ Google รายงานอย่างถูกต้อง
เมื่อใช้ไลบรารี web-vitals คุณจะวัดเมตริกแต่ละรายการได้ง่ายๆ เพียงเรียกใช้ฟังก์ชันเดียว (ดูรายละเอียดเกี่ยวกับการใช้งานและ API ที่สมบูรณ์ในเอกสารประกอบ)
import {onCLS, onINP, onLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
หลังจากที่กำหนดค่าเว็บไซต์ให้ใช้ไลบรารี web-vitals เพื่อวัดและส่งข้อมูล Core Web Vitals ไปยังปลายทางการวิเคราะห์แล้ว ขั้นตอนถัดไปคือการรวบรวมและรายงานข้อมูลนั้นเพื่อดูว่าหน้าเว็บเป็นไปตามเกณฑ์ที่แนะนำสำหรับการเข้าชมหน้าเว็บอย่างน้อย 75% หรือไม่
แม้ว่าผู้ให้บริการวิเคราะห์บางรายจะรองรับเมตริก Core Web Vitals ในตัว แต่ก็ผู้ที่ไม่ควรรวมฟีเจอร์เมตริกที่กำหนดเองพื้นฐานที่ให้คุณวัด Core Web Vitals ในเครื่องมือของตนก็ได้
ตัวอย่างหนึ่งก็คือรายงาน Web Vitals ซึ่งช่วยให้เจ้าของเว็บไซต์วัด Core Web Vitals ได้โดยใช้ Google Analytics ดูคําแนะนําในการวัด Core Web Vitals โดยใช้เครื่องมือวิเคราะห์อื่นๆ ได้ที่แนวทางปฏิบัติแนะนําสําหรับการวัด Web Vitals ในภาคสนาม
นอกจากนี้คุณยังรายงานเกี่ยวกับ Core Web Vitals แต่ละรายการได้โดยไม่ต้องเขียนโค้ดโดยใช้ส่วนขยาย Chrome ของ Web Vitals ส่วนขยายนี้ใช้ไลบรารี web-vitals ในการวัดเมตริกเหล่านี้ และแสดงให้ผู้ใช้เห็นขณะท่องเว็บ
ส่วนขยายนี้จะมีประโยชน์ในการทำความเข้าใจประสิทธิภาพของเว็บไซต์ของคุณเอง เว็บไซต์ของคู่แข่ง และเว็บโดยรวม
| LCP | INP | CLS | |
|---|---|---|---|
| Web-vitals | |||
| ส่วนขยาย Web Vitals |
นักพัฒนาซอฟต์แวร์ที่ต้องการวัดเมตริกเหล่านี้โดยตรงโดยใช้ API ของเว็บที่เกี่ยวข้องสามารถใช้คำแนะนำเมตริกต่อไปนี้เพื่อดูรายละเอียดการใช้งานแทน
ดูคําแนะนําเพิ่มเติมเกี่ยวกับการวัดเมตริกเหล่านี้โดยใช้บริการวิเคราะห์ยอดนิยมหรือเครื่องมือวิเคราะห์ภายในของคุณเองได้ที่แนวทางปฏิบัติแนะนําในการวัด Web Vitals ในภาคสนาม
เครื่องมือในห้องทดลองเพื่อวัด Core Web Vitals
แม้ว่า Core Web Vitals ทั้งหมดจะเป็นเมตริกภาคสนามที่เป็นสิ่งแรกและสำคัญที่สุด แต่เมตริกเหล่านั้นจำนวนมากสามารถวัดผลได้ในห้องทดลองเช่นกัน
การวัดผลในห้องปฏิบัติการเป็นวิธีที่ดีที่สุดในการทดสอบประสิทธิภาพของฟีเจอร์ในระหว่างการพัฒนา นอกจากนี้ยังเป็นวิธีที่ดีที่สุดในการติดตามประสิทธิภาพที่ถดถอยก่อนที่จะเกิดขึ้น
เครื่องมือต่อไปนี้ใช้วัด Core Web Vitals ในสภาพแวดล้อมห้องทดลองได้
| LCP | INP | CLS | |
|---|---|---|---|
| เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome | (ใช้ TBT แทน) | ||
| Lighthouse | (ใช้ TBT แทน) |
เครื่องมืออย่าง Lighthouse ที่โหลดหน้าเว็บในสภาพแวดล้อมจำลองโดยที่ผู้ใช้ไม่สามารถวัด INP ได้เนื่องจากไม่มีอินพุตจากผู้ใช้ อย่างไรก็ตาม เมตริกเวลาในการบล็อกรวม (TBT) นั้นวัดผลได้ในห้องทดลองและเป็นพร็อกซีที่ยอมรับได้สำหรับปัญหา INP ซึ่งอาจเกิดจากการโต้แย้งในเทรดหลักระหว่างการเริ่มต้น การเพิ่มประสิทธิภาพที่ปรับปรุง TBT ในห้องทดลองควรช่วยปรับปรุง INP ในวงจำกัด ดูคำแนะนำเพิ่มเติมได้ในคำแนะนำในการปรับปรุงคะแนน
แม้ว่าการวัดผลในห้องทดลองจะเป็นส่วนสำคัญในการมอบประสบการณ์การใช้งานที่ยอดเยี่ยม แต่ไม่ได้ใช้แทนการวัดผลในภาคสนาม ประสิทธิภาพของเว็บไซต์อาจแตกต่างกันไปอย่างมากตามความสามารถของอุปกรณ์ของผู้ใช้ สภาพเครือข่าย กระบวนการอื่นๆ ที่อาจทำงานอยู่ในอุปกรณ์ และวิธีที่ผู้ใช้โต้ตอบกับหน้าเว็บ ที่จริงแล้ว เมตริก Core Web Vitals แต่ละรายการอาจมีผลต่อคะแนนที่ได้รับผลกระทบจากการโต้ตอบของผู้ใช้ เฉพาะการวัดภาคสนามเท่านั้นที่สามารถจับภาพที่สมบูรณ์ ได้อย่างถูกต้อง
คำแนะนำในการปรับปรุงคะแนน
คำแนะนำต่อไปนี้จะให้คำแนะนำเฉพาะเกี่ยวกับวิธีเพิ่มประสิทธิภาพหน้าเว็บสำหรับ Core Web Vitals แต่ละรายการ
Web Vitals อื่นๆ
แม้ว่า Core Web Vitals จะเป็นเมตริกที่สำคัญสำหรับการทำความเข้าใจและมอบประสบการณ์ของผู้ใช้ที่ยอดเยี่ยม แต่ก็ยังมีเมตริกที่สำคัญอื่นๆ อีกด้วย
Web Vitals อื่นๆ เหล่านี้มักทำหน้าที่เป็นพร็อกซีหรือเมตริกเสริมสำหรับ Core Web Vitals เพื่อช่วยบันทึกภาพรวมประสบการณ์การใช้งานหรือช่วยในการวินิจฉัยปัญหาที่เฉพาะเจาะจง
เช่น Time to First Byte (TTFB) และ First Contentful Paint (FCP) ต่างก็เป็นส่วนสำคัญของประสบการณ์การโหลด ทั้งยังมีประโยชน์ในการวินิจฉัยปัญหาเกี่ยวกับ LCP (เวลาในการตอบสนองของเซิร์ฟเวอร์หรือทรัพยากรการบล็อกการแสดงผลตามลำดับ) ด้วย
ในทำนองเดียวกัน เมตริกอย่าง Total block Time (TBT) เป็นเมตริกสำคัญในห้องทดลองสำหรับการตรวจพบและวินิจฉัยปัญหาการโต้ตอบที่อาจเกิดขึ้นซึ่งอาจส่งผลต่อ INP อย่างไรก็ตาม นี่ไม่ได้เป็นส่วนหนึ่งของชุด Core Web Vitals เนื่องจากวัดผลไม่ได้ในช่อง และไม่ได้แสดงถึงผลลัพธ์ที่มุ่งเน้นผู้ใช้
การเปลี่ยนแปลงใน Web Vitals
Web Vitals และ Core Web Vitals เป็นสัญญาณที่ดีที่สุดที่นักพัฒนาแอปในปัจจุบันมีเพื่อวัดคุณภาพของประสบการณ์การใช้งานทั่วทั้งเว็บ แต่สัญญาณเหล่านี้ยังไม่สมบูรณ์แบบ และควรมีการปรับปรุงหรือเพิ่มเติมในอนาคต
Core Web Vitals เกี่ยวข้องกับหน้าเว็บทุกหน้าและเป็นเครื่องมือของ Google ที่เกี่ยวข้อง เนื่องจากการเปลี่ยนแปลงเมตริกเหล่านี้ส่งผลกระทบเป็นวงกว้าง นักพัฒนาซอฟต์แวร์จึงควรคาดหวังคำนิยามและเกณฑ์ของ Core Web Vitals ที่มีความเสถียร รวมถึงต้องประกาศล่วงหน้าและกำหนดเวลาการอัปเดตที่คาดการณ์ได้
โดย Web Vitals อื่นๆ นั้นมักมีเนื้อหาเฉพาะหรือเครื่องมือต่างๆ โดยเฉพาะ อีกทั้งยังเป็นการทดสอบมากกว่า Core Web Vitals ดังนั้น คําจํากัดความและเกณฑ์จึงอาจเปลี่ยนแปลงตามความถี่ที่มากขึ้น
สำหรับ Web Vitals ทั้งหมด การเปลี่ยนแปลงจะบันทึกอยู่ในบันทึกการเปลี่ยนแปลงสาธารณะนี้