Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ทาสีแรก

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

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

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

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

ลงสีที่พอใจครั้งแรก

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

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

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

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

อินพุตแรกล่าช้า

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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