Published: May 4, 2020
การเพิ่มประสิทธิภาพเพื่อมอบประสบการณ์การใช้งานที่ดีให้กับผู้ใช้ถือเป็นหัวใจสำคัญแห่งความสำเร็จในระยะยาวของเว็บไซต์ ไม่ว่าจะเป็นเจ้าของธุรกิจ นักการตลาด หรือนักพัฒนาซอฟต์แวร์ 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 มีความสำคัญอย่างยิ่งต่อประสบการณ์การใช้งานเว็บทั้งหมด ด้วยเหตุนี้ Google จึงมุ่งมั่นที่จะแสดงเมตริกเหล่านี้ในเครื่องมือยอดนิยมทั้งหมด ส่วนต่อไปนี้จะแสดงรายละเอียดเครื่องมือที่รองรับ 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 ได้โดยใช้เว็บ 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 ในเครื่องมือได้
นักพัฒนาซอฟต์แวร์ที่ต้องการวัดผลเมตริกเหล่านี้โดยตรงโดยใช้เว็บ API พื้นฐานสามารถใช้คำแนะนำเมตริกเหล่านี้เพื่อดูรายละเอียดการใช้งานแทนได้
หากต้องการดูคำแนะนำเพิ่มเติมเกี่ยวกับการวัดผลเมตริกเหล่านี้โดยใช้บริการข้อมูลวิเคราะห์ยอดนิยมหรือเครื่องมือข้อมูลวิเคราะห์ภายในองค์กร โปรดดู แนวทางปฏิบัติแนะนำสำหรับการวัดผล Web Vitals ในภาคสนาม
เครื่องมือในห้องทดลองในการวัดผล Core Web Vitals
แม้ว่า Core Web Vitals ทั้งหมดจะเป็นเมตริกภาคสนามเป็นอันดับแรก แต่เมตริกหลายรายการก็วัดผลในห้องทดลองได้เช่นกัน
การวัดผลในห้องทดลองเป็นวิธีที่ดีที่สุดในการทดสอบประสิทธิภาพของฟีเจอร์ระหว่างการพัฒนา ก่อนที่จะเปิดตัวให้ผู้ใช้ใช้งาน นอกจากนี้ยังเป็นวิธีที่ดีที่สุดในการตรวจพบการถดถอยของประสิทธิภาพก่อนที่จะเกิดขึ้น
คุณสามารถใช้เครื่องมือต่อไปนี้เพื่อวัดผล Core Web Vitals ในสภาพแวดล้อมของห้องทดลอง
| LCP | INP | CLS | |
|---|---|---|---|
| เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome | |||
| Lighthouse | (use TBT instead) |
แม้ว่าการวัดผลในห้องทดลองจะเป็นส่วนสำคัญในการมอบประสบการณ์ที่ยอดเยี่ยม แต่ก็ไม่สามารถใช้แทนการวัดผลในภาคสนามได้
ประสิทธิภาพของเว็บไซต์อาจแตกต่างกันอย่างมากโดยขึ้นอยู่กับความสามารถของอุปกรณ์ของผู้ใช้ สภาพเครือข่าย กระบวนการอื่นๆ ที่อาจทำงานบนอุปกรณ์ และวิธีที่ผู้ใช้โต้ตอบกับหน้าเว็บ ในความเป็นจริง เมตริก 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) เป็นทั้งแง่มุมที่สำคัญของประสบการณ์ การโหลด และมีประโยชน์ในการวินิจฉัยปัญหาเกี่ยวกับ 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 สาธารณะนี้