เรียนรู้เกี่ยวกับข้อมูลประสิทธิภาพการโหลดหน้าเว็บ (เว็บแอป)

การตรวจสอบประสิทธิภาพใช้ การติดตาม เพื่อรวบรวมข้อมูลเกี่ยวกับกระบวนการที่ได้รับการตรวจสอบในแอปของคุณ การติดตามคือรายงานที่มีข้อมูลที่บันทึกระหว่างเวลาสองจุดในแอปของคุณ

สำหรับเว็บแอป การตรวจสอบประสิทธิภาพจะรวบรวมการติดตามสำหรับแต่ละหน้าของแอปของคุณที่เรียกว่า การติดตามการโหลดหน้าเว็บ โดยอัตโนมัติ การติดตามการโหลดหน้าเว็บแต่ละรายการจะรวบรวมเมตริกเริ่มต้นต่อไปนี้:

• การทาสีครั้งแรก — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเวลาที่ มี การเปลี่ยนแปลงภาพเกิดขึ้น

• การระบายสีเนื้อหาครั้งแรก — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเมื่อเนื้อหาที่มีความหมายแสดง เช่น รูปภาพหรือข้อความ

• domInteractive — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเวลาที่ถือว่าเพจเป็นแบบโต้ตอบสำหรับผู้ใช้

• domContentLoadedEventEnd — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเวลาที่โหลดและแยกวิเคราะห์เอกสาร HTML เริ่มต้นอย่างสมบูรณ์

• loadEventEnd — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเมื่อ เหตุการณ์การโหลด ของเอกสารปัจจุบันเสร็จสมบูรณ์

• ความล่าช้าในการป้อนข้อมูลครั้งแรก — ตัวชี้วัดที่วัดเวลาระหว่างเวลาที่ผู้ใช้โต้ตอบกับเพจและเวลาที่เบราว์เซอร์สามารถตอบสนองต่ออินพุตนั้น

คุณสามารถดูข้อมูลจากการติดตามเหล่านี้ได้ในแท็บย่อย การโหลดเพจ ของตารางการติดตาม ซึ่งอยู่ที่ด้านล่างของแดชบอร์ด ประสิทธิภาพ (เรียนรู้เพิ่มเติมเกี่ยวกับ การใช้คอนโซล ในภายหลังในหน้านี้)

คำจำกัดความของการติดตามการโหลดเพจ

การติดตามนี้จะวัดเมตริกต่างๆ เกี่ยวกับวิธีการโหลดหน้าเว็บในแอปของคุณ โดยเฉพาะระยะเวลาที่ใช้ในการโหลดถึงจุดโหลดทั่วไป เช่น แอปที่ปรับเปลี่ยนตามอุปกรณ์

การติดตามการโหลดหน้าเว็บช่วยให้คุณติดตาม Web Vitals หลัก ของแอปได้ เช่น การลงสีเนื้อหาครั้งแรก

เมตริกที่รวบรวมสำหรับการติดตามการโหลดหน้าเว็บ

การติดตามเหล่านี้เป็นการติดตามแบบสำเร็จรูป ดังนั้นคุณจึงไม่สามารถเพิ่มเมตริกที่กำหนดเองหรือแอตทริบิวต์ที่กำหนดเองลงไปได้

ทาสีครั้งแรก

ตัวชี้วัดนี้จะวัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเวลาที่ มี การเปลี่ยนแปลงทางภาพเกิดขึ้น

เมตริกนี้มีประโยชน์เนื่องจากสีแรกจะส่งสัญญาณให้ผู้ใช้ทราบว่าเพจกำลัง เริ่ม โหลด

• เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ

• หยุดเมื่อ มี การเปลี่ยนแปลงการมองเห็น รวมถึงการเปลี่ยนสีพื้นหลังหรือการโหลดส่วนหัว

ทาสีความพึงพอใจครั้งแรก

เมตริกนี้จะวัดเวลาระหว่างเวลาที่ผู้ใช้ไปยังหน้าเว็บและเวลาที่เนื้อหาที่มีความหมายแสดง เช่น รูปภาพหรือข้อความ

เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกว่าผู้ใช้เห็นเนื้อหาจริงของแอปได้เร็วเพียงใด ไม่ใช่แค่สีพื้นหลังหรือส่วนหัวใหม่

• เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ

• หยุดทันทีหลังจากที่เบราว์เซอร์แสดงผลเนื้อหาแรกจาก DOM รวมถึงข้อความ รูปภาพ (รวมถึงภาพพื้นหลัง) ผืนผ้าใบที่ไม่ใช่สีขาว หรือ SVG

domInteractive

เมตริกนี้จะวัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเวลาที่ถือว่าเพจมีการโต้ตอบสำหรับผู้ใช้

เมตริกนี้มีประโยชน์สำหรับข้อมูลเชิงลึกว่าผู้ใช้โต้ตอบกับองค์ประกอบต่างๆ ในแอปได้เร็วเพียงใด เช่น ปุ่มและไฮเปอร์ลิงก์ แทนที่จะเห็นองค์ประกอบเหล่านั้นบนหน้าจอ โปรดทราบว่านี่ไม่ได้หมายความว่าเบราว์เซอร์จะตอบสนองต่อการโต้ตอบ (สำหรับเมตริกนี้ โปรดดูที่ การติดตาม ความล่าช้าในการป้อนข้อมูลครั้งแรก )

• เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ

• หยุดทันทีก่อนที่ตัวแทนผู้ใช้จะตั้งค่าความพร้อมของเอกสาร HTML ปัจจุบันเป็น "โต้ตอบ"

domContentLoadedEventEnd

เมตริกนี้จะวัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเวลาที่โหลดและแยกวิเคราะห์เอกสาร HTML เริ่มต้นอย่างสมบูรณ์

• เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ

• หยุดทันทีหลังจากโหลดและแยกวิเคราะห์เอกสาร HTML เริ่มต้นเสร็จสมบูรณ์ ( DOMContentLoaded ) แต่ไม่ได้หมายความว่าโหลดสไตล์ชีต รูปภาพ และเฟรมย่อยเสร็จแล้ว

โหลดกิจกรรมEnd

หน่วยวัดนี้จะวัดเวลาระหว่างเวลาที่ผู้ใช้นำทางไปยังเพจและเวลาที่ เหตุการณ์การโหลด เอกสารปัจจุบันเสร็จสมบูรณ์

ตัวชี้วัดนี้มีประโยชน์สำหรับข้อมูลเชิงลึกเกี่ยวกับระยะเวลาที่ใช้ในการโหลดเนื้อหาทั้งหมดของคุณ รวมถึงสไตล์ชีทและรูปภาพ

• เริ่มต้นเมื่อผู้ใช้นำทางไปยังเพจ

• หยุดทันทีหลังจากเหตุการณ์การโหลดเอกสาร HTML ปัจจุบันเสร็จสิ้น

ความล่าช้าในการป้อนข้อมูลครั้งแรก

เมตริกนี้จะวัดเวลาระหว่างเวลาที่ผู้ใช้โต้ตอบกับเพจและเวลาที่เบราว์เซอร์สามารถตอบสนองอินพุตนั้นได้

เมตริกนี้มีประโยชน์เนื่องจากเบราว์เซอร์ที่ตอบสนองต่อการโต้ตอบของผู้ใช้ทำให้ผู้ใช้ของคุณประทับใจครั้งแรกเกี่ยวกับการตอบสนองของแอปของคุณ

• เริ่มต้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบบนเพจ เป็นครั้งแรก เช่น การคลิกปุ่มหรือไฮเปอร์ลิงก์

• หยุดทันทีหลังจากที่เบราว์เซอร์สามารถตอบสนองต่ออินพุตได้ ซึ่งหมายความว่าเบราว์เซอร์ไม่ได้ยุ่งอยู่กับการโหลดหรือแยกวิเคราะห์เนื้อหาของคุณ

โปรดทราบว่าหากต้องการวัดเมตริกความล่าช้าอินพุตแรก คุณต้องเพิ่มไลบรารีโพลีฟิลสำหรับเมตริกนี้ สำหรับคำแนะนำในการติดตั้ง โปรดดู เอกสารประกอบ ของห้องสมุด

ติดตาม ดู และกรองข้อมูลประสิทธิภาพ

หากต้องการดูข้อมูลประสิทธิภาพแบบเรียลไทม์ ตรวจสอบให้แน่ใจว่าแอปของคุณใช้เวอร์ชัน SDK การตรวจสอบประสิทธิภาพที่เข้ากันได้กับการประมวลผลข้อมูลแบบเรียลไทม์ เรียนรู้เพิ่มเติมเกี่ยวกับข้อมูลประสิทธิภาพแบบเรียลไทม์

ติดตามตัวชี้วัดหลักในแดชบอร์ดของคุณ

หากต้องการเรียนรู้ว่าตัวชี้วัดหลักของคุณมีแนวโน้มอย่างไร ให้เพิ่มลงในกระดานตัวชี้วัดที่ด้านบนของแดชบอร์ด ประสิทธิภาพ คุณสามารถระบุการถดถอยได้อย่างรวดเร็วโดยดูการเปลี่ยนแปลงแบบสัปดาห์ต่อสัปดาห์ หรือตรวจสอบว่าการเปลี่ยนแปลงล่าสุดในโค้ดของคุณกำลังปรับปรุงประสิทธิภาพ

หากต้องการเพิ่มตัววัดลงในบอร์ดตัววัดของคุณ ให้ทำตามขั้นตอนเหล่านี้:

1. ไปที่ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase
2. คลิกการ์ดตัววัดว่าง จากนั้นเลือกตัววัดที่มีอยู่เพื่อเพิ่มลงในบอร์ดของคุณ
3. คลิก more_vert บนการ์ดเมตริกที่มีข้อมูลเพื่อดูตัวเลือกเพิ่มเติม เช่น แทนที่หรือลบเมตริก

บอร์ดหน่วยเมตริกจะแสดงข้อมูลหน่วยเมตริกที่รวบรวมไว้ในช่วงเวลาต่างๆ ทั้งในรูปแบบกราฟิกและการเปลี่ยนแปลงเปอร์เซ็นต์เป็นตัวเลข

เรียนรู้เพิ่มเติมเกี่ยวกับ การใช้แดชบอร์ด

ดูร่องรอยและข้อมูล

หากต้องการดูการติดตามของคุณ ให้ไปที่ แดชบอร์ด ประสิทธิภาพ ในคอนโซล Firebase เลื่อนลงไปที่ตารางการติดตาม จากนั้นคลิกแท็บย่อยที่เหมาะสม ตารางจะแสดงตัวชี้วัดยอดนิยมสำหรับแต่ละการติดตาม และคุณยังสามารถจัดเรียงรายการตามเปอร์เซ็นต์การเปลี่ยนแปลงสำหรับตัวชี้วัดเฉพาะได้อีกด้วย

การตรวจสอบประสิทธิภาพมีหน้าการแก้ปัญหาในคอนโซล Firebase ที่เน้นการเปลี่ยนแปลงเมตริก ทำให้ง่ายต่อการแก้ไขและลดผลกระทบของปัญหาด้านประสิทธิภาพต่อแอปและผู้ใช้ของคุณ คุณสามารถใช้หน้าการแก้ไขปัญหาเมื่อคุณเรียนรู้เกี่ยวกับปัญหาประสิทธิภาพการทำงานที่อาจเกิดขึ้น ตัวอย่างเช่น ในสถานการณ์ต่อไปนี้:

• คุณเลือกเมตริกที่เกี่ยวข้องบนแดชบอร์ดและสังเกตเห็นการเปลี่ยนแปลงครั้งใหญ่
• ในตารางการติดตาม คุณจะจัดเรียงเพื่อแสดงส่วนต่างที่ใหญ่ที่สุดที่ด้านบน และคุณจะเห็นเปอร์เซ็นต์การเปลี่ยนแปลงที่มีนัยสำคัญ
• คุณได้รับอีเมลแจ้งเตือนเกี่ยวกับปัญหาด้านประสิทธิภาพ

คุณสามารถเข้าถึงหน้าการแก้ไขปัญหาได้ด้วยวิธีต่อไปนี้:

• บนแดชบอร์ดเมตริก ให้คลิกปุ่ม ดูรายละเอียดเมตริก
• บนการ์ดเมตริกใดๆ ให้เลือก more_vert => ดูรายละเอียด หน้าการแก้ปัญหาจะแสดงข้อมูลเกี่ยวกับเมตริกที่คุณเลือก
• ในตารางการติดตาม คลิกชื่อการติดตามหรือค่าเมตริกใดๆ ในแถวที่เกี่ยวข้องกับการติดตามนั้น
• ในการแจ้งเตือนทางอีเมล คลิก ตรวจสอบทันที

เมื่อคุณคลิกชื่อการติดตามในตารางการติดตาม คุณสามารถเจาะลึกลงในเมทริกที่สนใจได้ คลิก ปุ่ม add ตัวกรอง เพื่อกรองข้อมูลตามแอตทริบิวต์ เช่น

• กรองตาม URL ของหน้า เพื่อดูข้อมูลสำหรับหน้าใดหน้าหนึ่งของเว็บไซต์ของคุณ
• กรองตาม ประเภทการเชื่อมต่อที่มีประสิทธิภาพ เพื่อเรียนรู้ว่าการเชื่อมต่อ 3g ส่งผลต่อแอปของคุณอย่างไร
• กรองตาม ประเทศ เพื่อให้แน่ใจว่าตำแหน่งฐานข้อมูลของคุณไม่ส่งผลกระทบต่อภูมิภาคใดภูมิภาคหนึ่ง

เรียนรู้เพิ่มเติมเกี่ยวกับ การดูข้อมูลการติดตามของคุณ

ขั้นตอนถัดไป

• เรียนรู้เพิ่มเติมเกี่ยวกับ การใช้แอตทริบิวต์ เพื่อตรวจสอบข้อมูลประสิทธิภาพ

• เรียนรู้เพิ่มเติมเกี่ยวกับวิธี ติดตามปัญหาด้านประสิทธิภาพ ในคอนโซล Firebase

• ตั้งค่าการแจ้งเตือน สำหรับการโหลดหน้าเว็บที่ทำให้ประสิทธิภาพของแอปของคุณลดลง ตัวอย่างเช่น คุณสามารถกำหนดค่าการแจ้งเตือนทางอีเมลสำหรับทีมของคุณได้ หาก ความล่าช้าในการป้อนข้อมูลครั้งแรก สำหรับเพจใดเพจหนึ่งเกินเกณฑ์ที่คุณตั้งไว้