เมตริกประสิทธิภาพที่ยึดผู้ใช้เป็นศูนย์กลาง

Philip Walton

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

ในความเป็นจริง ประสิทธิภาพมีความเกี่ยวเนื่องกับสิ่งต่อไปนี้

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

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

การกำหนดเมตริก

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

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

ในช่วง 2-3 ปีที่ผ่านมา สมาชิกในทีม Chrome ซึ่งทำงานร่วมกับกลุ่มทำงานด้านประสิทธิภาพบนเว็บของ W3C ได้พยายามทำให้ชุด API และเมตริกใหม่ๆ เป็นมาตรฐานเดียวกันซึ่งช่วยวัดผลการใช้งานของหน้าเว็บได้อย่างแม่นยำมากขึ้นสำหรับผู้ใช้

เรากําหนดคําถามสําคัญ 2-3 ข้อต่อไปนี้เพื่อให้เมตริกมีความเกี่ยวข้องกับผู้ใช้

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

วิธีวัดเมตริก

โดยทั่วไป เมตริกประสิทธิภาพจะวัดด้วยวิธีใดวิธีหนึ่งจาก 2 วิธีต่อไปนี้

  • ในห้องทดลอง: การใช้เครื่องมือเพื่อจำลองการโหลดหน้าเว็บในสภาพแวดล้อมที่มีการควบคุมและสอดคล้องกัน
  • ใช้งานจริง: เมื่อผู้ใช้จริงกำลังโหลดและโต้ตอบกับหน้าเว็บ

ไม่มีตัวเลือกใดที่ดีหรือแย่ไปกว่าอีกตัวเลือกหนึ่งเลย โดยจริงๆ แล้วคุณควรใช้ทั้ง 2 ตัวเลือกเพื่อให้ได้ประสิทธิภาพที่ดี

ในห้องทดลอง

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

ใช้งานจริง

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

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

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

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

ประเภทของเมตริก

มีเมตริกประเภทอื่นๆ อีกหลายประเภทที่เกี่ยวข้องกับการรับรู้ประสิทธิภาพของผู้ใช้

  • ความเร็วในการโหลดที่รับรู้: ความเร็วที่หน้าเว็บโหลดและแสดงผลองค์ประกอบภาพทั้งหมดบนหน้าจอได้
  • การตอบสนองในการโหลด: หน้าเว็บสามารถโหลดและเรียกใช้โค้ด JavaScript ที่จำเป็นได้เร็วเพียงใด เพื่อให้คอมโพเนนต์ตอบสนองต่อการโต้ตอบของผู้ใช้ได้อย่างรวดเร็ว
  • การตอบสนองของรันไทม์: หลังจากการโหลดหน้าเว็บ หน้าเว็บตอบสนองต่อการโต้ตอบของผู้ใช้ได้เร็วเพียงใด
  • ความเสถียรของภาพ: องค์ประกอบในหน้ามีการเปลี่ยนแปลงในแบบที่ผู้ใช้คาดไม่ถึงและอาจรบกวนการโต้ตอบหรือไม่
  • ความราบรื่น: การเปลี่ยนและภาพเคลื่อนไหวจะแสดงผลในอัตราเฟรมที่สม่ำเสมอและลื่นไหลจากสถานะหนึ่งไปยังอีกสถานะหนึ่งใช่ไหม

จากเมตริกประสิทธิภาพทุกประเภทเหล่านี้ เราหวังเป็นอย่างยิ่งว่าจะมีเมตริกใดไม่เพียงพอที่จะบันทึกลักษณะด้านประสิทธิภาพทั้งหมดของหน้าเว็บ

เมตริกสำคัญที่ใช้วัด

  • First Contentful Paint (FCP): วัดระยะเวลาตั้งแต่ที่หน้าเว็บเริ่มโหลดจนถึงเมื่อส่วนใดส่วนหนึ่งของหน้าแสดงบนหน้าจอ (lab, ฟิลด์)
  • การแสดงผลเนื้อหาขนาดใหญ่ที่สุด (LCP): วัดเวลาตั้งแต่ที่หน้าเว็บเริ่มโหลดจนถึงเวลาที่บล็อกข้อความหรือองค์ประกอบรูปภาพที่ใหญ่ที่สุดในหน้าจอ (lab, ฟิลด์)
  • การโต้ตอบกับ Next Paint (INP): วัดเวลาในการตอบสนองของทุกการแตะ คลิก หรือการโต้ตอบทางแป้นพิมพ์ที่เกิดขึ้นกับหน้าเว็บ และเลือกเวลาในการตอบสนองของการโต้ตอบที่แย่ที่สุดของหน้าเว็บ (หรือใกล้เคียงสูงสุด) เป็นค่าเดียวที่ใช้อธิบายการตอบสนองโดยรวมของหน้าเว็บ โดยอิงตามจำนวนการโต้ตอบ (lab, ฟิลด์)
  • เวลาทั้งหมดในการบล็อก (TBT): วัดระยะเวลารวมระหว่าง FCP และ TTI ที่เทรดหลักถูกบล็อกเป็นเวลานานพอที่จะป้องกันการตอบสนองของอินพุต (ห้องทดลอง)
  • Cumulative Layout Shift (CLS): วัดคะแนนสะสมของการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดทั้งหมดซึ่งเกิดขึ้นระหว่างเวลาที่หน้าเว็บเริ่มโหลดและเมื่อสถานะอายุการใช้งานเปลี่ยนเป็นการซ่อน (lab, ฟิลด์)
  • Time to First Byte (TTFB): วัดเวลาที่เครือข่ายใช้เพื่อตอบสนองคำขอของผู้ใช้ด้วยไบต์แรกของแหล่งข้อมูล (lab, ฟิลด์)

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

เมตริกที่กำหนดเอง

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

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

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

ดูวิธีใช้ API เหล่านี้ในการวัดลักษณะเฉพาะด้านประสิทธิภาพของเว็บไซต์ของคุณในคำแนะนำเกี่ยวกับเมตริกที่กำหนดเอง