Firebase Performance Monitoring untuk web

1. Ringkasan

Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase Performance Monitoring untuk mengukur performa aplikasi web chat. Buka https://fireperf-friendlychat.web.app/ untuk melihat demo langsung.

3b1284f5144b54f6.pngS

Hal yang akan Anda pelajari

  • Cara menambahkan Firebase Performance Monitoring ke aplikasi web untuk mendapatkan metrik siap pakai (pemuatan halaman dan permintaan jaringan).
  • Cara mengukur bagian kode tertentu dengan trace kustom.
  • Cara mencatat metrik kustom tambahan yang terkait dengan trace kustom.
  • Cara menyegmentasikan data performa lebih lanjut dengan atribut khusus.
  • Cara menggunakan dasbor pemantauan performa untuk memahami performa aplikasi web Anda.

Yang Anda butuhkan

  • IDE atau editor teks pilihan Anda, seperti WebStorm, Atom, Sublime, atau VS Code
  • Terminal/konsol
  • Browser pilihan Anda, seperti Chrome
  • Kode contoh codelab (Lihat bagian berikutnya dari codelab ini untuk mengetahui cara mendapatkan kode.)

2. Mendapatkan kode contoh

Clone repositori GitHub codelab dari command line:

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

Atau, jika Anda belum menginstal git, Anda dapat mendownload repo sebagai file ZIP.

Mengimpor aplikasi awal

Dengan IDE Anda, buka atau impor direktori 🪄 performance-monitoring-start dari repositori yang di-clone. Direktori 📁 performance-monitoring-start ini berisi kode awal untuk codelab, yang merupakan aplikasi web chat.

3. Membuat dan menyiapkan project Firebase

Membuat project Firebase

  1. Di Firebase console, klik Add Project.
  2. Beri nama project Firebase Anda FriendlyChat.

Ingat project ID untuk project Firebase Anda.

  1. Klik Buat Project.

Menambahkan aplikasi web Firebase ke project

  1. Klik ikon web 58d6543a156e56f9.pngSuntuk membuat aplikasi web Firebase baru.
  2. Daftarkan aplikasi dengan nama panggilan Friendly Chat, lalu centang kotak di samping Siapkan juga Firebase Hosting untuk aplikasi ini.
  3. Klik Daftarkan aplikasi.
  4. Klik langkah-langkah yang tersisa. Anda tidak perlu mengikuti petunjuk di layar sekarang; Hal ini akan dibahas dalam langkah selanjutnya dari codelab ini.

ea9ab0db531a104c.pngS

Mengaktifkan login dengan Google untuk autentikasi Firebase

Untuk mengizinkan pengguna login ke aplikasi chat dengan Akun Google mereka, kami akan menggunakan metode login Google.

Anda harus mengaktifkan login dengan Google:

  1. Di Firebase console, cari bagian Develop di panel kiri.
  2. Klik Authentication, lalu klik tab Sign-in method ( buka konsol).
  3. Aktifkan penyedia login Google, lalu klik Save.

7f3040a646c2e502.pngS

Mengaktifkan Cloud Firestore

Aplikasi web menggunakan Cloud Firestore untuk menyimpan pesan chat dan menerima pesan chat baru.

Anda harus mengaktifkan Cloud Firestore:

  1. Di bagian Develop Firebase console, klik Database.
  2. Klik Create database di panel Cloud Firestore.
  3. Pilih opsi Mulai dalam mode pengujian, lalu klik Aktifkan setelah membaca pernyataan penyangkalan tentang aturan keamanan.

Kode awal untuk codelab ini menyertakan aturan yang lebih aman. Kita akan men-deploynya nanti di codelab.

24bd1a097492eac6.pngS

Mengaktifkan Cloud Storage

Aplikasi web menggunakan Cloud Storage for Firebase untuk menyimpan, mengupload, dan membagikan foto.

Anda harus mengaktifkan Cloud Storage:

  1. Di bagian Develop Firebase console, klik Storage.
  2. Klik Mulai.
  3. Baca pernyataan penyangkalan tentang aturan keamanan untuk project Firebase Anda, lalu klik Oke.

Kode awal mencakup aturan keamanan dasar, yang akan kita deploy nanti dalam codelab.

4. Menginstal antarmuka command line Firebase

Dengan antarmuka command line (CLI) Firebase, Anda dapat menggunakan Firebase Hosting untuk menyalurkan aplikasi web secara lokal serta men-deploy aplikasi web ke project Firebase.

  1. Instal CLI dengan mengikuti petunjuk ini di dokumen Firebase.
  2. Pastikan bahwa CLI telah diinstal dengan benar dengan menjalankan perintah berikut di terminal:
firebase --version

Pastikan versi Firebase CLI Anda adalah v8.0.0 atau yang lebih baru.

  1. Beri otorisasi Firebase CLI dengan menjalankan perintah berikut:
firebase login

Kami telah menyiapkan template aplikasi web untuk mengambil konfigurasi aplikasi Anda untuk Firebase Hosting dari direktori lokal aplikasi (repositori yang telah Anda clone sebelumnya di codelab). Tetapi untuk menjalankan konfigurasi, kita perlu mengaitkan aplikasi dengan project Firebase Anda.

  1. Pastikan command line Anda mengakses direktori performance-monitoring-start lokal aplikasi.
  2. Jalankan perintah berikut untuk mengaitkan aplikasi dengan project Firebase:
firebase use --add
  1. Saat diminta, pilih project ID Anda, lalu berikan alias untuk project Firebase.

Alias berguna jika Anda memiliki beberapa lingkungan (produksi, staging, dll.). Namun, untuk codelab ini, mari kita gunakan alias default.

  1. Ikuti petunjuk selanjutnya di command line.

5. Mengintegrasikan dengan Firebase Performance Monitoring

Ada berbagai cara untuk berintegrasi dengan Firebase Performance Monitoring SDK untuk web (lihat dokumentasi untuk mengetahui detailnya). Dalam codelab ini, kita akan mengaktifkan pemantauan performa dari URL Hosting.

Menambahkan Performance Monitoring dan melakukan inisialisasi Firebase

  1. Buka file src/index.js, lalu tambahkan baris berikut di bawah TODO untuk menyertakan Firebase Performance Monitoring SDK.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Kita juga perlu menginisialisasi Firebase SDK dengan objek konfigurasi yang berisi informasi tentang project Firebase dan aplikasi web yang ingin kita gunakan. Karena kita menggunakan Firebase Hosting, Anda dapat mengimpor skrip khusus yang akan melakukan konfigurasi ini untuk Anda. Untuk codelab ini, kita telah menambahkan baris berikut untuk Anda di bagian bawah file public/index.html, tetapi periksa kembali apakah baris tersebut ada di sana.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. Dalam file src/index.js, tambahkan baris berikut di bawah TODO untuk melakukan inisialisasi pemantauan performa.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Performance Monitoring kini akan otomatis mengumpulkan metrik permintaan jaringan dan pemuatan halaman untuk Anda saat pengguna menggunakan situs Anda! Lihat dokumentasi untuk mempelajari trace pemuatan halaman otomatis lebih lanjut.

Menambahkan library polyfill penundaan input pertama

Penundaan input pertama berguna karena browser yang merespons interaksi pengguna memberikan kesan pertama kepada pengguna tentang responsivitas aplikasi Anda.

First input delay dimulai saat pengguna pertama kali berinteraksi dengan elemen di halaman, seperti mengklik tombol atau hyperlink. Fungsi ini akan berhenti tepat setelah browser dapat merespons input, yang berarti bahwa browser tidak sibuk memuat atau mengurai konten Anda.

Library polyfill ini bersifat opsional untuk integrasi pemantauan performa.

Buka file public/index.html, lalu hapus tanda komentar di baris berikut.

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>

Pada tahap ini, Anda telah menyelesaikan integrasi dengan Firebase Performance Monitoring dalam kode.

Pada langkah berikut, Anda akan mempelajari cara menambahkan trace kustom menggunakan Firebase Performance Monitoring. Jika Anda hanya ingin mengumpulkan trace otomatis, buka bagian "Deploy and start send images" bagian.

6. Menambahkan rekaman aktivitas kustom ke aplikasi

Performance Monitoring memungkinkan Anda membuat rekaman aktivitas kustom. Pelacakan kustom adalah laporan selama durasi blok eksekusi di aplikasi Anda. Awal dan akhir trace kustom dapat ditentukan menggunakan API yang disediakan oleh SDK.

  1. Di file src/index.js, dapatkan objek performa, lalu buat rekaman aktivitas kustom untuk mengupload pesan gambar.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Untuk merekam aktivitas kustom, Anda harus menentukan titik awal dan titik perhentian untuk trace tersebut. Anda dapat menganggap rekaman aktivitas sebagai timer.

index.js

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

 ...

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

Anda berhasil menentukan trace kustom. Setelah men-deploy kode, durasi rekaman aktivitas kustom akan dicatat jika pengguna mengirim pesan gambar. Anda akan mengetahui waktu yang dibutuhkan pengguna di dunia nyata untuk mengirim gambar di aplikasi chat.

7. Tambahkan metrik kustom ke aplikasi Anda.

Anda dapat mengonfigurasi rekaman aktivitas kustom lebih lanjut untuk mencatat metrik kustom untuk peristiwa terkait performa yang terjadi dalam cakupan. Misalnya, Anda dapat menggunakan metrik untuk menyelidiki apakah waktu upload dipengaruhi oleh ukuran gambar untuk pelacakan kustom yang kita tentukan di langkah terakhir.

  1. Temukan rekaman aktivitas kustom dari langkah sebelumnya (ditentukan dalam file src/index.js).
  2. Tambahkan baris berikut di bawah TODO untuk merekam ukuran gambar yang diupload.

index.js

 ...

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

 ...

Metrik ini memungkinkan pemantauan performa untuk mencatat durasi trace kustom serta ukuran gambar yang diupload.

8. Menambahkan atribut khusus ke aplikasi

Berdasarkan langkah sebelumnya, Anda juga dapat mengumpulkan atribut khusus di trace kustom. Atribut khusus dapat membantu menyegmentasikan data berdasarkan kategori khusus untuk aplikasi Anda. Misalnya, Anda dapat mengumpulkan jenis MIME file gambar untuk menyelidiki kemungkinan pengaruh jenis MIME terhadap performa.

  1. Gunakan rekaman aktivitas kustom yang ditentukan dalam file src/index.js Anda.
  2. Tambahkan baris berikut di bawah TODO untuk mencatat jenis MIME gambar yang diupload.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Atribut ini memungkinkan pemantauan performa mengategorikan durasi rekaman aktivitas kustom berdasarkan jenis gambar yang diupload.

9. [Extend] Menambahkan trace kustom dengan User Timing API

Firebase Performance Monitoring SDK dirancang agar dapat dimuat secara asinkron, sehingga tidak akan berdampak negatif terhadap performa aplikasi web selama pemuatan halaman. Sebelum SDK dimuat, Firebase Performance Monitoring API tidak akan tersedia. Dalam skenario ini, Anda masih dapat menambahkan trace kustom menggunakan User Timing API. Firebase Performance SDK akan mengambil durasi dari measure() dan mencatatnya sebagai rekaman aktivitas kustom.

Kita akan mengukur durasi pemuatan skrip gaya visual aplikasi menggunakan User Timing API.

  1. Di file public/index.html, tambahkan baris berikut untuk menandai awal pemuatan skrip gaya aplikasi.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Tambahkan baris berikut untuk menandai akhir pemuatan skrip gaya visual aplikasi, dan untuk mengukur durasi antara awal dan akhir.

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>

Entri yang Anda buat di sini akan otomatis dikumpulkan oleh Firebase Performance Monitoring. Anda dapat menemukan trace kustom yang disebut loadStyling di Firebase Performance Console nanti.

10. Men-deploy dan mulai mengirim image

Men-deploy ke Firebase Hosting

Setelah menambahkan Firebase Performance Monitoring ke kode Anda, ikuti langkah-langkah berikut untuk men-deploy kode ke Firebase Hosting:

  1. Pastikan command line mengakses direktori performance-monitoring-start lokal aplikasi Anda.
  2. Deploy file Anda ke project Firebase dengan menjalankan perintah berikut:
firebase deploy
  1. Konsol akan menampilkan tampilan berikut:
=== 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
  1. Buka aplikasi web Anda yang kini dihosting sepenuhnya menggunakan Firebase Hosting di dua subdomain Firebase Anda sendiri: https://<projectId>.firebaseapp.com dan https://<projectId>.web.app.

Memastikan pemantauan performa telah diaktifkan

Buka Firebase console, lalu buka tab Performance. Jika Anda melihat pesan selamat datang yang menampilkan "SDK detected", berarti Anda telah berhasil berintegrasi dengan Firebase Performance Monitoring.

30df67e5a07d03b0.pngS

Mengirim pesan gambar

Buat beberapa data performa dengan mengirim gambar di aplikasi chat Anda.

  1. Setelah login ke aplikasi chat, klik tombol upload gambar 13734cb66773e5a3.png.
  2. Pilih file gambar menggunakan pemilih file.
  3. Coba kirim beberapa gambar (beberapa contoh disimpan di public/images/) sehingga Anda dapat menguji distribusi metrik kustom dan atribut khusus.

Pesan baru akan ditampilkan di UI aplikasi bersama dengan gambar yang Anda pilih.

11. Memantau dasbor

Setelah men-deploy aplikasi web dan mengirim pesan gambar sebagai pengguna, Anda dapat meninjau data performa di dasbor pemantauan performa (di Firebase console).

Mengakses dasbor

  1. Di Firebase console, pilih project yang memiliki aplikasi Friendly Chat.
  2. Di panel kiri, cari bagian Kualitas, lalu klik Performa.

Meninjau data di perangkat

Setelah pemantauan performa memproses data aplikasi, Anda akan melihat tab di sepanjang bagian atas dasbor. Pastikan untuk memeriksa kembali nanti jika Anda belum melihat data atau tab apa pun.

  1. Klik tab Di perangkat.
  • Tabel Pemuatan halaman menampilkan berbagai metrik performa yang dikumpulkan secara otomatis oleh Performance Monitoring saat halaman Anda dimuat.
  • Tabel Durations menampilkan trace kustom yang telah Anda tetapkan dalam kode aplikasi.
  1. Klik saveImageMessage di tabel Durasi untuk meninjau metrik tertentu untuk rekaman aktivitas.

e28758fd02d9ffac.pngS

  1. Klik Agregat untuk meninjau distribusi ukuran gambar. Anda dapat melihat metrik yang ditambahkan untuk mengukur ukuran gambar untuk trace kustom ini.

c3cbcfc0c739a0a8.png

  1. Klik Over time yang berada di samping Aggregate pada langkah sebelumnya. Anda juga dapat melihat Durasi pelacakan kustom. Klik Lihat lainnya untuk meninjau data yang dikumpulkan secara lebih mendetail.

16983baa31e05732.png

  1. Di halaman yang terbuka, Anda dapat mengelompokkan data durasi berdasarkan jenis MIME gambar dengan mengklik imageType. Data spesifik ini dicatat karena atribut imageType yang Anda tambahkan ke trace kustom.

8e5c9f32f42a1ca1.pngS

Meninjau data jaringan

Permintaan jaringan HTTP/S adalah laporan yang mencatat waktu respons dan ukuran payload panggilan jaringan.

  1. Kembali ke layar utama dasbor pemantauan performa.
  2. Klik tab Jaringan untuk melihat daftar entri permintaan jaringan untuk aplikasi web Anda.
  3. Jelajahi masalah tersebut untuk mengidentifikasi permintaan yang lambat dan mulai lakukan perbaikan untuk meningkatkan performa aplikasi Anda.

26a2be152a77ffb9.pngS

12. Selamat!

Anda telah mengaktifkan Firebase SDK untuk pemantauan performa serta mengumpulkan trace otomatis dan trace kustom untuk mengukur performa aplikasi chat di dunia nyata.

Yang telah kita bahas:

  • Menambahkan Firebase Performance Monitoring SDK ke aplikasi web Anda.
  • Menambahkan trace kustom ke kode Anda.
  • Merekam metrik kustom yang terkait dengan trace kustom.
  • Menyegmentasikan data performa menggunakan atribut khusus.
  • Memahami cara menggunakan dasbor pemantauan performa untuk mendapatkan insight tentang performa aplikasi Anda.

Pelajari lebih lanjut: