Sebelum memulai
Jika Anda belum melakukannya, buka artikel Menambahkan Firebase ke project JavaScript untuk mempelajari cara:
Membuat project Firebase
Mendaftarkan aplikasi web Anda ke Firebase
Perlu diperhatikan bahwa saat menambahkan Firebase ke aplikasi, Anda dapat menyelesaikan beberapa langkah yang dijelaskan nanti di halaman ini (misalnya, menambahkan SDK dan menginisialisasi Firebase).
Langkah 1: Tambahkan dan lakukan inisialisasi Performance Monitoring
Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase.
Tambahkan Performance Monitoring JS SDK dan lakukan inisialisasi Performance Monitoring:
Web
import { initializeApp } from "firebase/app"; import { getPerformance } from "firebase/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase const app = initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = getPerformance(app);
Web
import firebase from "firebase/compat/app"; import "firebase/compat/performance"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = firebase.performance();
Langkah 2: Tambahkan library polyfill penundaan input pertama
Untuk mengukur metrik penundaan input pertama, Anda perlu menambahkan library polyfill untuk metrik ini. Untuk petunjuk penginstalan, buka dokumentasi library ini.
Tidak perlu menambahkan library polyfill ini agar Performance Monitoring dapat melaporkan metrik aplikasi web.
Langkah 3: Buat peristiwa performa untuk tampilan data awal
Firebase mulai memproses peristiwa saat Anda berhasil menambahkan SDK ke aplikasi. Jika Anda masih melakukan pengembangan secara lokal, lakukan interaksi dengan aplikasi guna menghasilkan peristiwa untuk pengumpulan dan pemrosesan data awal.
Salurkan dan tampilkan aplikasi web Anda di lingkungan lokal.
Hasilkan peristiwa dengan memuat subhalaman untuk situs Anda, berinteraksi dengan aplikasi Anda, dan/atau memicu permintaan jaringan. Pastikan Anda membiarkan tab browser terbuka setidaknya selama 10 detik setelah halaman dimuat.
Buka dasbor Performance dari konsol Firebase. Anda akan melihat tampilan data awal dalam beberapa menit.
Jika Anda tidak melihat tampilan data awal, lihat tips pemecahan masalah.
Langkah 4: (Opsional) Lihat pesan log untuk mencari peristiwa performa
Buka alat developer browser (misalnya, tab Jaringan untuk Chrome Dev Tools atau di Network Monitor untuk Firefox).
Refresh aplikasi web Anda di browser.
Periksa apakah ada pesan error di pesan log Anda.
Setelah beberapa detik, cari panggilan jaringan ke
firebaselogging.googleapis.com
di alat developer browser Anda. Jika ada panggilan jaringan, berarti browser mengirim data performa ke Firebase.
Jika aplikasi Anda tidak mencatat peristiwa performa ke dalam log, lihat tips pemecahan masalah.
Langkah 5: (Opsional) Tambahkan pemantauan kustom untuk kode tertentu
Untuk memantau data performa yang terkait dengan kode tertentu di aplikasi, Anda dapat menginstrumentasikan trace kode kustom.
Dengan trace kode kustom, Anda dapat mengukur durasi yang dibutuhkan aplikasi untuk menyelesaikan satu atau serangkaian tugas tertentu, seperti memuat kumpulan gambar atau membuat kueri untuk database. Metrik default untuk trace kode kustom adalah durasinya, tetapi Anda juga dapat menambahkan metrik kustom, seperti cache ditemukan dan peringatan memori.
Dalam kode, Anda menentukan awal dan akhir trace kode kustom (dan menambahkan metrik kustom yang diinginkan) menggunakan API yang disediakan oleh Performance Monitoring SDK.
Baca artikel Menambahkan pemantauan untuk kode tertentu untuk mempelajari lebih lanjut fitur ini dan cara menambahkannya ke aplikasi Anda.
Langkah 6: Deploy aplikasi Anda lalu tinjau hasilnya
Setelah memvalidasi Performance Monitoring, Anda dapat men-deploy versi terbaru aplikasi kepada pengguna Anda.
Anda dapat memantau data performa di bagian Performa dasbor dari konsol Firebase.
Langkah berikutnya
Dapatkan pengalaman langsung dengan Firebase Performance Monitoring untuk Codelab Web.
Pelajari lebih lanjut data yang dikumpulkan secara otomatis oleh Performance Monitoring:
- Data untuk pemuatan halaman di aplikasi Anda
- Data untuk permintaan jaringan HTTP/S yang dikeluarkan oleh aplikasi Anda
Melihat, melacak, dan memfilter data performa di konsol Firebase
Tambahkan pemantauan untuk tugas atau alur kerja tertentu di aplikasi Anda dengan memasukkan trace kode kustom