Web için Firebase Performans İzleme

1. Genel Bakış

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

3b1284f5144b54f6.png

Ne öğreneceksin

  • Kullanıma hazır ölçümler (sayfa yükleme ve ağ istekleri) elde etmek 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 izlemeye bağlı ek özel ölçümler nasıl kaydedilir?
  • Performans verilerinizi özel özelliklerle nasıl daha fazla segmentlere ayırabilirsiniz?
  • Web uygulamanızın performansını anlamak için performans izleme kontrol panelini nasıl kullanabilirsiniz?

İhtiyacınız olan şey

  • WebStorm , Atom , Sublime veya VS Code gibi seçtiğiniz IDE veya metin düzenleyici
  • 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 kopyalayın:

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

Alternatif olarak, git yüklü değilse repo'yu zip dosyası olarak indirebilirsiniz .

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

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'in başlangıç ​​kodunu içerir.

3. Firebase projesi oluşturun ve kurun

Firebase projesi oluşturma

  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'a tıklayın.

Projeye Firebase web uygulaması ekleme

  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 kur 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 ile 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 ile oturum açmayı etkinleştirmeniz gerekecek:

  1. Firebase konsolunda sol paneldeki Geliştirme bölümünü bulun.
  2. Kimlik Doğrulama'yı ve 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ştirin

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ı'nı tıklayın.
  2. Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
  3. Test modunda başlat seçeneğini seçin ve ardından güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuduktan sonra Etkinleştir'e tıklayın.

Bu codelab'in başlangıç ​​kodu daha güvenli kurallar içeriyor. Bunları daha sonra codelab'de konuşlandıracağı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.

Cloud Storage'ı etkinleştirmeniz gerekecek:

  1. Firebase konsolunun Geliştirme bölümünde Depolama'yı tıklayın.
  2. Başlayın'ı tıklayın.
  3. Firebase projenizin güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuyun ve ardından Anladım'a tıklayın.

Başlangıç ​​kodu, daha sonra codelab'de uygulayacağımız temel bir güvenlik kuralını içerir.

4. Firebase komut satırı arayüzünü yükleyin

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

  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 üzeri olduğundan emin olun.

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

Web uygulaması şablonunu, uygulamanızın Firebase Hosting yapılandırmasını uygulamanızın yerel dizininden (codelab'de daha önce klonladığınız depo) alacak şekilde ayarladık. Ancak yapılandırmayı almak 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.

Birden fazla ortamınız (prodüksiyon, hazırlama vb.) varsa takma ad kullanışlıdır. Ancak bu codelab için sadece 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 entegrasyonun çeşitli yolları vardır (ayrıntılar için belgelere bakın). Bu codelab'de Barındırma URL'lerinden performans izlemeyi etkinleştireceğiz.

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

  1. src/index.js dosyasını açın ve Firebase Performance Monitoring SDK'yı eklemek 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, public/index.html dosyasının altına sizin için aşağıdaki satırı zaten ekledik, ancak orada olup olmadığını bir kez daha kontrol edin.

indeks.html

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

index.js

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

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

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

Bir kullanıcı etkileşimine yanıt veren tarayıcı, kullanıcılara uygulamanızın yanıt verme hızıyla ilgili ilk izlenimlerini verdiğinden , ilk giriş gecikmesi faydalıdır.

İlk giriş gecikmesi, kullanıcının sayfadaki bir öğeyle (bir düğmeyi veya köprüyü tıklamak gibi) ilk kez etkileşime girmesiyle 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 açıklamasını kaldırın.

indeks.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 Firebase Performance Monitoring ile kodunuzdaki entegrasyonu tamamladınız!

Aşağıdaki adımlarda Firebase Performance Monitoring'i kullanarak özel izler eklemeyi öğreneceksiniz. Yalnızca otomatik izleri toplamak istiyorsanız "Dağıt ve görüntüleri göndermeye başla" 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 yürütme engellemesinin süresine ilişkin bir rapordur. SDK tarafından sağlanan API'leri kullanarak özel bir izlemenin başlangıcını ve bitişini tanımlarsınız.

  1. src/index.js dosyasında bir performans nesnesi alın ve ardından resim mesajını yüklemek için özel bir izleme oluşturun.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. Özel bir iz kaydetmek için izin başlangıç ​​noktasını ve durma noktasını belirtmeniz gerekir. İzlemeyi bir 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 izlemeyi başarıyla tanımladınız! Kodunuzu dağıttıktan sonra, kullanıcı resimli mesaj gönderirse özel izlemenin süresi kaydedilecektir. Bu size, gerçek dünyadaki kullanıcıların sohbet uygulamanıza resim göndermesinin ne kadar süreceği konusunda bir fikir verecektir.

7. Uygulamanıza özel bir metrik ekleyin.

Kapsamında meydana gelen performansla ilgili olaylara ilişkin özel ölçümleri kaydetmek için ö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 görselin 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örselin 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 ölçüm, performans izlemenin yüklenen görüntü boyutunun yanı sıra özel izleme süresini de kaydetmesine olanak tanır.

8. Uygulamanıza özel bir özellik ekleyin

Önceki adımlardan yola çıkarak, özel izlerinizdeki özel nitelikleri de toplayabilirsiniz. Özel özellikler, verileri uygulamanıza özel kategorilere göre segmentlere ayırmanıza 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 özellik, performans izlemenin, yüklenen görüntü türüne göre özel izleme süresini kategorilere ayırmasını sağlar.

9. [Genişlet] Kullanıcı Zamanlaması API'si ile özel bir izleme 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, Kullanıcı Zamanlaması API'sini kullanarak özel izler eklemeye devam edebilirsiniz. Firebase performans SDK'sı, ölçüm() öğesinden süreleri alacak ve bunları özel izler olarak günlüğe kaydedecektir.

Kullanıcı Zamanlaması API'sini kullanarak uygulama stili 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.

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

indeks.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 izleme bulabileceksiniz.

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

Firebase Hosting'e dağıtma

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örüntülemelidir:
=== 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 Firebase Hosting kullanılarak kendi Firebase alt alan adlarınızdan ikisinde barındırılan web uygulamanızı ziyaret edin: https://<projectId>.firebaseapp.com ve https://<projectId>.web.app .

Performans izlemenin etkin olduğunu doğrulayın

Firebase konsolunu açın ve Performans sekmesine gidin. "SDK algılandı" yazan bir hoş geldiniz 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ıza görseller göndererek bazı performans verileri oluşturun.

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

Uygulamanın kullanıcı arayüzünde seçtiğiniz görsellerle birlikte yeni mesajlar görüntülenmelidir.

11. Kontrol panelini izleyin

Web uygulamanızı dağıttıktan ve kullanıcı olarak resim mesajları gönderdikten sonra, performans izleme kontrol panelinde (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üklemeleri 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 ölçümleri incelemek için Süreler tablosunda saveImageMessage'a tıklayın.

e28758fd02d9ffac.png

  1. Görüntü boyutlarının dağılımını incelemek için Birleştir'i tıklayın. Bu özel iz için görüntü boyutunu ölçmek üzere eklediğiniz ölçümü görebilirsiniz.

c3cbcfc0c739a0a8.png

  1. Önceki adımda Topla'nın yanındaki Zaman içinde seçeneğine tıklayın. Ayrıca özel izin 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 seçeneğine tıklayarak süre verilerini görsel MIME türüne göre segmentlere ayırabilirsiniz. Bu belirli veriler, özel izlemenize eklediğiniz imageType özelliğ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ıza yönelik 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ı artıracak bir düzeltme üzerinde çalışmaya başlayın!

26a2be152a77ffb9.png

12. Tebrikler!

Performans izleme için Firebase SDK'yı 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 Performans İzleme SDK'sını web uygulamanıza ekleme.
  • Kodunuza özel izler ekleme.
  • Özel izlemeye bağlı özel ölçümleri kaydetme.
  • Özel nitelikleri kullanarak performans verilerini segmentlere ayırma.
  • Uygulamanızın performansına ilişkin öngörüler elde etmek için performans izleme kontrol panelini nasıl kullanacağınızı anlama.

Daha fazla bilgi edin: