Catch up on highlights from Firebase at Google I/O 2023. 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

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