Web için Firebase Performance Monitoring

1. Genel Bakış

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

3b1284f5144b54f6.png

Neler öğreneceksiniz?

  • Kullanıma hazır metrikleri (sayfa yükü ve ağ istekleri) almak için web uygulamanıza Firebase Performance Monitoring'i ekleme.
  • Özel izlerle belirli bir kod parçasının nasıl ölçüleceği.
  • Özel bir izlemeye bağlı ek özel metrikler kaydetme.
  • Özel özellikleri kullanarak performans verilerinizi daha ayrıntılı segmentlere ayırma.
  • Web uygulamanızın performansını anlamak için performans izleme kontrol panelini kullanma

Gerekenler

  • Tercih ettiğiniz WebStorm, Atom, Sublime veya VS Code gibi bir IDE veya metin düzenleyici
  • Terminal/konsol
  • Tercih ettiğiniz bir tarayıcı (ör. Chrome)
  • 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

Komut satırından codelab'in GitHub deposunu klonlayın:

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

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

Başlangıç uygulamasını içe aktarma

IDE'nizi kullanarak, klonlanan 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şturma ve ayarlama

Firebase projesi oluşturma

  1. Firebase konsolunda Proje Ekle'yi tıklayın.
  2. Firebase projenizi FriendlyChat olarak adlandırın.

Firebase projenizin proje kimliğini unutmayın.

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

Projeye bir Firebase web uygulaması ekleyin

  1. Yeni bir Firebase web uygulaması oluşturmak için web simgesini 58d6543a156e56f9.png tıklayın.
  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ıklayarak ilerleyin. Ekrandaki talimatları uygulamanız gerekmez. Bunlar, bu codelab'in sonraki adımlarında ele alınacaktır.

ea9ab0db531a104c.png

Firebase kimlik doğrulaması için Google ile Oturum Açma'yı etkinleştir

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

  1. Firebase konsolunda sol paneldeki Geliştir bölümünü bulun.
  2. Kimlik doğrulama'yı ve ardından Oturum açma yöntemi sekmesini ( Konsola git) tıklayın.
  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ştirme

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

Cloud Firestore'u etkinleştirmeniz gerekir:

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

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

24bd1a097492eac6.png

Cloud Storage'ı etkinleştirme

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

Cloud Storage'ı etkinleştirmeniz gerekir:

  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ıyla ilgili sorumluluk reddi beyanını okuyup Anladım'ı tıklayın.

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

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

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

  1. Firebase belgelerindeki bu talimatları uygulayarak CLI'yı yükleyin.
  2. Bir terminalde aşağıdaki komutu çalıştırarak CLI'ın düzgün şekilde yüklendiğini doğrulayın:
firebase --version

Firebase CLI sürümünüzün 8.0.0 veya üzeri olduğundan emin olun.

  1. Aşağıdaki komutu çalıştırarak Firebase CLI'ı 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 gerekir.

  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 Firebase projenize bir takma ad verin.

Takma ad, birden fazla ortamınız varsa (üretim, hazırlık vb.) kullanışlıdır. Ancak bu codelab için default takma adını kullanalım.

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

5. Firebase Performance Monitoring ile entegrasyon

Web için Firebase Performance Monitoring SDK'sı ile entegrasyon gerçekleştirmenin çeşitli yolları vardır (ayrıntılar için belgeleri inceleyin). Bu codelab'de Barındırma URL'leri üzerinden performans izlemeyi etkinleştireceğiz.

Performans izleme ekleme ve Firebase'i başlatma

  1. src/index.js dosyasını açın, ardından Firebase Performance Monitoring SDK'sını dahil etmek için TODO öğesinin 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ıyla ilgili bilgileri içeren bir yapılandırma nesnesiyle başlatmamız gerekiyor. Firebase Hosting kullandığımızdan, bu yapılandırmayı sizin için yapacak özel bir komut dosyasını içe aktarabilirsiniz. Bu codelab'de public/index.html dosyasının alt kısmına aşağıdaki satırı sizin için önceden ekledik ancak bu satırın mevcut olup olmadığını tekrar kontrol edin.

index.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 öğesinin altına aşağıdaki satırı ekleyin.

index.js

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

Performance Monitoring, kullanıcılar sitenizi kullandığında artık sayfa yükleme ve ağ isteği metriklerini sizin için otomatik olarak toplayacak. Otomatik sayfa yükleme izlemeleri hakkında daha fazla bilgi edinmek için belgeleri inceleyin.

İlk giriş gecikmesi için çoklu dolgu kitaplığını ekleyin

İlk giriş gecikmesi, 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ği için yararlıdır.

İlk giriş gecikmesi, kullanıcı sayfadaki bir öğeyle ilk kez etkileşimde bulunduğunda (ör. bir düğmeyi veya köprüyü tıkladığında) başlar. Tarayıcı, girişe yanıt verebilir hale geldikten sonra hemen durur. Bu, tarayıcının içeriğinizi yüklemek veya ayrıştırmakla meşgul olmadığı anlamına gelir.

Bu çoklu dolgu 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.

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, kodunuzda Firebase Performance Monitoring ile entegrasyonu tamamlamış olursunuz.

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

6. Uygulamanıza özel iz ekleyin

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

  1. src/index.js dosyasında bir performans nesnesi alın, ardından resim 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 istiyorsanız iz için başlangıç ve bitiş noktasını belirtmeniz gerekir. İzi 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 izi başarıyla tanımladınız. Kodunuzu dağıttıktan sonra, kullanıcı bir görüntü mesajı gönderirse özel iz süresi kaydedilir. Bu sayede, gerçek kullanıcıların sohbet uygulamanızda resim göndermelerinin ne kadar sürdüğü hakkında fikir edinebilirsiniz.

7. Uygulamanıza özel metrik ekleyin.

Bir özel iz'i daha ayrıntılı şekilde yapılandırarak, kendi kapsamında gerçekleşen performansla ilgili etkinliklere ait özel metrikleri kaydedebilirsiniz. Örneğin, son adımda tanımladığımız özel iz için yükleme süresinin bir resmin boyutundan etkilenip etkilenmediğini araştırmak için bir metrik kullanabilirsiniz.

  1. Önceki adımdaki özel izini (src/index.js dosyanızda tanımlanır) bulun.
  2. Yüklenen resmin boyutunu kaydetmek için TODO öğesinin altına aşağıdaki satırı ekleyin.

index.js

 ...

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

 ...

Bu metrik, performans izlemenin özel iz süresini ve yüklenen görüntü boyutunu kaydetmesini sağlar.

8. Uygulamanıza özel özellik ekleyin

Önceki adımları temel alarak, özel izlerinizde özel özellikleri 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 resim dosyasının MIME türünü toplayabilirsiniz.

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

index.js

 ...

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

 ...

Bu özellik, özel iz süresini yüklenen görüntü türüne göre kategorilere ayırmak için performans izleme özelliğinin kullanılmasını sağlar.

9. [Extend] User Timing API ile özel iz ekleme

Firebase Performance Monitoring SDK'sı, eşzamansız olarak yüklenebilecek ve sayfa yükleme sırasında web uygulamalarının performansını olumsuz şekilde etkilemeyecek şekilde tasarlanmıştır. SDK yüklenmeden önce Firebase Performance Monitoring API kullanılamaz. Bu senaryoda, User Timing API'yi kullanarak özel izler ekleyebilirsiniz. Firebase Performance SDK'sı, measure() yönteminden süreleri alır ve özel iz olarak günlüğe kaydeder.

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

  1. Uygulama stil komut dosyalarının yüklenmesinin başlangıcını işaretlemek için public/index.html dosyasına 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 stil 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 toplanır. Daha sonra Firebase Performance konsolunda loadStyling adlı özel bir iz bulabilirsiniz.

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 aşağıdaki adımları uygulayın:

  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. Konsolda aşağıdakiler gösterilir:
=== 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 size ait iki Firebase alt alan adında Firebase Hosting kullanılarak tam olarak barındırılan web uygulamanızı ziyaret edin: https://<projectId>.firebaseapp.com ve https://<projectId>.web.app.

Performans izlemenin etkinleştirildiğini doğrulama

Firebase konsolunu açıp Performans sekmesine gidin. "SDK algılandı" ifadesini içeren bir karşılama mesajı görüyorsanız Firebase Performance Monitoring başarıyla entegre edilmiş demektir.

30df67e5a07d03b0.png

Resim mesajı gönder

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

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

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

11. Kontrol panelini izleme

Web uygulamanızı dağıttıktan ve kullanıcı olarak resim mesajları gönderdikten sonra, performans verilerini performans izleme kontrol panelinde (Firebase konsolunda) inceleyebilirsiniz.

Kontrol panelinize erişme

  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

Uygulamanızın verileri performans izleme tarafından işlendikten sonra, kontrol panelinin üst kısmında sekmeler görürsünüz. Henüz herhangi bir veri veya sekme görmüyorsanız daha sonra tekrar kontrol etmeyi unutmayın.

  1. Cihazda sekmesini tıklayın.
  • Sayfa yüklemeleri tablosunda, sayfanız yüklenirken performans izleme özelliğinin otomatik olarak topladığı çeşitli performans metrikleri gösterilir.
  • Süreler tablosu, uygulamanızın kodunda tanımladığınız özel izleri gösterir.
  1. İze ilişkin belirli metrikleri incelemek için Durations (Süreler) tablosunda saveImageMessage öğesini tıklayın.

e28758fd02d9ffac.png

  1. Resim boyutlarının dağılımını incelemek için Topla'yı tıklayın. Bu özel iz için resim boyutunu ölçmek amacıyla eklediğiniz metriği görebilirsiniz.

c3cbcfc0c739a0a8.png

  1. Önceki adımda Topla'nın yanındaki Zaman içinde'yi tıklayın. Özel izin Süre'sini de görüntüleyebilirsiniz. Toplanan verileri daha ayrıntılı bir şekilde incelemek için Daha fazla görüntüle'yi tıklayın.

16983baa31e05732.png

  1. Açılan sayfada imageType seçeneğini tıklayarak süre verilerini resim MIME türüne göre segmentlere ayırabilirsiniz. Bu veriler, özel izinize eklediğiniz imageType özelliği nedeniyle günlüğe kaydedildi.

8e5c9f32f42a1ca1.png

Ağ verilerini inceleme

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 kontrol panelinin ana ekranına geri dönün.
  2. Web uygulamanıza ilişkin ağ isteği girişlerinin listesini görmek için Ağ sekmesini tıklayın.
  3. Yavaş istekleri belirlemek için bu isteklere göz atın ve uygulamanızın performansını iyileştirmek için düzeltme üzerinde çalışmaya başlayın.

26a2be152a77ffb9.png

12. Tebrikler!

Performans izleme için Firebase SDK'sını etkinleştirdiniz ve sohbet uygulamanızın gerçek dünya performansını ölçmek amacıyla otomatik izler ve özel izler topladınız.

İşlediğimiz konular:

  • Firebase Performance Monitoring SDK'sını web uygulamanıza ekleme.
  • Kodunuza özel izler ekleme.
  • Özel ize bağlı özel metrikler kaydediliyor.
  • Özel özellikleri kullanarak performans verilerini segmentlere ayırma.
  • Uygulamanızın performansı hakkında bilgi edinmek için performans izleme kontrol panelini nasıl kullanacağınızı anlama

Daha fazla bilgi: