Performance Monitoring, uygulamanızdaki izlenen süreçlerle ilgili verileri toplamak için izlemeleri kullanır. İzleme, uygulamanızdaki iki zaman noktası arasında yakalanan verileri içeren bir rapordur.
Web uygulamaları için Performance Monitoring, uygulamanızın her sayfası için sayfa yükleme izleme adı verilen bir izlemeyi otomatik olarak toplar. Her sayfa yükleme izi aşağıdaki varsayılan metrikleri toplar:
Largest Contentful Paint: Kullanıcının bir sayfaya gittiği andan en büyük görsel değişikliğin gerçekleştiği ana kadar geçen süreyi ölçen metrik
interaction to next paint: Kullanıcının sayfayla etkileşime geçtiği andan sonraki boyamanın gerçekleştiği ana kadar geçen en uzun süreyi ölçen metrik
kümülatif düzen kayması: Sayfadaki beklenmedik düzen değişikliklerini ölçen ve puanlayan bir metrik
ilk boyama: Kullanıcının bir sayfaya gittiği andan herhangi bir görsel değişikliğin gerçekleştiği ana kadar geçen süreyi ölçen metrik
İlk zengin içerikli boyama: Kullanıcının bir sayfaya gittiği andan anlamlı içerik (ör. resim veya metin) görüntülendiği ana kadar geçen süreyi ölçen bir metrik
domInteractive: Kullanıcının bir sayfaya gittiği andan sayfanın kullanıcı için etkileşimli olarak kabul edildiği ana kadar geçen süreyi ölçen bir metrik
domContentLoadedEventEnd: Kullanıcının bir sayfaya gittiği andan ilk HTML belgesinin tamamen yüklendiği ve ayrıştırıldığı ana kadar geçen süreyi ölçen bir metrik
loadEventEnd: Kullanıcının sayfaya gittiği andan geçerli belgenin yükleme etkinliğinin tamamlandığı ana kadar geçen süreyi ölçen metrik
ilk giriş gecikmesi: Kullanıcının bir sayfayla etkileşime geçtiği andan tarayıcının bu girişe yanıt verebildiği ana kadar geçen süreyi ölçen bir metrik
Bu izlemelerden elde edilen verileri, Performans kontrol panelinin en altındaki izlemeler tablosunun Sayfa yükleme alt sekmesinde görüntüleyebilirsiniz (Konsol'u kullanma hakkında daha fazla bilgiyi bu sayfanın ilerleyen bölümlerinde bulabilirsiniz).
Sayfa yükleme izinin tanımı
Bu izleme, uygulamanızdaki sayfaların nasıl yüklendiğini, özellikle de duyarlı bir uygulama gibi ortak yükleme noktalarına ulaşmanın ne kadar sürdüğünü gösteren çeşitli metrikleri ölçer.
Sayfa yükleme izleri, uygulamanızın ilk zengin içerikli boyama gibi önemli web verilerini izlemenize yardımcı olur.
Sayfa yükleme izleri için toplanan metrikler
Bu izlemeler hazır izlemeler olduğundan bunlara ek özel metrikler veya özel özellikler ekleyemezsiniz.
Largest Contentful Paint
Bu metrik, kullanıcının bir sayfaya gittiği andan en büyük resim, metin veya video içeriğinin gösterildiği ana kadar geçen süreyi ölçer.
Bu metrik, web sayfasının ana içeriğinin kullanıcı tarafından ne kadar hızlı görülebildiğini anlamak için yararlıdır.
Kullanıcı bir sayfaya gittiğinde başlar.
Resim, metin veya video öğeleri dahil olmak üzere en büyük görsel değişiklik gerçekleştiğinde durur. Daha fazla bilgi için temel web temel metrikleri bölümüne bakın.
"Largest Contentful Paint öğesi", en büyük zengin içerikli boyaya karşılık gelen öğeyi tanımlayan bir özel özelliktir. Bu, en büyük zengin içerikli boyama zamanlamasına ek olarak yakalanır.
Sonraki boyamayla etkileşim
Bu metrik, kullanıcının bir sayfayla etkileşime geçtiği andan sonraki boyama işlemine kadar geçen süreyi ölçer.
Bu metrik, bir sayfanın kullanıcı girişine ne kadar duyarlı olduğunu ölçtüğü için yararlıdır.
Kullanıcı sayfayla etkileşime geçtiğinde (fare tıklaması, cihaza dokunma veya klavye girişi) başlar.
Bir sonraki boyama işlemi gerçekleştiğinde durur. Daha fazla bilgi için temel web temel metrikleri bölümüne bakın.
"Sonraki boyama işlemine kadar geçen en uzun etkileşim", sonraki boyama işlemine kadar geçen en uzun etkileşim etkinliği gerçekleştiğinde kullanıcının etkileşimde bulunduğu öğeyi tanımlayan özel bir özelliktir. Bu, sonraki boyamayla etkileşim zamanlamasına ek olarak yakalanır.
Kümülatif düzen kayması
Bu metrik, sayfanın yaşam döngüsü boyunca gerçekleşen her beklenmedik düzen kayması için düzen kayması puanlarındaki en büyük artışı ölçer.
Beklenmedik düzen değişiklikleri kullanıcı deneyimini bozabileceğinden bu metrik faydalıdır. Metrik, Layout Instability API'ye dayalı bir puan raporlar. Puanın nasıl hesaplandığı hakkında daha fazla bilgi için Core Web Vitals başlıklı makaleyi inceleyin.
"En büyük düzen kayması hedefi", en büyük içerik kayması gerçekleştiğinde kaymış olan öğeyi tanımlayan özel bir özelliktir. Bu, kümülatif düzen kayması puanına ek olarak yakalanır.
İlk boyama
Bu metrik, kullanıcının bir sayfaya gittiği andan herhangi bir görsel değişikliğin gerçekleştiği ana kadar geçen süreyi ölçer.
İlk boyama, kullanıcılarınıza sayfanın yüklenmeye başladığını sinyal verdiğinden bu metrik yararlıdır.
Kullanıcı bir sayfaya gittiğinde başlar.
Arka plan renginde değişiklik veya başlık yükleme dahil herhangi bir görsel değişiklik olduğunda durur.
İlk zengin içerikli boyama
Bu metrik, kullanıcının bir sayfaya gittiği andan anlamlı içerik (ör. resim veya metin) gösterildiği ana kadar geçen süreyi ölçer.
Bu metrik, kullanıcılarınızın uygulamanızın yeni arka plan rengini veya başlığını değil, gerçek içeriğini ne kadar sürede gördüğünü öğrenmek için faydalıdır.
Kullanıcı bir sayfaya gittiğinde başlar.
Tarayıcının metin, resim (arka plan resimleri dahil), beyaz olmayan tuval veya SVG dahil herhangi bir DOM içeriğini oluşturduktan hemen sonra durur.
domInteractive
Bu metrik, kullanıcının bir sayfaya gittiği andan sayfanın kullanıcı için etkileşimli olarak kabul edildiği ana kadar geçen süreyi ölçer.
Bu metrik, kullanıcılarınızın ekranda görmenin ötesinde uygulamanızdaki öğelerle (ör. düğmeler ve köprüler) ne kadar sürede etkileşime geçebileceği hakkında bilgi edinmenize yardımcı olur. Bunun, tarayıcının etkileşime yanıt vereceği anlamına gelmediğini unutmayın (bu metrik için ilk giriş gecikmesi izlemesine bakın).
Kullanıcı bir sayfaya gittiğinde başlar.
Kullanıcı aracısı geçerli HTML dokümanının hazırlık durumunu "etkileşimli" olarak ayarlamadan hemen önce durur.
domContentLoadedEventEnd
Bu metrik, kullanıcının bir sayfaya gitmesi ile ilk HTML dokümanının tamamen yüklenmesi ve ayrıştırılması arasındaki süreyi ölçer.
Kullanıcı bir sayfaya gittiğinde başlar.
İlk HTML belgesinin tamamen yüklendiği ve ayrıştırıldığı (
DOMContentLoaded) anı belirten zaman damgası. Stil sayfası, resim ve alt çerçeve yükleme işleminin tamamlandığını belirtmez.
loadEventEnd
Bu metrik, kullanıcının sayfaya gittiği andan geçerli belgenin yükleme etkinliğinin tamamlandığı ana kadar geçen süreyi ölçer.
Bu metrik, stil sayfaları ve resimler dahil tüm içeriğinizin yüklenmesi için ne kadar süre gerektiğini öğrenmek amacıyla faydalıdır.
Kullanıcı bir sayfaya gittiğinde başlar.
Geçerli HTML belgesinin yükleme etkinliği tamamlandıktan hemen sonra durur.
İlk giriş gecikmesi
Bu metrik, kullanıcının bir sayfayla etkileşime geçtiği andan tarayıcının bu girişe yanıt verebildiği ana kadar geçen süreyi ölçer.
Tarayıcının kullanıcı etkileşimlerine yanıt vermesi, kullanıcılarınıza uygulamanızın duyarlılığıyla ilgili ilk izlenimleri vereceğinden bu metrik faydalıdır.
Kullanıcı sayfadaki bir öğeyle ilk kez etkileşime geçtiğinde (ör. bir düğmeyi veya köprüyü tıkladığında) 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.
İlk giriş gecikmesi metriğini ölçmek için bu metrik için polyfill kitaplığını eklemeniz gerektiğini unutmayın. Yükleme talimatları için kitaplığın dokümanlarına bakın.
Performans verilerini izleme, görüntüleme ve filtreleme
Gerçek zamanlı performans verilerini görüntülemek için uygulamanızın gerçek zamanlı veri işlemeyle uyumlu bir Performance Monitoring SDK sürümü kullandığından emin olun. Gerçek zamanlı performans verileri hakkında daha fazla bilgi edinin.
Kontrol panelinizde önemli metrikleri izleme
Temel metriklerinizin nasıl bir eğilim gösterdiğini öğrenmek için Performans kontrol panelinin üst kısmındaki metrik panosuna ekleyin. Haftadan haftaya gerçekleşen değişiklikleri izleyerek regresyonları hızlıca tanımlayabilir veya kodunuzdaki son değişikliklerin performansı iyileştirip iyileştirmediğini doğrulayabilirsiniz.
Firebase Performance Monitoring kontrol paneli" />
Metrik panosuna metrik eklemek için aşağıdaki adımları uygulayın:
- Firebase konsolunda Performans gösterge tablosuna gidin.
- Boş bir metrik kartını tıklayın ve ardından panonuza eklemek için mevcut bir metrik seçin.
- Daha fazla seçenek için doldurulmuş bir metrik kartında simgesini tıklayın. Örneğin, bir metriği değiştirmek veya kaldırmak için bu seçeneği kullanabilirsiniz.
Metrikler panosu, toplanan metrik verilerini zaman içinde hem grafik biçiminde hem de sayısal yüzde değişimi olarak gösterir.
Kontrol panelini kullanma hakkında daha fazla bilgi edinin.
İzleri ve verilerini görüntüleme
İzlemelerinizi görüntülemek için Firebase konsolundaki Performans kontrol paneline gidin, izlemeler tablosuna gidin ve uygun alt sekmeyi tıklayın. Tabloda, her izleme için bazı önemli metrikler gösterilir. Dilerseniz listeyi belirli bir metriğin yüzde değişimine göre de sıralayabilirsiniz.
Performance Monitoring, Firebase konsolunda metrik değişikliklerini vurgulayan bir sorun giderme sayfası sağlar. Bu sayede, performans sorunlarının uygulamalarınız ve kullanıcılarınız üzerindeki etkisini hızlı bir şekilde giderip en aza indirebilirsiniz. Olası performans sorunları hakkında bilgi edindiğinizde sorun giderme sayfasını kullanabilirsiniz. Örneğin, aşağıdaki senaryolarda:
- Kontrol panelinde alakalı metrikleri seçtiğinizde büyük bir fark olduğunu fark edersiniz.
- İzlemeler tablosunda, en büyük deltaları en üstte gösterecek şekilde sıralama yaparsınız ve önemli bir yüzde değişikliği görürsünüz.
- Performans sorunuyla ilgili sizi bilgilendiren bir e-posta uyarısı alırsınız.
Sorun giderme sayfasına aşağıdaki yöntemlerle erişebilirsiniz:
- Metrik kontrol panelinde Metrik ayrıntılarını görüntüle düğmesini tıklayın.
- Herhangi bir metrik kartında
=> Ayrıntıları görüntüle 'yi seçin. Sorun giderme sayfasında, seçtiğiniz metrik hakkında bilgiler gösterilir. - İzler tablosunda, bir izleme adını veya söz konusu izlemeyle ilişkili satırdaki herhangi bir metrik değerini tıklayın.
- E-posta uyarısında Şimdi incele'yi tıklayın.
İzlemeler tablosunda bir izleme adını tıkladığınızda, ilgilendiğiniz metrikleri ayrıntılı olarak inceleyebilirsiniz. Verileri özelliğe göre filtrelemek için
Firebase Performance Monitoring verileri özelliğe göre filtreleniyor" />
- Sitenizdeki belirli bir sayfanın verilerini görüntülemek için Sayfa URL'si'ne göre filtreleyin.
- 3G bağlantısının uygulamanızı nasıl etkilediğini öğrenmek için Geçerli bağlantı türüne göre filtreleyin
- Veritabanı konumunuzun belirli bir bölgeyi etkilemediğinden emin olmak için Ülke'ye göre filtreleme
İzlemelerinize ait verileri görüntüleme hakkında daha fazla bilgi edinin.
Sonraki adımlar
Performans verilerini incelemek için özellikleri kullanma hakkında daha fazla bilgi edinin.
Firebase konsolunda performans sorunlarını izleme hakkında daha fazla bilgi edinin.
Uygulamanızın performansını düşüren sayfa yüklemeleri için uyarılar oluşturun. Örneğin, belirli bir sayfanın ilk giriş gecikmesi, belirlediğiniz bir eşiği aşarsa ekibiniz için bir e-posta uyarısı yapılandırabilirsiniz.