การตรวจสอบประสิทธิภาพใช้การติดตามในการรวบรวมข้อมูลเกี่ยวกับขั้นตอนที่ได้รับการตรวจสอบในแอป การติดตามคือรายงานที่มีข้อมูลซึ่งถูกบันทึกระหว่างเวลา 2 จุด ในแอปของคุณ
สําหรับเว็บแอป การตรวจสอบประสิทธิภาพจะรวบรวมการติดตามสําหรับแต่ละหน้าโดยอัตโนมัติ ของแอปที่เรียกว่าการติดตามการโหลดหน้าเว็บ การติดตามการโหลดหน้าเว็บแต่ละครั้งจะรวบรวมข้อมูล เมตริกเริ่มต้นต่อไปนี้
first Paint — เมตริกที่วัดช่วงเวลาระหว่าง ผู้ใช้ไปยังหน้าหนึ่งๆ และเมื่อมีการเปลี่ยนแปลงรูปลักษณ์ใดๆ เกิดขึ้น
First Contentful Paint — เมตริกที่วัด ระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเนื้อหามีความหมาย จอแสดงผล เช่น รูปภาพหรือข้อความ
domInteractive — เมตริกที่วัดเวลาระหว่าง เมื่อผู้ใช้ไปยังหน้าเว็บและเมื่อถือว่าหน้าเว็บดังกล่าวมีการโต้ตอบ สำหรับผู้ใช้
domContentLoadedEventEnd — เมตริกที่วัดค่า เวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเวลาที่ HTML เริ่มต้น เอกสารโหลดและแยกวิเคราะห์เสร็จแล้ว
loadEventEnd — เมตริกที่วัดเวลาระหว่าง ผู้ใช้ไปยังหน้าเว็บและเมื่อเหตุการณ์การโหลดของเอกสารปัจจุบัน เสร็จสมบูรณ์
ความล่าช้าในการอินพุตครั้งแรก — เมตริกที่วัดเวลาระหว่าง เมื่อผู้ใช้โต้ตอบกับหน้าเว็บ และเมื่อเบราว์เซอร์สามารถตอบสนอง อินพุตนั้น
คุณดูข้อมูลจากการติดตามเหล่านี้ได้ในแท็บย่อยการโหลดหน้าเว็บของ ตารางการติดตาม ซึ่งอยู่ที่ด้านล่างของแดชบอร์ดประสิทธิภาพ (ดูข้อมูลเพิ่มเติม เกี่ยวกับการใช้คอนโซลภายหลังในหน้านี้)
คำจำกัดความของการติดตามการโหลดหน้าเว็บ
การติดตามนี้วัดเมตริกต่างๆ เกี่ยวกับการโหลดหน้าในแอป โดยเฉพาะอย่างยิ่ง ระยะเวลาที่ใช้ก่อนจะไปถึงจุดโหลดทั่วไป เช่น ที่ปรับเปลี่ยนตามอุปกรณ์
การติดตามการโหลดหน้าเว็บจะช่วยคุณติดตาม Web Vitals หลัก เช่น ลำดับแรก Contentful Paint
เมตริกที่รวบรวมสำหรับการติดตามการโหลดหน้าเว็บ
การติดตามเหล่านี้เป็นการติดตามที่พร้อมใช้งานทันที คุณจึงเพิ่มเมตริกที่กำหนดเองหรือ แอตทริบิวต์ที่กำหนดเอง
First Paint
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้เข้าชมหน้าเว็บและเวลาที่ การเปลี่ยนแปลงรูปลักษณ์ใดๆ จะเกิดขึ้น
เมตริกนี้มีประโยชน์เนื่องจากการแสดงผลครั้งแรกจะบอกให้ผู้ใช้ทราบว่าหน้าเว็บ กำลังเริ่มโหลด
เริ่มต้นเมื่อผู้ใช้ไปที่หน้า
หยุดเมื่อมีการเปลี่ยนภาพใดๆ ซึ่งรวมถึงการเปลี่ยนสีพื้นหลังหรือ การโหลดส่วนหัว
First Contentful Paint
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเวลา แสดงเนื้อหาที่มีความหมาย เช่น รูปภาพหรือข้อความ
เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกว่าผู้ใช้จะเห็น เนื้อหาจริงของแอป ไม่ใช่แค่สีพื้นหลังหรือส่วนหัวใหม่
เริ่มต้นเมื่อผู้ใช้ไปที่หน้า
หยุดทันทีหลังจากเบราว์เซอร์แสดงผลเนื้อหาแรกจาก DOM รวมทั้งข้อความ รูปภาพ (รวมถึงภาพพื้นหลัง) แคนวาสที่ไม่ใช่สีขาว หรือ SVG
DomInteractive
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้เข้าชมหน้าเว็บและเวลาที่ หน้าเว็บถือเป็นการโต้ตอบสำหรับผู้ใช้
เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกว่า ผู้ใช้ของคุณจะได้รับ โต้ตอบกับองค์ประกอบในแอป เช่น ปุ่มและไฮเปอร์ลิงก์ แทนที่จะเป็น เพียงแค่เห็นบนหน้าจอ แต่ทั้งนี้ ไม่ได้หมายความว่าเบราว์เซอร์ จะตอบสนองต่อการโต้ตอบ (สำหรับเมตริกนี้ โปรดดู การติดตาม First Input Delay)
เริ่มต้นเมื่อผู้ใช้ไปที่หน้า
หยุดก่อนที่ User Agent จะตั้งค่า ความพร้อมในการ "โต้ตอบ"
เนื้อหาโหลดเหตุการณ์สิ้นสุด
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้เข้าชมหน้าเว็บและเวลาที่ เอกสาร HTML เริ่มต้นจะโหลดและแยกวิเคราะห์เสร็จสมบูรณ์
เริ่มต้นเมื่อผู้ใช้ไปที่หน้า
หยุดทันทีหลังจากโหลดเอกสาร HTML เริ่มต้นเสร็จสมบูรณ์ และ แยกวิเคราะห์แล้ว (
DOMContentLoaded) แต่ไม่ได้หมายความว่าสไตล์ชีต รูปภาพ และเฟรมย่อยโหลดเสร็จแล้ว
เหตุการณ์การโหลดสิ้นสุด
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและ เมื่อเหตุการณ์การโหลดของเอกสารปัจจุบันเสร็จสมบูรณ์
เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกว่า ใช้เวลานานเท่าใดในการโหลด เนื้อหา รวมถึงสไตล์ชีตและรูปภาพ
เริ่มต้นเมื่อผู้ใช้ไปที่หน้า
หยุดทันทีหลังจากเหตุการณ์การโหลดของเอกสาร HTML ปัจจุบันเสร็จสมบูรณ์
ความล่าช้าในการอินพุตครั้งแรก
เมตริกนี้วัดระยะเวลาตั้งแต่ผู้ใช้โต้ตอบกับหน้าเว็บ เมื่อเบราว์เซอร์สามารถตอบสนองต่ออินพุตนั้นได้
เมตริกนี้มีประโยชน์เนื่องจากเบราว์เซอร์ที่ตอบสนองต่อการโต้ตอบของผู้ใช้ให้ ความประทับใจแรกเกี่ยวกับการตอบสนองของแอปต่อผู้ใช้
เริ่มเมื่อผู้ใช้เป็นครั้งแรกโต้ตอบกับองค์ประกอบในหน้าเว็บ เช่น คลิกปุ่มหรือไฮเปอร์ลิงก์
หยุดทันทีหลังจากที่เบราว์เซอร์สามารถตอบสนองต่ออินพุต ซึ่งหมายความว่า เบราว์เซอร์จะไม่ยุ่งอยู่กับการโหลดหรือแยกวิเคราะห์เนื้อหาของคุณ
โปรดทราบว่าหากต้องการวัดเมตริกความล่าช้าของอินพุตแรก คุณต้องเพิ่ม Polyfill ของเมตริกนี้ สำหรับคำแนะนำในการติดตั้ง โปรดดูที่ เอกสารประกอบ
ติดตาม ดู และกรองข้อมูลประสิทธิภาพ
หากต้องการดูข้อมูลประสิทธิภาพแบบเรียลไทม์ ให้ตรวจสอบว่าแอปของคุณใช้เมตริกประสิทธิภาพ Monitoring SDK เวอร์ชันที่ใช้ได้กับการประมวลผลข้อมูลแบบเรียลไทม์ ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลประสิทธิภาพแบบเรียลไทม์
ติดตามเมตริกที่สำคัญในแดชบอร์ด
หากต้องการดูแนวโน้มของเมตริกหลัก ให้เพิ่มเมตริกเหล่านั้นลงในกระดานเมตริกที่ด้านบนสุดของ แดชบอร์ดประสิทธิภาพ คุณสามารถดูการถดถอยได้อย่างรวดเร็วโดยดูข้อมูลแบบสัปดาห์ต่อสัปดาห์ หรือยืนยันว่าการเปลี่ยนแปลงล่าสุดในโค้ดช่วยปรับปรุงประสิทธิภาพได้
หากต้องการเพิ่มเมตริกลงในกระดานเมตริก ให้ทำตามขั้นตอนต่อไปนี้
- ไปที่หน้า แดชบอร์ดประสิทธิภาพในคอนโซล Firebase
- คลิกการ์ดเมตริกที่ว่างเปล่า จากนั้นเลือกเมตริกที่มีอยู่เพื่อเพิ่มลงในกระดาน
- คลิก บนการ์ดเมตริกที่สร้างขึ้นเพื่อดูตัวเลือกเพิ่มเติม เช่น การแทนที่หรือนำเมตริกออก
แผงเมตริกจะแสดงข้อมูลเมตริกที่รวบรวมไว้เมื่อเวลาผ่านไป ทั้งในรูปแบบกราฟิกและ ตัวเลขเปอร์เซ็นต์การเปลี่ยนแปลง
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้หน้าแดชบอร์ด
ดูการติดตามและข้อมูล
หากต้องการดูการติดตาม ให้ไปที่ แดชบอร์ดประสิทธิภาพ ในคอนโซล Firebase ให้เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บย่อยที่เหมาะสม ตารางจะแสดงเมตริกยอดนิยมสำหรับการติดตามแต่ละรายการ และคุณยังสามารถจัดเรียงรายการตาม เปอร์เซ็นต์การเปลี่ยนแปลงของเมตริกหนึ่งๆ
การตรวจสอบประสิทธิภาพมีหน้าการแก้ปัญหาในคอนโซล Firebase ที่ไฮไลต์เมตริก การเปลี่ยนแปลง ทำให้คุณสามารถจัดการได้อย่างรวดเร็วและลดผลกระทบจากปัญหาด้านประสิทธิภาพใน แอปและผู้ใช้ คุณสามารถใช้หน้าการแก้ปัญหาเมื่อเรียนรู้เกี่ยวกับ เช่น ปัญหาด้านประสิทธิภาพในสถานการณ์ต่อไปนี้
- คุณเลือกเมตริกที่เกี่ยวข้องในแดชบอร์ด และสังเกตเห็นการเปลี่ยนแปลงครั้งใหญ่
- ในตารางการติดตาม คุณจัดเรียงเพื่อแสดงเดลต้าที่ใหญ่ที่สุดที่ด้านบน และคุณจะเห็น เปอร์เซ็นต์การเปลี่ยนแปลงที่มีนัยสำคัญ
- คุณจะได้รับการแจ้งเตือนทางอีเมลเกี่ยวกับปัญหาด้านประสิทธิภาพ
คุณเข้าถึงหน้าการแก้ปัญหาได้ด้วยวิธีต่อไปนี้
- ในแดชบอร์ดเมตริก ให้คลิกปุ่มดูรายละเอียดเมตริก
- ในการ์ดเมตริก ให้เลือก
=> ดูรายละเอียด หน้าการแก้ปัญหาจะแสดงข้อมูลเกี่ยวกับเมตริก ที่คุณเลือก - ในตารางการติดตาม ให้คลิกชื่อการติดตามหรือค่าเมตริกในแถวที่เชื่อมโยงกับการติดตามนั้น การติดตาม
- คลิกตรวจสอบเลยในการแจ้งเตือนทางอีเมล
เมื่อคลิกที่ชื่อการติดตามในตารางการติดตาม คุณจะเจาะลึกลงไปในเมตริกของ
ความสนใจ คลิก
ปุ่ม
- กรองตาม URL หน้าเว็บเพื่อดูข้อมูลของหน้าที่ต้องการในเว็บไซต์
- กรองตามประเภทการเชื่อมต่อที่มีประสิทธิภาพเพื่อดูว่าการเชื่อมต่อ 3G ส่งผลต่อคุณอย่างไร แอป
- กรองตามประเทศเพื่อให้แน่ใจว่าตำแหน่งฐานข้อมูลไม่ส่งผลต่อ ภูมิภาค
ดูข้อมูลเพิ่มเติมเกี่ยวกับ ดูข้อมูลสำหรับ การติดตามของคุณ
ขั้นตอนถัดไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับ การใช้แอตทริบิวต์เพื่อตรวจสอบข้อมูลประสิทธิภาพ
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธี ติดตามปัญหาด้านประสิทธิภาพใน คอนโซล Firebase
ตั้งค่าการแจ้งเตือนสำหรับการโหลดหน้าเว็บที่มีประสิทธิภาพต่ำ ประสิทธิภาพของแอป เช่น คุณสามารถกำหนดค่าการแจ้งเตือนทางอีเมลสำหรับ ทีมหากความล่าช้าในการป้อนข้อมูลครั้งแรกของหน้าใดหน้าหนึ่งเกิน ที่คุณตั้งไว้