เราทุกคนทราบดีว่าประสิทธิภาพนั้นสำคัญเพียงใด แต่สิ่งที่เราหมายถึงจริงๆ เมื่อพูดถึงประสิทธิภาพและการทำเว็บไซต์ให้ "เร็ว"
ความจริงก็คือประสิทธิภาพนั้นเป็นเรื่องสัมพัทธ์
- เว็บไซต์อาจเร็วสำหรับผู้ใช้รายหนึ่ง (ในเครือข่ายที่เร็วและมีอุปกรณ์ที่มีประสิทธิภาพ) แต่ช้าสำหรับผู้ใช้รายอื่น (ในเครือข่ายที่ช้าและมีอุปกรณ์ระดับล่าง)
- เว็บไซต์ 2 แห่งอาจโหลดเสร็จในเวลาที่เท่ากันทุกประการ แต่เว็บไซต์หนึ่งอาจดูเหมือนว่าโหลดเร็วกว่า (หากโหลดเนื้อหาทีละส่วนแทนที่จะรอจนกว่าจะโหลดเสร็จแล้วค่อยแสดง)
- เว็บไซต์อาจดูเหมือนว่าโหลดเร็ว แต่ตอบสนองต่อการโต้ตอบของผู้ใช้ช้า (หรือไม่ตอบสนองเลย)
เมื่อพูดถึงประสิทธิภาพ คุณควรใช้ข้อมูลอย่างถูกต้องและอ้างอิงถึงประสิทธิภาพในแง่ของเมตริก เกณฑ์ที่เป็นกลางซึ่งวัดได้แบบเชิงปริมาณ แต่คุณก็ต้องตรวจสอบด้วยว่าเมตริกที่วัดนั้นมีประโยชน์
การกําหนดเมตริก
ที่ผ่านมา ประสิทธิภาพของเว็บได้รับการวัดด้วยเหตุการณ์ load อย่างไรก็ตาม แม้ว่า load จะเป็นช่วงเวลาที่กําหนดไว้อย่างชัดเจนในวงจรชีวิตของหน้าเว็บ แต่ช่วงเวลาดังกล่าวอาจไม่สอดคล้องกับสิ่งที่ผู้ใช้ให้ความสําคัญ
ตัวอย่างเช่น เซิร์ฟเวอร์อาจตอบกลับด้วยหน้าเว็บขั้นต่ำที่ "โหลด" ทันที แต่เลื่อนเวลาการดึงข้อมูลเนื้อหาหรือการแสดงข้อมูลใดๆ ในหน้าเว็บออกไปจนกว่าจะผ่านไปหลายวินาทีหลังจากที่เหตุการณ์ load เริ่มทํางาน หน้าเว็บดังกล่าวใช้เวลาโหลดเร็วในทางเทคนิค แต่เวลาดังกล่าวไม่สอดคล้องกับประสบการณ์การโหลดหน้าเว็บของผู้ใช้
ในช่วง 2-3 ปีที่ผ่านมา สมาชิกของทีม Chrome ได้ทํางานร่วมกับกลุ่มทํางานด้านประสิทธิภาพของเว็บ W3C เพื่อกำหนดมาตรฐานชุด API และเมตริกใหม่ที่จะวัดประสบการณ์ของผู้ใช้เกี่ยวกับประสิทธิภาพของหน้าเว็บได้อย่างแม่นยำยิ่งขึ้น
เรากำหนดเมตริกโดยอิงตามคำถามสำคัญ 2-3 ข้อต่อไปนี้ เพื่อให้มั่นใจว่าเมตริกมีความเกี่ยวข้องกับผู้ใช้
| ปัญหาเกิดขึ้นไหม | การนำทางเริ่มต้นขึ้นสําเร็จไหม เซิร์ฟเวอร์ตอบกลับไหม |
| มีประโยชน์ไหม | มีเนื้อหาที่แสดงผลเพียงพอที่ผู้ใช้จะมีส่วนร่วมกับเนื้อหาได้หรือไม่ |
| ใช้งานได้ไหม | ผู้ใช้โต้ตอบกับหน้าเว็บได้ไหม หรือหน้าเว็บไม่ว่าง |
| ดูน่าพอใจไหม | อินเทอร์แอกชันลื่นไหลเป็นธรรมชาติและไม่มีการหน่วงหรือไม่ |
วิธีวัดเมตริก
โดยทั่วไปแล้ว เมตริกประสิทธิภาพจะวัดด้วยวิธีใดวิธีหนึ่งต่อไปนี้
- ในห้องทดลอง: ใช้เครื่องมือเพื่อจําลองการโหลดหน้าเว็บในสภาพแวดล้อมที่มีการควบคุมและสอดคล้องกัน
- ภาคสนาม: ผู้ใช้จริงที่โหลดและโต้ตอบกับหน้าเว็บ
ตัวเลือกเหล่านี้ไม่ได้ดีกว่าหรือแย่กว่ากัน โดยทั่วไปแล้วคุณควรใช้ทั้ง 2 ตัวเลือกเพื่อให้ได้ประสิทธิภาพที่ดี
ในห้องทดลอง
การทดสอบประสิทธิภาพในห้องทดลองเป็นสิ่งจําเป็นเมื่อพัฒนาฟีเจอร์ใหม่ ก่อนที่จะเผยแพร่ฟีเจอร์ในเวอร์ชันที่ใช้งานจริง คุณจะวัดลักษณะประสิทธิภาพของฟีเจอร์กับผู้ใช้จริงไม่ได้ การทดสอบฟีเจอร์ในห้องทดลองก่อนที่จะเผยแพร่จึงเป็นวิธีที่ดีที่สุดในการป้องกันไม่ให้ประสิทธิภาพลดลง
ภาคสนาม
ในทางกลับกัน แม้ว่าการทดสอบใน Test Lab จะเป็นตัวแทนที่สมเหตุสมผลของประสิทธิภาพ แต่ก็ไม่ได้แสดงถึงประสบการณ์การใช้งานเว็บไซต์ของผู้ใช้จริงเสมอไป
ประสิทธิภาพของเว็บไซต์อาจแตกต่างกันอย่างมากตามความสามารถของอุปกรณ์และสภาพเครือข่ายของผู้ใช้ และยังอาจแตกต่างกันไปตามที่ผู้ใช้โต้ตอบกับหน้าเว็บ (หรืออย่างไร)
นอกจากนี้ การโหลดหน้าเว็บก็ไม่ได้เป็นแบบกำหนดได้เสมอไป ตัวอย่างเช่น เว็บไซต์ที่โหลดเนื้อหาหรือโฆษณาที่ปรับตามโปรไฟล์ของผู้ใช้อาจมีลักษณะประสิทธิภาพที่แตกต่างกันอย่างมากในแต่ละผู้ใช้ การทดสอบในห้องทดลองจะไม่จับความแตกต่างเหล่านั้น
วิธีเดียวที่จะทราบประสิทธิภาพของเว็บไซต์ต่อผู้ใช้อย่างแท้จริงคือการวัดประสิทธิภาพของเว็บไซต์ขณะที่ผู้ใช้โหลดและโต้ตอบกับเว็บไซต์ การวัดผลประเภทนี้มักเรียกว่าการตรวจสอบผู้ใช้จริง (RUM)
ประเภทของเมตริก
นอกจากนี้ยังมีเมตริกประเภทอื่นๆ อีกหลายประเภทที่เกี่ยวข้องกับวิธีที่ผู้ใช้รับรู้ถึงประสิทธิภาพ
- ความเร็วในการโหลดที่รับรู้: ความเร็วที่หน้าเว็บโหลดและแสดงผลองค์ประกอบภาพทั้งหมดบนหน้าจอ
- การตอบสนองในการโหลด: ความเร็วที่หน้าเว็บโหลดและเรียกใช้โค้ด JavaScript ที่จําเป็นเพื่อให้คอมโพเนนต์ตอบสนองต่อการโต้ตอบของผู้ใช้อย่างรวดเร็ว
- การตอบสนองรันไทม์: หลังจากโหลดหน้าเว็บแล้ว หน้าเว็บจะตอบสนองต่อการโต้ตอบของผู้ใช้ได้เร็วเพียงใด
- ความเสถียรของภาพ: องค์ประกอบในหน้าเว็บเลื่อนไปในลักษณะที่ผู้ใช้ไม่คาดคิดและอาจรบกวนการโต้ตอบของผู้ใช้หรือไม่
- ความราบรื่น: ทรานซิชันและภาพเคลื่อนไหวแสดงผลที่อัตราเฟรมที่สอดคล้องกันและลื่นไหลจากสถานะหนึ่งไปยังอีกสถานะหนึ่งหรือไม่
เมื่อพิจารณาเมตริกประสิทธิภาพประเภทต่างๆ ทั้งหมดเหล่านี้แล้ว คุณจะเห็นว่าไม่มีเมตริกใดเมตริกหนึ่งเพียงพอที่จะจับลักษณะประสิทธิภาพทั้งหมดของหน้าเว็บ
เมตริกที่สําคัญในการวัด
- First Contentful Paint (FCP): วัดเวลาตั้งแต่ที่หน้าเว็บเริ่มโหลดจนถึงเนื้อหาส่วนใดส่วนหนึ่งของหน้าแสดงบนหน้าจอ (lab, field)
- Largest Contentful Paint (LCP): วัดเวลาตั้งแต่ที่หน้าเว็บเริ่มโหลดจนถึงเวลาที่ระบบแสดงผลบล็อกข้อความหรือองค์ประกอบรูปภาพขนาดใหญ่ที่สุดบนหน้าจอ (lab, field)
- Interaction to Next Paint (INP): วัดเวลาในการตอบสนองของการแตะ การคลิก หรือการโต้ตอบด้วยแป้นพิมพ์ทั้งหมดที่ทำกับหน้าเว็บ และเลือกเวลาในการตอบสนองของการโต้ตอบที่แย่ที่สุดของหน้าเว็บ (หรือใกล้เคียงกับค่าสูงสุด) เป็นค่าเดียวที่แสดงถึงภาพรวมของการตอบสนองของหน้าเว็บ โดยอิงตามจํานวนการโต้ตอบ (lab, field)
- เวลาในการบล็อกทั้งหมด (TBT): วัดระยะเวลารวมระหว่าง FCP กับ TTI ซึ่งมีการบล็อกเทรดหลักเป็นเวลานานพอที่จะป้องกันการตอบสนองต่ออินพุต (lab)
- การเปลี่ยนแปลงเลย์เอาต์สะสม (CLS): วัดคะแนนสะสมของการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิดทั้งหมดที่เกิดขึ้นระหว่างที่หน้าเว็บเริ่มโหลดและเมื่อสถานะวงจรเปลี่ยนเป็น "ซ่อนอยู่" (lab, field)
- เวลาที่ได้รับข้อมูลไบต์แรก (TTFB): วัดเวลาที่เครือข่ายใช้ในการตอบสนองคำขอของผู้ใช้ด้วยไบต์แรกของทรัพยากร (lab, field)
ในบางกรณี เราจะเปิดตัวเมตริกใหม่เพื่อครอบคลุมส่วนที่ขาดหายไป แต่ในกรณีอื่นๆ เมตริกที่ดีที่สุดคือเมตริกที่ปรับให้เหมาะกับเว็บไซต์ของคุณโดยเฉพาะ
เมตริกที่กำหนดเอง
เมตริกประสิทธิภาพที่กล่าวถึงก่อนหน้านี้เหมาะสำหรับการทำความเข้าใจทั่วไปเกี่ยวกับลักษณะประสิทธิภาพของเว็บไซต์ส่วนใหญ่บนเว็บ นอกจากนี้ ยังเหมาะสําหรับการมีชุดเมตริกทั่วไปสําหรับเว็บไซต์เพื่อเปรียบเทียบประสิทธิภาพกับคู่แข่ง
อย่างไรก็ตาม บางครั้งเว็บไซต์หนึ่งๆ ก็อาจมีลักษณะเฉพาะตัวในบางด้าน ซึ่งต้องใช้เมตริกเพิ่มเติมเพื่อจับภาพประสิทธิภาพทั้งหมด ตัวอย่างเช่น เมตริก LCP มีไว้เพื่อวัดเมื่อเนื้อหาหลักของหน้าเว็บโหลดเสร็จแล้ว แต่อาจมีกรณีที่องค์ประกอบที่ใหญ่ที่สุดไม่ได้เป็นส่วนหนึ่งของเนื้อหาหลักของหน้าเว็บ LCP จึงอาจไม่เกี่ยวข้อง
เพื่อจัดการกับกรณีดังกล่าว กลุ่มทํางานด้านประสิทธิภาพของเว็บได้กําหนดมาตรฐาน API ระดับล่างที่มีประโยชน์สําหรับการใช้เมตริกที่กําหนดเองของคุณ ดังนี้
- User Timing API
- Long Tasks API
- Long Animation Frames API
- Element Timing API
- Navigation Timing API
- Resource Timing API
- เวลาของเซิร์ฟเวอร์
โปรดดูคู่มือเกี่ยวกับเมตริกที่กําหนดเองเพื่อดูวิธีใช้ API เหล่านี้เพื่อวัดลักษณะประสิทธิภาพที่เฉพาะเจาะจงสําหรับเว็บไซต์ของคุณ