Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

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

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

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

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

  • 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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