Bergabunglah dengan kami secara langsung dan online di Firebase Summit pada 18 Oktober 2022. Pelajari cara Firebase dapat membantu Anda mempercepat pengembangan aplikasi, merilis aplikasi dengan percaya diri, dan menentukan skala dengan mudah. Daftar sekarang

Memulai Performance Monitoring untuk web

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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 inisialisasi Performance Monitoring

  1. Jika Anda belum melakukannya, instal Firebase JS SDK dan inisialisasi Firebase.

  2. Tambahkan Performance Monitoring JS SDK dan lakukan inisialisasi Performance Monitoring:

Web version 9 

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 version 8 

import firebase from "firebase/app";
import "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
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.

Anda tidak perlu menambahkan library polyfill ini untuk membuat Performance Monitoring melaporkan metrik aplikasi web lainnya.

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 untuk menghasilkan peristiwa untuk pengumpulan dan pemrosesan data awal.

  1. Salurkan dan tampilkan aplikasi web Anda di lingkungan lokal.

  2. 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.

  3. Buka dasbor Performance di Firebase console. 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

  1. Buka alat developer browser (misalnya, tab Jaringan untuk Chrome Dev Tools atau di Network Monitor untuk Firefox).

  2. Refresh aplikasi web Anda di browser.

  3. Periksa apakah ada pesan error di pesan log Anda.

  4. 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, tentukan awal dan akhir trace kode kustom (dan tambahkan metrik kustom yang diinginkan) menggunakan API yang disediakan oleh Performance Monitoring SDK.

Kunjungi 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 dapat memantau data performa di dasbor Performa di Firebase console.

Langkah berikutnya