Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

Web için Performans İzleme'yi kullanmaya başlayın

Sen başlamadan önce

Henüz yapmadıysanız, aşağıdakileri nasıl yapacağınızı öğrenmek için JavaScript projenize Firebase Ekleme sayfasını ziyaret edin:

  • Bir Firebase projesi oluşturun

  • Web uygulamanızı Firebase'e kaydedin

Uygulamanıza Firebase eklediğinizde, bu sayfada açıklanan adımlardan bazılarını da tamamlayabileceğinizi unutmayın (örneğin, Firebase SDK'ları ekleme ve Firebase'i başlatma ).

Adım 1 : Performans İzleme ekleyin ve Firebase'i başlatın

Henüz yapmadıysanız, Performans İzleme SDK'sını ekleyin ve aşağıdaki seçeneklerden birini kullanarak uygulamanızda Firebase'i başlatın. Seçenekleriniz arasından seçim yapmanıza yardımcı olması için aşağıdakileri göz önünde bulundurun (daha ayrıntılı bilgi için ayrı sekmelere bakın):

  • CDN'den (bağımsız SDK) — Performans İzleme, uygulamanızdaki tek Firebase ürünüyse, bu seçenek CDN'den tek, daha hafif bir SDK yükler.

  • CDN'den (standart SDK) - Uygulamanızda başka Firebase ürünleri kullanıyorsanız bu seçenek, Performans İzleme SDK'sını CDN'den diğer Firebase kitaplıklarıyla birlikte yükler.

  • Barındırma URL'lerinden - Firebase Barındırma kullanıyorsanız bu seçenek, Firebase'i başlatırken Firebase yapılandırmanızı yönetmeniz için bir kolaylık sunar.

  • Modül paketleyicilerini kullanma — Bir paketleyici kullanıyorsanız (Tarayıcı veya web paketi gibi), ihtiyaç duyduğunuzda tek tek modülleri içe aktarmak için bu seçeneği kullanın.

Performans İzleme SDK'sını ekledikten sonra, Firebase otomatik olarak uygulamanızın sayfa yüklemesi ve HTTP/S ağ istekleri için veri toplamaya başlar.

CDN'den

Firebase JavaScript SDK'sının kısmi içe aktarımını yapılandırabilir ve yalnızca ihtiyacınız olan Firebase kitaplıklarını yükleyebilirsiniz. Firebase, Firebase JavaScript SDK'sının her kitaplığını global CDN'mizde (içerik dağıtım ağı) depolar.

CDN'den Performans İzleme SDK'sını dahil etmek için iki seçeneğiniz vardır:

  • bağımsız SDK — Performance Monitoring, uygulamanızda kullandığınız tek Firebase ürünüdür.
  • standart SDK — Uygulamanızdaki diğer Firebase ürünleriyle birlikte Performans İzleme'yi kullanıyorsunuz.

bağımsız SDK

Performans İzleme, uygulamanızdaki tek Firebase ürünüyse, aşağıdakilerle ilgileniyorsanız bağımsız Performans İzleme SDK'sını (ve aşağıdaki önerilen başlık komut dosyasını) kullanın:

  • SDK paketinizin boyutunu küçültme
  • sayfanız yüklenene kadar SDK'nın başlatılmasını geciktirme

Bağımsız Performance Monitoring SDK'sını uygulamanıza dahil etmek ve başlatılmasını sayfanız yüklendikten sonraya ertelemek için:

  1. Dizin dosyanızın başlığına aşağıdaki komut dosyasını ekleyin.
  2. Uygulamanızın Firebase proje yapılandırma nesnesini eklediğinizden emin olun.
(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.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

nerede,

  • performance_standalone 'https://www.gstatic.com/firebasejs/8.6.7/firebase-performance-standalone.js'
  • firebaseConfig , uygulamanızın firebaseConfig yapılandırma nesnesidir

Yukarıdaki komut dosyası, bağımsız SDK'yı eşzamansız olarak yükler ve ardından pencerenin onload olayı tetiklendikten sonra Firebase'i başlatır. Bu taktik, SDK'yı başlattığınızda tarayıcı yükleme metriklerini zaten bildirdiğinden, SDK'nın sayfa yükleme metrikleri üzerindeki etkisini azaltır.

standart SDK

Başka Firebase ürünleri kullanıyorsanız (uygulamanızda Kimlik Doğrulama veya Cloud Firestore gibi), standart Performans İzleme SDK'sını ekleyin.

Bu SDK'nın ayrı standart Firebase çekirdek SDK'sını eklemenizi ve Firebase ile Performance Monitoring'i ayrı bir komut dosyasında başlatmanızı gerektirdiğini unutmayın.

  1. Standart Performans İzleme SDK'sını dahil etmek için, herhangi bir Firebase hizmetini kullanmadan önce, <body> etiketinizin altına aşağıdaki komut dosyalarını ekleyin:

    <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/8.6.7/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/8.6.7/firebase-performance.js"></script>
    <body>
    
  2. Uygulamanızda Firebase ve Performance Monitoring'i başlatın:

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

Barındırma URL'lerinden

Firebase Hosting'i kullandığınızda, uygulamanızı, ayrılmış URL'lerden Firebase JavaScript SDK kitaplıklarını dinamik olarak yükleyecek şekilde yapılandırabilirsiniz. Ayrılmış Barındırma URL'leri aracılığıyla SDK ekleme hakkında daha fazla bilgi edinin.

Bu kurulum seçeneğiyle, Firebase'e dağıttıktan sonra uygulamanız, dağıttığınız Firebase projesinden Firebase yapılandırma nesnesini otomatik olarak çeker. Aynı kod tabanını birden çok Firebase projesine dağıtabilirsiniz, ancak firebase.initializeApp() için kullandığınız firebase.initializeApp() yapılandırmasını izlemeniz gerekmez.

  1. Performans İzleme SDK'sını dahil etmek için, herhangi bir Firebase hizmetini kullanmadan önce, <body> etiketinizin altına aşağıdaki komut dosyalarını ekleyin:

    <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/8.6.7/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/8.6.7/firebase-performance.js"></script>
    </body>
    
  2. Uygulamanızda Firebase ve Performance Monitoring'i başlatın (ayrılmış Barındırma URL'lerini kullanırken Firebase yapılandırma nesnenizi eklemenize gerek yoktur):

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

Modül paketleyiciyi kullanma

Firebase JavaScript SDK'sının kısmi içe aktarımını yapılandırabilir ve yalnızca ihtiyacınız olan Firebase ürünlerini yükleyebilirsiniz. Bir paketleyici (Tarayıcı veya web paketi gibi) kullanıyorsanız, ihtiyacınız olduğunda ayrı ayrı Firebase ürünlerini import .

  1. firebase npm paketini kurun ve firebase çalıştırarak package.json dosyanıza kaydedin:

    npm install --save firebase
  2. Performans İzleme SDK'sını dahil etmek için Firebase modüllerini import :

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Uygulamanızda Firebase ve Performance Monitoring'i başlatın:

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

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

İlk giriş gecikme metriğini ölçmek için bu metrik için çoklu doldurma kitaplığını eklemeniz gerekir. Kurulum talimatları için kitaplığın 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.

Adım 3 : İlk veri gösterimi için performans olayları oluşturun

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

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

  2. Siteniz için alt sayfalar 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 tuttuğunuzdan emin olun.

  3. Firebase konsolunun Performans panosuna gidin. Birkaç dakika içinde ilk veri görüntünüzü görmelisiniz.

    İlk verilerinizin bir görüntüsünü görmüyorsanız, sorun giderme ipuçlarını gözden geçirin.

Adım 4 : (İsteğe bağlı) Performans olayları için 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ştirme 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 ağ aramasını arayı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 olaylarını günlüğe kaydedmiyorsa sorun giderme ipuçlarını gözden geçirin.

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

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

Özel kod izlemeyle, uygulamanızın belirli bir görevi veya bir dizi görüntüyü yükleme veya veritabanınızı sorgulama gibi görevleri tamamlamasının ne kadar sürdüğünü ölçebilirsiniz. Özel kod izlemesi için 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 kod izlemenin başlangıcını ve sonunu 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 kod için izleme ekleme sayfasını ziyaret edin.

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

Performans İzleme'yi 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 panosunda izleyebilirsiniz.

Sonraki adımlar