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