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. Ziyaret https://fireperf-friendlychat.web.app/ canlı demosunu görmek için.

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.
  • Özel niteliklerle performans verilerinizi 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

  • Gibi seçtiğiniz IDE veya metin editörü, WebStorm , Atom , Sublime veya VS Kanunu
  • 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 en Klon GitHub depo komut satırından:

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

Eğer git yüklemiş yoksa Alternatif olarak, şunları yapabilirsiniz zip dosyası olarak repo indirmek .

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

Açık, IDE kullanarak veya 📁 içe performance-monitoring-start klonlanmış deposundan dizini. Bu 📁 performance-monitoring-start dizini sohbet web uygulaması olan codelab, başlangıç kodu içerir.

3. Bir Firebase projesi oluşturun ve kurun

Bir Firebase projesi oluşturun

  1. In Firebase konsoluna , tık Project ekleyin.
  2. Senin Firebase projesi ad FriendlyChat .

Firebase projenizin proje kimliğini unutmayın.

  1. Proje oluşturma 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. Takma ile uygulamanızı kaydedin Friendly Chat ve sonra da bu uygulama için Hosting Firebase kurmak yanındaki kutuyu işaretleyin.
  3. Kayıt uygulamasını tıklayın.
  4. Kalan adımları tıklayın. Artık ekrandaki talimatları izlemeniz gerekmiyor; 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 Google hesaplarında ile sohbet uygulamasında oturum izin vermek için, Google oturum açma yöntemine kullanacağız.

Google oturumu etkinleştirebilirsiniz gerekir:

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

7f3040a646c2e502.png

Cloud Firestore'u Etkinleştir

Web uygulaması kullanan Bulut FireStore sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için.

Cloud Firestore'u etkinleştirmeniz gerekecek:

  1. Firebase konsol bölümüne geliştirin var ise, veritabanı.
  2. Bulut Firestore bölmesinde veritabanı oluşturun tıklayın.
  3. Test modu seçeneğinde Başlat seçin, ardından güvenlik kuralları hakkında yasal uyarıyı okuduktan sonra Etkinleştir'i 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 konsol bölümüne geliştirin var ise, Depolama tıklayın.
  2. Başlayın tıklayın.
  3. Senin Firebase projesi için güvenlik kuralları hakkında yasal uyarıyı okuyun ve sonra Anladım'ı 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. İzleyerek CLI Install bu talimatları Firebase docs.
  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. Emin komut satırı uygulamanızın yerel erişen emin olun performance-monitoring-start dizini.
  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 codelab için, 'adil diğer adını kullanmasına izin default .

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

5. Firebase Performance Monitoring ile Entegre Edin

Firebase Performans web için SDK İzleme ile entegre etmek için çeşitli yolları vardır (bkz dokümantasyon detayları için). Bu codelab, biz Barındırma URL'lerden izleme performansı sağlamak olacak.

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

  1. src/index.js dosyayı, ardından aşağıdaki aşağıdaki satırı ekleyin TODO Firebase Performans İzleme SDK dahil etmek.

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, zaten alt kısmında sizin için aşağıdaki satırı ekledim public/index.html dosyasına, ama orada olduğunu bir kez daha kontrol.

index.html

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

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! Belgelerine bakın otomatik sayfa yükleme izleri hakkında daha fazla bilgi için.

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

İlk giriş gecikmesi bir kullanıcı etkileşimine yanıt tarayıcı uygulamanızın tepki konusunda kullanıcılara ilk izlenimlerini verir çünkü 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 sonra yorumsuz, aşağıdaki satırı dosyası.

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 izlerini oluşturmanıza olanak sağlar. Ö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. In src/index.js dosyası, daha sonra, bir performans nesnesini almak bir görüntü iletiyi yüklemeyi 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ıza resim göndermesinin ne kadar sürdüğü hakkında bir fikir verecektir.

7. Uygulamanıza özel bir metrik ekleyin.

Sen ayrıca bir yapılandırabilir özel iz kapsamı içinde meydana performansla ilgili olaylar için kayıt özel metriği. Ö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. Bir önceki adımdaki özel iz bulun (sizin tanımlanan src/index.js dosyası).
  2. Aşağıdaki satırı ilave edin TODO yüklenen görüntünün boyutunu kaydetmek için.

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ımlarda üzerine kurulan, aynı zamanda ödemeli olabilir özel niteliklerini senin üzerinde özel izleri . Özel özellikler, verileri uygulamanıza özel kategorilere göre segmentlere 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. Senin tanımlanan özel iz kullanın src/index.js dosyası.
  2. Aşağıdaki satırı ilave edin TODO yüklenen resmin MIME türünü kaydetmek için.

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 yönde etkilemeyecek şekilde tasarlanmıştır. SDK yüklenmeden önce Firebase Performance Monitoring API kullanılamaz. Bu senaryoda, hala kullanarak özel izlerini ekleyebilirsiniz Kullanıcı Zamanlama API . Firebase performans SDK'sından süreleri bulacaktır () ölçü ve özel izleri olarak açın.

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

  1. In public/index.html dosyasına uygulama stil komut yükün 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. Sen adında özel iz bulmak mümkün olacak loadStyling sonra Firebase Performans konsolunda.

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

Firebase Hosting'e dağıtın

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

  1. Emin komut satırı uygulamanızın yerel erişen emin olun performance-monitoring-start dizini.
  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 ikisinde Barındırma Firebase kullanarak barındırılan web uygulaması ziyaret https://<projectId>.firebaseapp.com ve https://<projectId>.web.app .

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

Açık Firebase konsol 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. Birden fazla görüntü göndermeyi deneyin (birkaç numuneleri saklanır public/images/ böylece özel metrik ve özel ayrıntıların dağılımını test edebilirsiniz).

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. In Firebase konsolunda , sizin sahip projeyi seçmek Friendly Chat uygulamasını.
  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 sekmesini tıklayın.
  • Sayfa yükleme iken performans otomatik izlenmesi olduğunu Sayfa yükleri tabloda çeşitli performans ölçütleri toplar.
  • Süreler tabloda uygulamanızın kodunda tanımladığınız herhangi bir özel izleri.
  1. İz için spesifik ölçütlerini incelemek için Süreler tablosundaki saveImageMessage tıklayın.

e28758fd02d9ffac.png

  1. Resmi boyutları dağılımını yorumlayan Agrega 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 Agrega yanındadır Üzeri zaman tıklayın. Ayrıca, özel izinin süresi görebilirsiniz. Daha ayrıntılı olarak toplanan verileri incelemek için daha fazla Görünüm 'ü tıklayın.

16983baa31e05732.png

  1. Açılan sayfada, ImageType tıklayarak segmenti görüntü MIME türüne göre süresi verilerinizi. Bu belirli veriler, özel izlemenize eklediğiniz imageType özniteliği nedeniyle günlüğe kaydedildi.

8e5c9f32f42a1ca1.png

Ağ verilerini inceleyin

Bir HTTP / S ağ isteği bir raporu olduğunu yakalar tepki süresi ve ağ aramaların yükü boyutu.

  1. Performans izleme panosunun ana ekranına geri dönün.
  2. Web uygulaması için ağ isteği girişlerinin listesini görmek için sekmesini 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: