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ı öğrenebilirsiniz:

  • Firebase projesi oluşturma

  • Web uygulamanızı Firebase'e kaydedin

Uygulamanıza Firebase'i eklediğinizde, bu sayfanın ilerleyen kısımlarında açıklanan adımların bazılarını (ör. SDK'yı ekleme ve Firebase'i başlatma) tamamlayabilirsiniz.

1. Adım: Performance Monitoring'i 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 

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 metriğin çoklu doldurma kitaplığını eklemeniz gerekir. Yükleme talimatları için kitaplığın belgelerine bakın.

Performance Monitoring'in diğer web uygulaması metriklerini raporlaması için bu çoklu dolgu kitaplığının eklenmesine gerek yoktur.

3. Adım: Verilerin ilk gösterilmesi için performans etkinlikleri oluşturun

SDK'yı uygulamanıza başarılı bir şekilde eklediğinizde Firebase, 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şime geçin.

  1. Web uygulamanızı yerel ortamda sunun ve görüntüleyin.

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

  3. Firebase konsolunun Performans kontrol paneline gidin. İlk verilerinizin birkaç dakika içinde görünmesi gerekir.

    İlk verileriniz gösteriliyorsa sorun giderme ipuçlarını inceleyin.

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

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

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

  3. Hata mesajı olup olmadığını görmek 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 ağına yapılacak bir ağ çağrısı olup olmadığına bakı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 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 bir kodla ilişkilendirilmiş performans verilerini izlemek için özel kod izlerini kullanabilirsiniz.

Özel kod izlemeyle, uygulamanızın belirli bir görevi veya görev kümesini (ör. bir dizi resim yüklemek ya da veritabanınızı sorgulamak) tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel kod izleme için varsayılan metrik 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 bir kod izlemenin başlangıcını ve sonunu tanımlar (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 bir kod için izleme ekleme bölümünü ziyaret edin.

6. Adım: Uygulamanızı dağıtıp sonuçları inceleyin

Performance Monitoring'i 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