Performance Monitoring, uygulamanızdaki izlenen işlemler hakkında veri toplamak için izleri kullanır. İz, zaman içindeki iki nokta arasında yakalanan verileri içeren bir rapordur dokunun.
Performance Monitoring, web uygulamalarında her sayfa için otomatik olarak bir iz toplar sayfa yükleme izleme adı verilen bir izleme kodu içerir. Her sayfa yükleme izlemesi, şu varsayılan metrikleri kullanın:
first paint (ilk boyama): Kullanıcı bir sayfaya gittiğinde ve herhangi bir görsel değişiklik gerçekleştiğinde
first Contentful Paint: Kapsamdaki bir metrikte kullanıcının bir sayfaya gelmesi ile anlamlı içeriğin sunulması arasında geçen süre görseller (ör. resim veya metin)
domInteractive: Şunun arasında geçen süreyi ölçen bir metrik: Kullanıcı bir sayfaya gittiğinde ve sayfa etkileşimli olarak değerlendirildiğinde kullanıcı için
domContentLoadedEventEnd - kullanıcının bir sayfaya gitmesi ile ilk HTML sayfası arasındaki zaman doküman tamamen yüklendi ve ayrıştırıldı
loadEventEnd: Kullanıcı sayfaya gittiğinde ve geçerli dokümanın yükleme etkinliği tamamlar
ilk giriş gecikmesi: Yayın tarihi ve saati arasındaki süreyi ölçen Kullanıcı bir sayfayla etkileşimde bulunduğunda ve tarayıcı o giriş
Bu izlemelere ait verileri, "Sayfa yükleme" alt sekmesinde bulabilirsiniz. Performans kontrol panelinin alt kısmındaki iz tablosu (daha fazla bilgi konsolu kullanma hakkında daha fazla bilgi edinebilirsiniz.
Sayfa yükleme izlemenin tanımı
Bu iz, uygulamanızdaki sayfaların nasıl yüklendiği, ortak yükleme noktalarına (ör. yükleme işlemi) duyarlı bir uygulamadır.
Sayfa yükleme izleri, uygulamanızın önemli web verilerini (ör. ilk veriler) zengin içerikli boyama.
Sayfa yükleme izleri için toplanan metrikler
Bu izler, kullanıma hazır izler olduğu için özel metrik veya özel ayrıntılara yer verir.
İlk boyama
Bu metrik, kullanıcının bir sayfaya gitmesi ile ziyaret etmesi arasında geçen süreyi ölçer. herhangi bir görsel değişiklik meydana geldiğinde
İlk boyama, kullanıcılarınıza sayfanın daha doğru ve alakalı yüklenmeye başlıyor.
Kullanıcı bir sayfaya gittiğinde başlar.
Arka plan rengi değişikliği gibi herhangi bir görsel değişiklik gerçekleştiğinde durur. bir başlık yükleniyor.
İlk zengin içerikli boyama
Bu metrik, kullanıcının bir sayfaya gitmesi ile ziyaret etmesi arasında geçen süreyi ölçer. anlamlı içerik görüntülemelerine olanak tanır.
Bu metrik, kullanıcılarınızın herhangi bir reklamınızı ne kadar kısa sürede arka plan rengi veya başlığı yerine uygulamanın asıl içeriğini içerdiği anlamına gelir.
Kullanıcı bir sayfaya gittiğinde başlar.
Tarayıcı, DOM'den ilk içeriği oluşturduktan hemen sonra durur. metin, resim (arka plan resimleri dahil), beyaz olmayan tuval veya SVG.
DomInteractive
Bu metrik, kullanıcının bir sayfaya gitmesi ile ziyaret etmesi arasında geçen süreyi ölçer. Sayfa, kullanıcı için etkileşimli kabul edilir.
Bu metrik, kullanıcılarınızın web sitenizi ne kadar kısa sürede etkileşimde bulunmak yerine, uygulamanızdaki düğmeler ve köprüler gibi onları ekranda gördüğümüzden. Bunun, tarayıcınızın etkileşime yanıt verir (bu metrik için ilk giriş gecikmesi izleme).
Kullanıcı bir sayfaya gittiğinde başlar.
Kullanıcı aracısı geçerli HTML dokümanının "etkileşimli" durumuna hazırlık.
domContentLoadedEventEnd
Bu metrik, kullanıcının bir sayfaya gitmesi ile ziyaret etmesi arasında geçen süreyi ölçer. ilk HTML belgesi tamamen yüklenmiş ve ayrıştırılmıştır.
Kullanıcı bir sayfaya gittiğinde başlar.
İlk HTML belgesi tamamen yüklendikten sonra hemen durur ve ayrıştırılabilir (
DOMContentLoaded) ancak bu, stil sayfalarının, resimlerin ve ve alt çerçevelerin yüklenmesi tamamlandı.
yüklemeEtkinlikSonu
Bu metrik, kullanıcının sayfaya gelmesi ile kullanıcının sayfaya gitmesi arasında geçen süreyi Geçerli dokümanın yükleme etkinliği tamamlandığında.
Bu metrik, tüm web sayfalarınızın yüklenmesinin ne kadar sürdüğünü öğrenmek için yararlıdır. çeşitli içerik türlerini kontrol eder.
Kullanıcı bir sayfaya gittiğinde başlar.
Geçerli HTML dokümanının yükleme etkinliği tamamlandıktan hemen sonra durur.
İlk giriş gecikmesi
Bu metrik, kullanıcının bir sayfayla etkileşim kurması ile etkileşim kurması arasında geçen süreyi tarayıcı bu girişe yanıt verebildiğinde.
Kullanıcı etkileşimine yanıt veren tarayıcı, uygulamanızın duyarlılığı hakkındaki ilk izlenimlerini alabilirsiniz.
Kullanıcı ilk olarak sayfadaki bir öğeyle etkileşimde bulunduğunda başlar. Örneğin: bir düğme veya köprüyü tıklayabilirsiniz.
Tarayıcı girişe yanıt verebilir hale gelir gelmez durur, yani emin olun.
İlk giriş gecikmesi metriğini ölçmek için çoklu dolguyu eklemeniz gerektiğini unutmayın. kitaplığını oluşturur. Yükleme talimatları için kütüphanenin belgeleri inceleyin.
Performans verilerini izleme, görüntüleme ve filtreleme
Gerçek zamanlı performans verilerini görüntülemek için uygulamanızın Performans Gerçek zamanlı veri işlemeyle uyumlu olan izleme SDK sürümü. Gerçek zamanlı performans verileri hakkında daha fazla bilgi
Temel metrikleri kontrol panelinizde takip edin
Temel metriklerinizin nasıl bir trend gösterdiğini öğrenmek için bunları üst kısımdaki metrikler panelinize ekleyin. Performans kontrol paneli. Haftadan haftaya bakarak regresyonları hızlı bir şekilde belirleyebilirsiniz veya kodunuzdaki son değişikliklerin performansı iyileştirdiğini doğrulayın.
Metrikler panonuza metrik eklemek için aşağıdaki adımları uygulayın:
- Şuraya gidin: Firebase konsolundaki Performans kontrol paneli.
- Boş bir metrik kartını tıklayın, ardından panonuza eklemek için mevcut bir metrik seçin.
- Sonraki slayta geçin Daha fazla seçenek için, doldurulmuş metrik kartında , örneğin bir metriği değiştirebilir veya kaldırabilirsiniz.
Metrik panosu, zaman içinde toplanan metrik verilerini hem grafik biçiminde hem de sayısal yüzde değişimi.
Kontrol panelini kullanma hakkında daha fazla bilgi edinin.
İzleri ve verilerini görüntüleme
İzlerinizi görüntülemek için şuraya gidin: Performans kontrol paneli Firebase konsolunda izler tablosuna gidin ve ilgili alt sekmeyi tıklayın. Tabloda her iz için en önemli metriklerden bazıları gösterilir. Hatta listeyi zamana göre sıralayabilirsiniz. yüzdelik değişimdir.
Performance Monitoring, Firebase konsolunda metriği vurgulayan bir sorun giderme sayfası sağlar Bu sayede, işletmenizdeki performans sorunlarının hızlıca ele alınmasını ve etkilerini en aza indirebilirsiniz. en iyi uygulamaları paylaşacağız. Potansiyel sorunlar hakkında bilgi edinmek için performans sorunları söz konusu olabilir.
- Kontrol panelinde ilgili metrikleri seçtiğinizde büyük bir delta fark edersiniz.
- İz tablosunda en büyük deltaları en üstte görüntülemek üzere sıralarsınız ve bir yüzdelik olarak önemli bir değişimdir.
- Performans sorunuyla ilgili bir e-posta uyarısı alırsınız.
Sorun giderme sayfasına aşağıdaki yöntemleri kullanarak erişebilirsiniz:
- Metrik kontrol panelinde Metrik ayrıntılarını görüntüle düğmesini tıklayın.
- Herhangi bir metrik kartında
simgesini seçin => Ayrıntıları göster . Sorun giderme sayfasında metrikle ilgili bilgiler görüntülenir. tıklayın. - İzler tablosunda bir iz adını veya onunla ilişkili satırdaki herhangi bir metrik değerini tıklayın. izler.
- E-posta uyarısında Şimdi incele'yi tıklayın.
İz tablosundaki bir iz adını tıkladığınızda, daha sonra
ilgi alanı. Önce
Verileri filtrelemek için
- Sitenizin belirli bir sayfasına ait verileri görüntülemek için Sayfa URL'sine göre filtreleyin
- 3g bağlantısının hesabınızı nasıl etkileyeceğini öğrenmek için Etkili bağlantı türü'ne göre filtreleyin uygulama
- Veritabanı konumunuzun belirli bir konumu etkilemediğinden emin olmak için Ülke'ye göre filtreleyin bölge
Daha fazla bilgi: şu sorguya ait veriler görüntüleniyor: izleme başlıklı makaleye bakın.
Sonraki adımlar
Daha fazla bilgi: özellikleri kullanarak da performans verilerini inceleyebilirsiniz.
Şu işlemler hakkında daha fazla bilgi edinin: performans sorunlarını izleme Firebase konsolu.
Kalitesi düşen sayfa yüklemeleri için uyarıları ayarlayın en iyi uygulamaları paylaşacağız. Örneğin, şunun için bir e-posta uyarısı yapılandırabilirsiniz: belirli bir sayfa için ilk giriş gecikmesi bir sınırı geçerse ne kadar zaman ayırabileceğinizi göstereceğim.