Performance Monitoring ใช้ การติดตามเพื่อเก็บรวบรวมข้อมูลเกี่ยวกับกระบวนการที่ตรวจสอบในแอป การติดตามคือรายงานที่มีข้อมูลที่บันทึกระหว่าง 2 จุดในเวลา ในแอป
สำหรับเว็บแอป Performance Monitoring จะเก็บรวบรวมการติดตามสำหรับแต่ละหน้า ของแอปที่เรียกว่า การติดตามการโหลดหน้าเว็บ โดยอัตโนมัติ การติดตามการโหลดหน้าเว็บแต่ละรายการจะเก็บรวบรวมเมตริกเริ่มต้นต่อไปนี้
Largest Contentful Paint \- เมตริกที่วัด ระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่เกิดการเปลี่ยนแปลงภาพ ใหญ่ที่สุด
Interaction to Next Paint - เมตริกที่วัด ระยะเวลาที่ยาวที่สุดระหว่างที่ผู้ใช้โต้ตอบกับหน้าเว็บกับเวลาที่เกิดการ แสดงผลครั้งถัดไป
Cumulative Layout Shift \- เมตริกที่วัดและให้คะแนนการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดในหน้าเว็บ
First Paint \- เมตริกที่วัดระยะเวลาระหว่างที่ ผู้ใช้ไปยังหน้าเว็บกับเวลาที่เกิดการเปลี่ยนแปลงภาพ ใดๆ
First Contentful Paint \- เมตริกที่วัด ระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่เนื้อหาที่มีความหมาย แสดงขึ้น เช่น รูปภาพหรือข้อความ
domInteractive \- เมตริกที่วัดระยะเวลาระหว่าง ที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่ระบบพิจารณาว่าหน้าเว็บมีการโต้ตอบ กับผู้ใช้
domContentLoadedEventEnd \- เมตริกที่วัด ระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่เอกสาร HTML เริ่มต้น โหลดและแยกวิเคราะห์เสร็จสมบูรณ์
loadEventEnd \- เมตริกที่วัดระยะเวลาระหว่างที่ ผู้ใช้ไปยังหน้าเว็บกับเวลาที่ เหตุการณ์การโหลด ของเอกสารปัจจุบันเสร็จสมบูรณ์
First Input Delay \- เมตริกที่วัดระยะเวลาระหว่าง ที่ผู้ใช้โต้ตอบกับหน้าเว็บกับเวลาที่เบราว์เซอร์ตอบสนองต่อ อินพุตนั้นได้
คุณดูข้อมูลจากการติดตามเหล่านี้ได้ในแท็บย่อย การโหลดหน้าเว็บของ ตารางการติดตาม ซึ่งอยู่ที่ด้านล่างของแดชบอร์ด ประสิทธิภาพ (ดูข้อมูลเพิ่มเติม เกี่ยวกับ การใช้คอนโซลในภายหลังในหน้านี้)
คำจำกัดความของการติดตามการโหลดหน้าเว็บ
การติดตามนี้จะวัดเมตริกหลายรายการเกี่ยวกับวิธีที่หน้าเว็บในแอปโหลด โดยเฉพาะอย่างยิ่งระยะเวลาที่ใช้ในการเข้าถึงจุดโหลดทั่วไป เช่น แอปที่ตอบสนอง
การติดตามการโหลดหน้าเว็บช่วยให้คุณติดตาม Core Web Vitals ของแอป เช่น First Contentful Paint
เมตริกที่เก็บรวบรวมสำหรับการติดตามการโหลดหน้าเว็บ
การติดตามเหล่านี้เป็นการติดตามที่พร้อมใช้งาน คุณจึงเพิ่มเมตริกที่กำหนดเองหรือแอตทริบิวต์ที่กำหนดเองเพิ่มเติมลงในการติดตามเหล่านี้ไม่ได้
Largest Contentful Paint
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่รูปภาพ ข้อความ หรือเนื้อหาวิดีโอ ใหญ่ที่สุดแสดงขึ้น
เมตริกนี้มีประโยชน์ในการทำความเข้าใจว่าเนื้อหาหลักของหน้าเว็บปรากฏให้ผู้ใช้เห็นได้เร็วแค่ไหน
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดเมื่อเกิดการเปลี่ยนแปลงภาพ ใหญ่ที่สุด ซึ่งรวมถึงองค์ประกอบรูปภาพ ข้อความ หรือวิดีโอ ดูรายละเอียดเพิ่มเติมได้ที่ core web vitals
"องค์ประกอบ Largest Contentful Paint" เป็นแอตทริบิวต์ที่กำหนดเองซึ่งระบุ องค์ประกอบที่สอดคล้องกับ Largest Contentful Paint ระบบจะบันทึกแอตทริบิวต์นี้เพิ่มเติมจากเวลา Largest Contentful Paint
Interaction to Next Paint
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้โต้ตอบกับหน้าเว็บกับเวลาที่เกิดการแสดงผลครั้งถัดไป
เมตริกนี้มีประโยชน์เนื่องจากวัดการตอบสนองของหน้าเว็บต่อข้อมูลจากผู้ใช้
เริ่มเมื่อผู้ใช้โต้ตอบกับหน้าเว็บ (คลิกเมาส์ แตะอุปกรณ์ หรือป้อนข้อมูลด้วยแป้นพิมพ์)
หยุดเมื่อเกิดการแสดงผลครั้งถัดไป ดูรายละเอียดเพิ่มเติมได้ที่ core web vitals
"Interaction to Next Paint ที่ยาวที่สุด" เป็นแอตทริบิวต์ที่กำหนดเองซึ่งระบุ องค์ประกอบที่ผู้ใช้โต้ตอบด้วยเมื่อเกิดเหตุการณ์ Interaction to Next Paint ระบบจะบันทึกแอตทริบิวต์นี้เพิ่มเติมจากเวลา Interaction to Next Paint
Cumulative Layout Shift
เมตริกนี้วัดคะแนนการเปลี่ยนเลย์เอาต์ที่เกิดขึ้นพร้อมกันมากที่สุดสำหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดทุกรายการซึ่งเกิดขึ้นภายในวงจรชีวิตทั้งหมดของหน้าเว็บ
เมตริกนี้มีประโยชน์เนื่องจากการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดอาจขัดขวางประสบการณ์ของผู้ใช้ เมตริกจะรายงานคะแนนตาม Layout Instability API ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีคำนวณคะแนนได้ที่ Core Web Vitals
"เป้าหมายการเปลี่ยนเลย์เอาต์ที่ใหญ่ที่สุด" เป็นแอตทริบิวต์ที่กำหนดเองซึ่งระบุ องค์ประกอบที่เปลี่ยนไปเมื่อเกิดการเปลี่ยนเนื้อหาที่ใหญ่ที่สุด ระบบจะบันทึกแอตทริบิวต์นี้เพิ่มเติมจากคะแนน Cumulative Layout Shift
First Paint
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่เกิดการเปลี่ยนแปลงภาพ ใดๆ
เมตริกนี้มีประโยชน์เนื่องจาก First Paint จะส่งสัญญาณให้ผู้ใช้ทราบว่าหน้าเว็บ เริ่มโหลดแล้ว
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดเมื่อเกิดการเปลี่ยนแปลงภาพ ใดๆ ซึ่งรวมถึงการเปลี่ยนสีพื้นหลังหรือการโหลดส่วนหัว
First Contentful Paint
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่เนื้อหาที่มีความหมายแสดงขึ้น เช่น รูปภาพหรือข้อความ
เมตริกนี้มีประโยชน์ในการให้ข้อมูลเชิงลึกว่าผู้ใช้จะเห็นเนื้อหาจริงของแอปได้เร็วแค่ไหน แทนที่จะเห็นเพียงสีพื้นหลังหรือส่วนหัวใหม่
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีหลังจากที่เบราว์เซอร์แสดงผลเนื้อหาแรกจาก DOM ซึ่งรวมถึงข้อความ รูปภาพ (รวมถึงรูปภาพพื้นหลัง) Canvas ที่ไม่ใช่สีขาว หรือ SVG
domInteractive
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่ระบบพิจารณาว่าหน้าเว็บมีการโต้ตอบกับผู้ใช้
เมตริกนี้มีประโยชน์ในการให้ข้อมูลเชิงลึกว่าผู้ใช้จะโต้ตอบกับองค์ประกอบในแอป เช่น ปุ่มและไฮเปอร์ลิงก์ ได้เร็วแค่ไหน แทนที่จะเห็นเพียงองค์ประกอบเหล่านั้นบนหน้าจอ โปรดทราบว่าเมตริกนี้ไม่ได้หมายความว่าเบราว์เซอร์ จะตอบสนองต่อการโต้ตอบ (สำหรับเมตริกนี้ โปรดดูการติดตาม First Input Delay)
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีก่อนที่ User-agent จะตั้งค่าความพร้อมของเอกสาร HTML ปัจจุบันเป็น "อินเทอร์แอกทีฟ"
domContentLoadedEventEnd
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่เอกสาร HTML เริ่มต้นโหลดและแยกวิเคราะห์เสร็จสมบูรณ์
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีหลังจากที่เอกสาร HTML เริ่มต้นโหลดและแยกวิเคราะห์เสร็จสมบูรณ์ (
DOMContentLoaded) แต่ไม่ได้หมายความว่าสไตล์ชีต รูปภาพ และเฟรมย่อยจะโหลดเสร็จแล้ว
loadEventEnd
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บกับเวลาที่ เหตุการณ์การโหลดของเอกสารปัจจุบันเสร็จสมบูรณ์
เมตริกนี้มีประโยชน์ในการให้ข้อมูลเชิงลึกเกี่ยวกับระยะเวลาที่ใช้ในการโหลดเนื้อหาทั้งหมด ซึ่งรวมถึงสไตล์ชีตและรูปภาพ
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีหลังจากที่เหตุการณ์การโหลดของเอกสาร HTML ปัจจุบันเสร็จสมบูรณ์
First Input Delay
เมตริกนี้วัดระยะเวลาระหว่างที่ผู้ใช้โต้ตอบกับหน้าเว็บกับเวลาที่เบราว์เซอร์ตอบสนองต่ออินพุตนั้นได้
เมตริกนี้มีประโยชน์เนื่องจากการที่เบราว์เซอร์ตอบสนองต่อการโต้ตอบของผู้ใช้จะทำให้ผู้ใช้ได้รับความประทับใจแรกเกี่ยวกับความรวดเร็วในการตอบสนองของแอป
เริ่มเมื่อผู้ใช้โต้ตอบกับองค์ประกอบในหน้าเว็บ เป็นครั้งแรก เช่น การคลิกปุ่มหรือไฮเปอร์ลิงก์
หยุดทันทีหลังจากที่เบราว์เซอร์ตอบสนองต่ออินพุตได้ ซึ่งหมายความว่าเบราว์เซอร์ไม่ได้โหลดหรือแยกวิเคราะห์เนื้อหา
โปรดทราบว่าคุณต้องเพิ่มไลบรารี Polyfill สำหรับเมตริกนี้เพื่อวัดเมตริก First Input Delay ดูวิธีการติดตั้งได้ในเอกสารประกอบของไลบรารี's documentation.
ติดตาม ดู และกรองข้อมูลประสิทธิภาพ
หากต้องการดูข้อมูลประสิทธิภาพแบบเรียลไทม์ ให้ตรวจสอบว่าแอปใช้ Performance Monitoring SDK เวอร์ชันที่เข้ากันได้กับการประมวลผลข้อมูลแบบเรียลไทม์ ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลประสิทธิภาพแบบเรียลไทม์
ติดตามเมตริกหลักในแดชบอร์ด
หากต้องการดูแนวโน้มของเมตริกหลัก ให้เพิ่มเมตริกเหล่านั้นลงในบอร์ดเมตริกที่ด้านบนของ แดชบอร์ดประสิทธิภาพ คุณสามารถระบุการถดถอยได้อย่างรวดเร็วโดยดูการเปลี่ยนแปลงในแต่ละสัปดาห์ หรือยืนยันว่าการเปลี่ยนแปลงโค้ดล่าสุดช่วยปรับปรุงประสิทธิภาพ
แดชบอร์ด Firebase Performance Monitoring" />
หากต้องการเพิ่มเมตริกลงในบอร์ดเมตริก ให้ทำตามขั้นตอนต่อไปนี้
- ไปที่ แดชบอร์ดประสิทธิภาพในคอนโซลFirebase
- คลิกการ์ดเมตริกที่ว่างเปล่า แล้วเลือกเมตริกที่มีอยู่เพื่อเพิ่มลงในบอร์ด
- คลิก ในการ์ดเมตริกที่มีข้อมูลเพื่อดูตัวเลือกเพิ่มเติม เช่น การแทนที่หรือนำเมตริกออก
บอร์ดเมตริกจะแสดงข้อมูลเมตริกที่เก็บรวบรวมไว้ตามช่วงเวลาต่างๆ ทั้งในรูปแบบกราฟิกและการเปลี่ยนแปลงเป็นเปอร์เซ็นต์ตัวเลข
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้แดชบอร์ด
ดูการติดตามและข้อมูลของการติดตาม
หากต้องการดูการติดตาม ให้ไปที่ ประสิทธิภาพ แดชบอร์ด ในคอนโซล Firebase เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บย่อยที่เหมาะสม ตารางจะแสดงเมตริกยอดนิยมบางรายการสำหรับการติดตามแต่ละรายการ และคุณยังจัดเรียงรายการตามการ เปลี่ยนแปลงเป็นเปอร์เซ็นต์สำหรับเมตริกที่เฉพาะเจาะจงได้ด้วย
Performance Monitoring มีหน้าการแก้ปัญหาในคอนโซล Firebase ซึ่งจะไฮไลต์การเปลี่ยนแปลงเมตริก ทำให้คุณแก้ไขและลดผลกระทบของปัญหาด้านประสิทธิภาพในแอป และผู้ใช้ได้อย่างรวดเร็ว คุณสามารถใช้หน้าการแก้ปัญหาเมื่อทราบถึงปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้น เช่น ในสถานการณ์ต่อไปนี้
- คุณเลือกเมตริกที่เกี่ยวข้องในแดชบอร์ดและสังเกตเห็นค่าเดลต้าขนาดใหญ่
- ในตารางการติดตาม คุณจัดเรียงเพื่อแสดงค่าเดลต้าที่ใหญ่ที่สุดที่ด้านบน และเห็นการเปลี่ยนแปลงเป็นเปอร์เซ็นต์ที่สำคัญ
- คุณได้รับการแจ้งเตือนทางอีเมลเกี่ยวกับปัญหาด้านประสิทธิภาพ
คุณเข้าถึงหน้าการแก้ปัญหาได้ด้วยวิธีต่อไปนี้
- ในแดชบอร์ดเมตริก ให้คลิกปุ่มดูรายละเอียดเมตริก
- ในการ์ดเมตริก ให้เลือก
=> ดูรายละเอียด หน้าการแก้ปัญหาจะแสดงข้อมูลเกี่ยวกับเมตริก ที่คุณเลือก - ในตารางการติดตาม ให้คลิกชื่อการติดตามหรือค่าเมตริกใดก็ได้ในแถวที่เชื่อมโยงกับการติดตามนั้น
- ในการแจ้งเตือนทางอีเมล ให้คลิกตรวจสอบเลย
เมื่อคลิกชื่อการติดตามในตารางการติดตาม คุณจะเจาะลึกลงไปในเมตริกที่
สนใจได้ คลิกปุ่ม
ข้อมูล Firebase Performance Monitoring ที่กรองตามแอตทริบิวต์" />
- กรองตาม URL ของหน้าเว็บเพื่อดูข้อมูลสำหรับหน้าเว็บที่เฉพาะเจาะจงในเว็บไซต์
- กรองตาม ประเภทการเชื่อมต่อที่มีผล เพื่อดูว่าการเชื่อมต่อ 3G ส่งผลต่อ แอปอย่างไร
- กรองตาม ประเทศเพื่อให้แน่ใจว่าตำแหน่งฐานข้อมูลไม่ส่งผลต่อภูมิภาคที่เฉพาะเจาะจง
ดูข้อมูลเพิ่มเติมเกี่ยวกับ การดูข้อมูลสำหรับการติดตาม
ขั้นตอนถัดไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับ การใช้แอตทริบิวต์เพื่อตรวจสอบข้อมูลประสิทธิภาพ
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธี ติดตามปัญหาด้านประสิทธิภาพใน Firebaseคอนโซล
ตั้งค่าการแจ้งเตือนสำหรับการโหลดหน้าเว็บที่ทำให้ประสิทธิภาพของแอปแย่ลง เช่น คุณสามารถกำหนดค่าการแจ้งเตือนทางอีเมลสำหรับ ทีมได้หาก First Input Delay สำหรับหน้าเว็บที่เฉพาะเจาะจงเกิน เกณฑ์ที่คุณตั้งไว้