Check out what’s new from Firebase at Google I/O 2022. Learn more

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

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

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

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

  • 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 จากนั้นคลิกแท็บ แดชบอร์ด คลิกการ์ดตัวชี้วัดที่ว่างเปล่า จากนั้นเลือกตัวชี้วัดที่มีอยู่เพื่อเพิ่มลงในกระดานของคุณ คลิก บนการ์ดเมตริกที่มีข้อมูลเพื่อดูตัวเลือกเพิ่มเติม เช่น แทนที่หรือลบเมตริก

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

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

ดูร่องรอยและข้อมูลของพวกเขา

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

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

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

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

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

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

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

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