Performance Monitoring ใช้การติดตามเพื่อรวบรวมข้อมูลเกี่ยวกับกระบวนการที่ได้รับการตรวจสอบในแอปของคุณ การติดตามคือรายงานที่มีข้อมูลที่บันทึกไว้ระหว่างช่วงเวลา 2 ช่วงในแอปของคุณ
สำหรับเว็บแอป Performance Monitoring จะรวบรวมการติดตามสำหรับแต่ละหน้าของแอปโดยอัตโนมัติ ซึ่งเรียกว่าการติดตามการโหลดหน้าเว็บ การติดตามการโหลดหน้าเว็บแต่ละครั้งจะรวบรวมเมตริกเริ่มต้นต่อไปนี้
Largest Contentful Paint - เมตริกที่วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเกิดการเปลี่ยนแปลงภาพขนาดใหญ่ที่สุด
Interaction to Next Paint - เมตริกที่วัดระยะเวลาที่นานที่สุดระหว่างที่ผู้ใช้โต้ตอบกับหน้าเว็บจนถึงเวลาที่เกิดการแสดงผลครั้งถัดไป
Cumulative Layout Shift - เมตริกที่วัดและให้คะแนนการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดในหน้าเว็บ
First Paint — เมตริกที่วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเกิดการเปลี่ยนแปลงภาพใดๆ
First Contentful Paint — เมตริกที่วัดระยะเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเนื้อหาที่มีความหมายแสดงขึ้น เช่น รูปภาพหรือข้อความ
domInteractive — เมตริกที่วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อหน้าเว็บถือว่ามีการโต้ตอบสำหรับผู้ใช้
domContentLoadedEventEnd - เมตริกที่วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเอกสาร HTML เริ่มต้นโหลดและแยกวิเคราะห์เสร็จสมบูรณ์
loadEventEnd - เมตริกที่วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเหตุการณ์การโหลดของเอกสารปัจจุบันเสร็จสมบูรณ์
คุณดูข้อมูลจากการติดตามเหล่านี้ได้ในแท็บย่อยการโหลดหน้าเว็บของตารางการติดตาม ซึ่งอยู่ที่ด้านล่างของแดชบอร์ดประสิทธิภาพ (ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้คอนโซลในหน้านี้)
คำจำกัดความของการติดตามการโหลดหน้าเว็บ
การติดตามนี้จะวัดเมตริกหลายรายการเกี่ยวกับวิธีที่หน้าเว็บในแอปโหลด โดยเฉพาะระยะเวลาที่ใช้ในการเข้าถึงจุดโหลดทั่วไป เช่น แอปที่ตอบสนอง
การติดตามการโหลดหน้าเว็บช่วยให้คุณติดตาม Core Web Vitals ของแอปได้ เช่น First Contentful Paint
เมตริกที่รวบรวมสำหรับการติดตามการโหลดหน้าเว็บ
การติดตามเหล่านี้เป็นการติดตามที่พร้อมใช้งานทันที คุณจึงไม่สามารถเพิ่มเมตริกที่กำหนดเองหรือแอตทริบิวต์ที่กำหนดเองเพิ่มเติมได้
Largest Contentful Paint
เมตริกนี้จะวัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเนื้อหารูปภาพ ข้อความ หรือเนื้อหาวิดีโอที่ใหญ่ที่สุดแสดงขึ้น
เมตริกนี้มีประโยชน์ในการทำความเข้าใจว่าเนื้อหาหลักของหน้าเว็บปรากฏต่อผู้ใช้ได้เร็วเพียงใด
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดเมื่อเกิดการเปลี่ยนแปลงภาพครั้งใหญ่ที่สุด ซึ่งรวมถึงรูปภาพ ข้อความ หรือองค์ประกอบวิดีโอ ดูรายละเอียดเพิ่มเติมได้ที่ Core Web Vitals
"องค์ประกอบ Largest Contentful Paint" เป็นแอตทริบิวต์ที่กำหนดเองซึ่งระบุองค์ประกอบที่สอดคล้องกับ Largest Contentful Paint ระบบจะบันทึกข้อมูลนี้เพิ่มเติมจากเวลาที่ใช้ในการแสดงผล Largest Contentful Paint
Interaction to Next Paint
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้โต้ตอบกับหน้าเว็บจนถึงเวลาที่เกิดการแสดงผลครั้งถัดไป
เมตริกนี้มีประโยชน์เนื่องจากจะวัดว่าหน้าเว็บตอบสนองต่ออินพุตของผู้ใช้ได้ดีเพียงใด
เริ่มเมื่อผู้ใช้โต้ตอบกับหน้าเว็บ (การคลิกเมาส์ การแตะบนอุปกรณ์ หรือการป้อนข้อมูลด้วยแป้นพิมพ์)
หยุดเมื่อเกิดการแสดงผลครั้งถัดไป ดูรายละเอียดเพิ่มเติมได้ที่ Core Web Vitals
"Interaction to Next Paint ที่นานที่สุด" เป็นแอตทริบิวต์ที่กำหนดเองซึ่งระบุองค์ประกอบที่ผู้ใช้โต้ตอบด้วยเมื่อเกิดเหตุการณ์ Interaction to Next Paint ระบบจะบันทึกข้อมูลนี้เพิ่มเติมจากเวลาที่ใช้ในการโต้ตอบกับ Next Paint
Cumulative Layout Shift
เมตริกนี้วัดคะแนนการเปลี่ยนเลย์เอาต์ที่พุ่งขึ้นสูงสุดสําหรับการเปลี่ยนเลย์เอาต์ที่ไม่คาดคิดทุกครั้งซึ่งเกิดขึ้นตลอดวงจรของหน้าเว็บ
เมตริกนี้มีประโยชน์เนื่องจากการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิดอาจรบกวนประสบการณ์ของผู้ใช้ เมตริกจะรายงานคะแนนตาม Layout Instability API ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีคำนวณคะแนนได้ที่ Core Web Vitals
"เป้าหมายการเปลี่ยนเลย์เอาต์ที่ใหญ่ที่สุด" เป็นแอตทริบิวต์ที่กำหนดเองซึ่งระบุองค์ประกอบที่เปลี่ยนเมื่อเกิดการเปลี่ยนเนื้อหาที่ใหญ่ที่สุด ระบบจะบันทึกข้อมูลนี้เพิ่มเติมจากคะแนน Cumulative Layout Shift
First Paint
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและการเปลี่ยนแปลงภาพใดๆ ที่เกิดขึ้น
เมตริกนี้มีประโยชน์เนื่องจาก First Paint จะส่งสัญญาณให้ผู้ใช้ทราบว่าหน้าเว็บเริ่มโหลดแล้ว
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดเมื่อมีการเปลี่ยนแปลงภาพใดๆ รวมถึงการเปลี่ยนสีพื้นหลังหรือการโหลดส่วนหัว
First Contentful Paint
เมตริกนี้จะวัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเนื้อหาที่มีความหมายแสดงขึ้น เช่น รูปภาพหรือข้อความ
เมตริกนี้มีประโยชน์ในการให้ข้อมูลเชิงลึกเกี่ยวกับความเร็วที่ผู้ใช้เห็นเนื้อหาจริงของแอป ไม่ใช่แค่สีพื้นหลังหรือส่วนหัวใหม่
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีหลังจากที่เบราว์เซอร์แสดงผลเนื้อหาแรกจาก DOM ซึ่งรวมถึงข้อความ รูปภาพ (รวมถึงภาพพื้นหลัง) แคนวาสที่ไม่ใช่สีขาว หรือ SVG
domInteractive
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อหน้าเว็บถือว่ามีการโต้ตอบสำหรับผู้ใช้
เมตริกนี้มีประโยชน์ในการให้ข้อมูลเชิงลึกเกี่ยวกับความเร็วที่ผู้ใช้สามารถโต้ตอบกับองค์ประกอบในแอปได้จริง เช่น ปุ่มและไฮเปอร์ลิงก์ แทนที่จะเห็นองค์ประกอบเหล่านั้นบนหน้าจอเท่านั้น โปรดทราบว่านี่ไม่ได้หมายความว่าเบราว์เซอร์จะตอบสนองต่อการโต้ตอบ (สำหรับเมตริกนี้ โปรดดูการติดตามการโต้ตอบกับ Next Paint)
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีก่อนที่ User Agent จะตั้งค่าความพร้อมของเอกสาร HTML ปัจจุบันเป็น "แบบอินเทอร์แอกทีฟ"
domContentLoadedEventEnd
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเอกสาร HTML เริ่มต้นโหลดและแยกวิเคราะห์อย่างสมบูรณ์
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีหลังจากโหลดและแยกวิเคราะห์เอกสาร HTML เริ่มต้นอย่างสมบูรณ์แล้ว (
DOMContentLoaded) แต่ไม่ได้หมายความว่าสไตล์ชีต รูปภาพ และเฟรมย่อยโหลดเสร็จแล้ว
loadEventEnd
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้ไปยังหน้าเว็บและเมื่อเหตุการณ์การโหลดของเอกสารปัจจุบันเสร็จสมบูรณ์
เมตริกนี้มีประโยชน์ในการให้ข้อมูลเชิงลึกเกี่ยวกับระยะเวลาที่ใช้ในการโหลดเนื้อหาทั้งหมด รวมถึงสไตล์ชีตและรูปภาพ
เริ่มเมื่อผู้ใช้ไปยังหน้าเว็บ
หยุดทันทีหลังจากเหตุการณ์การโหลดเอกสาร HTML ปัจจุบันเสร็จสมบูรณ์
First Input Delay (เลิกใช้งานแล้ว)
เมตริกนี้วัดเวลาระหว่างที่ผู้ใช้โต้ตอบกับหน้าเว็บและเมื่อเบราว์เซอร์สามารถตอบสนองต่ออินพุตนั้นได้
เมตริกนี้มีประโยชน์เนื่องจากเบราว์เซอร์ที่ตอบสนองต่อการโต้ตอบของผู้ใช้จะสร้างความประทับใจแรกให้แก่ผู้ใช้เกี่ยวกับการตอบสนองของแอป
เริ่มเมื่อผู้ใช้โต้ตอบกับองค์ประกอบในหน้าเว็บเป็นครั้งแรก เช่น การคลิกปุ่มหรือไฮเปอร์ลิงก์
หยุดทันทีหลังจากเบราว์เซอร์ตอบสนองต่ออินพุตได้ ซึ่งหมายความว่าเบราว์เซอร์ไม่ได้ยุ่งกับการโหลดหรือแยกวิเคราะห์เนื้อหา
การวัดความล่าช้าของอินพุตแรกต้องใช้ Polyfill เดิม ดูการแก้ปัญหา
ติดตาม ดู และกรองข้อมูลประสิทธิภาพ
หากต้องการดูข้อมูลประสิทธิภาพแบบเรียลไทม์ ให้ตรวจสอบว่าแอปใช้ SDK ของ Performance Monitoring เวอร์ชันที่เข้ากันได้กับการประมวลผลข้อมูลแบบเรียลไทม์ ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อมูลประสิทธิภาพแบบเรียลไทม์
ติดตามเมตริกหลักในแดชบอร์ด
หากต้องการดูแนวโน้มของเมตริกหลัก ให้เพิ่มเมตริกเหล่านั้นลงในบอร์ดเมตริกที่ด้านบนของแดชบอร์ดประสิทธิภาพ คุณสามารถระบุการถดถอยได้อย่างรวดเร็วโดยดูการเปลี่ยนแปลงแบบสัปดาห์ต่อสัปดาห์ หรือยืนยันว่าการเปลี่ยนแปลงล่าสุดในโค้ดช่วยปรับปรุงประสิทธิภาพ
แดชบอร์ด Firebase Performance Monitoring" />
หากต้องการเพิ่มเมตริกลงในบอร์ดเมตริก ให้ทำตามขั้นตอนต่อไปนี้
- ไปที่แดชบอร์ดประสิทธิภาพในคอนโซล Firebase
- คลิกการ์ดเมตริกที่ว่างเปล่า แล้วเลือกเมตริกที่มีอยู่เพื่อเพิ่มลงในบอร์ด
- คลิก บนการ์ดเมตริกที่มีข้อมูลเพื่อดูตัวเลือกเพิ่มเติม เช่น แทนที่หรือนําเมตริกออก
บอร์ดเมตริกจะแสดงข้อมูลเมตริกที่รวบรวมไว้เมื่อเวลาผ่านไป ทั้งในรูปแบบกราฟิกและเปอร์เซ็นต์การเปลี่ยนแปลงที่เป็นตัวเลข
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้แดชบอร์ด
ดูการติดตามและข้อมูลของการติดตาม
หากต้องการดูการติดตาม ให้ไปที่แดชบอร์ดประสิทธิภาพในคอนโซล Firebase เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บย่อยที่เหมาะสม ตารางจะแสดงเมตริกยอดนิยมบางรายการสําหรับการติดตามแต่ละรายการ และคุณยังจัดเรียงรายการตามเปอร์เซ็นต์การเปลี่ยนแปลงของเมตริกที่เฉพาะเจาะจงได้ด้วย
Performance Monitoring มีหน้าการแก้ปัญหาในคอนโซล Firebase ที่ไฮไลต์การเปลี่ยนแปลงของเมตริก ซึ่งช่วยให้คุณจัดการและลดผลกระทบจากปัญหาด้านประสิทธิภาพที่มีต่อแอปและผู้ใช้ได้อย่างรวดเร็วและง่ายดาย คุณสามารถใช้หน้าการแก้ปัญหาเมื่อทราบถึงปัญหาด้านประสิทธิภาพที่อาจเกิดขึ้น เช่น ในสถานการณ์ต่อไปนี้
- คุณเลือกเมตริกที่เกี่ยวข้องในแดชบอร์ดและสังเกตเห็นความแตกต่างอย่างมาก
- ในตารางการติดตาม คุณจัดเรียงเพื่อแสดงเดลต้าที่ใหญ่ที่สุดที่ด้านบน และคุณเห็นเปอร์เซ็นต์การเปลี่ยนแปลงที่สำคัญ
- คุณได้รับการแจ้งเตือนทางอีเมลเกี่ยวกับปัญหาด้านประสิทธิภาพ
คุณเข้าถึงหน้าการแก้ปัญหาได้ด้วยวิธีต่อไปนี้
- ในแดชบอร์ดเมตริก ให้คลิกปุ่มดูรายละเอียดเมตริก
- ในการ์ดเมตริกใดก็ได้ ให้เลือก
=> ดูรายละเอียด หน้าการแก้ปัญหาจะแสดงข้อมูลเกี่ยวกับเมตริกที่คุณเลือก - ในตารางการติดตาม ให้คลิกชื่อการติดตามหรือค่าเมตริกใดก็ได้ในแถวที่เชื่อมโยงกับการติดตามนั้น
- คลิกตรวจสอบเลยในการแจ้งเตือนทางอีเมล
เมื่อคลิกชื่อการติดตามในตารางการติดตาม คุณจะเจาะลึกเมตริกที่สนใจได้ คลิกปุ่ม
ข้อมูล Firebase Performance Monitoring ที่กรองตามแอตทริบิวต์" />
- กรองตาม URL ของหน้าเว็บเพื่อดูข้อมูลของหน้าเว็บที่เฉพาะเจาะจงในเว็บไซต์
- กรองตามประเภทการเชื่อมต่อที่มีประสิทธิภาพเพื่อดูว่าการเชื่อมต่อ 3G ส่งผลต่อแอปอย่างไร
- กรองตามประเทศเพื่อให้แน่ใจว่าตำแหน่งฐานข้อมูลไม่ส่งผลกระทบต่อภูมิภาคใดภูมิภาคหนึ่ง
ดูข้อมูลเพิ่มเติมเกี่ยวกับการดูข้อมูลการติดตาม
ขั้นตอนถัดไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้แอตทริบิวต์เพื่อตรวจสอบข้อมูลประสิทธิภาพ
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีติดตามปัญหาด้านประสิทธิภาพในคอนโซล Firebase
ตั้งค่าการแจ้งเตือนสำหรับการโหลดหน้าเว็บที่ทำให้ประสิทธิภาพของแอปลดลง เช่น คุณสามารถกำหนดค่าการแจ้งเตือนทางอีเมลสำหรับทีมได้หากความล่าช้าในการป้อนข้อมูลครั้งแรกสำหรับหน้าเว็บหนึ่งๆ เกินเกณฑ์ที่คุณตั้งไว้