การปรับปรุงประสบการณ์ของผู้ใช้ให้ดียิ่งขึ้นคือกุญแจสำคัญสู่ความสำเร็จในระยะยาวของเว็บไซต์ต่างๆ ไม่ว่าคุณจะเป็นเจ้าของธุรกิจ นักการตลาด หรือนักพัฒนาซอฟต์แวร์ Web Vitals ก็ช่วยให้คุณวัดประสบการณ์การใช้งานเว็บไซต์และระบุโอกาสในการปรับปรุงได้
ภาพรวม
Web Vitals เป็นโครงการริเริ่มของ Google ในการให้คำแนะนำแบบครบวงจรเกี่ยวกับสัญญาณคุณภาพที่จำเป็นต่อการมอบประสบการณ์การใช้งานที่ยอดเยี่ยมแก่ผู้ใช้บนเว็บ
Google ได้มอบเครื่องมือจำนวนมากตลอดหลายปีที่ผ่านมา เพื่อวัดและรายงานเกี่ยวกับประสิทธิภาพ นักพัฒนาซอฟต์แวร์บางรายเชี่ยวชาญด้านการใช้เครื่องมือเหล่านี้ ในขณะที่คนอื่นๆ พบว่าเครื่องมือและเมตริกจำนวนมากนั้นยากที่จะตามให้ทัน
เจ้าของเว็บไซต์ไม่จำเป็นต้องเป็นผู้เชี่ยวชาญด้านประสิทธิภาพ จึงจะเข้าใจคุณภาพของประสบการณ์ที่แสดงต่อผู้ใช้ โครงการริเริ่ม Web Vitals มีเป้าหมายที่จะลดความซับซ้อนของภาพรวมและช่วยให้เว็บไซต์มุ่งเน้นไปยังเมตริกที่สำคัญที่สุด ซึ่งก็คือ Core Web Vitals
Core Web Vitals
Core Web Vitals เป็นชุดย่อยของ Web Vitals ที่นำไปใช้กับหน้าเว็บทุกหน้า ซึ่งเจ้าของเว็บไซต์ทุกรายควรวัดผล และจะแสดงในเครื่องมือทั้งหมดของ Google Core Web Vitals แต่ละรายการแสดงถึงประสบการณ์ของผู้ใช้ในด้านต่างๆ ที่วัดผลได้ในภาคสนาม และสะท้อนให้เห็นถึงประสบการณ์จริงของผลลัพธ์ที่มุ่งเน้นผู้ใช้ที่สำคัญ
เมตริกที่ประกอบกันเป็น Core Web Vitals จะเปลี่ยนแปลงไปเมื่อเวลาผ่านไป ชุดปัจจุบันของปี 2020 จะเน้นไปที่ประสบการณ์ของผู้ใช้ 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 สำหรับเมตริก Core Web Vitals ทั้ง 3 รายการ
อายุการใช้งาน
เมตริกในแทร็ก Core Web Vitals จะผ่านวงจรที่ประกอบด้วย 3 ระยะ ได้แก่ ทดลอง รอดำเนินการ และเสถียร
โดยแต่ละระยะได้รับการออกแบบมาเพื่อส่งสัญญาณให้นักพัฒนาแอปทราบความคิดเกี่ยวกับเมตริกแต่ละรายการ ดังนี้
- เมตริกทดลองคือ Core Web Vitals ที่คาดหวังซึ่งอาจยังอยู่ระหว่างการเปลี่ยนแปลงที่สําคัญ ทั้งนี้ขึ้นอยู่กับการทดสอบและความคิดเห็นของชุมชน
- เมตริกที่รอดำเนินการคือ Core Web Vitals ในอนาคตซึ่งผ่านขั้นตอนการทดสอบและความคิดเห็น รวมถึงมีลำดับเวลาที่ชัดเจนในความเสถียร
- เมตริกที่เสถียรคือชุด Core Web Vitals ปัจจุบันที่ Chrome พิจารณาว่าจำเป็นต่อประสบการณ์การใช้งานที่ยอดเยี่ยมของผู้ใช้
Core Web Vitals มีขั้นตอนอยู่ในวงจรต่อไปนี้
รุ่นทดลอง
เมื่อเมตริกได้รับการพัฒนาและเข้าสู่ระบบนิเวศเป็นครั้งแรก ระบบจะถือว่าเป็นเมตริกทดลอง
วัตถุประสงค์ของระยะทดลองคือการประเมินสมรรถภาพของเมตริก โดยขั้นแรกคือการสำรวจปัญหาที่จะแก้ไข และอาจทำซ้ำกับเมตริกก่อนหน้าที่อาจล้มเหลวแก้ไข ตัวอย่างเช่น ในตอนแรก Interaction to Next Paint (INP) พัฒนาเป็นเมตริกทดลองเพื่อจัดการปัญหาด้านประสิทธิภาพของรันไทม์ที่พบบนเว็บให้ครอบคลุมมากกว่า 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 จะรวมอยู่ในการประเมินทั้งหมดด้วย
เครื่องมือสำหรับวัดและรายงาน 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 แทน) |
แม้ว่าการวัดผลในห้องทดลองจะเป็นส่วนสำคัญในการมอบประสบการณ์การใช้งานที่ยอดเยี่ยม แต่ก็ไม่ได้ใช้แทนการวัดผลในภาคสนาม
ประสิทธิภาพของเว็บไซต์อาจแตกต่างกันไปอย่างมากตามความสามารถของอุปกรณ์ของผู้ใช้ สภาพเครือข่าย กระบวนการอื่นๆ ที่อาจกำลังทำงานในอุปกรณ์ และวิธีที่ผู้ใช้โต้ตอบกับหน้าเว็บ ที่จริงแล้ว เมตริก Core Web Vitals แต่ละรายการอาจมีคะแนนที่ได้รับผลกระทบจากการโต้ตอบของผู้ใช้ เฉพาะการวัดภาคสนามเท่านั้นที่สามารถจับภาพที่สมบูรณ์ได้อย่างถูกต้อง
คำแนะนำในการปรับปรุงคะแนน
คำแนะนำต่อไปนี้จะให้คำแนะนำเฉพาะเกี่ยวกับวิธีเพิ่มประสิทธิภาพหน้าเว็บสำหรับ Core Web Vitals แต่ละรายการ
Web Vitals อื่นๆ
แม้ว่า Core Web Vitals เป็นเมตริกที่สำคัญสำหรับการทำความเข้าใจและมอบประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้ แต่ก็ยังมีเมตริกอื่นๆ ที่รองรับการทำงานด้วย
เมตริกอื่นๆ เหล่านี้ใช้เป็นพร็อกซีหรือเป็นเมตริกเสริมสำหรับ Core Web Vitals ทั้ง 3 ประเภทได้ เพื่อช่วยสรุปประสบการณ์การใช้งานโดยรวมหรือเพื่อช่วยในการวินิจฉัยปัญหาหนึ่งๆ
เช่น เมตริก Time to First Byte (TTFB) และ First Contentful Paint (FCP) ต่างมีความสำคัญในประสบการณ์การโหลด รวมถึงมีประโยชน์ในการวินิจฉัยปัญหาเกี่ยวกับ LCP (เวลาตอบสนองของเซิร์ฟเวอร์ที่ช้า หรือทรัพยากรที่บล็อกการแสดงผลตามลำดับ)
ในทำนองเดียวกัน เมตริกอย่าง Total Blocked 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 ทั้งหมด จะมีการบันทึกการเปลี่ยนแปลงไว้ใน CHANGELOG แบบสาธารณะนี้อย่างชัดเจน