1. ภาพรวม
ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้ Firebase Performance Monitoring เพื่อวัดประสิทธิภาพของเว็บแอปแชท ไปที่ https://fireperf-friendlychat.web.app/ เพื่อชมการสาธิตสด
สิ่งที่คุณจะได้เรียนรู้
- วิธีเพิ่ม Firebase Performance Monitoring ให้กับเว็บแอปของคุณเพื่อรับเมตริกที่พร้อมใช้งานทันที (การโหลดหน้าเว็บและคำขอเครือข่าย)
- วิธีวัดโค้ดเฉพาะส่วนด้วยการติดตามแบบกำหนดเอง
- วิธีบันทึกเมทริกแบบกำหนดเองเพิ่มเติมที่เชื่อมโยงกับการติดตามแบบกำหนดเอง
- วิธีแบ่งกลุ่มข้อมูลประสิทธิภาพของคุณด้วยแอตทริบิวต์ที่กำหนดเอง
- วิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทำความเข้าใจประสิทธิภาพของเว็บแอป
สิ่งที่คุณต้องการ
2. รับโค้ดตัวอย่าง
โคลนที่ เก็บ GitHub ของ codelab จากบรรทัดคำสั่ง:
git clone https://github.com/firebase/codelab-friendlychat-web
หรือหากคุณไม่ได้ติดตั้ง git คุณสามารถ ดาวน์โหลด repo เป็นไฟล์ zip
นำเข้าแอพเริ่มต้น
ใช้ IDE ของคุณ เปิดหรือนำเข้าไดเร็กทอรี 📁 performance-monitoring-start
จากที่เก็บโคลน ไดเร็กทอรี performance-monitoring-start
📁 นี้ประกอบด้วยโค้ดเริ่มต้นสำหรับ codelab ซึ่งเป็นเว็บแอปแชท
3. สร้างและตั้งค่าโปรเจ็กต์ Firebase
สร้างโปรเจ็กต์ Firebase
- ใน คอนโซล Firebase คลิก เพิ่มโครงการ
- ตั้งชื่อโปรเจ็กต์ Firebase ของคุณ
FriendlyChat
จำรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ Firebase ของคุณ
- คลิก สร้างโครงการ
เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์
- คลิกไอคอนเว็บ
เพื่อสร้างเว็บแอป Firebase ใหม่
- ลงทะเบียนแอปด้วยชื่อเล่น
Friendly Chat
จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ ด้วย - คลิก ลงทะเบียนแอป
- คลิกผ่านขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามคำแนะนำบนหน้าจอในตอนนี้ สิ่งเหล่านี้จะกล่าวถึงในขั้นตอนต่อไปของ codelab นี้
เปิดใช้งานการลงชื่อเข้าใช้ Google สำหรับการตรวจสอบสิทธิ์ Firebase
เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปแชทด้วยบัญชี Google ได้ เราจะใช้วิธีลงชื่อเข้าใช้ Google
คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google :
- ในคอนโซล Firebase ค้นหาส่วน พัฒนา ในแผงด้านซ้าย
- คลิก การ ตรวจสอบสิทธิ์ จากนั้นคลิกแท็บ วิธีการลงชื่อเข้าใช้ ( ไปที่คอนโซล )
- เปิดใช้งานผู้ให้บริการลงชื่อเข้าใช้ Google แล้วคลิก บันทึก
เปิดใช้งาน Cloud Firestore
เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
คุณจะต้องเปิดใช้งาน Cloud Firestore:
- ในส่วน การพัฒนา ของคอนโซล Firebase ให้คลิก ฐานข้อมูล
- คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore
- เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิก เปิดใช้งาน หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย
รหัสเริ่มต้นสำหรับ Codelab นี้มีกฎที่ปลอดภัยยิ่งขึ้น เราจะปรับใช้ในภายหลังใน Codelab
เปิดใช้งานที่เก็บข้อมูลบนคลาวด์
เว็บแอปใช้ Cloud Storage สำหรับ Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ
คุณจะต้องเปิดใช้งาน Cloud Storage:
- ในส่วน Develop ของคอนโซล Firebase ให้คลิกที่ Storage
- คลิก เริ่มต้น ใช้งาน
- อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัยสำหรับโปรเจ็กต์ Firebase แล้วคลิก รับทราบ
รหัสเริ่มต้นประกอบด้วยกฎความปลอดภัยพื้นฐาน ซึ่งเราจะปรับใช้ในภายหลังใน Codelab
4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase
อินเทอร์เฟซบรรทัดคำสั่งของ Firebase (CLI) ช่วยให้คุณใช้โฮสติ้งของ Firebase เพื่อให้บริการเว็บแอปในเครื่องได้ เช่นเดียวกับการทำให้เว็บแอปใช้งานได้กับโปรเจ็กต์ Firebase
- ติดตั้ง CLI โดยทำตาม คำแนะนำเหล่านี้ ในเอกสาร Firebase
- ตรวจสอบว่า CLI ได้รับการติดตั้งอย่างถูกต้องโดยรันคำสั่งต่อไปนี้ในเทอร์มินัล:
firebase --version
ตรวจสอบให้แน่ใจว่า Firebase CLI เวอร์ชันของคุณเป็น v8.0.0 หรือใหม่กว่า
- อนุญาต Firebase CLI โดยรันคำสั่งต่อไปนี้:
firebase login
เราได้ตั้งค่าเทมเพลตเว็บแอปเพื่อดึงการกำหนดค่าแอปสำหรับ Firebase Hosting จากไดเรกทอรีในเครื่องของแอป (ที่เก็บที่คุณโคลนไว้ก่อนหน้านี้ใน Codelab) แต่ในการดึงการกำหนดค่า เราจำเป็นต้องเชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase
- ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี
performance-monitoring-start
ในเครื่องของแอป - เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase use --add
- เมื่อได้รับแจ้ง ให้เลือกรหัสโปรเจ็กต์ของคุณ จากนั้นให้ชื่อแทนโปรเจ็กต์ Firebase
นามแฝงจะมีประโยชน์หากคุณมีหลายสภาพแวดล้อม (การผลิต การจัดเตรียม ฯลฯ) อย่างไรก็ตาม สำหรับ codelab นี้ ให้ใช้นามแฝงของ default
- ทำตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ
5. ผสานรวมกับการตรวจสอบประสิทธิภาพ Firebase
มีหลายวิธีในการผสานรวมกับ Firebase Performance Monitoring SDK สำหรับเว็บ (ดูรายละเอียดใน เอกสารประกอบ ) ใน Codelab นี้ เราจะเปิดใช้งานการตรวจสอบประสิทธิภาพจาก Hosting URL
เพิ่มการตรวจสอบประสิทธิภาพและเริ่มต้น Firebase
- เปิดไฟล์
src/index.js
จากนั้นเพิ่มบรรทัดต่อไปนี้ด้านล่างTODO
เพื่อรวม Firebase Performance Monitoring SDK
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- เรายังต้องเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกำหนดค่าที่มีข้อมูลเกี่ยวกับโปรเจ็กต์ Firebase และเว็บแอปที่เราต้องการใช้ เนื่องจากเราใช้ Firebase Hosting คุณจึงนำเข้าสคริปต์พิเศษที่จะกำหนดค่านี้ให้คุณได้ สำหรับ Codelab นี้ เราได้เพิ่มบรรทัดต่อไปนี้ให้คุณแล้วที่ด้านล่างของไฟล์
public/index.html
แต่ให้ตรวจสอบอีกครั้งว่ามีไฟล์อยู่ที่นั่น
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- ในไฟล์
src/index.js
ให้เพิ่มบรรทัดต่อไปนี้ด้านล่างTODO
เพื่อเริ่มต้นการตรวจสอบประสิทธิภาพ
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
การตรวจสอบประสิทธิภาพจะรวบรวมเมตริกการโหลดหน้าเว็บและคำขอเครือข่ายให้คุณโดยอัตโนมัติเมื่อผู้ใช้ใช้ไซต์ของคุณ! โปรดดูเอกสารประกอบ เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการติดตามการโหลดหน้าเว็บอัตโนมัติ
เพิ่มไลบรารี polyfill หน่วงเวลาอินพุตแรก
ความล่าช้าในการป้อนข้อมูลครั้งแรก มีประโยชน์เนื่องจากเบราว์เซอร์ตอบสนองต่อการโต้ตอบของผู้ใช้ทำให้ผู้ใช้มีความประทับใจครั้งแรกเกี่ยวกับการตอบสนองของแอปของคุณ
การหน่วงเวลาอินพุตครั้งแรกเริ่มต้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบบนหน้าเป็นครั้งแรก เช่น การคลิกปุ่มหรือไฮเปอร์ลิงก์ จะหยุดทันทีหลังจากที่เบราว์เซอร์สามารถตอบสนองต่ออินพุตได้ หมายความว่าเบราว์เซอร์จะไม่ยุ่งกับการโหลดหรือแยกวิเคราะห์เนื้อหาของคุณ
ไลบรารี polyfill นี้เป็นทางเลือกสำหรับการรวมการตรวจสอบประสิทธิภาพ
เปิดไฟล์ public/index.html
จากนั้นยกเลิกการใส่ความคิดเห็นในบรรทัดต่อไปนี้
index.html
<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>
ณ จุดนี้ คุณได้ผสานรวมกับ Firebase Performance Monitoring ในโค้ดของคุณเสร็จแล้ว!
ในขั้นตอนต่อไปนี้ คุณจะได้เรียนรู้เกี่ยวกับการเพิ่มการติดตามที่กำหนดเองโดยใช้ Firebase Performance Monitoring หากคุณต้องการรวบรวมเฉพาะการติดตามอัตโนมัติ ให้ไปที่ส่วน "ปรับใช้และเริ่มส่งภาพ"
6. เพิ่มการติดตามที่กำหนดเองในแอปของคุณ
การตรวจสอบประสิทธิภาพช่วยให้คุณสร้างการ ติดตามที่กำหนดเอง การติดตามที่กำหนดเองคือรายงานสำหรับช่วงเวลาของการบล็อกการดำเนินการในแอปของคุณ คุณกำหนดจุดเริ่มต้นและจุดสิ้นสุดของการติดตามที่กำหนดเองโดยใช้ API ที่ SDK ให้มา
- ในไฟล์
src/index.js
รับออบเจ็กต์ประสิทธิภาพ จากนั้นสร้างการติดตามที่กำหนดเองสำหรับการอัปโหลดข้อความรูปภาพ
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- ในการบันทึกการติดตามแบบกำหนดเอง คุณต้องระบุจุดเริ่มต้นและจุดหยุดสำหรับการติดตาม คุณสามารถนึกถึงการติดตามเป็นตัวจับเวลา
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
คุณกำหนดการติดตามที่กำหนดเองสำเร็จแล้ว! หลังจากปรับใช้โค้ดของคุณ ระยะเวลาของการติดตามที่กำหนดเองจะถูกบันทึกหากผู้ใช้ส่งข้อความรูปภาพ วิธีนี้จะช่วยให้คุณทราบว่าผู้ใช้ในโลกแห่งความเป็นจริงต้องใช้เวลานานเท่าใดในการส่งรูปภาพในแอปแชทของคุณ
7. เพิ่มเมตริกที่กำหนดเองลงในแอปของคุณ
คุณสามารถกำหนดค่าการ ติดตามที่กำหนดเอง เพิ่มเติมเพื่อบันทึกตัวชี้วัดที่กำหนดเองสำหรับเหตุการณ์ที่เกี่ยวข้องกับประสิทธิภาพที่เกิดขึ้นภายในขอบเขต ตัวอย่างเช่น คุณสามารถใช้เมตริกเพื่อตรวจสอบว่าเวลาในการอัปโหลดได้รับผลกระทบจากขนาดของรูปภาพสำหรับการติดตามที่กำหนดเองที่เรากำหนดไว้ในขั้นตอนสุดท้ายหรือไม่
- ค้นหาการติดตามที่กำหนดเองจากขั้นตอนก่อนหน้า (กำหนดไว้ในไฟล์
src/index.js
ของคุณ) - เพิ่มบรรทัดต่อไปนี้ด้านล่าง
TODO
เพื่อบันทึกขนาดของภาพที่อัปโหลด
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
เมตริกนี้ช่วยให้การตรวจสอบประสิทธิภาพสามารถบันทึกระยะเวลาการติดตามที่กำหนดเองได้เช่นเดียวกับขนาดภาพที่อัปโหลด
8. เพิ่มแอตทริบิวต์ที่กำหนดเองให้กับแอปของคุณ
จากขั้นตอนก่อนหน้านี้ คุณยังสามารถรวบรวม แอตทริบิวต์ ที่ กำหนดเองในการติดตามที่กำหนดเอง ได้ แอตทริบิวต์ที่กำหนดเองสามารถช่วยในการแบ่งกลุ่มข้อมูลตามหมวดหมู่เฉพาะสำหรับแอปของคุณ ตัวอย่างเช่น คุณสามารถรวบรวมประเภท MIME ของไฟล์รูปภาพเพื่อตรวจสอบว่าประเภท MIME อาจส่งผลต่อประสิทธิภาพการทำงานอย่างไร
- ใช้การติดตามแบบกำหนดเองที่กำหนดไว้ในไฟล์
src/index.js
ของคุณ - เพิ่มบรรทัดต่อไปนี้ด้านล่าง
TODO
เพื่อบันทึกประเภท MIME ของภาพที่อัปโหลด
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
แอ็ตทริบิวต์นี้ช่วยให้การตรวจสอบประสิทธิภาพสามารถจัดหมวดหมู่ระยะเวลาการติดตามที่กำหนดเองตามประเภทภาพที่อัปโหลด
9. [ขยาย] เพิ่มการติดตามที่กำหนดเองด้วย User Timing API
Firebase Performance Monitoring SDK ได้รับการออกแบบมาเพื่อให้สามารถโหลดแบบอะซิงโครนัสได้ ดังนั้นจึงไม่ส่งผลเสียต่อประสิทธิภาพของเว็บแอปในระหว่างการโหลดหน้าเว็บ ก่อนที่จะโหลด SDK นั้น Firebase Performance Monitoring API จะไม่พร้อมใช้งาน ในสถานการณ์สมมตินี้ คุณยังสามารถเพิ่มการติดตามที่กำหนดเองได้โดยใช้ User Timing API SDK ประสิทธิภาพของ Firebase จะรับระยะเวลาจาก การวัด () และบันทึกเป็นการติดตามที่กำหนดเอง
เราจะวัดระยะเวลาในการโหลดสคริปต์การจัดรูปแบบแอปโดยใช้ User Timing API
- ในไฟล์
public/index.html
ให้เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายการเริ่มต้นโหลดสคริปต์การจัดสไตล์แอป
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- เพิ่มบรรทัดต่อไปนี้เพื่อทำเครื่องหมายจุดสิ้นสุดของการโหลดสคริปต์การจัดรูปแบบแอป และเพื่อวัดระยะเวลาระหว่างจุดเริ่มต้นและจุดสิ้นสุด
index.html
<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
performance && performance.mark('loadStylingEnd');
performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>
รายการที่คุณสร้างที่นี่จะถูกรวบรวมโดยอัตโนมัติโดย Firebase Performance Monitoring คุณจะค้นหาการติดตามที่กำหนดเองที่เรียกว่า loadStyling
ในคอนโซล Firebase Performance ได้ในภายหลัง
10. ปรับใช้และเริ่มส่งภาพ
ปรับใช้กับโฮสติ้งของ Firebase
หลังจากเพิ่ม Firebase Performance Monitoring ลงในโค้ดของคุณแล้ว ให้ทำตามขั้นตอนเหล่านี้เพื่อปรับใช้โค้ดของคุณกับ Firebase Hosting:
- ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี
performance-monitoring-start
ในเครื่องของแอป - ปรับใช้ไฟล์ของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:
firebase deploy
- คอนโซลควรแสดงสิ่งต่อไปนี้:
=== Deploying to 'friendlychat-1234'...
i deploying firestore, storage, hosting
i storage: checking storage.rules for compilation errors...
✔ storage: rules file storage.rules compiled successfully
i firestore: checking firestore.rules for compilation errors...
✔ firestore: rules file firestore.rules compiled successfully
i storage: uploading rules storage.rules...
i firestore: uploading rules firestore.rules...
i hosting[friendlychat-1234]: beginning deploy...
i hosting[friendlychat-1234]: found 8 files in ./public
✔ hosting[friendlychat-1234]: file upload complete
✔ storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendlychat-1234]: finalizing version...
✔ hosting[friendlychat-1234]: version finalized
i hosting[friendlychat-1234]: releasing new version...
✔ hosting[friendlychat-1234]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
- เยี่ยมชมเว็บแอปของคุณซึ่งขณะนี้โฮสต์โดยสมบูรณ์โดยใช้ Firebase Hosting ที่โดเมนย่อย Firebase ของคุณเองสองโดเมน:
https://<projectId>.firebaseapp.com
และhttps://<projectId>.web.app
ตรวจสอบว่าเปิดใช้งานการตรวจสอบประสิทธิภาพแล้ว
เปิด คอนโซล Firebase และไปที่แท็บ ประสิทธิภาพ หากคุณเห็นข้อความต้อนรับแสดง "ตรวจพบ SDK" แสดงว่าคุณได้ผสานรวมกับ Firebase Performance Monitoring สำเร็จแล้ว!
ส่งข้อความรูปภาพ
สร้างข้อมูลประสิทธิภาพโดยส่งภาพในแอปแชทของคุณ
- หลังจากลงชื่อเข้าใช้แอปแชทแล้ว ให้คลิกปุ่มอัปโหลดรูปภาพ
.
- เลือกไฟล์รูปภาพโดยใช้ตัวเลือกไฟล์
- ลองส่งภาพหลายภาพ (ตัวอย่างบางส่วนถูกเก็บไว้ใน
public/images/
) เพื่อให้คุณสามารถทดสอบการกระจายของตัวชี้วัดที่กำหนดเองและแอตทริบิวต์ที่กำหนดเอง
ข้อความใหม่ควรแสดงใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก
11. ตรวจสอบแดชบอร์ด
หลังจากปรับใช้เว็บแอปและส่งข้อความรูปภาพในฐานะผู้ใช้ คุณจะตรวจสอบข้อมูลประสิทธิภาพได้ในแดชบอร์ดการตรวจสอบประสิทธิภาพ (ในคอนโซล Firebase)
เข้าถึงแดชบอร์ดของคุณ
- ใน คอนโซล Firebase เลือกโปรเจ็กต์ที่มีแอป
Friendly Chat
ของคุณ - ในแผงด้านซ้าย ค้นหาส่วน คุณภาพ แล้วคลิก ประสิทธิภาพ
ตรวจสอบข้อมูลในอุปกรณ์
หลังจากการตรวจสอบประสิทธิภาพประมวลผลข้อมูลแอปของคุณแล้ว คุณจะเห็นแท็บที่ด้านบนของแดชบอร์ด โปรดกลับมาตรวจสอบในภายหลังหากคุณยังไม่เห็นข้อมูลหรือแท็บใดๆ
- คลิกแท็บ บนอุปกรณ์
- ตารางการ โหลดหน้า จะแสดงตัวชี้วัดประสิทธิภาพต่างๆ ที่การตรวจสอบประสิทธิภาพจะรวบรวมโดยอัตโนมัติในขณะที่หน้าของคุณกำลังโหลด
- ตาราง Durations แสดงการติดตามแบบกำหนดเองที่คุณกำหนดไว้ในโค้ดของแอป
- คลิก saveImageMessage ในตาราง Durations เพื่อตรวจสอบเมตริกเฉพาะสำหรับการติดตาม
- คลิก รวม เพื่อตรวจสอบการกระจายขนาดรูปภาพ คุณสามารถดูเมตริกที่คุณเพิ่มเพื่อวัดขนาดรูปภาพสำหรับการติดตามที่กำหนดเองนี้
- คลิก Over time ซึ่งอยู่ถัดจาก Aggregate ในขั้นตอนก่อนหน้า คุณยังสามารถดู Duration ของการติดตามแบบกำหนดเองได้อีกด้วย คลิก ดูเพิ่มเติม เพื่อตรวจสอบข้อมูลที่รวบรวมโดยละเอียดเพิ่มเติม
- ในหน้าที่เปิดขึ้น คุณสามารถแบ่งกลุ่มข้อมูลระยะเวลาตามประเภท MIME ของรูปภาพได้โดยคลิก imageType ข้อมูลเฉพาะนี้ถูกบันทึกเนื่องจากแอตทริบิวต์ imageType ที่คุณเพิ่มในการติดตามแบบกำหนดเองของคุณ
ตรวจสอบข้อมูลเครือข่าย
คำขอเครือข่าย HTTP/S เป็นรายงานที่รวบรวมเวลาตอบสนองและขนาดเพย์โหลดของการเรียกเครือข่าย
- กลับไปที่หน้าจอหลักของแดชบอร์ดการตรวจสอบประสิทธิภาพ
- คลิกแท็บ เครือข่าย เพื่อดูรายการคำขอเครือข่ายสำหรับเว็บแอปของคุณ
- เรียกดูเพื่อระบุคำขอที่ช้าและเริ่มดำเนินการแก้ไขเพื่อปรับปรุงประสิทธิภาพของแอป!
12. ขอแสดงความยินดี!
คุณได้เปิดใช้ Firebase SDK สำหรับการตรวจสอบประสิทธิภาพและรวบรวมการติดตามอัตโนมัติและการติดตามที่กำหนดเองเพื่อวัดประสิทธิภาพในโลกแห่งความเป็นจริงของแอปแชทของคุณ!
สิ่งที่เราได้กล่าวถึง:
- การเพิ่ม Firebase Performance Monitoring SDK ให้กับเว็บแอปของคุณ
- การเพิ่มการติดตามที่กำหนดเองลงในโค้ดของคุณ
- การบันทึกตัววัดแบบกำหนดเองที่เชื่อมโยงกับการติดตามแบบกำหนดเอง
- การแบ่งกลุ่มข้อมูลประสิทธิภาพโดยใช้แอตทริบิวต์ที่กำหนดเอง
- ทำความเข้าใจวิธีใช้แดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อรับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของแอป