เผยแพร่เมื่อ 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 พิจารณาว่าเมตริกทดสอบได้รับความคิดเห็นเพียงพอแ��ะพิสูจน์ประสิทธิภาพแล้ว เมตริกดังกล่าวจะกลายเป็นเมตริกที่รอดำเนินการ ตัวอย่างเช่น ในปี 2023 เราได้เลื่อนสถานะของ INP จาก "ทดลอง" เป็น "รอดำเนินการ" โดยมีเจตนาที่จะเลิกใช้งาน 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 DevTools, 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 มีหลายวิธี และแต่ละวิธีก็ส่งผล เกี่ยวข้อง และใช้งานได้ง่ายในระดับที่แตกต่างกันไปสำหรับทุกสถานการณ์ โปรดดูวิธีที่มีประสิทธิภาพมากที่สุดในการปรับปรุง Core Web Vitals เพื่อดูรายการคำแนะนำที่สำคัญของทีม Chrome
Web Vitals อื่นๆ
แม้ว่า Core Web Vitals จะเป็นเมตริกสําคัญในการทำความเข้าใจและมอบประสบการณ์การใช้งานที่ยอดเยี่ยมให้แก่ผู้ใช้ แต่ก็มีเมตริกอื่นๆ สนับสนุนด้วย
เมตริกอื่นๆ เหล่านี้อาจใช้เป็นพร็อกซีหรือเมตริกเสริมสําหรับ Core Web Vitals ทั้ง 3 รายการ เพื่อช่วยบันทึกประสบการณ์การใช้งานส่วนใหญ่หรือช่วยวินิจฉัยปัญหาที่เฉพาะเจาะจง
ตัวอย่างเช่น เมตริก Time to First Byte (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 ทั้งหมด การเปลี่ยนแปลงจะได้รับการบันทึกไว้อย่างชัดเจนในบันทึกการเปลี่ยนแปลงสาธารณะนี้