Web Vitals

เผยแพร่เมื่อ 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 คําแนะนําเกี่ยวกับเกณฑ์ Interaction to Next Paint คําแนะนําเกณฑ์ Cumulative Layout Shift
  • 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 ระยะ ได้แก่ ระยะทดลอง ระยะรอ และระยะที่เสถียร

วงจร 3 ระยะของเมตริก Core Web Vitals ที่แสดงเป็นสัญลักษณ์เครื่องหมายปีกนก 3 ตัว ระยะต่างๆ จากซ้ายไปขวาคือ "ทดลอง" "รอดำเนินการ" และ "เสถียร"
ระยะต่างๆ ของวงจร Core Web Vitals

แต่ละระยะออกแบบมาเพื่อบอกนักพัฒนาแอปว่าควรคิดเกี่ยวกับเมตริกแต่ละรายการอย่างไร

  • เมตริกทดลองคือ Core Web Vitals ที่คาดการณ์ไว้ซึ่งอาจยังอยู่ระหว่างการเปลี่ยนแปลงที่สำคัญโดยขึ้นอยู่กับการทดสอบและความคิดเห็นของชุมชน
  • เมตริกที่รอดำเนินการคือ Core Web Vitals ในอนาคตที่ผ่านขั้นตอนการทดสอบและความคิดเห็น และมีลำดับเวลาที่ชัดเจนในการทำให้เสถียร
  • เมตริกที่เสถียรคือชุด Core Web Vitals ปัจจุบันที่ Chrome พิจารณาว่าจำเป็นต่อประสบการณ์ของผู้ใช้ที่ยอดเยี่ยม

Core Web Vitals อยู่ในระยะต่างๆ ของวงจรดังนี้

  • LCP: เวอร์ชันเสถียร
  • CLS: เสถียร
  • INP: เสถียร

รุ่นทดลอง

เมื่อพัฒนาเมตริกเป็นครั้งแรกและเข้าสู่ระบบนิเวศ ระบบจะถือว่าเมตริกนั้นเป็นเมตริกทดลอง

วัตถุประสงค์ของระยะการทดสอบคือการประเมินความเหมาะสมของเมตริก โดยเริ่มจากการศึกษาปัญหาที่ต้องแก้ไข และอาจพิจารณาเมตริกก่อนหน้าที่อาจแก้ไขปัญหาไม่ได้ ตัวอย่างเช่น 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

ข้อมูลที่ได้รับจากรายงานประสบการณ์ของผู้ใช้ 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 ทั้งหมด การเปลี่ยนแปลงจะได้รับการบันทึกไว้อย่างชัดเจนในบันทึกการเปลี่ยนแปลงสาธารณะนี้