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

Başlamadan önce

Henüz yapmadıysanız Firebase'i JavaScript projenize ekleme sayfasını ziyaret ederek aşağıdaki işlemleri nasıl yapacağınızı öğrenin:

  • Firebase projesi oluşturma

  • Web uygulamanızı Firebase'e kaydetme

Firebase'i uygulamanıza eklerken bu sayfanın ilerleyen bölümlerinde açıklanan adımlardan bazılarını (ör. SDK'yı ekleme ve Firebase'i başlatma) tamamlayabilirsiniz.

1. adım: Performance Monitoring ekleyin ve 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();

Performance Monitoring SDK'sı, Core Web Vitals'ı otomatik olarak kaydeder.

2. adım: İlk veri gösterimi için performans etkinlikleri oluşturun

SDK'yı uygulamanıza başarıyla eklediğinizde Firebase, etkinlikleri işlemeye başlar. Uygulamanızı hâlâ yerel olarak geliştiriyorsanız ilk veri toplama ve işleme için etkinlik 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şim kurarak ve/veya ağ isteklerini tetikleyerek etkinlikler oluşturun. Sayfa yüklendikten sonra tarayıcı sekmesini en az 10 saniye açık tutun.

  3. Firebase konsolunun Performans kontrol paneline gidin. İlk verileriniz birkaç dakika içinde gösterilir.

    İlk verilerinizin gösterildiğini görmüyorsanız sorun giderme ipuçlarını inceleyin.

3. adım: (İsteğe bağlı) Performans etkinlikleri için günlük mesajlarını görüntüleme

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

  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 için bir ağ çağrısı olup olmadığına bakın. 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.

4. adım: (İsteğe bağlı) Belirli kodlar için özel izleme ekleyin

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

Özel kod izleme ile uygulamanızın belirli bir görevi veya görev grubunu (ör. bir grup resim yükleme veya veritabanınızı sorgulama) tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel kod izlemenin varsayılan metriği süresidir ancak önbellek isabetleri ve bellek uyarıları gibi özel metrikler de ekleyebilirsiniz.

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

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

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

Performance Monitoring doğrulandı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