Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Memulai Performance Monitoring untuk web

Sebelum memulai

Kunjungi Menambahkan Firebase ke project JavaScript untuk mempelajari cara:

  • Membuat project Firebase

  • Mendaftarkan aplikasi web Anda ke Firebase

Perhatikan bahwa saat menambahkan Firebase ke aplikasi, Anda juga dapat menyelesaikan beberapa langkah yang dijelaskan di halaman ini (misalnya, menambahkan Firebase SDK dan menginisialisasi Firebase).

Langkah 1: Tambahkan Performance Monitoring dan lakukan inisialisasi pada Firebase

Jika Anda belum melakukannya, tambahkan Performance Monitoring SDK dan lakukan inisialisasi Firebase di aplikasi Anda menggunakan salah satu opsi di bawah ini. Pertimbangkan hal-hal berikut untuk membantu Anda memilih di antara beberapa opsi (lihat masing-masing tab untuk informasi lebih terperinci):

  • Dari CDN (SDK standalone) — Jika Performance Monitoring adalah satu-satunya produk Firebase di aplikasi Anda, opsi ini akan memuat satu SDK dengan bobot lebih ringan dari CDN.

  • Dari CDN (SDK standar) — Jika Anda menggunakan produk Firebase lain di aplikasi, opsi ini akan memuat Performance Monitoring SDK bersama dengan library Firebase lainnya dari CDN.

  • Dari URL Hosting - Jika Anda menggunakan Firebase Hosting, opsi ini menawarkan kemudahan untuk mengelola konfigurasi Firebase Anda saat menginisialisasi Firebase.

  • Menggunakan bundler modul - Jika Anda menggunakan bundler (seperti Browserify atau webpack), gunakan opsi ini untuk mengimpor masing-masing modul saat Anda membutuhkannya.

Setelah Anda menambahkan Performance Monitoring SDK, Firebase mulai mengumpulkan data secara otomatis untuk pemuatan halaman dan permintaan jaringan HTTP/S aplikasi Anda.

Dari CDN

Anda dapat mengonfigurasi impor parsial Firebase JavaScript SDK dan hanya memuat library Firebase yang Anda butuhkan. Firebase menyimpan setiap library Firebase JavaScript SDK di CDN (jaringan penayangan konten) global kami.

Anda memiliki dua opsi untuk menyertakan Performance Monitoring SDK dari CDN:

  • SDK standalone — Performance Monitoring adalah satu-satunya produk Firebase yang Anda gunakan di aplikasi Anda.
  • SDK standar — Anda menggunakan Performance Monitoring bersama dengan produk Firebase lainnya di aplikasi Anda.

SDK standalone

Jika Performance Monitoring adalah satu-satunya produk Firebase di aplikasi Anda, gunakan Performance Monitoring SDK standalone (dan skrip header yang disarankan di bawah) jika Anda ingin:

  • mengurangi ukuran paket SDK Anda
  • menunda inisialisasi SDK hingga setelah halaman Anda dimuat

Untuk memasukkan Performance Monitoring SDK standalone ke dalam aplikasi Anda dan menunda inisialisasi hingga setelah halaman dimuat:

  1. Tambahkan skrip berikut ke header file indeks Anda.
  2. Pastikan untuk menambahkan objek konfigurasi project Firebase aplikasi Anda.
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);
window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

dalam hal ini,

  • performance_standalone merupakan 'https://www.gstatic.com/firebasejs/8.3.1/firebase-performance-standalone.js'
  • firebaseConfig adalah objek konfigurasi Firebase aplikasi Anda

Skrip di atas memuat SDK standalone secara asinkron, lalu menginisialisasi Firebase setelah peristiwa onload jendela aktif. Taktik ini mengurangi dampak SDK pada metrik pemuatan halaman karena browser telah melaporkan metrik pemuatannya saat Anda melakukan inisialisasi SDK.

SDK standar

Jika Anda menggunakan produk Firebase lain (seperti Authentication atau Cloud Firestore di aplikasi Anda), sertakan Performance Monitoring SDK standar.

Perhatikan bahwa SDK ini mengharuskan Anda menyertakan Firebase Core SDK standar yang terpisah dan melakukan inisialisasi Firebase dan Performance Monitoring dalam skrip terpisah.

  1. Untuk menyertakan Performance Monitoring SDK standar, tambahkan skrip berikut ke bagian bawah tag <body> Anda, tetapi sebelum Anda menggunakan layanan Firebase apa pun:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-performance.js"></script>
    <body>
    
  2. Lakukan inisialisasi Firebase dan Performance Monitoring di aplikasi Anda:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

Dari URL Hosting

Saat Anda menggunakan Firebase Hosting, Anda bisa mengonfigurasi aplikasi Anda untuk memuat library Firebase JavaScript SDK secara dinamis dari URL yang dicadangkan. Pelajari lebih lanjut cara menambahkan SDK melalui URL Hosting yang dicadangkan.

Dengan opsi penyiapan ini, setelah Anda men-deploy ke Firebase, aplikasi Anda akan otomatis menarik objek konfigurasi Firebase dari project Firebase yang telah Anda jadikan tujuan deployment. Anda dapat men-deploy codebase yang sama ke beberapa project Firebase, tetapi Anda tidak perlu melacak konfigurasi Firebase yang digunakan untuk firebase.initializeApp().

  1. Untuk menyertakan Performance Monitoring SDK, tambahkan skrip berikut ke bagian bawah tag <body> Anda, tetapi sebelum Anda menggunakan layanan Firebase apa pun:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.3.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.3.1/firebase-performance.js"></script>
    </body>
    
  2. Inisialisasi Firebase dan Performance Monitoring di aplikasi Anda (tidak perlu menyertakan objek konfigurasi Firebase Anda saat menggunakan URL Hosting yang dicadangkan):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

Menggunakan bundler modul

Anda dapat mengonfigurasi impor parsial Firebase JavaScript SDK dan hanya memuat produk Firebase yang dibutuhkan. Jika menggunakan bundler (seperti Browserify atau webpack), Anda dapat menerapkan import pada setiap produk Firebase saat membutuhkannya.

  1. Instal paket npm firebase dan simpan ke file package.json dengan menjalankan:

    npm install --save firebase
  2. Untuk memasukkan Performance Monitoring SDK, import modul Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Lakukan inisialisasi Firebase dan Performance Monitoring di aplikasi Anda:

    // TODO: Replace the following with your app's Firebase project configuration
    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.

Menambahkan library polyfill ini tidak diperlukan agar Performance Monitoring dapat melaporkan metrik aplikasi web lainnya.

Langkah 3: Buat peristiwa performa untuk tampilan data awal

Firebase dapat mendeteksi bahwa Anda berhasil menambahkan SDK ke aplikasi saat menerima informasi peristiwa (seperti interaksi aplikasi) dari aplikasi. Jika Anda masih melakukan pengembangan secara lokal, lakukan interaksi dengan aplikasi untuk menghasilkan peristiwa untuk deteksi SDK serta pengumpulan dan pemrosesan data awal.

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

  2. Hasilkan peristiwa dengan memuat sub-halaman untuk situs Anda, berinteraksi dengan aplikasi Anda, dan/atau memicu permintaan jaringan. Pastikan Anda membuka tab browser setidaknya selama 10 detik setelah halaman dimuat.

  3. Buka dasbor Performance Firebase console untuk melihat apakah Firebase telah mendeteksi SDK.

    Jika Anda tidak melihat pesan "SDK terdeteksi", lihat tips pemecahan masalah.

  4. Performance Monitoring memproses data peristiwa performa sebelum menampilkannya di dasbor Performance. Anda akan melihat tampilan data awal dalam waktu 24 jam setelah melihat pesan deteksi SDK.

    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, itu menunjukkan bahwa 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 berapa lama waktu yang dibutuhkan aplikasi untuk menyelesaikan tugas tertentu atau serangkaian tugas, seperti memuat kumpulan gambar atau membuat kueri 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.

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 Performance dari Firebase console.

Langkah berikutnya