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.

ne öğreneceksin

• Kullanıma hazır metrikler (sayfa yükü ve ağ istekleri) almak için Firebase Performance Monitoring'i web uygulamanıza nasıl ekleyebilirsiniz?
• Ö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 özelliklerle nasıl daha fazla segmente edebilirsiniz?
• 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üzenleyici
• Bir terminal/konsol
• Chrome gibi tercih ettiğiniz bir tarayıcı
• Kod laboratuvarının örnek kodu (Kodun nasıl alınacağını öğrenmek için bu kod laboratuvarının 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 kurulu değilse, repoyu 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 projenizi FriendlyChat olarak adlandırın.

Firebase projeniz için proje kimliğini unutmayın.

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

Projeye bir Firebase web uygulaması ekleyin

1. web simgesini tıklayın 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 Barındırma 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.

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

Kullanıcıların Google hesaplarıyla sohbet uygulamasında 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.

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, ardından güvenlik kurallarıyla ilgili sorumluluk reddini okuduktan sonra Etkinleştir'e tıklayın.

Bu codelab için başlangıç ​​kodu daha güvenli kurallar içerir. Bunları daha sonra kod laboratuvarında konuşlandıracağız.

Bulut Depolamayı Etkinleştir

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

Bulut Depolamayı 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 projeniz için güvenlik kuralları hakkındaki sorumluluk reddini okuyun ve ardından Anladım'ı tıklayın.

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

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

Firebase komut satırı arabirimi (CLI), web uygulamanızı yerel olarak sunmak ve web uygulamanızı Firebase projenize dağıtmak için Firebase Barındırma kullanmanıza olanak tanır.

1. Firebase belgelerindeki bu talimatları izleyerek CLI'yi kurun.
2. Aşağıdaki komutu bir terminalde çalıştırarak CLI'nin doğru kurulduğunu doğrulayın:

firebase --version

Firebase CLI sürümünüzün v8.0.0 veya üzeri 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 Barındırma için yapılandırmasını uygulamanızın yerel dizininden (kod laboratuvarında daha önce klonladığınız depo) çekmek için ayarladık. Ancak yapılandırmayı çekmek için uygulamanızı Firebase projenizle ilişkilendirmemiz gerekiyor.

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 çok ortamınız varsa (üretim, hazırlama vb.) bir takma ad kullanışlıdır. Ancak, bu codelab için default takma adını kullanalım.

7. 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 izleme 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';

2. Ayrıca Firebase SDK'sını, Firebase projesi ve kullanmak istediğimiz web uygulaması hakkında bilgiler içeren bir yapılandırma nesnesi ile başlatmamız gerekiyor. Firebase Barındırma kullandığımız için, bu yapılandırmayı sizin yerinize yapacak özel bir komut dosyasını içe aktarabilirsiniz. Bu codelab için, sizin için public/index.html dosyasının en altına aşağıdaki satırı zaten ekledik, ancak orada olup olmadığını bir kez daha 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 altına aşağıdaki satırı ekleyin.

index.js

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

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

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

Bir kullanıcı etkileşimine yanıt veren tarayıcı, kullanıcılara uygulamanızın yanıt verebilirliği hakkında ilk izlenimlerini verdiğinden , ilk giriş gecikmesi kullanışlıdır.

İlk giriş gecikmesi, kullanıcı sayfadaki bir öğeyle, örneğin bir düğmeyi veya köprüyü tıklatmak gibi ilk etkileşimde bulunduğunda başlar. Tarayıcı girdiye yanıt verdikten hemen sonra durur, bu da tarayıcının içeriğinizi yüklemek 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çı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, kodunuzdaki Firebase Performance Monitoring entegrasyonunu tamamladınız!

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.

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üresi için 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, ardından bir 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 iz kaydetmek için iz için başlangıç ​​ve bitiş noktaları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 bir izlemeyi başarıyla tanımladınız! Kodunuzu dağıttıktan sonra, bir kullanıcı resimli mesaj gönderirse özel izlemenin süresi kaydedilecektir. Bu, gerçek dünyadaki kullanıcıların sohbet uygulamanızda resim göndermesinin ne kadar sürdüğü konusunda size bir fikir verecektir.

7. Uygulamanıza özel bir metrik ekleyin.

Kapsamında meydana gelen performansla ilgili olaylar için özel ölçümleri kaydetmek üzere ayrıca özel bir izleme 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 boyutunun etkilenip etkilenmediğini araştırmak için bir metrik kullanabilirsiniz.

1. Önceki adımdaki ( src/index.js dosyanızda tanımlanan) özel izi bulun.
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, yüklenen görüntü boyutunun yanı sıra özel izleme süresinin kaydedilmesi için performans izlemeyi etkinleştirir.

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 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 öznitelik, performans izlemenin yüklenen görüntü türüne göre özel izleme süresini kategorilere ayırmasını sağlar.

9. [Uzat] Kullanıcı Zamanlama API'sı 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, Kullanıcı Zamanlama API'sini kullanarak özel izler eklemeye devam edebilirsiniz. Firebase performans SDK'sı, measure() öğesinden süreleri alacak ve bunları özel izlemeler olarak günlüğe kaydedecektir.

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

1. public/index.html dosyasında, uygulama stili betiklerinin yüklenmesinin başladığı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>

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 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ğı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

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

4. Kendi Firebase alt alan adlarınızdan ikisinde artık tamamen Firebase Barındırma 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ı" ifadesini gösteren bir karşılama mesajı görürseniz, Firebase Performance Monitoring ile başarılı bir şekilde entegre etmişsiniz demektir!

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ükleme düğmesine tıklayın .
2. Dosya seçiciyi kullanarak bir görüntü dosyası seçin.
3. Özel metriklerin ve özel özniteliklerin dağıtımını test edebilmeniz için birden çok görüntü göndermeyi deneyin (birkaç örnek public/images/ konumunda saklanır).

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

11. Panoyu izleyin

Web uygulamanızı dağıttıktan ve bir kullanıcı olarak resimli 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.

2. İz için belirli ölçümleri incelemek üzere Süreler tablosunda saveImageMessage'a tıklayın.

3. Görsel boyutlarının dağılımını gözden geçirmek için Topla'ya tıklayın. Bu özel iz için görüntü boyutunu ölçmek üzere eklediğiniz metriği görebilirsiniz.

4. Bir önceki adımda Topla'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ı incelemek için Daha fazlasını görüntüle'yi tıklayın.

5. Açılan sayfada imageType seçeneğine tıklayarak süre verilerini image MIME tipine göre segmentlere ayırabilirsiniz. Bu özel veri, özel izlemenize eklediğiniz imageType özniteliği nedeniyle günlüğe kaydedildi.

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 bir listesini görmek için Ağ 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!

12. Tebrikler!

Performans izleme için Firebase SDK'sını 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 metriklerin kaydedilmesi.
• Özel öznitelikleri kullanarak performans verilerini bölümlere ayırma.
• Uygulamanızın performansına ilişkin içgörüler elde etmek için performans izleme kontrol panelini nasıl kullanacağınızı anlama.

Daha fazla bilgi edin:

• firebase.google.com.tr
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/hızlı/