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

Performance Monitoring, uygulamanızdaki izlenen süreçlerle ilgili verileri toplamak için izlemeleri kullanır. İzleme, uygulamanızdaki iki zaman 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 izleme adlı bir izlemeyi otomatik olarak toplar. Her sayfa yükleme izi aşağıdaki varsayılan metrikleri toplar:

  • Largest Contentful Paint: Kullanıcının bir sayfaya gittiği andan en büyük görsel değişikliğin gerçekleştiği ana kadar geçen süreyi ölçen metrik

  • interaction to next paint: Kullanıcının sayfayla etkileşime geçtiği andan sonraki boyamanın gerçekleştiği ana kadar geçen en uzun süreyi ölçen metrik

  • kümülatif düzen kayması: Sayfadaki beklenmedik düzen değişikliklerini ölçen ve puanlayan bir metrik

  • ilk boyama: Kullanıcının bir sayfaya gittiği andan herhangi bir görsel değişikliğin gerçekleştiği ana kadar geçen süreyi ölçen metrik

  • İlk zengin içerikli boyama: Kullanıcının bir sayfaya gittiği andan anlamlı içerik (ör. resim veya metin) görüntülendiği ana kadar geçen süreyi ölçen bir metrik

  • domInteractive: Kullanıcının bir sayfaya gittiği andan sayfanın kullanıcı için etkileşimli olarak kabul edildiği ana kadar geçen süreyi ölçen bir metrik

  • domContentLoadedEventEnd: Kullanıcının bir sayfaya gittiği andan ilk HTML belgesinin tamamen yüklendiği ve ayrıştırıldığı ana kadar geçen süreyi ölçen bir metrik

  • loadEventEnd: Kullanıcının sayfaya gittiği andan geçerli belgenin yükleme etkinliğinin tamamlandığı ana kadar geçen süreyi ölçen metrik

  • ilk giriş gecikmesi: Kullanıcının bir sayfayla etkileşime geçtiği andan tarayıcının bu girişe yanıt verebildiği ana kadar geçen süreyi ölçen bir metrik

Bu izlemelerden elde edilen verileri, Performans kontrol panelinin en altındaki izlemeler tablosunun Sayfa yükleme alt sekmesinde görüntüleyebilirsiniz (Konsol'u kullanma hakkında daha fazla bilgiyi bu sayfanın ilerleyen bölümlerinde bulabilirsiniz).

Sayfa yükleme izinin tanımı

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

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

Sayfa yükleme izleri için toplanan metrikler

Bu izlemeler hazır izlemeler olduğundan bunlara ek özel metrikler veya özel özellikler ekleyemezsiniz.

Largest Contentful Paint

Bu metrik, kullanıcının bir sayfaya gittiği andan en büyük resim, metin veya video içeriğinin gösterildiği ana kadar geçen süreyi ölçer.

Bu metrik, web sayfasının ana içeriğinin kullanıcı tarafından ne kadar hızlı görülebildiğini anlamak için yararlıdır.

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

  • Resim, metin veya video öğeleri dahil olmak üzere en büyük görsel değişiklik gerçekleştiğinde durur. Daha fazla bilgi için temel web temel metrikleri bölümüne bakın.

"Largest Contentful Paint öğesi", en büyük zengin içerikli boyaya karşılık gelen öğeyi tanımlayan bir özel özelliktir. Bu, en büyük zengin içerikli boyama zamanlamasına ek olarak yakalanır.

Sonraki boyamayla etkileşim

Bu metrik, kullanıcının bir sayfayla etkileşime geçtiği andan sonraki boyama işlemine kadar geçen süreyi ölçer.

Bu metrik, bir sayfanın kullanıcı girişine ne kadar duyarlı olduğunu ölçtüğü için yararlıdır.

  • Kullanıcı sayfayla etkileşime geçtiğinde (fare tıklaması, cihaza dokunma veya klavye girişi) başlar.

  • Bir sonraki boyama işlemi gerçekleştiğinde durur. Daha fazla bilgi için temel web temel metrikleri bölümüne bakın.

"Sonraki boyama işlemine kadar geçen en uzun etkileşim", sonraki boyama işlemine kadar geçen en uzun etkileşim etkinliği gerçekleştiğinde kullanıcının etkileşimde bulunduğu öğeyi tanımlayan özel bir özelliktir. Bu, sonraki boyamayla etkileşim zamanlamasına ek olarak yakalanır.

Kümülatif düzen kayması

Bu metrik, sayfanın yaşam döngüsü boyunca gerçekleşen her beklenmedik düzen kayması için düzen kayması puanlarındaki en büyük artışı ölçer.

Beklenmedik düzen değişiklikleri kullanıcı deneyimini bozabileceğinden bu metrik faydalıdır. Metrik, Layout Instability API'ye dayalı bir puan raporlar. Puanın nasıl hesaplandığı hakkında daha fazla bilgi için Core Web Vitals başlıklı makaleyi inceleyin.

"En büyük düzen kayması hedefi", en büyük içerik kayması gerçekleştiğinde kaymış olan öğeyi tanımlayan özel bir özelliktir. Bu, kümülatif düzen kayması puanına ek olarak yakalanır.

İlk boyama

Bu metrik, kullanıcının bir sayfaya gittiği andan herhangi bir görsel değişikliğin gerçekleştiği ana kadar geçen süreyi ölçer.

İlk boyama, kullanıcılarınıza sayfanın yüklenmeye başladığını sinyal verdiğinden bu metrik faydalıdır.

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

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

İlk zengin içerikli boyama

Bu metrik, kullanıcının bir sayfaya gittiği andan anlamlı içerik (ör. resim veya metin) gösterildiği ana kadar geçen süreyi ölçer.

Bu metrik, kullanıcılarınızın uygulamanızın yeni arka plan rengini veya başlığını görmek yerine gerçek içeriğini ne kadar sürede gördüğünü öğrenmek için faydalıdır.

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

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

domInteractive

Bu metrik, kullanıcının bir sayfaya gittiği andan sayfanın kullanıcı için etkileşimli olarak kabul edildiği ana kadar geçen süreyi ölçer.

Bu metrik, kullanıcılarınızın ekranda görmenin ötesinde uygulamanızdaki öğelerle (ör. düğmeler ve köprüler) ne kadar sürede etkileşime geçebileceğine dair analizler için yararlıdır. Bunun, tarayıcının etkileşime yanıt vereceği anlamına gelmediğini unutmayın (bu metrik için ilk giriş gecikmesi izlemesine bakın).

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

  • Kullanıcı aracısı geçerli HTML dokümanının hazırlık durumunu "etkileşimli" olarak ayarlamadan hemen önce durur.

domContentLoadedEventEnd

Bu metrik, kullanıcının bir sayfaya gittiği andan ilk HTML dokümanının tamamen yüklendiği ve ayrıştırıldığı ana kadar geçen süreyi ölçer.

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

  • İlk HTML belgesinin tamamen yüklendiği ve ayrıştırıldığı (DOMContentLoaded) anı belirten zaman damgası. Stil sayfası, resim ve alt çerçeve yükleme işleminin tamamlandığını belirtmez.

loadEventEnd

Bu metrik, kullanıcının sayfaya gittiği andan geçerli belgenin yükleme etkinliğinin tamamlandığı ana kadar geçen süreyi ölçer.

Bu metrik, stil sayfaları ve resimler dahil tüm içeriğinizin yüklenmesi için ne kadar süre gerektiğini öğrenmek amacıyla faydalıdır.

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

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

İlk giriş gecikmesi

Bu metrik, kullanıcının bir sayfayla etkileşime geçtiği andan tarayıcının bu girişe yanıt verebildiği ana kadar geçen süreyi ölçer.

Tarayıcının kullanıcı etkileşimlerine yanıt vermesi, kullanıcılarınıza uygulamanızın duyarlılığıyla ilgili ilk izlenimleri vereceğinden bu metrik faydalıdır.

  • Kullanıcı sayfadaki bir öğeyle ilk kez etkileşime geçtiğinde (ör. bir düğmeyi veya köprüyü tıkladığında) başlar.

  • Tarayıcının girişe yanıt vermesinden 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 polyfill kitaplığını eklemeniz gerektiğini unutmayın. Yükleme talimatları için kitaplığın dokümanlarına bakın.

Performans verilerini izleme, görüntüleme ve filtreleme

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.

Kontrol panelinizde temel metrikleri izleme

Önemli metriklerinizin nasıl bir eğilim gösterdiğini öğrenmek için Performans kontrol panelinin üst kısmındaki metrik panosuna ekleyin. Haftadan haftaya gerçekleşen değişiklikleri izleyerek regresyonları hızlıca tanımlayabilir veya kodunuzdaki son değişikliklerin performansı iyileştirip iyileştirmediğini doğrulayabilirsiniz.

<span class=Firebase Performance Monitoring kontrol paneli" />

Metrik panosuna metrik eklemek için aşağıdaki adımları uygulayın:

  1. Firebase konsolunda Performans gösterge tablosuna gidin.
  2. Boş bir metrik kartını tıklayın, ardından panonuza eklemek için mevcut bir metrik seçin.
  3. Daha fazla seçenek için doldurulmuş bir metrik kartında simgesini tıklayın. Örneğin, bir metriği değiştirmek veya kaldırmak için bu seçeneği kullanabilirsiniz.

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

İzlemelerinizi görüntülemek için Firebase konsolundaki Performans kontrol paneline gidin, izlemeler tablosuna gidin ve uygun alt sekmeyi tıklayın. Tabloda, her izleme için bazı önemli metrikler gösterilir. Dilerseniz listeyi belirli bir metriğin yüzde değişimine göre de sıralayabilirsiniz.

Performance Monitoring, Firebase konsolunda metrik değişikliklerini vurgulayan bir sorun giderme sayfası sağlar. Bu sayede, performans sorunlarının uygulamalarınız ve kullanıcılarınız üzerindeki etkisini hızlı bir şekilde giderip en aza indirebilirsiniz. Olası performans sorunları hakkında bilgi edindiğinizde sorun giderme sayfasını kullanabilirsiniz. Örneğin, aşağıdaki senaryolarda:

  • Kontrol panelinde alakalı metrikleri seçtiğinizde büyük bir fark olduğunu fark edersiniz.
  • İzlemeler tablosunda, en büyük deltaları en üstte gösterecek şekilde sıralama yaparsınız ve önemli bir yüzde değişikliği görürsünüz.
  • Performans sorunuyla ilgili sizi bilgilendiren bir e-posta uyarısı alırsınız.

Sorun giderme sayfasına aşağıdaki yöntemlerle erişebilirsiniz:

  • Metrik kontrol panelinde Metrik ayrıntılarını görüntüle düğmesini tıklayın.
  • Herhangi bir metrik kartında => Ayrıntıları görüntüle'yi seçin. Sorun giderme sayfasında, seçtiğiniz metrik hakkında bilgiler gösterilir.
  • İzler tablosunda, bir izleme adını veya söz konusu izlemeyle ilişkili satırdaki herhangi bir metrik değerini tıklayın.
  • E-posta uyarısında Şimdi incele'yi tıklayın.

İzlemeler tablosunda bir izleme adını tıkladığınızda, ilgilendiğiniz metrikleri ayrıntılı olarak inceleyebilirsiniz. Verileri özelliğe göre filtrelemek için Filtre düğmesini tıklayın. Örneğin:

<span class=Firebase Performance Monitoring verileri özelliğe göre filtreleniyor" />
  • Sitenizdeki belirli bir sayfanın verilerini görüntülemek için Sayfa URL'si'ne göre filtreleyin.
  • 3G bağlantısının uygulamanızı nasıl etkilediğini öğrenmek için Geçerli bağlantı türüne göre filtreleyin
  • Veritabanı konumunuzun belirli bir bölgeyi etkilemediğinden emin olmak için Ülke'ye göre filtreleme

İzlemelerinize ait verileri görüntüleme hakkında daha fazla bilgi edinin.

Sonraki adımlar

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

  • Firebase konsolunda performans sorunlarını izleme hakkında daha fazla bilgi edinin.

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