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

Performans İzleme, uygulamanızda izlenen işlemler hakkında veri toplamak için izleri kullanır. İzleme, uygulamanızdaki iki zaman noktası arasında yakalanan verileri içeren bir rapordur.

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

  • ilk boyama — Kullanıcının bir sayfaya gitmesi ile herhangi bir görsel değişikliğin gerçekleşmesi arasındaki süreyi ölçen bir ölçüm

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

  • domInteractive — Kullanıcının bir sayfaya gitmesi ile sayfanın kullanıcı için etkileşimli olarak kabul edilmesi arasındaki süreyi ölçen bir ölçüm

  • 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 ölçüm

  • loadEventEnd — Kullanıcının sayfaya gitmesi ile geçerli 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 ölçüm

Bu izlemelerden elde edilen verileri, Performans kontrol panelinin alt kısmındaki izlemeler tablosunun Sayfa yükleme alt sekmesinde görüntüleyebilirsiniz ( konsolu kullanma hakkında daha fazla bilgiyi bu sayfanın ilerleyen kısımlarında bulabilirsiniz).

Sayfa yükleme izlemesinin 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çümleri ölçer.

Sayfa yükleme izlemeleri, uygulamanızın ilk içerikli boyama gibi temel web verilerini izlemenize yardımcı olur.

Sayfa yükleme izleri için toplanan ölçümler

Bu izler kullanıma hazır izler olduğundan bunlara özel ölçümler veya özel nitelikler ekleyemezsiniz.

İlk boya

Bu ölçüm, kullanıcının bir sayfaya gitmesi ile herhangi bir görsel değişikliğin gerçekleşmesi arasındaki süreyi ölçer.

Bu ölçüm, ilk boyamanın 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 başlık yüklemesi de dahil olmak üzere herhangi bir görsel değişiklik olduğunda durur.

İlk içerikli boya

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

Bu ölçüm, kullanıcılarınızın yalnızca yeni bir arka plan rengi veya başlığı yerine uygulamanızın gerçek içeriğini ne kadar sürede gördüklerine 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'daki ilk içeriği oluşturduktan hemen sonra durur.

domİnteraktif

Bu ölçüm, kullanıcının bir sayfaya gitmesi ile sayfanın kullanıcı için etkileşimli olarak değerlendirilmesi arasındaki süreyi ölçer.

Bu ölçüm, kullanıcılarınızın uygulamanızdaki düğmeler ve köprüler gibi öğelerle yalnızca ekranda görmek yerine ne kadar sürede etkileşimde bulunabileceğine ilişkin bilgiler için kullanışlı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ş gecikmesi izlemesine 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 ölçüm, 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 ( DOMContentLoaded ) hemen sonra durur, ancak bu, stil sayfalarının, görüntülerin ve alt çerçevelerin yüklenmesinin tamamlandığı anlamına gelmez.

loadEventEnd

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

Bu ölçüm, stil sayfaları ve resimler de dahil olmak üzere tüm içeriğinizin yüklenmesinin ne kadar süreceği konusunda bilgi edinmek 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 ölçüm, 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.

Bir kullanıcı etkileşimine yanıt veren tarayıcı, kullanıcılarınıza uygulamanızın yanıt verme hızına ilişkin ilk izlenimlerini verdiği için bu ölçüm faydalıdır.

  • Kullanıcının sayfadaki bir öğeyle (bir düğmeyi veya köprüyü tıklamak gibi) ilk kez etkileşime geçmesiyle başlar.

  • Tarayıcı girdiye 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 metriğe yönelik çoklu doldurma kitaplığını eklemeniz gerektiğini unutmayın. Kurulum talimatları için kütüphanenin 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şlemeyle uyumlu bir Performans İzleme SDK sürümünü kullandığından emin olun. Gerçek zamanlı performans verileri hakkında daha fazla bilgi edinin .

Gösterge tablonuzda önemli metrikleri izleyin

Temel metriklerinizin nasıl bir trend izlediğini öğrenmek için bunları Performans kontrol panelinin üst kısmındaki metrik panonuza ekleyin. Haftadan haftaya değişiklikleri görerek regresyonları hızlı bir şekilde tanımlayabilir veya kodunuzdaki son değişikliklerin performansı iyileştirdiğini doğrulayabilirsiniz.

Firebase Performans İzleme kontrol panelindeki ölçüm panosunun resmi

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

  1. Firebase konsolundaki Performans kontrol paneline gidin.
  2. Boş bir metrik kartını tıklayın, ardından panonuza eklemek üzere mevcut bir metriği seçin.
  3. Daha fazla seçenek için (örneğin, bir ölçümü değiştirmek veya kaldırmak için) doldurulmuş bir ölçüm 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şim 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 kontrol paneline gidin, izler tablosuna doğru aşağı kaydırın ve ardından uygun alt sekmeyi tıklayın. Tablo, her iz için bazı önemli metrikleri görüntüler ve hatta listeyi belirli bir metrik için yüzde değişime göre sıralayabilirsiniz.

Performans İzleme, Firebase konsolunda metrik değişikliklerini vurgulayan bir sorun giderme sayfası sağlayarak performans sorunlarının uygulamalarınız ve kullanıcılarınız üzerindeki etkisini hızlı bir şekilde ele almayı ve en aza indirmeyi kolaylaştırır. Örneğin aşağıdaki senaryolarda olası performans sorunlarını öğrendiğinizde sorun giderme sayfasını kullanabilirsiniz:

  • Kontrol panelinde ilgili metrikleri seçiyorsunuz ve büyük bir fark fark ediyorsunuz.
  • İzler tablosunda en büyük deltaları en üstte görüntüleyecek şekilde sıralarsınız ve önemli bir yüzde değişimi görürsünüz.
  • Bir performans sorunu hakkında sizi bilgilendiren bir e-posta uyarısı alırsınız.

Sorun giderme sayfasına aşağıdaki yollardan erişebilirsiniz:

  • Metrik kontrol panelinde Metrik ayrıntılarını görüntüle düğmesini tıklayın.
  • Herhangi bir metrik kartta şunu seçin: => Ayrıntıları görüntüle . Sorun giderme sayfası, seçtiğiniz ölçümle ilgili bilgileri görüntüler.
  • İzler tablosunda, bir iz adına veya o iz ile ilişkili satırdaki herhangi bir metrik değerine tıklayın.
  • Bir e-posta uyarısında Şimdi araştır'ı tıklayın.

İzler tablosunda bir iz adına tıkladığınızda ilgilendiğiniz metriklerin ayrıntısına inebilirsiniz. Tıkla Verileri özniteliğe göre filtrelemek için filtre düğmesi, örneğin:

Özelliğe göre filtrelenen Firebase Performance Monitoring verilerinin resmi
  • Sitenizin belirli bir sayfasına ilişkin verileri 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

İzlerinize ilişkin verileri görüntüleme hakkında daha fazla bilgi edinin.

Sonraki adımlar

  • Performans verilerini incelemek için öznitelikleri kullanma hakkında daha fazla bilgi edinin.

  • Firebase konsolunda performans sorunlarının nasıl takip edileceği hakkında daha fazla bilgi edinin.

  • Uygulamanızın performansını düşüren sayfa yüklemeleri için uyarılar ayarlayın . Örneğin, belirli bir sayfaya ilişkin ilk giriş gecikmesi belirlediğiniz eşiği aşarsa ekibiniz için bir e-posta uyarısı yapılandırabilirsiniz.