การตรวจสอบประสิทธิภาพใช้การ ติดตาม เพื่อรวบรวมข้อมูลเกี่ยวกับกระบวนการที่ถูกตรวจสอบในแอปของคุณ การติดตามคือรายงานที่มีข้อมูลที่บันทึกระหว่างช่วงเวลาสองจุดในแอปของคุณ
สำหรับเว็บแอป การตรวจสอบประสิทธิภาพ จะ รวบรวมการติดตามสำหรับแต่ละหน้าของแอปของคุณโดยอัตโนมัติที่เรียกว่าการ ติดตามการโหลดหน้าเว็บ การติดตามการโหลดหน้าเว็บแต่ละรายการจะรวบรวมเมตริกเริ่มต้นต่อไปนี้:
การลง สีครั้งแรก — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังหน้าใดหน้าหนึ่งและเมื่อมีการเปลี่ยนแปลงภาพ ใดๆ เกิดขึ้น
first contentful paint — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังหน้าและเมื่อเนื้อหาที่มีความหมายปรากฏขึ้น เช่น รูปภาพหรือข้อความ
domInteractive — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเมื่อเพจได้รับการพิจารณาว่ามีการโต้ตอบสำหรับผู้ใช้
domContentLoadedEventEnd — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังหน้าและเมื่อเอกสาร HTML เริ่มต้นถูกโหลดและแยกวิเคราะห์อย่างสมบูรณ์
loadEventEnd — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังหน้าและเมื่อ เหตุการณ์การโหลด ของเอกสารปัจจุบันเสร็จสิ้น
ความล่าช้าในการป้อนข้อมูลครั้งแรก — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้โต้ตอบกับเพจและเมื่อเบราว์เซอร์สามารถตอบสนองต่ออินพุตนั้น
คุณสามารถดูข้อมูลจากการติดตามเหล่านี้ได้ในแท็บย่อย การโหลดเพจ ของตารางการติดตาม ซึ่งอยู่ด้านล่างสุดของแดชบอร์ด ประสิทธิภาพ (เรียนรู้เพิ่มเติมเกี่ยวกับ การใช้คอนโซล ในภายหลังในหน้านี้)
คำจำกัดความของการติดตามการโหลดเพจ
การติดตามนี้จะวัดเมตริกต่างๆ เกี่ยวกับวิธีการโหลดหน้าเว็บในแอป โดยเฉพาะระยะเวลาที่ใช้ในการโหลดถึงจุดโหลดทั่วไป เช่น แอปที่ตอบสนอง
การติดตามการโหลดหน้าเว็บช่วยให้คุณติดตาม Web Vitals หลัก ของแอปได้ เช่น First Contentful Paint
เมตริกที่รวบรวมไว้สำหรับการติดตามการโหลดหน้าเว็บ
การติดตามเหล่านี้เป็นการติดตามแบบสำเร็จรูป ดังนั้นคุณจึงไม่สามารถเพิ่มเมตริกที่กำหนดเองหรือแอตทริบิวต์ที่กำหนดเองได้
ทาสีแรก
ตัวชี้วัดนี้วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเมื่อ มี การเปลี่ยนแปลงทางสายตา
เมตริกนี้มีประโยชน์เนื่องจากการระบายสีครั้งแรกส่งสัญญาณให้ผู้ใช้ทราบว่าหน้ากำลัง เริ่ม โหลด
เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ
หยุดเมื่อเกิด การ เปลี่ยนแปลงทางสายตา รวมถึงการเปลี่ยนสีพื้นหลังหรือการโหลดส่วนหัว
ลงสีครั้งแรกอย่างพอใจ
ตัวชี้วัดนี้วัดเวลาระหว่างที่ผู้ใช้นำทางไปยังเพจและเมื่อเนื้อหาที่มีความหมายปรากฏขึ้น เช่น รูปภาพหรือข้อความ
เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกว่าผู้ใช้เห็นเนื้อหาจริงของแอปได้เร็วเพียงใด ไม่ใช่แค่สีพื้นหลังหรือส่วนหัวใหม่
เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ
หยุดทันทีหลังจากที่เบราว์เซอร์แสดงเนื้อหาแรกจาก DOM รวมถึงข้อความ รูปภาพ (รวมถึงภาพพื้นหลัง) แคนวาสที่ไม่ใช่สีขาว หรือ SVG
domInteractive
ตัวชี้วัดนี้วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเมื่อถือว่าเพจเป็นแบบโต้ตอบสำหรับผู้ใช้
เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกว่าผู้ใช้ของคุณสามารถโต้ตอบกับองค์ประกอบในแอปของคุณได้เร็วเพียงใด เช่น ปุ่มและไฮเปอร์ลิงก์ แทนที่จะเห็นเพียงบนหน้าจอ โปรดทราบว่านี่ไม่ได้หมายความว่าเบราว์เซอร์จะตอบสนองต่อการโต้ตอบ (สำหรับตัวชี้วัดนี้ โปรดดูที่การ ติดตาม การหน่วงเวลาอินพุตครั้งแรก )
เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ
หยุดทันทีก่อนที่ตัวแทนผู้ใช้จะตั้งค่าความพร้อมของเอกสาร HTML ปัจจุบันเป็น "แบบโต้ตอบ"
domContentLoadedEventEnd
ตัวชี้วัดนี้วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจ กับเวลาที่เอกสาร HTML เริ่มต้นถูกโหลดและแยกวิเคราะห์อย่างสมบูรณ์
เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ
หยุดทันทีหลังจากโหลดและแยกวิเคราะห์เอกสาร HTML เริ่มต้นโดยสมบูรณ์ (
DOMContentLoaded) แต่ไม่ได้หมายความว่าสไตล์ชีต รูปภาพ และเฟรมย่อยโหลดเสร็จ
loadEventEnd
ตัวชี้วัดนี้วัดเวลาระหว่างเวลาที่ผู้ใช้ไปยังหน้าและเมื่อ เหตุการณ์การโหลด ของเอกสารปัจจุบันเสร็จสิ้น
เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกเกี่ยวกับระยะเวลาในการโหลดเนื้อหาทั้งหมดของคุณ รวมถึงสไตล์ชีตและรูปภาพ
เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ
หยุดทันทีหลังจากเหตุการณ์โหลดของเอกสาร HTML ปัจจุบันเสร็จสิ้น
อินพุตแรกล่าช้า
ตัวชี้วัดนี้วัดเวลาระหว่างเวลาที่ผู้ใช้โต้ตอบกับเพจและเมื่อเบราว์เซอร์สามารถตอบสนองต่ออินพุตนั้นได้
เมตริกนี้มีประโยชน์เนื่องจากเบราว์เซอร์ตอบสนองต่อการโต้ตอบของผู้ใช้ทำให้ผู้ใช้ของคุณมีความประทับใจครั้งแรกเกี่ยวกับการตอบสนองของแอปของคุณ
เริ่มต้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบบนหน้า เป็นครั้งแรก เช่น การคลิกปุ่มหรือไฮเปอร์ลิงก์
หยุดทันทีหลังจากที่เบราว์เซอร์สามารถตอบสนองต่ออินพุตได้ หมายความว่าเบราว์เซอร์จะไม่ยุ่งกับการโหลดหรือแยกวิเคราะห์เนื้อหาของคุณ
โปรดทราบว่าในการวัดเมตริกการหน่วงเวลาอินพุตแรก คุณต้องเพิ่มไลบรารี polyfill สำหรับเมตริกนี้ สำหรับคำแนะนำในการติดตั้ง โปรดดู เอกสารประกอบ ของไลบรารี
ติดตาม ดู และกรองข้อมูลประสิทธิภาพ
หากต้องการดูข้อมูลประสิทธิภาพแบบเรียลไทม์ ตรวจสอบให้แน่ใจว่าแอปของคุณใช้เวอร์ชัน SDK การตรวจสอบประสิทธิภาพที่เข้ากันได้กับการประมวลผลข้อมูลแบบเรียลไทม์ เรียนรู้เพิ่มเติม
ติดตามตัวชี้วัดหลักในแดชบอร์ดของคุณ
หากต้องการเรียนรู้ว่าเมตริกหลักของคุณมีแนวโน้มอย่างไร ให้เพิ่มลงในบอร์ดเมตริกที่ด้านบนสุดของแดชบอร์ด ประสิทธิภาพ คุณสามารถระบุการถดถอยได้อย่างรวดเร็วโดยดูการเปลี่ยนแปลงแบบสัปดาห์ต่อสัปดาห์ หรือตรวจสอบว่าการเปลี่ยนแปลงล่าสุดในโค้ดของคุณกำลังปรับปรุงประสิทธิภาพ
หากต้องการเพิ่มเมตริกลงในบอร์ดเมตริก ให้ไปที่ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase จากนั้นคลิกแท็บ แดชบอร์ด คลิกการ์ดตัวชี้วัดที่ว่างเปล่า จากนั้นเลือกตัวชี้วัดที่มีอยู่เพื่อเพิ่มลงในกระดานของคุณ คลิก บนการ์ดเมตริกที่มีข้อมูลเพื่อดูตัวเลือกเพิ่มเติม เช่น แทนที่หรือลบเมตริก
กระดานเมตริกจะแสดงข้อมูลเมตริกที่เก็บรวบรวมในช่วงเวลาหนึ่ง ทั้งในรูปแบบกราฟิกและการเปลี่ยนแปลงเป็นเปอร์เซ็นต์ที่เป็นตัวเลข
เรียนรู้เพิ่มเติมเกี่ยวกับ การใช้แดชบอร์ด
ดูร่องรอยและข้อมูลของพวกเขา
หากต้องการดูการติดตาม ให้ไปที่ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase เลื่อนลงไปที่ตารางการติดตาม จากนั้นคลิกแท็บย่อยที่เหมาะสม ตารางจะแสดงเมตริกระดับบนสุดบางรายการสำหรับแต่ละการติดตาม และคุณยังสามารถจัดเรียงรายการตามเปอร์เซ็นต์การเปลี่ยนแปลงสำหรับเมตริกเฉพาะได้อีกด้วย
หากคุณคลิกชื่อการติดตามในตารางการติดตาม คุณจะสามารถคลิกผ่านหน้าจอต่างๆ เพื่อสำรวจการติดตามและเจาะลึกลงไปในเมตริกที่น่าสนใจได้ ในหน้าส่วนใหญ่ คุณสามารถใช้ปุ่ม " กรอง " (ด้านซ้ายบนของหน้าจอ) เพื่อกรองข้อมูลตามแอตทริบิวต์ได้ เช่น
- กรองตาม URL ของหน้า เพื่อดูข้อมูลสำหรับหน้าเฉพาะของเว็บไซต์ของคุณ
- กรองตาม ประเภทการเชื่อมต่อ ที่มีประสิทธิภาพเพื่อเรียนรู้ว่าการเชื่อมต่อ 3g ส่งผลต่อแอปของคุณอย่างไร
- กรองตาม ประเทศ เพื่อให้แน่ใจว่าตำแหน่งฐานข้อมูลของคุณไม่กระทบกับภูมิภาคใดภูมิภาคหนึ่ง
เรียนรู้เพิ่มเติมเกี่ยวกับ การดูข้อมูลการติดตามของคุณ
ขั้นตอนถัดไป
เรียนรู้เพิ่มเติมเกี่ยวกับ การใช้แอตทริบิวต์ เพื่อตรวจสอบข้อมูลประสิทธิภาพ
เรียนรู้เพิ่มเติมเกี่ยวกับวิธี ติดตามปัญหาด้านประสิทธิภาพ ในคอนโซล Firebase
ตั้งค่าการแจ้งเตือน สำหรับการโหลดหน้าเว็บที่ลดประสิทธิภาพของแอปของคุณ ตัวอย่างเช่น คุณสามารถกำหนดค่าการแจ้งเตือนทางอีเมลสำหรับทีมของคุณ ถ้า อินพุตแรกล่าช้า สำหรับหน้าใดหน้าหนึ่งเกินเกณฑ์ที่คุณกำหนด