了解 2023 年 Google I/O 大会上介绍的 Firebase 亮点。了解详情

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

Performans İzleme, uygulamanızda izlenen işlemler hakkında veri toplamak için izleri kullanır. İzleme, uygulamanızda zamanın iki 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 izi adı verilen bir izlemeyi otomatik olarak toplar. Her sayfa yükleme izlemesi, aşağıdaki varsayılan ölçümleri toplar:

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

  • ilk içerik dolu boyama — 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 girdiye yanıt vermesi arasındaki süreyi ölçen bir ölçüm

Bu izlemelerden elde edilen verileri, Performans panosunun alt kısmında bulunan izlemeler tablosunun Sayfa yükleme alt sekmesinde görüntüleyebilirsiniz ( konsolu kullanma hakkında daha fazla bilgiyi bu sayfada daha sonra bulabilirsiniz).

Sayfa yükleme izlemesinin tanımı

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

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

Sayfa yükleme izleri için toplanan metrikler

Bu izler kullanıma hazır izlerdir, dolayısıyla bunlara özel metrikler veya özel nitelikler ekleyemezsiniz.

İlk boya

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

İlk boyama, kullanıcılarınıza sayfanın yüklenmeye başladığını bildirdiği için bu ölçüm yararlıdır.

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

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

İlk içerikli boya

Bu ölçüm, 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çer.

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

domInteraktif

Bu ölçüm, 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 öğelerle yalnızca ekranda görmek yerine ne kadar kısa sürede gerçekten etkileşime girebileceğine ilişkin içgörüler 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 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 ö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, resimlerin 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ğinizi yüklemenin ne kadar sürdüğüne ilişkin bilgiler 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 ölçüm, kullanıcının bir sayfayla etkileşime girmesi ile tarayıcının bu girdiye yanıt vermesi arasındaki süreyi ölçer.

Bu metrik, bir kullanıcı etkileşimine yanıt veren tarayıcı, kullanıcılarınıza uygulamanızın yanıt verebilirliği hakkında ilk izlenimlerini verdiği için kullanışlıdır.

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

  • Tarayıcı girişe yanıt verdikten hemen sonra durur; bu, tarayıcının içeriğinizi yüklemek 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 yönergeleri 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şlemeyle 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 bir trend olduğunu öğ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 belirleyebilir 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 kontrol paneline gidin.
  2. Boş bir metrik kartı tıklayın, ardından panonuza eklemek için mevcut bir metriği seçin.
  3. Örneğin bir metriği değiştirmek veya kaldırmak gibi daha fazla seçenek için doldurulmuş bir metrik kartında tıklayın.

Metrik panosu, zaman içinde toplanan metrik verilerini hem grafik biçimde 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 ve uygun alt sekmeyi tıklayın. Tablo, her iz için bazı en iyi metrikleri gösterir ve hatta listeyi belirli bir metrik için değişim yüzdesine göre sıralayabilirsiniz.

Performance Monitoring, 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ı hakkında bilgi edindiğinizde sorun giderme sayfasını kullanabilirsiniz:

  • Kontrol panelinde ilgili metrikleri seçersiniz ve büyük bir fark görürsünüz.
  • İzler tablosunda, en büyük deltaları üstte gösterecek şekilde sıralarsınız ve önemli bir yüzde değişikliği görürsünüz.
  • Size bir performans sorununu bildiren bir e-posta uyarısı alırsınız.

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

  • Metrik panosunda, Metrik ayrıntılarını görüntüle düğmesini tıklayın.
  • Herhangi bir metrik kartta => Ayrıntıları görüntüle öğesini seçin. 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ğere 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 metrikleri daha sonra inceleyebilirsiniz. Verileri özniteliğe göre filtrelemek için Filtre düğmesine tıklayın, örneğin:

özniteliğe göre filtrelenen Firebase Performance Monitoring verilerinin bir görüntüsü
  • 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

İzleriniz için 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 izleneceğ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 sayfa için ilk giriş gecikmesi ayarladığınız eşiği aşarsa ekibiniz için bir e-posta uyarısı yapılandırabilirsiniz.