Buka konsol

Memulai Performance Monitoring untuk web

Sebelum memulai

Kunjungi Tambahkan Firebase ke project JavaScript untuk mempelajari cara:

  • Membuat project Firebase

  • Mendaftarkan aplikasi Anda ke Firebase

Perhatikan bahwa ketika Anda menambahkan aplikasi Anda ke proJECT Firebase, Anda mungkin juga menyelesaikan beberapa langkah dalam panduan berikut (misalnya, menambahkan Firebase SDK dan menginisialisasi Firebase).

Langkah 1: Tambahkan Performance Monitoring dan inisialiasi Firebase

Jika Anda belum melakukannya, tambahkan Performance Monitoring SDK dan 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 SDK, Firebase akan segera memulai pemantauan pelacakan otomatis dan permintaan jaringan HTTP/S.

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 tertarik:

  • 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 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.onload = function() {firebase.initializeApp(fbc).performance();};
})(performance_standalone, firebaseConfig);

dalam hal ini,

  • performance_standalone adalah 'https://www.gstatic.com/firebasejs/6.3.3/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 menginisialisasi SDK.

SDK standar

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

Perhatikan bahwa SDK ini mengharuskan Anda menyertakan SDK inti Firebase standar yang terpisah dan menginisialisasi Firebase dan Performance Monitoring dalam skrip terpisah.

  1. Untuk menyertakan Performance Monitoring SDK standar, tambahkan skrip berikut ke bagian bawah tag <body>, 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/6.3.3/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-performance.js"></script>
    <body>
    
  2. 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 Hosting URL

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 tentang menambahkan SDK melalui URL Hosting yang dicadangkan.

Dengan opsi setelan ini, setelah Anda menerapkan ke Firebase, aplikasi Anda secara otomatis menarik objek konfigurasi Firebase dari proyek Firebase yang telah Anda gunakan. Anda bisa menggunakan codebase yang sama ke beberapa project Firebase, tetapi Anda tidak harus melacak konfigurasi Firebase yang Anda gunakan untuk firebase.initializeApp().

  1. Untuk menyertakan Performance Monitoring SDK, tambahkan skrip berikut ke bagian bawah tag <body>, 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/6.3.3/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/6.3.3/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 Anda butuhkan. Jika menggunakan bundler (seperti Browserify atau webpack), Anda dapat import setiap produk Firebase saat membutuhkannya.

  1. Instal paket npm firebase, lalu simpan ke file package.json Anda 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 * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. 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 pentunjuk penginstalan, lihat dokumentasi library.

Perhatikan bahwa menambahkan library polyfill ini tidak diperlukan agar Performance Monitoring dapat melaporkan metrik aplikasi web lainnya.

Langkah 3: Periksa apakah Performance Monitoring mencatat data

  1. Refresh aplikasi web Anda di browser.

  2. Setelah beberapa detik, cari panggilan jaringan ke firebaselogging.googleapis.com di tab Jaringan untuk Chrome DevTools atau di Monitor Jaringan untuk Firefox.

    Kehadiran panggilan jaringan itu menunjukkan bahwa browser mengirim data performa ke Firebase.

  3. Pastikan bahwa hasil Performance Monitoring ditampilkan di Firebase console.

    Hasil biasanya ditampilkan dalam waktu 12 jam.

Langkah 4: (Opsional) Tambahkan pelacakan kustom dan metrik kustom

Pelacakan kustom adalah laporan data performa yang terkait dengan beberapa kode di aplikasi Anda. Untuk mempelajari pelacakan kustom lebih lanjut, baca ringkasan Performance Monitoring.

Anda dapat memiliki beberapa pelacakan kustom di aplikasi, dan lebih dari satu pelacakan kustom dapat dijalankan pada satu waktu. Setiap pelacakan kustom dapat memiliki satu atau beberapa metrik untuk menghitung peristiwa terkait performa di aplikasi Anda, dan metrik tersebut terhubung dengan pelacakan yang membuatnya.

Perhatikan bahwa nama untuk pelacakan dan metrik kustom harus memenuhi persyaratan berikut: tidak boleh ada spasi kosong di awal atau akhir, tidak boleh diawali karakter garis bawah (_), dan panjang maksimal adalah 32 karakter.

  1. Untuk memulai dan menghentikan pelacakan kustom, apit kode yang ingin Anda lacak dengan baris kode yang mirip dengan yang berikut ini:

    const trace = perf.trace('customTraceName');
    trace.start();
    
    // code that you want to trace
    
    trace.stop();
    
  2. Untuk menambahkan metrik kustom, tambahkan baris kode yang mirip dengan yang berikut ini setiap kali peristiwa tersebut terjadi. Misalnya, metrik kustom ini menghitung peristiwa terkait performa yang terjadi di aplikasi Anda.

    async function getInventory(inventoryIds) {
      const trace = perf.trace('inventoryRetrieval');
    
      // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
      trace.incrementMetric('numberOfIds', inventoryIds.length);
    
      // Measures the time it takes to request inventory based on the amount of inventory
      trace.start();
      const inventoryData = await retrieveInventory(inventoryIds);
      trace.stop();
    
      return inventoryData;
    }
    

Langkah 5: Terapkan aplikasi Anda, lalu tinjau hasilnya

Setelah memvalidasi Performance Monitoring, Anda dapat menerapkan versi terbaru aplikasi kepada pengguna.

Anda dapat memantau data performa di Firebase console.

Langkah berikutnya