Web için Firebase Performans İzleme

1. Genel Bakış

Bu kod laboratuvarında, bir sohbet web uygulamasının performansını ölçmek için Firebase Performance Monitoring'i nasıl kullanacağınızı öğreneceksiniz. Canlı bir demo görmek için https://fireperf-friendlychat.web.app/ adresini ziyaret edin.

3b1284f5144b54f6.png

ne öğreneceksin

  • Kullanıma hazır ölçümleri (sayfa yükleme ve ağ istekleri) almak için web uygulamanıza Firebase Performance Monitoring nasıl eklenir?
  • Özel izlerle belirli bir kod parçası nasıl ölçülür.
  • Özel bir ize bağlı ek, özel metrikler nasıl kaydedilir.
  • Performans verilerinizi özel niteliklerle nasıl daha fazla segmentlere ayırabilirsiniz?
  • Web uygulamanızın performansını anlamak için performans izleme panosu nasıl kullanılır?

Neye ihtiyacın olacak

  • WebStorm , Atom , Sublime veya VS Code gibi seçtiğiniz IDE veya metin düzenleyicisi
  • Bir terminal/konsol
  • Chrome gibi seçtiğiniz bir tarayıcı
  • Codelab'in örnek kodu (Kodu nasıl alacağınızı öğrenmek için bu codelab'in sonraki bölümüne bakın.)

2. Örnek kodu alın

Codelab'in GitHub deposunu komut satırından klonlayın:

git clone https://github.com/firebase/codelab-friendlychat-web

Alternatif olarak, git yüklü değilse, depoyu bir zip dosyası olarak indirebilirsiniz .

Başlangıç ​​uygulamasını içe aktarın

IDE'nizi kullanarak, klonlanmış depodan 📁 performance-monitoring-start ​​dizinini açın veya içe aktarın. Bu performance-monitoring-start ​​dizini, bir sohbet web uygulaması olan codelab için başlangıç ​​kodunu içerir.

3. Bir Firebase projesi oluşturun ve kurun

Bir Firebase projesi oluşturun

  1. Firebase konsolunda , Proje Ekle'yi tıklayın.
  2. Firebase projenize FriendlyChat adını verin.

Firebase projenizin proje kimliğini unutmayın.

  1. Proje Oluştur 'u tıklayın.

Projeye bir Firebase web uygulaması ekleyin

  1. Web simgesini tıklayın 58d6543a156e56f9.png yeni bir Firebase web uygulaması oluşturmak için.
  2. Uygulamayı Friendly Chat takma adıyla kaydedin ve ardından Bu uygulama için Firebase Hosting'i de ayarla seçeneğinin yanındaki kutuyu işaretleyin.
  3. Uygulamayı kaydet'i tıklayın.
  4. Kalan adımları tıklayın. Artık ekrandaki talimatları izlemenize gerek yok; bunlar bu codelab'in sonraki adımlarında ele alınacaktır.

ea9ab0db531a104c.png

Firebase kimlik doğrulaması için Google oturum açmayı etkinleştirin

Kullanıcıların sohbet uygulamasında Google hesaplarıyla oturum açmasına izin vermek için Google oturum açma yöntemini kullanacağız.

Google oturum açmayı etkinleştirmeniz gerekir:

  1. Firebase konsolunda, sol paneldeki Geliştirme bölümünü bulun.
  2. Kimlik Doğrulama'yı tıklayın, ardından Oturum açma yöntemi sekmesini tıklayın ( konsola gidin ).
  3. Google oturum açma sağlayıcısını etkinleştirin ve ardından Kaydet 'i tıklayın.

7f3040a646c2e502.png

Cloud Firestore'u Etkinleştir

Web uygulaması, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Cloud Firestore'u kullanır.

Cloud Firestore'u etkinleştirmeniz gerekecek:

  1. Firebase konsolunun Geliştirme bölümünde Veritabanı öğesini tıklayın.
  2. Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
  3. Test modunda başlat seçeneğini belirleyin, ardından güvenlik kurallarıyla ilgili sorumluluk reddini okuduktan sonra Etkinleştir'e tıklayın.

Bu kod laboratuvarı için başlangıç ​​kodu, daha güvenli kurallar içerir. Bunları daha sonra codelab'de dağıtacağız.

24bd1a097492eac6.png

Bulut Depolamayı Etkinleştir

Web uygulaması, resimleri depolamak, yüklemek ve paylaşmak için Firebase için Cloud Storage'ı kullanır.

Bulut Depolamayı etkinleştirmeniz gerekecek:

  1. Firebase konsolunun Geliştirme bölümünde Depolama öğesini tıklayın.
  2. Başlayın 'ı tıklayın.
  3. Firebase projenizin güvenlik kurallarıyla ilgili sorumluluk reddini okuyun ve ardından Anladım 'a tıklayın.

Başlangıç ​​kodu, kod laboratuvarında daha sonra uygulayacağımız temel bir güvenlik kuralı içerir.

4. Firebase komut satırı arayüzünü kurun

Firebase komut satırı arayüzü (CLI), web uygulamanızı yerel olarak sunmak için Firebase Hosting'i kullanmanıza ve web uygulamanızı Firebase projenize dağıtmanıza olanak tanır.

  1. Firebase belgelerindeki bu talimatları izleyerek CLI'yi yükleyin.
  2. Bir terminalde aşağıdaki komutu çalıştırarak CLI'nin doğru şekilde kurulduğunu doğrulayın:
firebase --version

Firebase CLI sürümünüzün v8.0.0 veya üstü olduğundan emin olun.

  1. Aşağıdaki komutu çalıştırarak Firebase CLI'yi yetkilendirin:
firebase login

Web uygulaması şablonunu, uygulamanızın yerel dizininden (daha önce kod laboratuvarında klonladığınız depo) Firebase Hosting için uygulamanızın yapılandırmasını alacak şekilde ayarladık. Ancak yapılandırmayı çekmek için uygulamanızı Firebase projenizle ilişkilendirmemiz gerekiyor.

  1. Komut satırınızın, uygulamanızın yerel performance-monitoring-start dizinine eriştiğinden emin olun.
  2. Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
  1. İstendiğinde proje kimliğinizi seçin ve ardından Firebase projenize bir takma ad verin.

Takma ad, birden çok ortamınız (üretim, hazırlama, vb.) varsa kullanışlıdır. Ancak, bu kod laboratuvarı için default takma adını kullanalım.

  1. Komut satırınızdaki kalan talimatları izleyin.

5. Firebase Performance Monitoring ile entegre edin

Web için Firebase Performance Monitoring SDK ile entegre etmenin çeşitli yolları vardır (ayrıntılar için belgelere bakın). Bu kod laboratuvarında, Barındırma URL'lerinden performans izlemeyi etkinleştireceğiz.

Performans izlemeyi ekleyin ve Firebase'i başlatın

  1. src/index.js dosyasını açın, ardından Firebase Performance Monitoring SDK'yı dahil etmek için TODO altına aşağıdaki satırı ekleyin.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. Ayrıca Firebase SDK'sını, Firebase projesi ve kullanmak istediğimiz web uygulaması hakkında bilgiler içeren bir yapılandırma nesnesiyle başlatmamız gerekiyor. Firebase Hosting kullandığımız için, bu yapılandırmayı sizin için yapacak özel bir komut dosyasını içe aktarabilirsiniz. Bu codelab için, aşağıdaki satırı sizin için public/index.html dosyasının en altına ekledik, ancak orada olduğunu bir kez daha kontrol edin.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. src/index.js dosyasında, performans izlemeyi başlatmak için TODO altına aşağıdaki satırı ekleyin.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Performans İzleme, kullanıcılar sitenizi kullandığında artık sizin için sayfa yükü ve ağ isteği ölçümlerini otomatik olarak toplayacaktır! Otomatik sayfa yükleme izleri hakkında daha fazla bilgi edinmek için belgelere bakın .

İlk giriş gecikmeli çoklu doldurma kitaplığını ekleyin

İlk giriş gecikmesi , bir kullanıcı etkileşimine yanıt veren tarayıcı, kullanıcılara uygulamanızın yanıt verme hızı hakkında ilk izlenimlerini verdiği için yararlıdır.

İlk giriş gecikmesi, kullanıcı bir düğmeyi veya köprüyü tıklatmak gibi sayfadaki bir öğeyle ilk etkileşim kurduğunda başlar. Tarayıcı girişe yanıt verdikten hemen sonra durur; bu, tarayıcının içeriğinizi yüklemekle veya ayrıştırmakla meşgul olmadığı anlamına gelir.

Bu çoklu doldurma kitaplığı, performans izleme entegrasyonu için isteğe bağlıdır.

public/index.html dosyasını açın, ardından aşağıdaki satırın yorumunu kaldırın.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Bu noktada, kodunuzdaki Firebase Performance Monitoring ile entegrasyonu tamamladınız!

Aşağıdaki adımlarda, Firebase Performance Monitoring'i kullanarak özel izlemeler eklemeyi öğreneceksiniz. Yalnızca otomatik izleri toplamak istiyorsanız, "Görüntüleri dağıtın ve göndermeye başlayın" bölümüne gidin.

6. Uygulamanıza özel bir iz ekleyin

Performans İzleme, özel izler oluşturmanıza olanak tanır. Özel izleme, uygulamanızdaki bir yürütme bloğunun süresine ilişkin bir rapordur. SDK tarafından sağlanan API'leri kullanarak özel izlemenin başlangıcını ve bitişini tanımlarsınız.

  1. src/index.js dosyasında bir performans nesnesi alın, ardından bir görüntü mesajı yüklemek için özel bir iz oluşturun.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Özel bir iz kaydetmek için, iz için başlangıç ​​noktası ve durma noktası belirtmeniz gerekir. Bir izi zamanlayıcı olarak düşünebilirsiniz.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Özel bir izi başarıyla tanımladınız! Kodunuzu dağıttıktan sonra, bir kullanıcı bir görüntü mesajı gönderirse özel izlemenin süresi kaydedilir. Bu size, gerçek dünyadaki kullanıcıların sohbet uygulamanızda görüntü göndermesinin ne kadar sürdüğü hakkında bir fikir verecektir.

7. Uygulamanıza özel bir metrik ekleyin.

Kapsamı içinde meydana gelen performansla ilgili olaylar için özel metrikleri kaydetmek üzere özel bir izlemeyi daha da yapılandırabilirsiniz. Örneğin, son adımda tanımladığımız özel iz için yükleme süresinin bir görüntünün boyutundan etkilenip etkilenmediğini araştırmak için bir metrik kullanabilirsiniz.

  1. Önceki adımdaki özel izlemeyi bulun ( src/index.js dosyanızda tanımlanmıştır).
  2. Yüklenen görüntünün boyutunu kaydetmek için TODO altına aşağıdaki satırı ekleyin.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Bu metrik, performans izlemenin, yüklenen görüntü boyutunun yanı sıra özel izleme süresini kaydetmesini sağlar.

8. Uygulamanıza özel bir özellik ekleyin

Önceki adımları temel alarak, özel izlerinizde özel nitelikler de toplayabilirsiniz. Özel özellikler, verileri uygulamanıza özel kategorilere göre bölümlere ayırmaya yardımcı olabilir. Örneğin, MIME türünün performansı nasıl etkileyebileceğini araştırmak için görüntü dosyasının MIME türünü toplayabilirsiniz.

  1. src/index.js dosyanızda tanımlanan özel izlemeyi kullanın.
  2. Yüklenen görüntünün MIME türünü kaydetmek için TODO altına aşağıdaki satırı ekleyin.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Bu öznitelik, yüklenen görüntü türüne göre özel izleme süresini kategorize etmek için performans izlemeyi etkinleştirir.

9. [Uzat] User Timing API ile özel bir iz ekleyin

Firebase Performance Monitoring SDK, eşzamansız olarak yüklenebilecek ve sayfa yükleme sırasında web uygulamalarının performansını olumsuz etkilemeyecek şekilde tasarlanmıştır. SDK yüklenmeden önce Firebase Performance Monitoring API kullanılamaz. Bu senaryoda, User Timing API'sini kullanarak özel izlemeler eklemeye devam edebilirsiniz. Firebase performans SDK'sı, ölçü() öğesinden süreleri alır ve bunları özel izler olarak günlüğe kaydeder.

User Timing API kullanarak uygulama stil komut dosyalarının yüklenme süresini ölçeceğiz.

  1. public/index.html dosyasına, uygulama stili komut dosyalarının yüklenmesinin başlangıcını işaretlemek için aşağıdaki satırı ekleyin.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Uygulama stili komut dosyalarının yüklenmesinin sonunu işaretlemek ve başlangıç ​​ile bitiş arasındaki süreyi ölçmek için aşağıdaki satırları ekleyin.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

Burada oluşturduğunuz giriş, Firebase Performance Monitoring tarafından otomatik olarak toplanacaktır. Daha sonra Firebase Performance konsolunda loadStyling adlı özel bir iz bulabileceksiniz.

10. Görüntüleri dağıtın ve göndermeye başlayın

Firebase Hosting'e dağıtın

Firebase Performance Monitoring'i kodunuza ekledikten sonra, kodunuzu Firebase Hosting'e dağıtmak için şu adımları izleyin:

  1. Komut satırınızın, uygulamanızın yerel performance-monitoring-start dizinine eriştiğinden emin olun.
  2. Aşağıdaki komutu çalıştırarak dosyalarınızı Firebase projenize dağıtın:
firebase deploy
  1. Konsol aşağıdakileri göstermelidir:
=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com
  1. Artık tamamen kendi Firebase alt alanlarınızda Firebase Hosting kullanılarak barındırılan web uygulamanızı ziyaret edin: https://<projectId>.firebaseapp.com ve https://<projectId>.web.app .

Performans izlemenin etkinleştirildiğini doğrulayın

Firebase konsolunu açın ve Performans sekmesine gidin. "SDK algılandı" şeklinde bir karşılama mesajı görürseniz, Firebase Performance Monitoring ile başarılı bir şekilde entegre olmuşsunuz demektir!

30df67e5a07d03b0.png

resimli mesaj gönder

Sohbet uygulamanızda resimler göndererek bazı performans verileri oluşturun.

  1. Sohbet uygulamanızda oturum açtıktan sonra resim yükle düğmesini tıklayın 13734cb66773e5a3.png .
  2. Dosya seçiciyi kullanarak bir görüntü dosyası seçin.
  3. Özel metriklerin ve özel özniteliklerin dağılımını test edebilmeniz için birden fazla görüntü göndermeyi deneyin (birkaç örnek public/images/ içinde saklanır).

Yeni mesajlar, seçtiğiniz resimlerle birlikte uygulamanın kullanıcı arayüzünde görüntülenmelidir.

11. Kontrol panelini izleyin

Web uygulamanızı dağıttıktan ve kullanıcı olarak görüntü mesajları gönderdikten sonra, performans izleme panosunda (Firebase konsolunda) performans verilerini inceleyebilirsiniz.

Kontrol panelinize erişin

  1. Firebase konsolunda , Friendly Chat uygulamanızın bulunduğu projeyi seçin.
  2. Sol panelde, Kalite bölümünü bulun ve Performans'ı tıklayın.

Cihazdaki verileri inceleyin

Performans izleme, uygulamanızın verilerini işledikten sonra, kontrol panelinin üst kısmında sekmeler göreceksiniz. Henüz herhangi bir veri veya sekme görmüyorsanız daha sonra tekrar kontrol ettiğinizden emin olun.

  1. Cihazda sekmesine tıklayın.
  • Sayfa yükleme tablosu, sayfanız yüklenirken performans izlemenin otomatik olarak topladığı çeşitli performans ölçümlerini gösterir.
  • Süreler tablosu, uygulamanızın kodunda tanımladığınız tüm özel izleri gösterir.
  1. İzlemeye ilişkin belirli metrikleri gözden geçirmek için Süreler tablosunda saveImageMessage'ı tıklayın.

e28758fd02d9ffac.png

  1. Görüntü boyutlarının dağılımını gözden geçirmek için Birleştir'e tıklayın. Bu özel izleme için görüntü boyutunu ölçmek için eklediğiniz metriği görebilirsiniz.

c3cbcfc0c739a0a8.png

  1. Önceki adımda Toplama'nın yanında bulunan Zamanla'yı tıklayın. Özel izlemenin Süresini de görüntüleyebilirsiniz. Toplanan verileri daha ayrıntılı olarak incelemek için Daha fazlasını görüntüle'ye tıklayın.

16983baa31e05732.png

  1. Açılan sayfada, imageType öğesine tıklayarak süre verilerini image MIME tipine göre segmentlere ayırabilirsiniz. Bu belirli veriler, özel izinize eklediğiniz imageType özniteliği nedeniyle günlüğe kaydedildi.

8e5c9f32f42a1ca1.png

Ağ verilerini inceleyin

HTTP/S ağ isteği , ağ çağrılarının yanıt süresini ve yük boyutunu yakalayan bir rapordur.

  1. Performans izleme panosunun ana ekranına geri dönün.
  2. Web uygulamanız için ağ isteği girişlerinin listesini görmek için sekmesine tıklayın.
  3. Yavaş istekleri belirlemek için bunlara göz atın ve uygulamanızın performansını iyileştirmek için bir düzeltme üzerinde çalışmaya başlayın!

26a2be152a77ffb9.png

12. Tebrikler!

Firebase SDK'yı performans izleme için etkinleştirdiniz ve sohbet uygulamanızın gerçek dünyadaki performansını ölçmek için otomatik izler ve özel izler topladınız!

Neleri ele aldık:

  • Firebase Performance Monitoring SDK'sını web uygulamanıza ekleme.
  • Kodunuza özel izler ekleme.
  • Özel ize bağlı özel metrikleri kaydetme.
  • Özel öznitelikleri kullanarak performans verilerini segmentlere ayırma.
  • Uygulamanızın performansına ilişkin öngörüler elde etmek için performans izleme panosunun nasıl kullanılacağını anlama.

Daha fazla bilgi edin: