เผยแพร่: 4 พฤษภาคม 2020, อัปเดตล่าสุด: 31 ตุลาคม 2024
การปรับปรุงคุณภาพเพื่อมอบประสบการณ์การใช้งานที่ดีให้กับผู้ใช้ถือเป็นหัวใจสำคัญแห่งความสำเร็จในระยะยาวของเว็บไซต์ ไม่ว่าจะเป็นเจ้าของธุรกิจ นักการตลาด หรือนักพัฒนาซอฟต์แวร์ 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 จะมีการเปลี่ยนแปลงไปตามเวลา ชุดมาตรฐานปัจจุบันมุ่งเน้นไปที่ประสบการณ์ของผู้ใช้ 3 แง่มุม ได้แก่ การโหลด การโต้ตอบ และความเสถียรของภาพ และประกอบด้วยตัวชี้วัดต่อไปนี้ (และเกณฑ์ที่เกี่ยวข้อง)
- Largest Contentful Paint (LCP): วัดประสิทธิภาพการโหลด เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดี LCP ควรเกิดขึ้นภายใน 2.5 วินาทีหลังจากที่หน้าเว็บเริ่มโหลดครั้งแรก
- Interaction to 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 แต่ละรายการ ข้อมูลนี้ช่วยให้เจ้าของเว็บไซต์ประเมินประสิทธิภาพได้อย่างรวดเร็วโดยไม่ต้องติดตั้งเครื่องมือวิเคราะห์ในหน้าเว็บด้วยตนเอง และขับเคลื่อนเครื่องมือต่างๆ เช่น เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome, PageSpeed Insights และรายงาน Core Web Vitals ของ Search Console
| LCP | INP | CLS | |
| รายงานประสบการณ์ของผู้ใช้ Chrome | |||
| เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome | |||
| PageSpeed Insights | |||
| Search Console (รายงาน Core Web Vitals) |
ข้อมูลที่รายงานประสบการณ์ของผู้ใช้ Chrome ให้ไว้เป็นวิธีที่รวดเร็วในการประเมินประสิทธิภาพของเว็บไซต์ แต่ไม่ได้ให้ข้อมูลการวัดและส่งข้อมูลทางไกลแบบละเอียดต่อการดูหน้าเว็บแต่ละครั้ง ซึ่งมักจำเป็นต่อการวินิจฉัย ตรวจสอบ และตอบสนองต่อการถดถอยได้อย่างรวดเร็วอย่างถูกต้อง ด้วยเหตุนี้ เราจึงขอแนะนำให้เว็บไซต์ตั้งค่าการตรวจสอบผู้ใช้จริงของตนเอง
วัด Core Web Vitals ใน JavaScript
คุณวัด Core Web Vitals แต่ละรายการใน JavaScript ได้โดยใช้ Web API มาตรฐาน
วิธีที่ง่ายที่สุดในการวัด Core Web Vitals ทั้งหมดคือการใช้ไลบรารี JavaScript web-vitals ซึ่งเป็น Wrapper ขนาดเล็กที่พร้อมใช้งานจริงรอบๆ Web 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 API พื้นฐานสามารถใช้คำแนะนำเกี่ยวกับเมตริกเหล่านี้แทนได้เพื่อดูรายละเอียดการติดตั้งใช้งาน
ดูคำแนะนำเพิ่มเติมเกี่ยวกับการวัดเมตริกเหล่านี้โดยใช้บริการวิเคราะห์ยอดนิยมหรือเครื่องมือวิเคราะห์ภายในของคุณเองได้ที่แนวทางปฏิบัติแนะนำสำหรับการวัด Web Vitals ในภาคสนาม
เครื่องมือในห้องทดลองเพื่อวัด Core Web Vitals
แม้ว่า Core Web Vitals ทั้งหมดจะเป็นเมตริกภาคสนามเป็นอันดับแรก แต่หลายๆ เมตริกก็วัดผลในห้องทดลองได้เช่นกัน
การวัดในห้องทดลองเป็นวิธีที่ดีที่สุดในการทดสอบประสิทธิภาพของฟีเจอร์ระหว่างการพัฒนา ก่อนที่จะเปิดตัวให้ผู้ใช้ใช้งาน นอกจากนี้ยังเป็นวิธีที่ดีที่สุดในการตรวจหาการถดถอยของประสิทธิภาพก่อนที่จะเกิดขึ้น
คุณใช้เครื่องมือต่อไปนี้เพื่อวัด Core Web Vitals ในสภาพแวดล้อมของห้องทดลองได้
| LCP | INP | CLS | |
|---|---|---|---|
| เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome | |||
| Lighthouse | (ใช้ TBT แทน) |
แม้ว่าการวัดผลในห้องทดลองจะเป็นส่วนสำคัญในการมอบประสบการณ์ที่ยอดเยี่ยม แต่ก็ไม่สามารถใช้แทนการวัดผลภาคสนามได้
ประสิทธิภาพของเว็บไซต์อาจแตกต่างกันอย่างมากโดยขึ้นอยู่กับความสามารถของอุปกรณ์ผู้ใช้ สภาพเครือข่าย กระบวนการอื่นๆ ที่อาจทำงานบนอุปกรณ์ และวิธีที่ผู้ใช้โต้ตอบกับหน้าเว็บ ในความเป็นจริงแล้ว เมตริก Core Web Vitals แต่ละรายการอาจมีคะแนนที่ได้รับผลกระทบจากการโต้ตอบของผู้ใช้ มีเพียงการวัดภาคสนามเท่านั้นที่จะบันทึกภาพรวมทั้งหมดได้อย่างแม่นยำ
คำแนะนำในการปรับปรุงคะแนน
คำแนะนำต่อไปนี้มีคำแนะนำเฉพาะเกี่ยวกับวิธีเพิ่มประสิทธิภาพหน้าเว็บสำหรับ Core Web Vitals แต่ละรายการ
มีหลายวิธีในการปรับปรุง Core Web Vitals และแต่ละวิธีก็มีระดับผลลัพธ์ ความเกี่ยวข้อง และความง่ายในการใช้งานที่แตกต่างกันในแต่ละสถานการณ์ ดูรายการคำแนะนำยอดนิยมของทีม Chrome แบบย่อได้ที่วิธีที่มีประสิทธิภาพมากที่สุดในการปรับปรุง Core Web Vitals
Web Vitals อื่นๆ
แม้ว่า Core Web Vitals จะเป็นเมตริกที่สำคัญในการทำความเข้าใจและมอบประสบการณ์ของผู้ใช้ที่ยอดเยี่ยม แต่ก็ยังมีเมตริกอื่นๆ ที่สนับสนุนด้วย
เมตริกอื่นๆ เหล่านี้สามารถใช้เป็นพร็อกซีหรือเป็นเมตริกเสริมสำหรับ Core Web Vitals ทั้ง 3 รายการ เพื่อช่วยบันทึกประสบการณ์ส่วนใหญ่ หรือช่วยในการวินิจฉัยปัญหาที่เฉพาะเจาะจง
ตัวอย่างเช่น เมตริกเวลาที่ได้รับข้อมูลไบต์แรก (TTFB) และ First Contentful Paint (FCP) เป็นทั้ง 2 แง่มุมที่สำคัญของประสบการณ์การโหลด และมีประโยชน์ทั้งคู่ในการวินิจฉัยปัญหาเกี่ยวกับ LCP (เวลาในการตอบสนองของเซิร์ฟเวอร์ช้าหรือทรัพยากรที่บล็อกการแสดงผลตามลำดับ)
ในทำนองเดียวกัน เมตริกอย่างเวลาทั้งหมดในการบล็อก (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แบบสาธารณะนี้