การเพิ่มประสิทธิภาพให้กับประสบการณ์ของผู้ใช้คือกุญแจสำคัญสู่ความสำเร็จระยะยาวของเว็บไซต์บนเว็บ ไม่ว่าคุณจะเป็นเจ้าของธุรกิจ นักการตลาด หรือนักพัฒนาซอฟต์แวร์ 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 วินาทีนับจากที่หน้าเว็บเริ่มโหลดเป็นครั้งแรก
- 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 สำหรับเว็บไวท์ ซึ่งเป็น 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);
เมื่อกำหนดค่าเว็บไซต์ให้ใช้ไลบรารีวิตามินเว็บเพื่อวัดและส่งข้อมูล 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 ได้ด้วย ส่วนขยายนี้ใช้ไลบรารีวิตามินเว็บเพื่อวัดเมตริกเหล่านี้และแสดงให้ผู้ใช้เห็นขณะท่องเว็บ
ส่วนขยายนี้มีประโยชน์ในการทำความเข้าใจประสิทธิภาพของเว็บไซต์ของคุณเอง เว็บไซต์ของคู่แข่ง และเว็บโดยรวม
| LCP | INP | CLS | |
|---|---|---|---|
| วิตามินจากเว็บ | |||
| ส่วนขยาย 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 สาธารณะนี้