Web için Firebase Performance Monitoring

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 sonraki bir sürüm olduğundan emin olun.

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

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

2. 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 kullanıyoruz. Bu yapılandırmayı sizin için yapacak özel bir komut dosyası 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>

3. 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();

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 göz atın.

İ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 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 izler eklemeyi öğreneceksiniz. Yalnızca otomatik izlemeleri toplamak istiyorsanız "Yayınlama ve resim göndermeye başlama" bölümüne gidin.

6. Uygulamanıza özel iz ekleyin

Performans İzleme, özel izler oluşturmanıza olanak tanır. Özel iz, uygulamanızdaki yürütme bloğunun süresini gösteren bir rapordur. SDK'nın sağladığı 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ı 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 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 bir izlemeyi 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 bir 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 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 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'nin 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 bir izleme 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() işlevindeki süreleri alır ve özel izlemeler olarak günlüğe kaydeder.

User Timing API'yi kullanarak uygulama stil komut dosyaları yükleme 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.

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

dizin.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. 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ö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 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 inceleme

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 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 izleme özelliğinin otomatik olarak topladığı çeşitli performans metrikleri gösterilir.
• Süreler tablosunda, uygulamanızın kodunda tanımladığınız tüm özel izlemeler 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 iz için resim boyutunu ölçmek amacıyla 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ı bir şekilde incelemek için Daha fazla görüntüle'yi 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 izinize 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 isteklere göz atın ve uygulamanızın performansını iyileştirmek için 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 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ı öğrenme

Daha fazla bilgi:

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