Web için Performance Monitoring'i kullanmaya başlayın

Başlamadan önce

Henüz yapmadıysanız aşağıdakileri nasıl yapacağınızı öğrenmek için JavaScript projenize Firebase ekleme başlıklı makaleyi inceleyin:

  • Firebase projesi oluşturma

  • Web uygulamanızı Firebase'e kaydetme

Firebase'i uygulamanıza eklediğinizde bu sayfada daha sonra açıklanan adımlardan bazılarını (ör. SDK'yı ekleme ve Firebase'i başlatma) tamamlayabileceğinizi unutmayın.

1. adım: Performance Monitoring değişkenini ekleyip başlatın

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

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

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

2. adım: İlk giriş gecikmesi polyfill kitaplığını ekleyin

İlk giriş gecikmesi metriğini ölçmek için bu metrik için polyfill kitaplığını eklemeniz gerekir. Yükleme talimatları için kitaplığın dokümanlarına bakın.

Performance Monitoring'ün diğer web uygulaması metriklerini bildirmesi için bu polyfill kitaplığının eklenmesi gerekmez.

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

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

  1. Web uygulamanızı yerel bir ortamda yayınlama ve görüntüleme

  2. Sitenizin alt sayfalarını yükleyerek, uygulamanızla etkileşime geçerek 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 gösterge tablosuna gidin. İlk verileriniz birkaç dakika içinde gösterilir.

    İlk verilerinizin gösterilmediğini görürseniz sorun giderme ipuçlarını inceleyin.

4. adım: (İsteğe bağlı) Performans etkinlikleriyle ilgili günlük mesajlarını görüntüleme

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

  2. Tarayıcıda web uygulamanızı yenileyin.

  3. Günlük mesajlarınızda hata mesajı olup olmadığını kontrol edin.

  4. Birkaç saniye sonra, tarayıcınızın geliştirici araçlarında firebaselogging.googleapis.com adresine yapılan bir ağ çağrısı olup olmadığını kontrol edin. Bu ağ çağrısının varlığı, tarayıcının Firebase'e performans verileri gönderdiğini gösterir.

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

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

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

Özel kod izleme özelliğiyle, uygulamanızın belirli bir görevi veya görev grubunu (ör. bir resim grubunu yükleme ya da veritabanınızı sorgulama) tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel kod izleme için varsayılan metrik, izlemenin süresidir ancak önbelleğe isabet ve bellek uyarıları gibi özel metrikler de ekleyebilirsiniz.

Kodunuzda, Performance Monitoring SDK'sı tarafından sağlanan API'yi kullanarak özel kod izinin başlangıç ve bitişini tanımlar (ve istediğiniz özel metrikleri eklersiniz).

Bu özellikler ve uygulamanıza nasıl eklenecekleri hakkında daha fazla bilgi edinmek için Belirli kod için izleme ekleme başlıklı makaleyi inceleyin.

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

Performance Monitoring'ü 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 panelinde izleyebilirsiniz.

Sonraki adımlar