Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

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

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

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

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

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

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

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

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

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

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

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

คำจำกัดความของการติดตามการโหลดหน้าเว็บ

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

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

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

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

สีแรก

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

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

  • เริ่มต้นเมื่อผู้ใช้ไปที่เพจ

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

ระบายสีอย่างอิ่มอกอิ่มใจเป็นครั้งแรก

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

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

  • เริ่มต้นเมื่อผู้ใช้ไปที่เพจ

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

ดอมอินเทอร์แอคทีฟ

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

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

  • เริ่มต้นเมื่อผู้ใช้ไปที่เพจ

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

domContentLoadedEventEnd

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

  • เริ่มต้นเมื่อผู้ใช้ไปที่เพจ

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

loadEventEnd

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

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

  • เริ่มต้นเมื่อผู้ใช้ไปที่เพจ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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