Check out what’s new from Firebase at Google I/O 2022. Learn more

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

Performans İzleme, uygulamanızda izlenen süreçler hakkında veri toplamak için izleri kullanır. İzleme, uygulamanızda zaman içinde iki nokta 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 izlemesi, aşağıdaki varsayılan metrikleri toplar:

  • first paint — Kullanıcının bir sayfaya gitmesi ile herhangi bir görsel değişikliğin meydana gelmesi arasındaki süreyi ölçen bir metrik

  • ilk içerikli boyama — Bir kullanıcının bir sayfada gezinmesi ile bir resim veya metin gibi anlamlı içeriğin görüntülenmesi arasındaki süreyi ölçen bir metrik

  • domInteractive — Kullanıcının bir sayfada gezinmesi ile sayfanın kullanıcı için etkileşimli olduğu düşünülmesi arasındaki süreyi ölçen bir metrik

  • domContentLoadedEventEnd — Kullanıcının bir sayfaya gitmesi ile ilk HTML belgesinin tamamen yüklenip ayrıştırılması arasındaki süreyi ölçen bir metrik

  • loadEventEnd — Kullanıcının sayfada gezinmesi ile mevcut belgenin yükleme olayının tamamlanması arasındaki süreyi ölçen bir ölçüm

  • ilk giriş gecikmesi — Kullanıcının bir sayfayla etkileşime girmesi ile tarayıcının bu girişe yanıt verebilmesi arasındaki süreyi ölçen bir metrik

Bu izlemelerden gelen verileri, Performans panosunun alt kısmında bulunan izlemeler tablosunun Sayfa yükleme alt sekmesinde görüntüleyebilirsiniz ( konsolun kullanımı hakkında daha sonra bu sayfadan bilgi edinebilirsiniz).

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, ilk içerikli boyama gibi uygulamanızın temel web hayati değerlerini izlemenize yardımcı olur.

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 metrik, kullanıcının bir sayfada gezinmesiyle herhangi bir görsel değişikliğin meydana gelmesi arasındaki süreyi ölçer.

Bu metrik, ilk boyama, kullanıcılarınıza sayfanın yüklenmeye başladığını bildirdiği için kullanışlıdır.

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

  • Arka plan rengi değişikliği veya üstbilgi yükleme dahil olmak üzere herhangi bir görsel değişiklik olduğunda durur.

İlk içerikli boya

Bu metrik, kullanıcının bir sayfada gezinmesiyle 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 gittiği zaman ile sayfanın kullanıcı için etkileşimli olarak kabul edildiği zaman arasındaki süreyi ölçer.

Bu metrik, kullanıcılarınızın uygulamanızdaki düğmeler ve köprüler gibi öğelerle yalnızca ekranda görmek yerine gerçekte ne kadar kısa sürede etkileşim kurabileceklerine ilişkin bilgiler için yararlıdır. Bunun, tarayıcının etkileşime yanıt vereceği anlamına gelmediğini unutmayın (bu ölçüm için ilk giriş gecikme izine bakın).

  • 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üklenip ayrıştırıldıktan hemen sonra durur ( DOMContentLoaded ), ancak bu, stil sayfalarının, resimlerin ve alt çerçevelerin yüklenmesinin tamamlandığı anlamına gelmez.

loadEventEnd

Bu metrik, kullanıcının sayfaya gitmesi ile mevcut belgenin yükleme olayının tamamlanması arasındaki süreyi ölçer.

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

  • Kullanıcı, bir düğmeyi veya köprüyü tıklamak gibi sayfadaki bir öğeyle ilk etkileşim kurduğunda 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 çoklu doldurma kitaplığını eklemeniz gerektiğini unutmayın. Kurulum talimatları için kitaplığın belgelerine bakın.

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. Gerçek zamanlı performans verileri hakkında daha fazla bilgi edinin .

Gösterge tablonuzdaki temel metrikleri izleyin

Temel metriklerinizin nasıl trend olduğunu öğrenmek için bunları Performans panosunun üst kısmındaki metrik panonuza 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ü

Metrik panonuza bir metrik eklemek için şu adımları izleyin:

  1. Firebase konsolundaki Performans panosuna gidin
  2. Gösterge Tablosu sekmesini tıklayın
  3. Boş bir metrik kartı tıklayın, ardından panonuza eklemek için mevcut bir metrik seçin
  4. Daha fazla seçenek için, örneğin bir metriği değiştirmek veya kaldırmak için doldurulmuş bir metrik kartında tıklayın.

Metrik panosu, zaman içinde toplanan metrik verilerini 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üleyin

İzlerinizi görüntülemek için Firebase konsolundaki Performans panosuna gidin, izler tablosuna gidin, ardından uygun alt sekmeyi 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. Çoğu sayfada, verileri özniteliğe göre filtrelemek için Filtre düğmesini (ekranın sol üst köşesinde) kullanabilirsiniz, örneğin:

özniteliğe göre filtrelenen Firebase Performance Monitoring verilerinin bir görüntüsü
  • Sitenizin belirli bir sayfasının verilerini görüntülemek için Sayfa URL'sine göre filtreleyin
  • 3g bağlantısının uygulamanızı nasıl etkilediğini öğrenmek için Etkili bağlantı türüne göre filtreleyin
  • Veritabanı konumunuzun belirli bir bölgeyi etkilemediğinden emin olmak için Ülkeye Göre Filtreleyin

İzleriniz için verileri görüntüleme hakkında daha fazla bilgi edinin.

Sonraki adımlar