Catch up on everthing we announced at this year's Firebase Summit. Learn more

Sayfa yükleme performansı verileri hakkında bilgi edinin (web uygulamaları)

Uygulamanızda izlenen süreçler hakkında toplamak verilere kullandığı izlerini Performans İzleme. İzleme, uygulamanızda zaman içinde iki nokta arasında yakalanan verileri içeren bir rapordur.

Web uygulamaları için otomatik Performans İzleme bir sayfa yükleme iz denilen uygulamanızın her sayfa için bir iz toplar. Her sayfa yükleme izlemesi, aşağıdaki varsayılan metrikleri toplar:

  • İlk boya - tedbirler olduğunu bir metrik zaman bir sayfaya kullanıcı dolaşır ve ne zaman herhangi bir görsel değişiklik olur arasındaki zaman

  • İlk contentful boya - Bir metrik o tedbirlerin bir resim veya metin gibi bir sayfaya bir kullanıcı gider ve anlamlı içerik ekranlar, arasındaki zaman

  • DOMInteractive - Bir metrik ölçen bir sayfa ve kullanıcı dolaşır sayfa kullanıcı için etkileşimli dikkate alındığında arasındaki zaman

  • domContentLoadedEventEnd - Bir metrik olduğunu önlemler kullanıcı bir sayfaya gider ve arasındaki zaman ilk HTML belgesi tamamen yüklenip çözümlenir zaman

  • loadEventEnd - Bir metrik o tedbirlerin zaman sayfaya kullanıcı gider ve geçerli belgenin yük olay tamamlanıncaya arasındaki zaman

  • İlk giriş gecikmesi - tedbirler olduğunu bir metrik zaman bir sayfayla Kullanıcı etkileşimde ve ne zaman tarayıcı bu girişe yanıt verdiklerini yapabiliyor arasındaki zaman

Sen Performans gösterge tablosunun alt kısmında izleri tablonun Sayfa yük alt sekmesinde, bu izlerin veri görebilirsiniz (hakkında daha fazla bilgi konsolunu kullanarak bu sayfada sonrası).

Sayfa yükleme izinin tanımı

Bu izleme, uygulamanızdaki sayfaların nasıl yüklendiğine, özellikle de duyarlı bir uygulama gibi ortak yükleme noktalarına ulaşmanın ne kadar sürdüğüne ilişkin çeşitli ölçütleri ölçer.

Sayfa yükleme izleri uygulamanızın izlemenize yardımcı çekirdek ağ vitals ilk contentful boya gibi.

Sayfa yükleme izleri için toplanan metrikler

Bu izler kullanıma hazır izlerdir, bu nedenle bunlara özel metrikler veya özel nitelikler ekleyemezsiniz.

İlk boya

Bu ölçüm, herhangi bir görsel değişiklik gerçekleştiğinde kullanıcı sayfaya gider ve zaman arasındaki süre.

Bu metrik sayfa yükleme başladığını ileri kullanıcılara ilk boya sinyalleri beri yararlıdır.

  • Kullanıcı bir sayfaya gittiğinde başlar.

  • Herhangi bir görsel bir değişiklik, bir arka plan renk değişimi veya bir başlık yüklenmesi dahil, olduğunda durdurur.

İlk içerikli boya

Bu metrik, bir kullanıcının bir sayfada gezinmesi ile resim veya metin gibi anlamlı içeriğin görüntülenmesi arasındaki süreyi ölçer.

Bu metrik, kullanıcılarınızın yalnızca yeni bir arka plan rengi veya üst bilgi yerine uygulamanızın gerçek içeriğinden herhangi birini ne kadar sürede gördüğüne ilişkin bilgiler için kullanışlıdır.

  • Kullanıcı bir sayfaya gittiğinde başlar.

  • Tarayıcı herhangi bir metin, resim (arka plan resimleri dahil), beyaz olmayan tuval veya SVG dahil olmak üzere DOM'den ilk içeriği oluşturduktan hemen sonra durur.

domEtkileşimli

Bu metrik, kullanıcının bir sayfaya gitmesi ile sayfanın kullanıcı için etkileşimli olarak kabul edilmesi arasındaki süreyi ölçer.

Bu metrik, kullanıcılarınızın uygulamanızdaki düğmeler ve köprüler gibi öğeleri yalnızca ekranda görmek yerine gerçekte ne kadar sürede etkileşime girebileceklerine ilişkin bilgiler için yararlıdır. Bu tarayıcı etkileşimine yanıt anlamına gelmez Not (bu metrik için, bakınız ilk giriş gecikmesi iz ).

  • Kullanıcı bir sayfaya gittiğinde başlar.

  • Kullanıcı aracısı, geçerli HTML belgesinin hazır olma durumunu "etkileşimli" olarak ayarlamadan hemen önce durur.

domContentLoadedEventEnd

Bu metrik, kullanıcının bir sayfaya gitmesi ile ilk HTML belgesinin tamamen yüklenip ayrıştırılması arasındaki süreyi ölçer.

  • Kullanıcı bir sayfaya gittiğinde başlar.

  • İlk HTML belgesi tamamen yüklendi ve (ayrıştırılır hemen sonra durdurur DOMContentLoaded ), ancak bu stil, görüntüler ve alt çerçevelerin bitmiş yükleme olduğu anlamına gelmez.

loadEventEnd

Bu ölçüm, kullanıcı geçerli belgenin yük olay tamamlanıncaya sayfasına ve ne zaman gider arasındaki zaman.

Bu metrik, stil sayfaları ve resimler de dahil olmak üzere tüm içeriğinizin yüklenmesinin ne kadar sürdüğünü anlamak için kullanışlıdır.

  • Kullanıcı bir sayfaya gittiğinde başlar.

  • Geçerli HTML belgesinin yükleme olayı tamamlandıktan hemen sonra durur.

İlk giriş gecikmesi

Bu metrik, kullanıcının bir sayfayla etkileşime girmesi ile tarayıcının bu girdiye yanıt verebilmesi arasındaki süreyi ölçer.

Bu metrik, bir kullanıcı etkileşimine yanıt veren tarayıcının, kullanıcılarınıza uygulamanızın yanıt verme hızı hakkında ilk izlenimlerini vermesi nedeniyle yararlıdır.

  • Bir düğme veya köprü tıklamak gibi sayfada bir eleman ile kullanıcı ilk etkileşimde bulunduğu başlatır.

  • 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 çoklu doldurma kitaplığını eklemeniz gerektiğini unutmayın. Yükleme talimatları için kütüphanenin bakın belgeler .

Performans verilerini izleyin, görüntüleyin ve filtreleyin

Gerçek zamanlı performans verilerini görüntülemek için uygulamanızın gerçek zamanlı veri işleme ile uyumlu bir Performance Monitoring SDK sürümü kullandığından emin olun. Daha fazla bilgi .

Gösterge tablonuzdaki temel metrikleri izleyin

Senin önemli ölçütleri trend öğrenmek için, Performans Gösterge tablosunun en üstünde metrikleriniz kurulu ekleyin. Haftadan haftaya değişiklikleri görerek gerilemeleri hızlı bir şekilde tanımlayabilir veya kodunuzdaki son değişikliklerin performansı iyileştirdiğini doğrulayabilirsiniz.

Firebase Performance Monitoring panosundaki metrik panosunun bir görüntüsü

Gidin ölçümlerini kuruluna bir metrik eklemek için Performans pano Firebase konsolunda, ardından Tablosu sekmesini tıklayın. Boş bir metrik kartı tıklayın, ardından panonuza eklemek için mevcut bir metrik seçin. Click değiştirmek veya bir metrik kaldırmak gibi fazla seçenek için nüfuslu metrik kartta.

Metrik panosu, zaman içinde toplanan metrik verilerini hem grafik biçiminde hem de sayısal yüzde değişimi olarak gösterir.

Hakkında daha fazla bilgi panosunu kullanarak .

İzleri ve verilerini görüntüleyin

Gidin izlerini görüntülemek için Performans pano izleri masaya aşağı kaydırın Firebase konsolunda, ardından uygun alt sekmesini tıklayın. Tablo, her iz için bazı önemli metrikleri görüntüler ve hatta belirli bir metrik için yüzde değişimine göre listeyi sıralayabilirsiniz.

İzler tablosunda bir iz adına tıklarsanız, izi keşfetmek ve ilgilenilen metriklerin detayına inmek için çeşitli ekranlara tıklayabilirsiniz. En sayfalarda, Filtre kullanabilirsiniz örneğin özelliğine göre verileri filtrelemek için (ekranın sol üst) düğmesini:

özniteliğe göre filtrelenen Firebase Performance Monitoring verilerinin bir görüntüsü
  • Sayfa URL'ye göre filtre sitenizin belirli bir sayfaya ilişkin verileri görüntülemek için
  • Etkili bağlantı türüne göre filtre öğrenmeyi bir 3g bağlantısı etkiler uygulamanızı
  • Ülkeye göre Filtre emin veritabanı konumu belirli bir bölgeyi etkileyen olmadığından emin olmak için

Hakkında daha fazla bilgi için izleri verilerine bakmayı .

Sonraki adımlar