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

1. ภาพรวม

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

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

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

สิ่งที่ต้องมี

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

2. รับโค้ดตัวอย่าง

โคลนที่เก็บ GitHub ของ Codelab จากบรรทัดคำสั่งดังนี้

git clone https://github.com/firebase/codelab-friendlychat-web

หรือหากยังไม่ได้ติดตั้ง git คุณสามารถดาวน์โหลดที่เก็บเป็นไฟล์ 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 สำหรับแอปนี้ด้วย
3. คลิกลงทะเบียนแอป
4. คลิกขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามวิธีการบนหน้าจอในตอนนี้ ซึ่งจะกล่าวถึงในขั้นตอนถัดไปของ Codelab นี้

เปิดใช้ Google Sign-In สำหรับการตรวจสอบสิทธิ์ Firebase

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

คุณจะต้องเปิดใช้การลงชื่อเข้าใช้ Google โดยทำดังนี้

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

เปิดใช้ Cloud Firestore

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

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

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

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

เปิดใช้ Cloud Storage

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

คุณจะต้องเปิดใช้ Cloud Storage ตามขั้นตอนต่อไปนี้

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

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

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

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

1. ติดตั้ง CLI โดยทําตามวิธีการเหล่านี้ในเอกสาร Firebase
2. ยืนยันว่าได้ติดตั้ง CLI อย่างถูกต้องโดยเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

firebase --version

ตรวจสอบว่า Firebase CLI เป็นเวอร์ชัน 8.0.0 ขึ้นไป

3. ให้สิทธิ์ Firebase CLI โดยเรียกใช้คำสั่งต่อไปนี้

firebase login

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

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

firebase use --add

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

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

7. ทําตามวิธีการที่เหลือในบรรทัดคำสั่ง

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

การผสานรวมกับ Firebase Performance Monitoring SDK สำหรับเว็บทำได้หลายวิธี (ดูรายละเอียดในเอกสารประกอบ) ใน Codelab นี้ เราจะเปิดใช้การตรวจสอบประสิทธิภาพจาก 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 คุณจึงสามารถนำเข้าสคริปต์พิเศษที่จะทำการกำหนดค่านี้ให้คุณได้ สำหรับ 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 ในโค้ดเรียบร้อยแล้ว

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

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 ออกแบบมาเพื่อให้โหลดแบบไม่พร้อมกันได้ จึงไม่ส่งผลเสียต่อประสิทธิภาพของเว็บแอประหว่างการโหลดหน้าเว็บ Firebase Performance Monitoring API จะใช้งานไม่ได้ก่อนที่จะโหลด SDK ในสถานการณ์นี้ คุณจะยังเพิ่มการติดตามที่กําหนดเองได้โดยใช้ User Timing API Firebase Performance SDK จะเลือกระยะเวลาจาก measure() แล้วบันทึกเป็นการติดตามที่กำหนดเอง

เราจะวัดระยะเวลาในการโหลดสคริปต์การจัดรูปแบบแอปโดยใช้ 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 จะรวบรวมรายการที่คุณสร้างไว้ที่นี่โดยอัตโนมัติ คุณจะค้นหาการติดตามที่กําหนดเองที่ชื่อ loadStyling ได้ในคอนโซลประสิทธิภาพของ Firebase ในภายหลัง

10. ทำให้ใช้งานได้และเริ่มส่งรูปภาพ

ทำให้ใช้งานได้กับโฮสติ้งของ Firebase

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

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 โดยสมบูรณ์ที่โดเมนย่อยของ Firebase 2 โดเมนคือ https://<projectId>.firebaseapp.com และ https://<projectId>.web.app

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

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

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

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

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

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

11. ติดตามดูหน้าแดชบอร์ด

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

เข้าถึงหน้าแดชบอร์ด

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

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

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

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

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

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

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

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

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/