เราทุกคนได้ทราบมาว่าประสิทธิภาพนั้นสำคัญเพียงใด แต่เมื่อเราพูดถึงประสิทธิภาพและการทําให้เว็บไซต์ "เร็ว" เราหมายถึงอะไรโดยเฉพาะ
ในความเป็นจริง ประสิทธิภาพมีความเกี่ยวเนื่องกับสิ่งต่อไปนี้
- เว็บไซต์อาจเร็วสำหรับผู้ใช้คนหนึ่ง (ในเครือข่ายที่เร็วซึ่งมีอุปกรณ์ที่มีประสิทธิภาพ) แต่ช้าสำหรับผู้ใช้รายอื่น (ในเครือข่ายที่ช้าในอุปกรณ์ระดับโลว์เอนด์)
- เว็บไซต์ 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 ระดับล่างให้เป็นมาตรฐานซึ่งมีประโยชน์สำหรับการใช้งานเมตริกที่คุณกำหนดเอง ดังนี้
- User Timing API
- API สำหรับ Tasks แบบยาว
- API เฟรมภาพเคลื่อนไหวแบบยาว
- Element Timing API
- API ระยะเวลาการนำทาง
- Resource Timing API
- ช่วงเวลาของเซิร์ฟเวอร์
ดูวิธีใช้ API เหล่านี้ในการวัดลักษณะเฉพาะด้านประสิทธิภาพของเว็บไซต์ของคุณในคำแนะนำเกี่ยวกับเมตริกที่กำหนดเอง