Web için Performans İzlemeyi kullanmaya başlayın

Sen başlamadan önce

Henüz yapmadıysanız, nasıl yapılacağını öğrenmek için Firebase'i JavaScript projenize ekleme sayfasını ziyaret edin:

  • Firebase projesi oluşturma

  • Web uygulamanızı Firebase'e kaydedin

Firebase'i uygulamanıza eklediğinizde bu sayfanın ilerleyen kısımlarında açıklanan adımlardan bazılarını (örneğin, SDK'yı ekleme ve Firebase'i başlatma) tamamlayabileceğinizi unutmayın.

Adım 1 : Performans İzlemeyi ekleyin ve başlatın

  1. Henüz yapmadıysanız Firebase JS SDK'yı yükleyin ve Firebase'i başlatın .

  2. Performance Monitoring JS SDK'sını ekleyin ve Performance Monitoring'i başlatın:

Web modüler API'si

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 ad alanlı API

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();

Adım 2 : İlk giriş gecikmesi çoklu doldurma kitaplığını ekleyin

İlk giriş gecikmesi ölçüsünü ölçmek için bu metriğin çoklu doldurma kitaplığını eklemeniz gerekir. Kurulum talimatları için kütüphanenin belgelerine bakın.

Performans İzleme'nin diğer web uygulaması ölçümlerini raporlaması için bu çoklu doldurma kitaplığının eklenmesi gerekli değildir.

3. Adım : İlk veri görüntüleme için performans olaylarını oluşturun

Firebase, SDK'yı uygulamanıza başarıyla eklediğinizde etkinlikleri işlemeye başlar. Hala yerel olarak geliştirme yapıyorsanız, ilk veri toplama ve işlemeye yönelik etkinlikler oluşturmak için uygulamanızla etkileşim kurun.

  1. Web uygulamanızı yerel bir ortamda yayınlayın ve görüntüleyin.

  2. Siteniz için alt sayfalar yükleyerek, uygulamanızla etkileşimde bulunarak ve/veya ağ isteklerini tetikleyerek etkinlikler oluşturun. Sayfa yüklendikten sonra tarayıcı sekmesini en az 10 saniye açık tuttuğunuzdan emin olun.

  3. Firebase konsolunun Performans kontrol paneline gidin. Birkaç dakika içinde ilk verilerinizin görüntülendiğini görmelisiniz.

    Başlangıç ​​verilerinizin görüntüsünü görmüyorsanız sorun giderme ipuçlarını inceleyin.

4. Adım : (İsteğe bağlı) Performans etkinliklerine ilişkin günlük mesajlarını görüntüleyin

  1. Tarayıcınızın geliştirici araçlarını açın (örneğin, Chrome Geliştirici Araçları için Ağ sekmesi veya Firefox için Ağ İzleyicisi ).

  2. Web uygulamanızı tarayıcıda yenileyin.

  3. Herhangi bir hata mesajı için günlük mesajlarınızı kontrol edin.

  4. Birkaç saniye sonra tarayıcınızın geliştirici araçlarında firebaselogging.googleapis.com adresine yapılacak bir ağ araması arayın. Bu ağ çağrısının varlığı, tarayıcının performans verilerini Firebase'e gönderdiğini gösterir.

Uygulamanız performans olaylarını günlüğe kaydetmiyorsa sorun giderme ipuçlarını inceleyin.

Adım 5 : (İsteğe bağlı) Belirli kod için özel izleme ekleyin

Uygulamanızdaki belirli kodlarla ilişkili performans verilerini izlemek için özel kod izlemelerini kullanabilirsiniz.

Özel bir kod izlemeyle, uygulamanızın belirli bir görevi veya bir dizi görseli yükleme veya veritabanınızı sorgulama gibi görevleri tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel bir kod izlemenin varsayılan ölçümü süresidir ancak önbellek isabetleri ve bellek uyarıları gibi özel ölçümler de ekleyebilirsiniz.

Kodunuzda, Performance Monitoring SDK tarafından sağlanan API'yi kullanarak özel bir kod izlemenin başlangıcını ve sonunu tanımlarsınız (ve istediğiniz özel ölçümleri eklersiniz).

Bu özellikler ve bunları uygulamanıza nasıl ekleyeceğiniz hakkında daha fazla bilgi edinmek için Belirli bir kod için izleme ekleme sayfasını ziyaret edin.

6. Adım : Uygulamanızı dağıtın ve ardından sonuçları inceleyin

Performans İzlemeyi doğruladıktan sonra uygulamanızın güncellenmiş sürümünü kullanıcılarınıza dağıtabilirsiniz.

Performans verilerini Firebase konsolunun Performans kontrol panelinden izleyebilirsiniz.

Sonraki adımlar