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