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

Bu codelab, Firebase Web SDK'sını kullanarak bir sohbet uygulaması oluşturmayı öğrendiğiniz Firebase web codelab'inin devamı niteliğindedir. Web'de Firebase platformunu sohbet uygulaması oluşturarak kullanmayı öğrenmek istiyorsanız önce Firebase web codelab'ini inceleyin. Firebase platformunu ve CLI'yı nasıl kullanacağınızı biliyorsanız ve Firebase Performance Monitoring hakkında bilgi edinmek istiyorsanız doğru yerdesiniz.

Neler öğreneceksiniz?

• Kullanıma hazır metrikler (sayfa yükleme ve ağ istekleri) elde etmek için web uygulamanıza Firebase Performance Monitoring'i nasıl ekleyeceğinizi öğrenin.
• Özel izlerle belirli bir kod parçasını ölçme
• Özel bir izle ilişkili ek özel metrikleri kaydetme
• Performans verilerinizi özel özelliklerle daha ayrıntılı şekilde segmentlere ayırma
• Web uygulamanızın performansını anlamak için performans izleme kontrol panelini kullanma

Gerekenler

• Seçtiğiniz IDE veya metin düzenleyici (ör. WebStorm, Atom, Sublime veya VS Code)
• Terminal/konsol
• Chrome gibi istediğ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 klonlayın:

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

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

friendlychat-web deposunda birden fazla platform için örnek projeler bulunur.

Bu codelab'de yalnızca şu iki depo kullanılır:

• 📁 performance-monitoring-start: Bu Codelab sırasında temel alacağınız başlangıç kodu.
• 📁 performance-monitoring: Tamamlanmış örnek uygulamanın kodu.

Not: Tamamlanmış uygulamayı çalıştırmak istiyorsanız Firebase konsolunda Firebase projesi oluşturmanız gerekir.

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

IDE'nizi kullanarak klonlanmış depodaki 📁 performance-monitoring-start dizinini açın veya içe aktarın. Bu 📁 performance-monitoring-start dizini, Codelab'in başlangıç kodunu (bir sohbet web uygulaması) içerir.

3. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturma

1. Google Hesabınızı kullanarak Firebase konsolunda oturum açın.
2. Yeni bir proje oluşturmak için düğmeyi tıklayın ve ardından bir proje adı girin (örneğin, FriendlyChat).
   

   Bu proje adı, Firebase arayüzlerinde görünen ad olarak kullanılır ve Firebase, bu proje adına dayalı olarak benzersiz bir proje kimliğini otomatik olarak oluşturur. Tercih ettiğiniz proje kimliğini ayarlamak için Düzenle simgesini tıklayabilirsiniz. Ancak proje oluşturulduktan sonra bu kimliği değiştiremezsiniz.

   Proje kimliğinizi unutmayın. Firebase projenizi Firebase CLI'de tanımlamak için daha sonra bu kimliğe ihtiyacınız olacak. Kimliğinizi unutursanız daha sonra Proje Ayarları'nda bulabilirsiniz.

3. Devam'ı tıklayın.
4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
5. (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
6. Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle, Google Analytics seçeneğini devre dışı bırakın.
7. Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı 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. Bu da projenin bir Cloud Faturalandırma Hesabı'na bağlı olduğu anlamına gelir.

• Cloud Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
• Firebase ve Google Cloud'u yeni kullanmaya başladıysanız 300 ABD doları değerinde kredi ve ücretsiz deneme Cloud Faturalandırma hesabı için uygun olup olmadığınızı kontrol edin.
• Bu codelab'i bir etkinliğin parçası olarak yapıyorsanız düzenleyicinize Cloud kredisi olup olmadığını sorun.

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

1. Firebase konsolunda planınızı yükseltmeyi seçin.
2. Blaze planını seçin. Bir Cloud Faturalandırma hesabını projenize 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.

Not: Bu codelab'i tamamladıktan sonra projenizi ücretsiz (Spark) fiyatlandırma planına düşürebilirsiniz.

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 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ı uygulayın. Ekrandaki talimatları şimdi uygulamanız gerekmez. Bu talimatlar, bu Codelab'in sonraki adımlarında ele alınacaktır.

Firebase Authentication için Google ile oturum açmayı etkinleştirme

Kullanıcıların Google Hesaplarıyla sohbet uygulamasında 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ştirin 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 ile oturum açma sağlayıcısını etkinleştirin ve 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.

Firebase projenizde Cloud Firestore'u nasıl ayarlayacağınız aşağıda açıklanmıştır:

1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Firestore database'i (Firestore veritabanı) seçin.
2. Create database'i (Veritabanı oluştur) tıklayın.
3. Veritabanı Kimliği'ni (default) olarak bırakın.
4. Veritabanınız için bir konum seçin ve 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 codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza güvenlik kuralları eklemeden uygulamayı herkese açık şekilde dağıtmayın veya herkese açık olarak kullanıma sunmayın.
6. Oluştur'u tıklayın.

Cloud Storage for Firebase'i kurma

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

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

1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Storage'ı (Depolama) seçin.
2. Başlayın'ı tıklayın.
3. Varsayılan depolama paketinize bir konum seçin.
   US-WEST1, US-CENTRAL1 ve US-EAST1 bölgelerindeki paketler, Google Cloud Storage için "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 codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Depolamapaketinize güvenlik kuralları eklemeden uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın.
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 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. Aşağıdaki komutu terminalde çalıştırarak CLI'nın doğru şekilde yüklendiğini doğrulayın:

firebase --version

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

3. Aşağıdaki komutu çalıştırarak Firebase CLI'yı yetkilendirin:

firebase login

Web uygulaması şablonunu, Firebase Hosting için uygulamanızın yapılandırmasını uygulamanızın yerel dizininden (codelab'de daha önce klonladığınız depo) çekecek şekilde ayarladık. Ancak yapılandırmayı çekmek 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 diğer ad verin.

Birden fazla ortamınız (üretim, hazırlık vb.) varsa takma ad kullanışlıdır. Ancak bu codelab'de 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ı ile entegrasyon yapmanın ç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 izlemeyi ekleme ve Firebase'i başlatma

1. src/index.js dosyasını açın, ardından Firebase Performance Monitoring SDK'sını eklemek için TODO satırının 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 nesnesiyle başlatmamız gerekir. Firebase Hosting'i kullandığımız için bu yapılandırmayı sizin için yapacak özel bir komut dosyası içe aktarabilirsiniz. Bu codelab için public/index.html dosyasının en altına aşağıdaki satırı sizin için ekledik ancak bu satırın orada olduğundan emin olmak için 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 satırının 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 toplayacak. Otomatik sayfa yükleme izleri hakkında daha fazla bilgi edinmek için belgelere bakın.

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

Tarayıcının bir kullanıcı etkileşimine yanıt vermesi, kullanıcılara uygulamanızın duyarlılığı hakkında ilk izlenimlerini kazandırdığı için ilk giriş gecikmesi yararlıdır.

İlk giriş gecikmesi, kullanıcının sayfadaki bir öğeyle ilk kez etkileşime girmesiyle (ör. bir düğmeyi veya köprüyü tıklamasıyla) başlar. Tarayıcı girişe yanıt verebildikten hemen sonra 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çın ve aşağıdaki satırın yorum işaretini 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.

Web için Firebase Performance Monitoring SDK'sı ile entegrasyon yapmanın başka yolları da vardır. Ayrıntılar için Web için Performans İzleme'yi kullanmaya başlama başlıklı makaleyi inceleyin.

Aşağıdaki adımlarda, Firebase Performance Monitoring'i kullanarak özel izler ekleme hakkında bilgi edineceksiniz. Yalnızca otomatik izleri toplamak istiyorsanız "Dağıtın ve görüntü göndermeye başlayın" bölümüne gidin.

6. Uygulamanıza özel izleme ekleme

Performans İzleme, ö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 izin başlangıç ve bitişini belirlemek için SDK'nın sağladığı API'lerden yararlanırsınız.

1. src/index.js dosyasında bir performans nesnesi alın, 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 için izin 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 izlemeyi başarıyla tanımladınız. Kodunuzu dağıttıktan sonra, kullanıcı bir resim mesajı gönderirse özel izlemenin süresi kaydedilir. Bu sayede, gerçek dünyadaki kullanıcıların sohbet uygulamanızda resim göndermesi ne kadar sürdüğü hakkında fikir edinebilirsiniz.

7. Uygulamanıza özel bir metrik ekleyin.

Bir özel izi daha da yapılandırarak kendi kapsamında gerçekleşen performansla ilgili etkinliklere ait özel metrikleri kaydetmesini sağlayabilirsiniz. Örneğin, son adımda tanımladığımız özel izleme için yükleme süresinin resmin boyutundan etkilenip etkilenmediğini araştırmak üzere bir metrik kullanabilirsiniz.

1. Önceki adımdaki özel izlemeyi (src/index.js dosyanızda tanımlanır) bulun.
2. Yüklenen resmin boyutunu kaydetmek için TODO simgesinin 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üresini ve yüklenen resim boyutunu kaydetmesini sağlar.

8. Uygulamanıza özel özellik ekleme

Önceki adımlara ek olarak, ö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 izi kullanın.
2. Yüklenen resmin MIME türünü kaydetmek için TODO işaretinin 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 resim türüne göre özel izleme süresini sınıflandırmasına olanak tanır.

9. [Genişletme] User Timing API ile özel izleme ekleme

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, User Timing API'yi kullanarak özel izlemeler eklemeye devam edebilirsiniz. Firebase Performance SDK'sı, süreleri measure() işlevinden alır ve bunları özel izlemeler olarak kaydeder.

Uygulama stil komut dosyalarının yüklenme süresini Kullanıcı Zamanlaması API'si ile ölçeceğiz.

1. public/index.html dosyasında, uygulama stil komut dosyalarının yüklenmesinin başlangıcı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 stil oluşturma komut dosyası yüklemesinin 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 Console'da loadStyling adlı özel bir izleme bulabilirsiniz.

10. Dağıtma ve görüntü göndermeye başlama

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

3. Konsolda aşağıdakiler gösterilmelidir:

=== 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 Firebase Hosting kullanılarak tamamen barındırılan web uygulamanızı, size ait iki Firebase alt alan adında (https://<projectId>.firebaseapp.com ve https://<projectId>.web.app) ziyaret edin.

Performans izlemenin etkinleştirildiğini doğrulama

Firebase konsolunu açın ve Performans sekmesine gidin. "SDK algılandı" mesajını içeren bir karşılama mesajı görüyorsanız Firebase Performance Monitoring ile entegrasyonu başarıyla tamamlamışsınızdır.

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ğıtımını test edebilmek 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österilmelidir.

11. Kontrol panelini izleme

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

Not: Performans verileri genellikle 12 saat içinde gösterilir. Firebase konsolunda herhangi bir sonuç görmüyorsanız daha sonra tekrar kontrol etmeyi unutmayın.

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 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 tarafından otomatik olarak toplanan ç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 üzere 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üresini 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'ı tıklayarak süre verilerini resim MIME türüne göre segmentlere ayırabilirsiniz. Bu özel veriler, özel izlemenize eklediğiniz imageType özelliği nedeniyle 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 istekleri inceleyin ve uygulamanızın performansını artıracak 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 izlemeler ve özel izlemeler topladınız.

İşlediğimiz konular:

• Firebase Performance Monitoring SDK'sını web uygulamanıza ekleme
• Kodunuza özel izler ekleme.
• Özel izlemeyle ilişkili özel metrikleri kaydetme.
• Performans verilerini özel özellikler kullanarak segmentlere ayırma.
• Uygulamanızın performansı hakkında bilgi edinmek için performans izleme kontrol panelini kullanmayı öğrenin.

Daha fazla bilgi:

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