TingSter
English
dev, performance · 22 สิงหาคม 2567

Web Vitals: ตัวชี้วัดประสบการณ์ผู้ใช้บนเว็บไซต์

Web Vitals: ตัวชี้วัดประสบการณ์ผู้ใช้บนเว็บไซต์

ช่วงนี้งานที่ทำเป็นเรื่องของ web performance รัวๆ เลยครับ เลยต้องนั่งอยู่กับเรื่อง Core Web Vitals ทั้งวันหลายอาทิตย์ เลยอยากเอาเรื่องนี้มาแบ่งปันกันครับ เป็นเรื่องที่จำเป็นมาก ควรที่จะทำตั้งแต่เริ่มต้นทำเว็บกันเลยนะ ถ้ามาทำทีหลังเหนื่อยและลำบากสุดๆ

เรามาเริ่มทำความเข้าใจกันก่อนดีกว่า ว่าเจ้า Core Web Vitals มันคืออะไรกันแน่ เราใส่ใจกับมันไปทำไมกัน แค่ทำเว็บให้สวยงาม ใช้งานได้ ก็เพียงพอแล้วไม่ใช่หรือ?

Core Web Vitals

What Are Google Core Web Vitals

Core Web Vitals คือชุดของตัวชี้วัดที่ใช้กับเว็บเพจทั้งหมด ซึ่งเจ้าของเว็บไซต์ทุกคนควรต้องใช้เพื่อตรวจสอบประสิทธิภาพ โดยตัวชี้วัดนั้นจะอยู่ในเครื่องมือของ Google ทั้งหมด แต่ละตัวชี้วัดของ Core Web Vitals แสดงถึงมุมมองที่แตกต่างกัน ซึ่งจะถูกวัดผลโดยประสบการณ์ผู้ใช้หรือสภาพแวดล้อมจริง (in the field) โดยเน้นผู้ใช้เป็นศูนย์กลาง

ตัวชี้วัดเหล่านี้มีการพัฒนาเรื่อยๆ ซึ่งเราจะเห็นว่าหลายครั้งๆ ที่มีการกำหนดเกณฑ์เพิ่มขึ้นหรือเปลี่ยนแปลงไปเสมอ ซึ่ง ณ วันที่เขียน (22/08/2024) ประกอบด้วยชุดตัวชี้วัดด้านล่าง แต่ในอนาคตอาจจะพรุ่งนี้หรือเดือนหน้าชุดตัวชี้วัดอาจจะมีการเปลี่ยนแปลงได้ครับ แต่ชุดตัวชี้วัดปัจจุบันจะมุ่งเน้นไปที่ประสบการณ์ผู้ใช้สามข้อ ได้แก่ การโหลด, การโต้ตอบ, และ ความเสถียรภาพ ซึ่งรวมถึงตัวชี้วัดต่อไปนี้:

  • Largest Contentful Paint (LCP): วัดประสิทธิภาพการโหลด เพื่อให้ได้ประสบการณ์ผู้ใช้ที่ดี LCP ควรเกิดขึ้นภายใน 2.5 วินาที นับจากเวลาที่หน้าเว็บเริ่มโหลด
  • Interaction to Next Paint (INP): วัดประสิทธิภาพการโต้ตอบ เพื่อให้ได้ประสบการณ์ผู้ใช้ที่ดี หน้าเว็บควรมี INP 200 มิลลิวินาทีหรือน้อยกว่า
  • Cumulative Layout Shift (CLS): วัดความเสถียรของภาพ เพื่อให้ได้ประสบการณ์ผู้ใช้ที่ดี หน้าเว็บควรรักษา CLS ที่ 0.1 หรือน้อยกว่า

Introducing the Web Vitals Chrome Extension

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

คะแนนที่แนะนำที่ถูกวัดโดยตัวชี้วัดที่เหมาะสมนั้นควรจะอยู่ที่ 75% ขี้นไปทั้ง Mobile และ Desktop ครับ

Lifecycle

Lifecycle ของชุดตัวชี้วัดใน Core Web Vitals จะมีอยู่ด้วยกันทั้งหมด 3 phases ครับ เริ่มจาก ระยะทดลอง (experimental), รอดำเนินการ (pending), และเสถียร (stable)

The stages of the Core Web Vitals lifecycle.

แต่ละระยะถูกออกแบบมาเพื่อให้นักพัฒนาเข้าใจว่าควรคิดเกี่ยวกับแต่ละตัวชี้วัดอย่างไร:

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

เครื่องมือการวัดผล และแสดงรายงาน

ทาง Google เชื่อว่า ชุดตัวชี้วัดของ Core Web Vitals นี้สำคัญต่อประสบการณ์ของผู้ใช้อย่างมาก จึงนำเอาตัวชี้วัดเหล่านี้ไปอยู่ในผลิตภัณฑ์เกือบทุกตัวของ Google เช่น Chrome User Experience Report, PageSpeed Insights, Search Console, Lighthouse Web Vitals extension, The Performance panel in Chrome DevTools เป็นต้น

CrUX data logo

เครื่องมือวัดผลในสภาพแวดล้อมจริง

Chrome User Experience Report (CrUX) เป็น dataset ที่เก็บข้อมูลการวัดผลจากผู้ใช้จริงแบบ (ไม่ระบุตัวตน) สำหรับแต่ละ Core Web Vital ข้อมูลนี้จะช่วยให้เจ้าของเว็บไซต์สามารถประเมินประสิทธิภาพได้อย่างรวดเร็วโดยไม่จำเป็นต้องติดตั้งเครื่องมือวิเคราะห์บนหน้าเว็บด้วยตนเอง และยังเป็นแหล่งข้อมูลสำหรับเครื่องมือต่างๆ เช่น PageSpeed Insights และ รายงานผล Core Web Vitals ใน Search Console

  • Chrome User Experience Report - LCP, INP, CLS
  • PageSpeed Insights - LCP, INP, CLS
  • Search Console (Core Web Vitals report) - LCP, INP, CLS

เครื่องมือวัดผลแบบ JavaScript

อีกหนึ่งวิธีที่ง่ายในการวัดผล Core Web Vitals คือการใช้ web-vitals JavaScript Library ซึ่งเป็นแรปเปอร์ขนาดเล็กที่ใช้ API โดยใช้แต่ละตัวชี้วัดแบบเดียวกับวิธีการรายงานโดยเครื่องมือของ Google ทั้งหมดที่กล่าวถึงก่อนหน้านี้

ด้วยไลบรารี web-vitals การวัดแต่ละตัวชี้วัดสามารถทำได้โดยการเรียกใช้ฟังก์ชันเดียว (ดูเอกสารประกอบและรายละเอียดเกี่ยวกับการใช้งานและAPI ).

เราสามารถวัดผล Core Web Vitals แต่ละตัวได้โดยไม่ต้องเขียนโค้ดใดๆ โดยใช้ ส่วนขยาย Web Vitals Chrome ส่วนขยายนี้ใช้ไลบรารี web-vitals และแสดงผลให้ผู้ใช้เห็นขณะใช้งานเว็บ

  • web-vitals - LCP, INP, CLS
  • Web Vitals Extension - LCP, INP, CLS

Lab tools Field tools

เครื่องมือวัดผลในสภาพแวดล้อมจำลอง (Lab Tools)

แม้ว่า Core Web Vitals ทั้งหมดจะเป็นตัวชี้วัดในสภาพแวดล้อมจริงเป็นหลัก แต่หลายตัวก็สามารถวัดได้ในสภาพแวดล้อมจำลองด้วย

การวัดผลในสภาพแวดล้อมจำลองเป็นวิธีที่ดีที่สุดในการทดสอบประสิทธิภาพของฟีเจอร์ต่างๆ ในระหว่างการพัฒนา ก่อนที่จะปล่อยให้ผู้ใช้งานจริงได้ใช้ นอกจากนี้ยังเป็นวิธีที่ดีที่สุดในการตรวจจับปัญหาด้านประสิทธิภาพก่อนที่จะเกิดขึ้นจริง

เครื่องมือต่อไปนี้สามารถใช้วัด Core Web Vitals ในสภาพแวดล้อมจำลองได้:

เครื่องมืออย่าง Lighthouse ที่โหลดหน้าเว็บในสภาพแวดล้อมจำลองโดยไม่มีผู้ใช้จริงไม่สามารถวัด INP ได้ เนื่องจากไม่มีการป้อนข้อมูลจากผู้ใช้ อย่างไรก็ตาม เมทริก Total Blocking Time (TBT) สามารถวัดได้ในสภาพแวดล้อมจำลองและเป็นตัวแทนของ INP การปรับปรุงประสิทธิภาพที่ช่วยให้ TBT ดีขึ้นในสภาพแวดล้อมจำลองอาจช่วยปรับปรุง INP ในสภาพแวดล้อมจริงได้

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

ที่จริงแล้ว คะแนนของแต่ละตัวชี้วัด Core Web Vitals สามารถได้รับผลกระทบจากการโต้ตอบของผู้ใช้ได้ มีเพียงการวัดผลในสภาพแวดล้อมจริงเท่านั้นที่สามารถให้ภาพรวมที่ถูกต้องได้อย่างแม่นยำ

สรุป Core Web Vitals

Core Web Vitals เป็นชุดตัวชี้วัดสำคัญที่ Google ใช้ในการประเมินประสบการณ์ผู้ใช้บนเว็บไซต์ ประกอบด้วย:

  • Largest Contentful Paint (LCP): วัดความเร็วในการโหลดเนื้อหาหลัก
  • Interaction to Next Paint (INP): วัดความรวดเร็วในการตอบสนองต่อการโต้ตอบของผู้ใช้
  • Cumulative Layout Shift (CLS): วัดความเสถียรภาพของเลย์เอาต์หน้าเว็บ

การวัดผล Core Web Vitals สามารถทำได้ทั้งในสภาพแวดล้อมจริงและสภาพแวดล้อมจำลอง โดยใช้เครื่องมือต่างๆ เช่น:

  • เครื่องมือในสภาพแวดล้อมจริง: Chrome User Experience Report, PageSpeed Insights, Search Console
  • เครื่องมือในสภาพแวดล้อมจำลอง: Chrome DevTools, Lighthouse

การปรับปรุง Core Web Vitals มีความสำคัญเนื่องจาก:

  • ช่วยเพิ่มประสบการณ์ผู้ใช้ที่ดีขึ้น
  • ส่งผลต่อการจัดอันดับในผลการค้นหาของ Google
  • ช่วยเพิ่มอัตราการแปลงและความพึงพอใจของผู้ใช้

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

บทความถัดไปเราจะมาพูดถึงตัวชี้วัด Largest Contentful Paint (LCP) กันครับ

Referents :

แท็ก: #dev#performance
แชร์: