การตรวจสอบประสิทธิภาพ Firebase สำหรับเว็บ

1. ภาพรวม

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้ Firebase Performance Monitoring เพื่อวัดประสิทธิภาพของเว็บแอปแชท ไปที่ https://fireperf-friendlychat.web.app/ เพื่อชมการสาธิตสด

สิ่งที่คุณจะได้เรียนรู้

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

สิ่งที่คุณต้องการ

• IDE หรือโปรแกรมแก้ไขข้อความที่คุณเลือก เช่น WebStorm , Atom , Sublime หรือ VS Code
• เทอร์มินัล/คอนโซล
• เบราว์เซอร์ที่คุณเลือก เช่น Chrome
• โค้ดตัวอย่างของ Codelab (ดูวิธีรับโค้ดในส่วนถัดไปของ Codelab นี้)

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

1. ใน คอนโซล Firebase คลิก เพิ่มโครงการ
2. ตั้งชื่อโปรเจ็กต์ Firebase ของคุณ FriendlyChat

จำรหัสโปรเจ็กต์สำหรับโปรเจ็กต์ Firebase ของคุณ

3. คลิก สร้างโครงการ

เพิ่มเว็บแอป Firebase ให้กับโปรเจ็กต์

1. คลิกไอคอนเว็บ เพื่อสร้างเว็บแอป Firebase ใหม่
2. ลงทะเบียนแอปด้วยชื่อเล่น Friendly Chat จากนั้นทำเครื่องหมายที่ช่องถัดจาก ตั้งค่า Firebase Hosting สำหรับแอปนี้ ด้วย
3. คลิก ลงทะเบียนแอป
4. คลิกผ่านขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามคำแนะนำบนหน้าจอในตอนนี้ สิ่งเหล่านี้จะกล่าวถึงในขั้นตอนต่อไปของ codelab นี้

เปิดใช้งานการลงชื่อเข้าใช้ Google สำหรับการตรวจสอบสิทธิ์ Firebase

เพื่อให้ผู้ใช้ลงชื่อเข้าใช้แอปแชทด้วยบัญชี Google ได้ เราจะใช้วิธีลงชื่อเข้าใช้ Google

คุณจะต้องเปิดใช้งานการลงชื่อเข้าใช้ Google :

1. ในคอนโซล Firebase ค้นหาส่วน พัฒนา ในแผงด้านซ้าย
2. คลิก การ ตรวจสอบสิทธิ์ จากนั้นคลิกแท็บ วิธีการลงชื่อเข้าใช้ ( ไปที่คอนโซล )
3. เปิดใช้งานผู้ให้บริการลงชื่อเข้าใช้ Google แล้วคลิก บันทึก

เปิดใช้งาน Cloud Firestore

เว็บแอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่

คุณจะต้องเปิดใช้งาน Cloud Firestore:

1. ในส่วน การพัฒนา ของคอนโซล Firebase ให้คลิก ฐานข้อมูล
2. คลิก สร้างฐานข้อมูล ในบานหน้าต่าง Cloud Firestore
3. เลือกตัวเลือก เริ่มในโหมดทดสอบ จากนั้นคลิก เปิดใช้งาน หลังจากอ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัย

รหัสเริ่มต้นสำหรับ Codelab นี้มีกฎที่ปลอดภัยยิ่งขึ้น เราจะปรับใช้ในภายหลังใน Codelab

เปิดใช้งานที่เก็บข้อมูลบนคลาวด์

เว็บแอปใช้ Cloud Storage สำหรับ Firebase เพื่อจัดเก็บ อัปโหลด และแชร์รูปภาพ

คุณจะต้องเปิดใช้งาน Cloud Storage:

1. ในส่วน Develop ของคอนโซล Firebase ให้คลิกที่ Storage
2. คลิก เริ่มต้น ใช้งาน
3. อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎความปลอดภัยสำหรับโปรเจ็กต์ Firebase แล้วคลิก รับทราบ

รหัสเริ่มต้นประกอบด้วยกฎความปลอดภัยพื้นฐาน ซึ่งเราจะปรับใช้ในภายหลังใน Codelab

4. ติดตั้งอินเทอร์เฟซบรรทัดคำสั่ง Firebase

อินเทอร์เฟซบรรทัดคำสั่งของ Firebase (CLI) ช่วยให้คุณใช้โฮสติ้งของ Firebase เพื่อให้บริการเว็บแอปในเครื่องได้ เช่นเดียวกับการทำให้เว็บแอปใช้งานได้กับโปรเจ็กต์ Firebase

1. ติดตั้ง CLI โดยทำตาม คำแนะนำเหล่านี้ ในเอกสาร Firebase
2. ตรวจสอบว่า CLI ได้รับการติดตั้งอย่างถูกต้องโดยรันคำสั่งต่อไปนี้ในเทอร์มินัล:

firebase --version

ตรวจสอบให้แน่ใจว่า Firebase CLI เวอร์ชันของคุณเป็น v8.0.0 หรือใหม่กว่า

3. อนุญาต Firebase CLI โดยรันคำสั่งต่อไปนี้:

firebase login

เราได้ตั้งค่าเทมเพลตเว็บแอปเพื่อดึงการกำหนดค่าแอปสำหรับ Firebase Hosting จากไดเรกทอรีในเครื่องของแอป (ที่เก็บที่คุณโคลนไว้ก่อนหน้านี้ใน Codelab) แต่ในการดึงการกำหนดค่า เราจำเป็นต้องเชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase

4. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี performance-monitoring-start ในเครื่องของแอป
5. เชื่อมโยงแอปของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:

firebase use --add

6. เมื่อได้รับแจ้ง ให้เลือกรหัสโปรเจ็กต์ของคุณ จากนั้นให้ชื่อแทนโปรเจ็กต์ Firebase

นามแฝงจะมีประโยชน์หากคุณมีหลายสภาพแวดล้อม (การผลิต การจัดเตรียม ฯลฯ) อย่างไรก็ตาม สำหรับ codelab นี้ ให้ใช้นามแฝงของ default

7. ทำตามคำแนะนำที่เหลือในบรรทัดคำสั่งของคุณ

5. ผสานรวมกับการตรวจสอบประสิทธิภาพ Firebase

มีหลายวิธีในการผสานรวมกับ Firebase Performance Monitoring SDK สำหรับเว็บ (ดูรายละเอียดใน เอกสารประกอบ ) ใน Codelab นี้ เราจะเปิดใช้งานการตรวจสอบประสิทธิภาพจาก Hosting URL

เพิ่มการตรวจสอบประสิทธิภาพและเริ่มต้น Firebase

1. เปิดไฟล์ src/index.js จากนั้นเพิ่มบรรทัดต่อไปนี้ด้านล่าง TODO เพื่อรวม Firebase Performance Monitoring SDK

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. เรายังต้องเริ่มต้น 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>

3. ในไฟล์ 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 ให้มา

1. ในไฟล์ src/index.js รับออบเจ็กต์ประสิทธิภาพ จากนั้นสร้างการติดตามที่กำหนดเองสำหรับการอัปโหลดข้อความรูปภาพ

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. ในการบันทึกการติดตามแบบกำหนดเอง คุณต้องระบุจุดเริ่มต้นและจุดหยุดสำหรับการติดตาม คุณสามารถนึกถึงการติดตามเป็นตัวจับเวลา

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

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

7. เพิ่มเมตริกที่กำหนดเองลงในแอปของคุณ

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

1. ค้นหาการติดตามที่กำหนดเองจากขั้นตอนก่อนหน้า (กำหนดไว้ในไฟล์ src/index.js ของคุณ)
2. เพิ่มบรรทัดต่อไปนี้ด้านล่าง TODO เพื่อบันทึกขนาดของภาพที่อัปโหลด

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

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

8. เพิ่มแอตทริบิวต์ที่กำหนดเองให้กับแอปของคุณ

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

1. ใช้การติดตามแบบกำหนดเองที่กำหนดไว้ในไฟล์ src/index.js ของคุณ
2. เพิ่มบรรทัดต่อไปนี้ด้านล่าง 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

1. ในไฟล์ 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>

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

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:

1. ตรวจสอบให้แน่ใจว่าบรรทัดคำสั่งของคุณกำลังเข้าถึงไดเร็กทอรี performance-monitoring-start ในเครื่องของแอป
2. ปรับใช้ไฟล์ของคุณกับโปรเจ็กต์ Firebase โดยเรียกใช้คำสั่งต่อไปนี้:

firebase deploy

3. คอนโซลควรแสดงสิ่งต่อไปนี้:

=== 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

4. เยี่ยมชมเว็บแอปของคุณซึ่งขณะนี้โฮสต์โดยสมบูรณ์โดยใช้ Firebase Hosting ที่โดเมนย่อย Firebase ของคุณเองสองโดเมน: https://<projectId>.firebaseapp.com และ https://<projectId>.web.app

ตรวจสอบว่าเปิดใช้งานการตรวจสอบประสิทธิภาพแล้ว

เปิด คอนโซล Firebase และไปที่แท็บ ประสิทธิภาพ หากคุณเห็นข้อความต้อนรับแสดง "ตรวจพบ SDK" แสดงว่าคุณได้ผสานรวมกับ Firebase Performance Monitoring สำเร็จแล้ว!

ส่งข้อความรูปภาพ

สร้างข้อมูลประสิทธิภาพโดยส่งภาพในแอปแชทของคุณ

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

ข้อความใหม่ควรแสดงใน UI ของแอปพร้อมกับรูปภาพที่คุณเลือก

11. ตรวจสอบแดชบอร์ด

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

เข้าถึงแดชบอร์ดของคุณ

1. ใน คอนโซล Firebase เลือกโปรเจ็กต์ที่มีแอป Friendly Chat ของคุณ
2. ในแผงด้านซ้าย ค้นหาส่วน คุณภาพ แล้วคลิก ประสิทธิภาพ

ตรวจสอบข้อมูลในอุปกรณ์

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

1. คลิกแท็บ บนอุปกรณ์

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

2. คลิก saveImageMessage ในตาราง Durations เพื่อตรวจสอบเมตริกเฉพาะสำหรับการติดตาม

3. คลิก รวม เพื่อตรวจสอบการกระจายขนาดรูปภาพ คุณสามารถดูเมตริกที่คุณเพิ่มเพื่อวัดขนาดรูปภาพสำหรับการติดตามที่กำหนดเองนี้

4. คลิก Over time ซึ่งอยู่ถัดจาก Aggregate ในขั้นตอนก่อนหน้า คุณยังสามารถดู Duration ของการติดตามแบบกำหนดเองได้อีกด้วย คลิก ดูเพิ่มเติม เพื่อตรวจสอบข้อมูลที่รวบรวมโดยละเอียดเพิ่มเติม

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

ตรวจสอบข้อมูลเครือข่าย

คำขอเครือข่าย HTTP/S เป็นรายงานที่รวบรวมเวลาตอบสนองและขนาดเพย์โหลดของการเรียกเครือข่าย

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

12. ขอแสดงความยินดี!

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

สิ่งที่เราได้กล่าวถึง:

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

เรียนรู้เพิ่มเติม:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/