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