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