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-friendchat.web.app/ adresini ziyaret edin.
Ne öğreneceksin
- Kullanıma hazır ölçümler (sayfa yükleme ve ağ istekleri) elde etmek için web uygulamanıza Firebase Performance Monitoring nasıl eklenir?
- Özel izlerle belirli bir kod parçası nasıl ölçülür?
- Özel bir izlemeye bağlı ek özel ölçümler nasıl kaydedilir?
- Performans verilerinizi özel özelliklerle nasıl daha fazla segmentlere ayırabilirsiniz?
- Web uygulamanızın performansını anlamak için performans izleme kontrol panelini nasıl kullanabilirsiniz?
İhtiyacınız olan şey
2. Örnek kodu alın
Codelab'in GitHub deposunu komut satırından kopyalayın:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternatif olarak, git yüklü değilse repo'yu zip dosyası olarak indirebilirsiniz .
Başlangıç uygulamasını içe aktar
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şturun ve kurun
Firebase projesi oluşturma
- Firebase konsolunda Proje Ekle'yi tıklayın.
- Firebase projenize
FriendlyChat
adını verin.
Firebase projenizin proje kimliğini unutmayın.
- Proje Oluştur'a tıklayın.
Projeye Firebase web uygulaması ekleme
- Web simgesini tıklayın yeni bir Firebase web uygulaması oluşturmak için.
- 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. - Uygulamayı kaydet'i tıklayın.
- 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 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 gerekecek:
- Firebase konsolunda sol paneldeki Geliştirme bölümünü bulun.
- Kimlik Doğrulama'yı ve ardından Oturum açma yöntemi sekmesini tıklayın ( konsola gidin ).
- 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:
- Firebase konsolunun Geliştirme bölümünde Veritabanı'nı tıklayın.
- Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
- Test modunda başlat seçeneğini seçin ve ardından güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuduktan sonra Etkinleştir'e tıklayın.
Bu codelab'in başlangıç kodu daha güvenli kurallar içeriyor. Bunları daha sonra codelab'de konuşlandıracağız.
Bulut Depolamayı Etkinleştir
Web uygulaması, resimleri depolamak, yüklemek ve paylaşmak için Firebase için Cloud Storage'ı kullanır.
Cloud Storage'ı etkinleştirmeniz gerekecek:
- Firebase konsolunun Geliştirme bölümünde Depolama'yı tıklayın.
- Başlayın'ı tıklayın.
- Firebase projenizin güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuyun ve ardından Anladım'a tıklayın.
Başlangıç kodu, daha sonra codelab'de uygulayacağımız temel bir güvenlik kuralını içerir.
4. Firebase komut satırı arayüzünü yükleyin
Firebase komut satırı arayüzü (CLI), web uygulamanızı yerel olarak sunmak ve web uygulamanızı Firebase projenize dağıtmak için Firebase Hosting'i kullanmanızı sağlar.
- Firebase belgelerindeki bu talimatları izleyerek CLI'yi yükleyin.
- Bir terminalde aşağıdaki komutu çalıştırarak CLI'nin doğru şekilde kurulduğunu doğrulayın:
firebase --version
Firebase CLI sürümünüzün v8.0.0 veya üzeri olduğundan emin olun.
- 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 gerekiyor.
- Komut satırınızın uygulamanızın yerel
performance-monitoring-start
dizinine eriştiğinden emin olun. - Aşağıdaki komutu çalıştırarak uygulamanızı Firebase projenizle ilişkilendirin:
firebase use --add
- İstendiğinde proje kimliğinizi seçin ve ardından Firebase projenize bir takma ad verin.
Birden fazla ortamınız (prodüksiyon, hazırlama vb.) varsa takma ad kullanışlıdır. Ancak bu codelab için sadece default
takma adını kullanalım.
- Komut satırınızdaki kalan talimatları izleyin.
5. Firebase Performance Monitoring ile entegre edin
Web için Firebase Performance Monitoring SDK ile entegrasyonun ç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 izleme ekleyin ve Firebase'i başlatın
-
src/index.js
dosyasını açın ve Firebase Performance Monitoring SDK'yı eklemek içinTODO
altına aşağıdaki satırı ekleyin.
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- Ayrıca Firebase SDK'sını, Firebase projesi ve kullanmak istediğimiz web uygulaması hakkında bilgiler içeren bir yapılandırma nesnesiyle başlatmamız gerekiyor. Firebase Hosting kullandığımız için bu yapılandırmayı sizin için yapacak özel bir komut dosyasını içe aktarabilirsiniz. Bu codelab için,
public/index.html
dosyasının altına sizin için aşağıdaki satırı zaten ekledik, ancak orada olup olmadığını bir kez daha kontrol edin.
indeks.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- Performans izlemeyi başlatmak için
src/index.js
dosyasındaTODO
altına aşağıdaki satırı ekleyin.
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
Performans İzleme artık kullanıcılar sitenizi kullandığında sayfa yükleme ve ağ isteği ölçümlerini sizin için otomatik olarak toplayacak! Otomatik sayfa yükleme izlemeleri hakkında daha fazla bilgi edinmek için belgelere bakın .
İlk giriş gecikmesi çoklu doldurma kitaplığını ekleyin
Bir 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ğinden , ilk giriş gecikmesi faydalıdır.
İlk giriş gecikmesi, kullanıcının sayfadaki bir öğeyle (bir düğmeyi veya köprüyü tıklamak gibi) ilk kez etkileşime girmesiyle başlar. Tarayıcı girişe yanıt verdikten hemen sonra durur; bu, tarayıcının içeriğinizi yüklemekle veya ayrıştırmakla meşgul olmadığı anlamına gelir.
Bu çoklu doldurma 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.
indeks.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 Firebase Performance Monitoring ile kodunuzdaki entegrasyonu tamamladınız!
Aşağıdaki adımlarda Firebase Performance Monitoring'i kullanarak özel izler eklemeyi öğreneceksiniz. Yalnızca otomatik izleri toplamak istiyorsanız "Dağıt ve görüntüleri 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 yürütme engellemesinin süresine ilişkin bir rapordur. SDK tarafından sağlanan API'leri kullanarak özel bir izlemenin başlangıcını ve bitişini tanımlarsınız.
-
src/index.js
dosyasında bir performans nesnesi alın ve ardından resim mesajını yüklemek için özel bir izleme oluşturun.
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- Özel bir iz kaydetmek için izin başlangıç noktasını ve durma 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! Kodunuzu dağıttıktan sonra, kullanıcı resimli mesaj gönderirse özel izlemenin süresi kaydedilecektir. Bu size, gerçek dünyadaki kullanıcıların sohbet uygulamanıza resim göndermesinin ne kadar süreceği konusunda bir fikir verecektir.
7. Uygulamanıza özel bir metrik ekleyin.
Kapsamında meydana gelen performansla ilgili olaylara ilişkin özel ölçümleri kaydetmek için özel bir izlemeyi daha da yapılandırabilirsiniz. Örneğin, son adımda tanımladığımız özel iz için yükleme süresinin görselin boyutundan etkilenip etkilenmediğini araştırmak için bir metrik kullanabilirsiniz.
- Önceki adımdaki özel izlemeyi bulun (
src/index.js
dosyanızda tanımlanmıştır). - Yüklenen görselin 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 ölçüm, performans izlemenin yüklenen görüntü boyutunun yanı sıra özel izleme süresini de kaydetmesine olanak tanır.
8. Uygulamanıza özel bir özellik ekleyin
Önceki adımlardan yola çıkarak, özel izlerinizdeki özel nitelikleri 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 görüntü dosyasının MIME türünü toplayabilirsiniz.
-
src/index.js
dosyanızda tanımlanan özel izlemeyi kullanın. - 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 özellik, performans izlemenin, yüklenen görüntü türüne göre özel izleme süresini kategorilere ayırmasını sağlar.
9. [Genişlet] Kullanıcı Zamanlaması API'si ile özel bir izleme 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 yönde etkilemeyecek şekilde tasarlanmıştır. SDK yüklenmeden önce Firebase Performance Monitoring API kullanılamaz. Bu senaryoda, Kullanıcı Zamanlaması API'sini kullanarak özel izler eklemeye devam edebilirsiniz. Firebase performans SDK'sı, ölçüm() öğesinden süreleri alacak ve bunları özel izler olarak günlüğe kaydedecektir.
Kullanıcı Zamanlaması API'sini kullanarak uygulama stili komut dosyalarının yüklenme süresini ölçeceğiz.
-
public/index.html
dosyasına, uygulama stili komut dosyalarının yüklenmesinin başlangıcını işaretlemek için aşağıdaki satırı ekleyin.
indeks.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- 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.
indeks.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ğıtma
Firebase Performance Monitoring'i kodunuza ekledikten sonra kodunuzu Firebase Hosting'e dağıtmak için şu adımları izleyin:
- Komut satırınızın uygulamanızın yerel
performance-monitoring-start
dizinine eriştiğinden emin olun. - Aşağıdaki komutu çalıştırarak dosyalarınızı Firebase projenize dağıtın:
firebase deploy
- Konsol aşağıdakileri görüntülemelidir:
=== 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
- Artık tamamen Firebase Hosting kullanılarak kendi Firebase alt alan adlarınızdan ikisinde barındırılan web uygulamanızı ziyaret edin:
https://<projectId>.firebaseapp.com
vehttps://<projectId>.web.app
.
Performans izlemenin etkin olduğunu doğrulayın
Firebase konsolunu açın ve Performans sekmesine gidin. "SDK algılandı" yazan bir hoş geldiniz mesajı görürseniz, Firebase Performance Monitoring ile başarılı bir şekilde entegre olmuşsunuz demektir!
Resimli mesaj gönder
Sohbet uygulamanıza görseller göndererek bazı performans verileri oluşturun.
- Sohbet uygulamanızda oturum açtıktan sonra resim yükleme düğmesini tıklayın .
- Dosya seçiciyi kullanarak bir görüntü dosyası seçin.
- Özel ölçümlerin ve özel niteliklerin dağıtımını test edebilmek için birden fazla resim göndermeyi deneyin (birkaç örnek
public/images/
dosyasında saklanır).
Uygulamanın kullanıcı arayüzünde seçtiğiniz görsellerle birlikte yeni mesajlar görüntülenmelidir.
11. Kontrol panelini izleyin
Web uygulamanızı dağıttıktan ve kullanıcı olarak resim mesajları gönderdikten sonra, performans izleme kontrol panelinde (Firebase konsolunda) performans verilerini inceleyebilirsiniz.
Kontrol panelinize erişin
- Firebase konsolunda
Friendly Chat
uygulamanızın bulunduğu projeyi seçin. - 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.
- Cihazda sekmesine tıklayın.
- Sayfa yüklemeleri 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.
- İzlemeye ilişkin belirli ölçümleri incelemek için Süreler tablosunda saveImageMessage'a tıklayın.
- Görüntü boyutlarının dağılımını incelemek için Birleştir'i tıklayın. Bu özel iz için görüntü boyutunu ölçmek üzere eklediğiniz ölçümü görebilirsiniz.
- Önceki adımda Topla'nın yanındaki Zaman içinde seçeneğine tıklayın. Ayrıca özel izin Süresini de görüntüleyebilirsiniz. Toplanan verileri daha ayrıntılı olarak incelemek için Daha fazlasını görüntüle'ye tıklayın.
- Açılan sayfada imageType seçeneğine tıklayarak süre verilerini görsel MIME türüne göre segmentlere ayırabilirsiniz. Bu belirli veriler, özel izlemenize eklediğiniz imageType özelliğ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.
- Performans izleme panosunun ana ekranına geri dönün.
- Web uygulamanıza yönelik ağ isteği girişlerinin listesini görmek için Ağ sekmesine tıklayın.
- Yavaş istekleri belirlemek için bunlara göz atın 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'yı 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 Performans İzleme SDK'sını web uygulamanıza ekleme.
- Kodunuza özel izler ekleme.
- Özel izlemeye bağlı özel ölçümleri kaydetme.
- Özel nitelikleri kullanarak performans verilerini segmentlere ayırma.
- Uygulamanızın performansına ilişkin öngörüler elde etmek için performans izleme kontrol panelini nasıl kullanacağınızı anlama.