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

1. ภาพรวม

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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 ไว้

  1. คลิกสร้างโปรเจ็กต์

อัปเกรดแพ็กเกจราคาของ Firebase

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

หากต้องการอัปเกรดโปรเจ็กต์เป็นแพ็กเกจ Blaze ให้ทำตามขั้นตอนต่อไปนี้

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

เพิ่มเว็บแอป Firebase ลงในโปรเจ็กต์

  1. คลิกไอคอนเว็บ 58d6543a156e56f9.pngเพื่อสร้างเว็บแอป Firebase ใหม่
  2. ลงทะเบียนแอปโดยใช้ชื่อเล่น Friendly Chat แล้วเลือกช่องข้างตั้งค่าโฮสติ้งของ Firebase สําหรับแอปนี้ด้วย
  3. คลิกลงทะเบียนแอป
  4. คลิกผ่านขั้นตอนที่เหลือ คุณไม่จำเป็นต้องทำตามวิธีการบนหน้าจอในตอนนี้ เราจะอธิบายวิธีการเหล่านี้ในขั้นตอนต่อๆ ไปของ Codelab นี้

ea9ab0db531a104c.png

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

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

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

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

7f3040a646c2e502.png

ตั้งค่า Cloud Firestore

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

วิธีตั้งค่า Cloud Firestore ในโปรเจ็กต์ Firebase มีดังนี้

  1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายสร้าง แล้วเลือกฐานข้อมูล Firestore
  2. คลิกสร้างฐานข้อมูล
  3. ตั้งค่ารหัสฐานข้อมูลเป็น (default)
  4. เลือกตำแหน่งสำหรับฐานข้อมูล แล้วคลิกถัดไป
    สำหรับแอปจริง คุณควรเลือกตำแหน่งที่อยู่ใกล้กับผู้ใช้
  5. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎการรักษาความปลอดภัย
    ในภายหลังในโค้ดแล็บนี้ คุณจะเพิ่มกฎการรักษาความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสําหรับฐานข้อมูล
  6. คลิกสร้าง

ตั้งค่า Cloud Storage for Firebase

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

วิธีตั้งค่า Cloud Storage for Firebase ในโปรเจ็กต์ Firebase มีดังนี้

  1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ขยายบิลด์ แล้วเลือกพื้นที่เก็บข้อมูล
  2. คลิกเริ่มต้นใช้งาน
  3. เลือกตำแหน่งสำหรับที่เก็บข้อมูล Storage เริ่มต้น
    ที่เก็บข้อมูลใน US-WEST1, US-CENTRAL1 และ US-EAST1 สามารถใช้แพ็กเกจ"ฟรีตลอด" สำหรับ Google Cloud Storage ที่เก็บข้อมูลในตำแหน่งอื่นๆ ทั้งหมดจะเป็นไปตามราคาและการใช้งาน Google Cloud Storage
  4. คลิกเริ่มในโหมดทดสอบ อ่านข้อจำกัดความรับผิดเกี่ยวกับกฎการรักษาความปลอดภัย
    ในภายหลังในโค้ดแล็บนี้ คุณจะต้องเพิ่มกฎการรักษาความปลอดภัยเพื่อรักษาความปลอดภัยให้ข้อมูล อย่าเผยแพร่หรือแสดงแอปต่อสาธารณะโดยไม่เพิ่มกฎความปลอดภัยสำหรับที่เก็บข้อมูล
  5. คลิกสร้าง

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

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

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

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

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

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

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

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

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

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

การผสานรวมกับ SDK ของ Firebase Performance Monitoring สําหรับเว็บทําได้หลายวิธี (ดูรายละเอียดในเอกสารประกอบ) ในโค้ดแล็บนี้ เราจะเปิดใช้การตรวจสอบประสิทธิภาพจาก 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';
  1. นอกจากนี้ เรายังต้องเริ่มต้น Firebase SDK ด้วยออบเจ็กต์การกําหนดค่าที่มีข้อมูลเกี่ยวกับโปรเจ็กต์ Firebase และเว็บแอปที่ต้องการใช้ เนื่องจากเราใช้โฮสติ้งของ Firebase คุณจึงนําเข้าสคริปต์พิเศษที่จะทําการกําหนดค่านี้ให้คุณได้ สําหรับโค้ดแล็บนี้ เราได้เพิ่มบรรทัดต่อไปนี้ให้คุณแล้วที่ด้านล่างของไฟล์ public/index.html แต่โปรดตรวจสอบอีกครั้งว่ามีบรรทัดดังกล่าวอยู่

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. ในไฟล์ 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");
  1. หากต้องการบันทึกการติดตามที่กำหนดเอง คุณต้องระบุจุดเริ่มต้นและจุดสิ้นสุดของการติดตาม คุณสามารถคิดว่าการติดตามเป็นนาฬิกาจับเวลา

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

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

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 Hosting

  1. ตรวจสอบว่าบรรทัดคำสั่งเข้าถึงไดเรกทอรี performance-monitoring-start ในพื้นที่ของแอป
  2. ติดตั้งใช้งานไฟล์ในโปรเจ็กต์ Firebase โดยเรียกใช้คําสั่งต่อไปนี้
firebase deploy
  1. คอนโซลควรแสดงข้อมูลต่อไปนี้
=== 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.firebasestorage.app
✔  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
  1. โปรดไปที่เว็บแอปที่ตอนนี้โฮสต์โดยใช้ Firebase Hosting อย่างเต็มรูปแบบแล้วที่โดเมนย่อย 2 รายการของ Firebase ของคุณเอง ได้แก่ https://<projectId>.firebaseapp.com และ https://<projectId>.web.app

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

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

30df67e5a07d03b0.png

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

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

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

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

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

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

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

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

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

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

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

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

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

คําขอเครือข่าย HTTP/S คือรายงานที่บันทึกเวลาในการตอบสนองและขนาดของข้อมูลในแพ็กเก็ตการเรียกใช้เครือข่าย

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

26a2be152a77ffb9.png

12. ยินดีด้วย

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

สิ่งที่เราได้พูดถึงมีดังนี้

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

ดูข้อมูลเพิ่มเติม