Web için Firebase Performance Monitoring

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ı bir demo görmek için https://fireperf-friendlychat.web.app/ adresini ziyaret edin.

Neler öğreneceksiniz?

• Hazır metrikler (sayfa yükleme ve ağ istekleri) almak için web uygulamanıza Firebase Performance Monitoring'i ekleme.
• Özel izlerle belirli bir kod parçasını ölçme.
• Özel bir izlemeye bağlı ek özel metrikler kaydetme.
• Performans verilerinizi özel özelliklerle daha da segmentlere ayırma.
• Web uygulamanızın performansını anlamak için performans izleme kontrol panelini kullanma.

Gerekenler

• WebStorm, Atom, Sublime veya VS Code gibi tercih ettiğiniz IDE ya da metin düzenleyici
• Terminal/konsol
• Chrome gibi tercih ettiğiniz bir tarayıcı
• Codelab'in örnek kodu (Kodu nasıl edineceğinizi öğrenmek için bu codelab'in sonraki bölümüne bakın.)

2. Örnek kodu alın

Kod laboratuvarının GitHub deposunu komut satırından kopyalayın:

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

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

Başlatıcı uygulamayı içe aktarma

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şturup 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.

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

Firebase fiyatlandırma planınızı yükseltme

Firebase için Cloud Storage'ı kullanmak istiyorsanız Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planında olması gerekir. Yani projeniz bir Cloud Faturalandırma hesabına bağlı olmalıdır.

• Cloud Billing hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
• Firebase ve Google Cloud'da yeniyseniz 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma hesabı almaya uygun olup olmadığınızı kontrol edin.
• Bu kod laboratuvarını bir etkinlik kapsamında yapıyorsanız düzenleyen kişiye Cloud kredisi olup olmadığını sorun.

Projenizi Blaze planına yükseltmek için aşağıdaki adımları uygulayın:

1. Firebase konsolunda planınızı yükseltmeyi seçin.
2. Blaze planını seçin. Projenize bir Cloud Faturalandırma hesabı bağlamak için ekrandaki talimatları uygulayın.
   Bu yükseltme kapsamında bir Cloud Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase Console'daki yükseltme akışına geri dönmeniz gerekebilir.

Projeye Firebase web uygulaması ekleme

1. Yeni bir Firebase web uygulaması oluşturmak için web simgesini tıklayın.
2. Uygulamayı Friendly Chat takma adıyla kaydedin ve ardından Bu uygulama için Firebase Hosting'i de ayarlayın seçeneğinin yanındaki kutuyu işaretleyin.
3. Uygulamayı kaydet'i tıklayın.
4. Kalan adımları tıklayarak ilerleyin. Şu anda ekrandaki talimatları uygulamanız gerekmez. Bu talimatlar bu codelab'in sonraki adımlarında ele alınacaktır.

Firebase kimlik doğrulaması için Google ile oturum açma özelliğini etkinleştirme

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

Google ile oturum açma özelliğini 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 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.

Cloud Firestore'u ayarlama

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

Cloud Firestore'u Firebase projenizde ayarlamak için:

1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Firestore veritabanı'nı seçin.
2. Create database'i (Veritabanı oluştur) tıklayın.
3. Veritabanı Kimliği'ni (default) olarak bırakın.
4. Veritabanı için bir konum seçip Sonraki'yi tıklayın.
   Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
5. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu kod laboratuvarının ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza Güvenlik Kuralları eklemeden bir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
6. Oluştur'u tıklayın.

Cloud Storage for Firebase'i kurma

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

Firebase projenizde Cloud Storage for Firebase'i ayarlamak için:

1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Depolama'yı seçin.
2. Başlayın'ı tıklayın.
3. Varsayılan Storage paketiniz için bir konum seçin.
   US-WEST1, US-CENTRAL1 ve US-EAST1'deki paketler, Google Cloud Storage'ın "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu kod laboratuvarının ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Depolama alanı paketiniz için Güvenlik Kuralları eklemedenbir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
5. Oluştur'u tıklayın.

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

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

1. Firebase dokümanlarındaki bu talimatları uygulayarak CLI'yi yükleyin.
2. Bir terminalde aşağıdaki komutu çalıştırarak CLI'nin doğru şekilde yüklendiğini doğrulayın:

firebase --version

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

3. 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 gerekir.

4. Komut satırınızın, uygulamanızın yerel performance-monitoring-start dizinine eriştiğinden emin olun.
5. Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:

firebase use --add

6. İstendiğinde proje kimliğinizi seçin ve ardından Firebase projenize bir takma ad verin.

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

7. Komut satırınızdaki diğer talimatları uygulayın.

5. Firebase Performance Monitoring ile entegrasyon

Web için Firebase Performance Monitoring SDK'sını entegre etmenin çeşitli yolları vardır (ayrıntılar için dokümanlara bakın). Bu codelab'de, barındırma URL'lerinden performans izlemeyi etkinleştireceğiz.

Performans izlemeyi 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';

2. Ayrıca Firebase SDK'sını, Firebase projesi ve kullanmak istediğimiz web uygulaması hakkında bilgi içeren bir yapılandırma nesnesi ile başlatmamız gerekir. Firebase Hosting kullanıyoruz. Bu yapılandırmayı sizin için yapacak özel bir komut dosyası içe aktarabilirsiniz. Bu kod laboratuvarının public/index.html dosyasının alt kısmına aşağıdaki satırı sizin için ekledik. Ancak bu satırın orada olup olmadığını tekrar kontrol edin.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. Performans izlemeyi başlatmak için src/index.js dosyasında TODO'un 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 sayfa yükleme ve ağ isteği metriklerini sizin için otomatik olarak toplayacaktır. Otomatik sayfa yükleme izlemeleri hakkında daha fazla bilgi edinmek için dokümanlara bakın.

İlk giriş gecikmesi polyfill kitaplığını ekleme

Tarayıcının kullanıcı etkileşimine yanıt vermesi, kullanıcılara uygulamanızın duyarlılığıyla ilgili ilk izlenimleri vereceğinden ilk giriş gecikmesi faydalıdır.

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

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

public/index.html dosyasını açıp 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, kodunuzda Firebase Performance Monitoring ile entegrasyonu tamamlamış olursunuz.

Aşağıdaki adımlarda, Firebase Performance Monitoring'i kullanarak özel iz ekleme hakkında bilgi edineceksiniz. Yalnızca otomatik izlemeleri toplamak istiyorsanız "Yayınlama ve resim göndermeye başlama" bölümüne gidin.

6. Uygulamanıza özel bir izleme ekleme

Performans İzleme, özel izler oluşturmanıza olanak tanır. Özel iz, uygulamanızdaki bir yürütme bloğunun süresiyle ilgili bir rapordur. Özel izin başlangıç ve bitişini belirlemek için SDK tarafından sağlanan API'lerden yararlanırsınız.

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

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Özel bir izleme kaydı oluşturmak için izlemenin başlangıç ve bitiş 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. Kodunuz dağıtıldıktan sonra, bir kullanıcı resim mesajı gönderirse özel izlemenin süresi kaydedilir. Bu sayede, gerçek kullanıcıların sohbet uygulamanızda resim göndermesinin ne kadar sürdüğü hakkında fikir edinebilirsiniz.

7. Uygulamanıza özel metrik ekleyin.

Özel bir iz, kendi kapsamında gerçekleşen performansla ilgili etkinliklere ait özel metrikleri kaydetecek şekilde daha da yapılandırılabilir. Örneğin, son adımda tanımladığımız özel izleme için yükleme süresinin bir resmin boyutundan etkilenip etkilenmediğini incelemek üzere bir metrik kullanabilirsiniz.

1. Önceki adımdaki özel izlemeyi (src/index.js dosyanızda tanımlanmıştı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 izleme süresinin yanı sıra yüklenen resim boyutunu kaydetmesini sağlar.

8. Uygulamanıza özel özellik ekleme

Önceki adımları temel alarak özel izlerinizde özel özellikler de toplayabilirsiniz. Özel özellikler, verileri uygulamanıza özgü 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'ün altına aşağıdaki satırı ekleyin.

index.js

 ...

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

 ...

Bu özellik, performans izlemenin özel izleme süresini yüklenen resim türüne göre kategorize etmesini sağlar.

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

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

Kullanıcı Zamanlaması API'sini kullanarak uygulama stili komut dosyalarının yüklenme süresini ölçeceğiz.

1. Uygulama stili 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>

2. 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 toplanır. Daha sonra Firebase Performans Konsolu'nda loadStyling adlı özel bir izleme bulabilirsiniz.

10. Dağıtım yapın ve resim göndermeye başlayın

Firebase Hosting'e dağıtma

Firebase Performance Monitoring'u 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

3. 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.firebasestorage.app
✔  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

4. Artık tamamen Firebase Hosting kullanılarak kendi Firebase alt alan adlarınızdan ikisinde (https://<projectId>.firebaseapp.com ve https://<projectId>.web.app) barındırılan web uygulamanızı ziyaret edin.

Performans izlemenin etkinleştirildiğini doğrulama

Firebase konsolunu açıp Performans sekmesine gidin. "SDK algılandı" yazan bir karşılama mesajı görüyorsanız Firebase Performance Monitoring ile başarılı bir şekilde entegrasyon yaptınız demektir.

Resim mesajı gönderme

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

1. Sohbet uygulamanızda oturum açtıktan sonra resim yükleme düğmesini 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 fazla resim göndermeyi deneyin (public/images/ içinde birkaç örnek saklanır).

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

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ü bulup Performans'ı tıklayın.

Cihazdaki verileri inceleme

Performans izleme, uygulamanızın verilerini işledikten sonra kontrol panelinin üst kısmında sekmeler görürsünüz. Henüz veri veya sekme görmüyorsanız daha sonra tekrar kontrol edin.

1. Cihaz üzerinde sekmesini tıklayın.

• Sayfa yüklemeleri tablosunda, sayfanız yüklenirken performans izlemenin otomatik olarak topladığı çeşitli performans metrikleri gösterilir.
• Süreler tablosunda, uygulamanızın kodunda tanımladığınız tüm özel izler gösterilir.

2. İzlemeyle ilgili belirli metrikleri incelemek için Süreler tablosunda saveImageMessage'ı tıklayın.

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

4. Önceki adımda Topla'nın yanındaki Zaman içinde'yi tıklayın. Özel izlemenin Süre'sini de görüntüleyebilirsiniz. Toplanan verileri daha ayrıntılı olarak incelemek için Daha fazla göster'i tıklayın.

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

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ızla ilgili ağ isteği girişlerinin listesini görmek için Ağ sekmesini tıklayın.
3. Yavaş istekleri belirlemek için bu raporlara göz atın ve uygulamanızın performansını iyileştirmek için bir düzeltme üzerinde çalışmaya başlayın.

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 için otomatik ve özel izlemeler topladınız.

Ele aldığımız konular:

• Firebase Performance Monitoring SDK'sını web uygulamanıza ekleme.
• Kodunuza özel izler ekleme.
• Özel izlemeye bağlı özel metrikleri kaydetme.
• Ö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ı öğrenme

Daha fazla bilgi:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/