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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รูปภาพของบอร์ดเมตริกในแดชบอร์ดการตรวจสอบประสิทธิภาพ Firebase

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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