การเพิ่มประสิทธิภาพเพื่อคุณภาพประสบการณ์ของผู้ใช้คือกุญแจสำคัญของความสำเร็จในระยะยาวของเว็บไซต์ต่างๆ ไม่ว่าคุณจะเป็นเจ้าของธุรกิจ นักการตลาด หรือนักพัฒนาซอฟต์แวร์ WebVitals จะช่วยคุณวัดประสบการณ์ของเว็บไซต์และระบุโอกาสในการปรับปรุงได้
ภาพรวม
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 วินาทีนับจากที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี
- First Input Delay (FID): วัดการโต้ตอบ หน้าเว็บควรมี FID เท่ากับ 100 มิลลิวินาทีหรือน้อยกว่าเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี
- 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 ในอนาคตซึ่งผ่านขั้นตอนการทดสอบและความคิดเห็น รวมทั้งมีไทม์ไลน์ที่แน่นอนในการสร้างความเสถียร
- เมตริกเสถียรคือชุด Core Web Vitals ปัจจุบันที่ Chrome พิจารณาว่าสำคัญต่อประสบการณ์ของผู้ใช้ที่ยอดเยี่ยม
รุ่นทดลอง
เมื่อมีการพัฒนาเมตริกเป็นครั้งแรกและเข้าสู่ระบบนิเวศ จะถือว่าเป็นเมตริกทดสอบ
วัตถุประสงค์ของระยะทดลองคือการประเมินความสมบูรณ์ของเมตริก โดยก่อนอื่นคือการสำรวจปัญหาที่จะแก้ไข และอาจปรับปรุงสิ่งที่เมตริกก่อนหน้าอาจล้มเหลวในการจัดการ ตัวอย่างเช่น เริ่มแรกมีการพัฒนาการโต้ตอบกับ Next Paint (INP) ให้เป็นเมตริกทดลองเพื่อจัดการปัญหาด้านประสิทธิภาพของรันไทม์ที่มีอยู่บนเว็บได้อย่างครอบคลุมมากกว่า First Input Delay (FID)
ช่วงทดลองของวงจร Core Web Vitals ยังมีวัตถุประสงค์เพื่อเพิ่มความยืดหยุ่นในการพัฒนาเมตริกด้วยการระบุข้อบกพร่องและแม้แต่การสำรวจการเปลี่ยนแปลงคำนิยามเริ่มต้น นอกจากนี้ยังเป็นช่วงที่ความคิดเห็นของชุมชนมีความสำคัญมากที่สุดอีกด้วย
รอดำเนินการ
เมื่อทีม Chrome พิจารณาว่าเมตริกทดลองได้รับความคิดเห็นเพียงพอและพิสูจน์แล้วว่ามีประสิทธิภาพ เมตริกนั้นจะกลายเป็นเมตริกที่รอดำเนินการ ระบบจะเก็บเมตริกที่รอดำเนินการในขั้นตอนนี้เป็นเวลาอย่างน้อย 6 เดือนเพื่อให้เวลาระบบนิเวศในการปรับตัว อุปสรรคข้อเดียวที่ยังทำให้เมตริกไปไกลกว่าระยะรอดำเนินการก็คือการรอช่วงเปลี่ยนผ่าน ความคิดเห็นของชุมชนยังคงเป็นส่วนสําคัญในระยะนี้ เนื่องจากมีนักพัฒนาซอฟต์แวร์เริ่มนำเมตริกมาใช้มากขึ้น
คงที่
เมื่อสรุปเมตริกของตัวเลือก Core Web Vitals แล้ว เมตริกนั้นจะกลายเป็นเมตริกที่เสถียร สำหรับเมตริกที่อยู่ในแทร็ก Core Web Vitals เมตริกนั้นจะกลายเป็น Core Web Vitals
เรารองรับเมตริกเวอร์ชันเสถียรอย่างต่อเนื่องและอาจมีการแก้ไขข้อบกพร่องและเปลี่ยนแปลงคำจำกัดความ เมตริก Core Web Vitals ที่เสถียรจะเปลี่ยนแปลงไม่เกิน 1 ครั้งต่อปี การเปลี่ยนแปลงที่สำคัญใน Core Web Vitals จะแจ้งอย่างชัดเจนในเอกสารอย่างเป็นทางการของเมตริก รวมถึงใน CHANGELOG ของเมตริกนั้น การประเมินทั้งหมดยังมี 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 | FID | 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, onFID, 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);
onFID(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 แต่ละรายการได้โดยไม่ต้องเขียนโค้ดใดๆ โดยใช้ส่วนขยาย Web Vitals ของ Chrome ส่วนขยายนี้ใช้ไลบรารี web-vitals เพื่อวัดเมตริกเหล่านี้แต่ละรายการและแสดงให้ผู้ใช้เห็นขณะท่องเว็บ
ส่วนขยายนี้จะมีประโยชน์ในการทำความเข้าใจประสิทธิภาพของเว็บไซต์ของคุณเอง เว็บไซต์ของคู่แข่ง และเว็บในวงกว้าง
| LCP | FID | CLS | |
|---|---|---|---|
| Web-vitals | ✔ | ✔ | ✔ |
| ส่วนขยาย Web Vitals | ✔ | ✔ | ✔ |
อีกทางเลือกหนึ่งคือ นักพัฒนาแอปที่ต้องการวัดเมตริกเหล่านี้โดยตรงผ่านทาง API ของเว็บที่เกี่ยวข้อง โปรดดูรายละเอียดการติดตั้งใช้งานในคู่มือเมตริกเหล่านี้
เพื่อดูแนวทางเพิ่มเติมเกี่ยวกับวิธีวัดเมตริกเหล่านี้โดยใช้บริการวิเคราะห์ยอดนิยม (หรือเครื่องมือวิเคราะห์ในองค์กรของคุณ)เครื่องมือของห้องทดลองเพื่อวัดผล Core Web Vitals
แม้ว่า Core Web Vitals ทั้งหมดจะเป็นเมตริกภาคสนามซึ่งเป็นสิ่งแรกและสำคัญที่สุด แต่เมตริกส่วนใหญ่ก็วัดผลได้ในห้องทดลองเช่นกัน
การวัดผลในห้องปฏิบัติการเป็นวิธีที่ดีที่สุดในการทดสอบประสิทธิภาพของคุณลักษณะระหว่างการพัฒนา ก่อนที่จะเปิดตัวแก่ผู้ใช้ และยังเป็นวิธีที่ดีที่สุดที่จะตรวจจับ การถดถอยด้านประสิทธิภาพก่อนที่จะเกิดขึ้น
เครื่องมือต่อไปนี้ใช้วัดผล Core Web Vitals ในสภาพแวดล้อมห้องทดลองได้
| LCP | FID | CLS | |
|---|---|---|---|
| เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome | ✔ | ✘ (ใช้ TBT แทน) | ✔ |
| ประภาคาร | ✔ | ✘ (ใช้ TBT แทน) | ✔ |
แม้ว่าการวัดผลในห้องทดลองจะเป็นส่วนสำคัญในการมอบประสบการณ์ที่ยอดเยี่ยม ก็ไม่ได้ใช้แทนการวัดผลภาคสนาม
ประสิทธิภาพของเว็บไซต์อาจแตกต่างกันไปอย่างมากขึ้นอยู่กับความสามารถของอุปกรณ์ของผู้ใช้ สภาพเครือข่ายของผู้ใช้ กระบวนการอื่นๆ ที่อาจทำงานอยู่ในอุปกรณ์ และวิธีการโต้ตอบกับหน้าเว็บ อันที่จริง เมตริก Core Web Vitals แต่ละรายการอาจได้รับผลกระทบจากการโต้ตอบของผู้ใช้ มีเพียงการวัดผลภาคสนามเท่านั้นที่สามารถจับภาพที่สมบูรณ์ได้อย่างถูกต้อง
คำแนะนำในการปรับปรุงคะแนน
เมื่อคุณวัดผล 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 Blocked Time (TBT) และ Time to Interactive (TTI) เป็นเมตริกของห้องทดลองที่มีความจำเป็นในการตรวจพบและวินิจฉัยปัญหาการโต้ตอบที่อาจเกิดขึ้นซึ่งจะส่งผลต่อ FID อย่างไรก็ตาม เมตริกเหล่านี้ไม่ได้เป็นส่วนหนึ่งของชุด Core Web Vitals เนื่องจากวัดผลไม่ได้ในระดับฟิลด์ และไม่ได้แสดงถึงผลลัพธ์ที่เน้นผู้ใช้
Web Vitals ที่กำลังพัฒนา
Web Vitals และ Core Web Vitals เป็นสัญญาณที่ดีที่สุดที่นักพัฒนาซอฟต์แวร์ใช้ในการวัดคุณภาพของประสบการณ์การใช้งานเว็บไซต์ต่างๆ ในปัจจุบัน แต่สัญญาณเหล่านี้ยังไม่สมบูรณ์แบบ และควรมีการปรับปรุงหรือเพิ่มเติมในอนาคต
Core Web Vitals เกี่ยวข้องกับหน้าเว็บทุกหน้า และแสดงอยู่ในเครื่องมือของ Google ที่เกี่ยวข้อง การเปลี่ยนแปลงเมตริกเหล่านี้จะส่งผลในวงกว้าง ดังนั้น นักพัฒนาซอฟต์แวร์ควรคาดหวังให้คำจำกัดความและเกณฑ์ของ Core Web Viitals มีความคงที่ รวมถึงต้องมีการอัปเดตล่วงหน้าและมีแผนประจำปีที่คาดการณ์ได้
Web Vitals อื่นๆ มักมีบริบทหรือเครื่องมือที่เฉพาะเจาะจง และอาจเป็นแบบทดลองมากกว่า Core Web Vitals ด้วยเหตุนี้ คําจํากัดความและเกณฑ์ต่างๆ จึงอาจเปลี่ยนแปลงตามความถี่ที่เพิ่มขึ้น
สำหรับ Web Vitals ทั้งหมด จะมีการบันทึกการเปลี่ยนแปลงไว้ใน CHANGELOG สาธารณะนี้อย่างชัดเจน