Navigasyon türleri artık CrUX'te kullanılabilir

Chrome Kullanıcı Deneyimi Raporu (CrUX), Mart 2024 veri kümesinden itibaren bir navigation_types metriği içerir. Bu, sorgulanan boyut için sayfa yüklemelerinin gezinme türleriyle ilgili toplu istatistikler sağlar.

Farklı gezinme türleri, performans metriklerinde farklılıklara neden olur. Bu nedenle, sitenizin performansına bakarken bu farklı türlerin göreceli sıklığını anlamak yararlı olur. Örneğin, bir gezinme işleminde geri ileri (bfcache) kullanıldığında, genellikle neredeyse anında gezinme elde edilir. Bu durum, çok küçük LCP ve FCP metrikleriyle, daha düşük CLS ve INP metrikleriyle yansıtılır.

Gezinme türü dökümünü göstererek site sahiplerini sitelerinde kullanılan gezinme türleri hakkında daha fazla bilgi sahibi olmaya teşvik etmeyi umuyor ve önbelleğe alma kurulumu, bfcache engelleyiciler ve önceden işlemeyi inceleyerek daha hızlı türleri teşvik etmeyi amaçlıyoruz.

navigation_types metriği; günlük CrUX API, CrUX History API (ilk olarak 3 haftalık geçmişle sunulur ve sonraki 6 ay içinde haftalık olarak tüm kapsamıyla artırılarak), en yeni CrUX BigQuery veri kümesinde ve CrUX Kontrol Paneli'nde bulunur. Geçmişe sahip olmak, site sahiplerinin zaman içinde gezinme türü kullanımındaki değişiklikleri görüntüleyebilmelerini de sağlar. Bu, iyileştirmelerin izlenmesine (örneğin, Bfcache engellemesinin kaldırılması) olanak tanıyabilir. Ayrıca, sitelerinde hiçbir değişiklik yapılmasa bile metriklerdeki değişiklikleri açıklamaya yardımcı olabilir.

CrUX, aşağıdaki tabloda şu gezinme türlerini ayırt eder:

Tür Açıklama
navigate Diğer kategorilerin hiçbirine uymayan sayfa yükleme işlemi.
navigate_cache Ana kaynağın (ana HTML dokümanı) HTTP önbelleğinden sunulduğu sayfa yükleme işlemi. Siteler genellikle alt kaynaklar için önbelleğe alma özelliğini kullanır, ancak ana HTML belgesi genellikle önbelleğe önemli ölçüde daha azdır. Mümkün olduğunda, yerel olarak ve CDN'de önbelleğe alınabilme özelliği sayesinde önemli performans iyileştirmeleri sağlayabilir.
reload Kullanıcı, yeniden yükle düğmesine basarak, adres çubuğundaki Enter tuşuna basarak veya bir sekmeyi kapatma işlemini geri alarak sayfayı yeniden yüklemiştir. Sayfanın yeniden yüklenmesi genellikle ana sayfanın değişip değişmediğinin kontrol edilmesi için sunucuya yeniden doğrulama yapılmasıyla sonuçlanır. Sayfa yeniden yükleme oranının yüksek olması, kullanıcıların sinirli olduğu anlamına gelebilir.
restore Tarayıcı yeniden başlatıldıktan sonra sayfa yeniden yüklendi veya bellek nedeniyle kaldırılmış bir sekme var. Android üzerinde Chrome için bunlar reload olarak bildirilir.
back_forward Geçmişte gezinme, yani sayfa yakın zamanda görüldü ve sayfaya döndürüldü. Doğru önbelleğe alma ile bunların makul derecede hızlı deneyimler olması gerekir, ancak yine de sayfanın işlenmesini ve JavaScript'in yürütülmesini gerektirir; bfcache bunun ikisinden de kaçınır.
back_forward_cache Bfcache'den sunulan bir geçmişte gezinme. Bfcache'den yararlanmak için sayfalarınızı optimize etmek daha hızlı deneyimler sunar. Siteler, bu kategorideki gezinme yüzdesini iyileştirmek için bfcache engelleyicileri kaldırmaya çalışmalıdır.
prerender Sayfa önceden işlenmiş olup bfcache'ye benzer şekilde sayfa neredeyse anında yüklenebilir.

Bazı durumlarda, sayfa yükleme işlemi birden fazla gezinme türünün bileşimi olabilir. Bu durumda CrUX, ilk eşleşmeyi önceki tablonun tersten sıralayarak (alttan yukarıya) raporlar.

CrUX'te gezinme türleriyle ilgili sınırlamalar

CrUX herkese açık bir veri kümesi olduğundan, raporlama ayrıntı düzeyi sınırlıdır. Birçok kaynak ve URL'de, yetersiz uygun trafik nedeniyle navigation_types metriği kullanılamaz. Daha fazla bilgi için CrUX metodolojisine bakın.

Ayrıca CrUX, gezinme türüne göre diğer metriklerin dökümünü sunamaz. Bu durum, CrUX'te kullanılabilen kaynak ve URL'lerin sayısını daha da azaltabilir.

Trafiği gezinme türleri gibi ölçütlere göre bölebilmek için sitelerin kendi Gerçek Kullanıcı İzleme (RUM) özelliklerini uygulamasını öneririz. Bildirilen türlere ve dahil edilen sayfa görüntülemelerine bağlı olarak bu çözümlerdeki gezinme türlerinde farklılıklar görebilirsiniz. CrUX verileri neden RUM verilerimden farklı? başlıklı makaleyi inceleyin.

RUM, belirli performans sorunları hakkında daha fazla ayrıntı da sağlayabilir. Örneğin, CrUX, bfcache uygunluğunun iyileştirilmesinin yararlı olacağını ima edebilir ancak bfcache notRestoredREASONs API belirli bir sayfa yükleme işleminin bfcache'den tam olarak neden kullanılamadığını bildirebilir.

CrUX API'deki gezinme türleri

API'de gezinme türlerini görmek için isteğe navigation_types metriğini ekleyin veya tüm metriklerin dahil edileceği şekilde bir metrik ayarlamayın:

export API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{"origin": "https://example.com", metrics: ["navigation_types"]}'

İstek biçimi, API anahtarınızı nasıl alacağınıza dair açıklama ve API kılavuzu da dahil olmak üzere API belgelerinde daha ayrıntılı olarak açıklanmaktadır. Bu, şuna benzer bir nesne döndürür:

{
  "record": {
    "key": {  "origin": "https://example.com" },
    "metrics": {
      "navigation_types": {
        "fractions": {
          "navigate": 0.5335,
          "navigate_cache": 0.2646,
          "reload": 0.0885,
          "restore": 0.0023,
          "back_forward": 0.0403,
          "back_forward_cache": 0.0677,
          "prerender": 0.0031
        }
      }
    },
    "collectionPeriod": {
      "firstDate": { "year": 2024, "month": 3, "day": 6 },
      "lastDate": { "year": 2024, "month": 4, "day": 2 }
    }
  }
}

CrUX, yanıt olarak navigation_types metriğini her bir gezinme türü için sayfa yüklemelerinin kesirli olarak hesaplandığı bir nesne olarak bildiriyor. Her kesir, belirli bir anahtar için 0.0 (sayfa yüklemelerinin% 0'ını gösterir) ile 1.0 (sayfa yüklemelerinin% 100'ünü belirtir) arasında bir değerdir.

Bu yanıta göre, 6 Mart 2024'ten itibaren 2 Nisan 2024'e kadar olan toplama dönemi için gezinme işlemlerinin (sayfa yüklemeleri) %6, 77'si tarayıcının önbelleğinden sunulur. Benzer şekilde, diğer kesirlerden bazıları da sayfa yükleme optimizasyonlarına yönelik fırsatların belirlenmesine yardımcı olabilir. Belirli bir anahtar için (bir URL veya kaynak ile form faktörü kombinasyonu dahil) navigation_types kesirlerinin toplamı yaklaşık 1,0'dır.

CrUX History API'deki gezinme türleri

CrUX History API, gezinme türleri için kesir başına en fazla 25 veri noktası içeren bir zaman serisi sağlayabilir. Böylece, bu kesirlerin zaman içinde görselleştirilmesini sağlar. İsteğinizi CrUX API'den CrUX History API'ye dönüştürmek için bu isteği queryRecord yerine queryHistoryRecord uç noktasında çalıştırın. Örneğin, CrUX History Colab, navigation_types metriğini yığın çubuklar olarak çizer:

Gezinmenin büyük bir kısmı "gezinme" olmak üzere, 3 hafta boyunca gezinme türleri geçmişini gösteren yığınlı çubuk grafik ve üç hafta boyunca büyük bir 
değişiklik yaşanmayacaktır.
Zaman içindeki gezinme türleri

Önceki ekran görüntüsünde geçmiş yalnızca 3 toplama dönemi (her biri 7 gün arayla 28 gün) için mevcuttur. Tamamen doldurulduğunda bu bölüm 25 toplama döneminin tamamını kapsar. Bu geçmişi görselleştirmek, optimizasyonların etkili olduğunu veya geri döndüğünü teyit etmeyi mümkün kılar. Bu, özellikle HTTP önbellek yapılandırması, bir sayfayı bfcache ve önceden işleme için optimize etme için geçerlidir.

CrUX BigQuery'deki gezinme türleri

CrUX BigQuery tablolarında artık her türden bir navigation_type kaydı bulunurken, özetlenmiş görünümlerde her tür için bir tane olacak şekilde birden fazla navigation_types_* sütunu bulunuyor.

Ayrıntılı tablolar

CrUX BigQuery'deki ayrıntılı tablo şeması, bu örnek analizde belirli gezinme türlerinin anında veya iyi yükleme performansıyla nasıl ilişkili olabileceğini göstermemizi sağlayan, web performansı metrikleri için ayrıntılı histogramlar sağlar.

Örnek olarak, back_forward_cache oranı ile sayfaların anında yüklenme sıklığıyla (instant_lcp_density, LCP <= 200 ms olarak tanımlanır) ve iyi LCP'nin ne sıklıkta görüldüğüyle (good_lcp_density, LCP <= 2500 ms olarak tanımlanır) ile ilişkisine baktık. back_forward_cache ile instant_lcp_density ({4}0,87) arasında (aşağıdaki şemada gösterilmektedir) güçlü bir istatistiksel korelasyon ve back_forward_cache ile good_lcp_density (beta=0,29) arasında orta düzeyde bir korelasyon gözlemledik.

Anında sayfa yükleme oranı ile bfcache sayfa yükleme oranı arasında güçlü bir bağıntı gösteren ilişki grafiği
Anında sayfa yüklemelerinin bfcache kullanımıyla ilişkisi

Bu analiz için Colab'e olumlu yorumlar yapılmış; Burada yalnızca, CrUX BigQuery'deki ayrıntılı tablolardan en popüler 10.000 kaynak için Navigation_types kesirlerini çıkaran sorgu ele alınmaktadır:

  • all.202403 tablosuna buradan erişiriz (FROM yan tümcesine bakın) ve phone için form_factor filtresini filtreleriz ve en popüler 10.000 kaynak için popülarlik sıralaması <= 10.000 değerine sahip kaynakları seçeriz (WHERE ibaresine bakın).
  • BigQuery'de navigation_types metriği sorgulanırken navigation_types kesirlerinin toplamına bölmek gerekir. Çünkü bu kesirler yalnızca kaynak başına toplanır, (kaynak, form faktörü) kombinasyonuna göre değil.
  • Tüm kaynaklarda navigation_types bulunmayacağı için SAVE_DIVIDE kullanılması önerilir.
WITH tmp AS (
  SELECT
    origin,
    SUM(navigation_types.navigate.fraction) AS navigate,
    SUM(navigation_types.navigate_cache.fraction) AS navigate_cache,
    SUM(navigation_types.reload.fraction) AS reload,
    SUM(navigation_types.restore AS restore,
    SUM(navigation_types.back_forward.fraction) AS back_forward,
    SUM(navigation_types.back_forward_cache.fraction) AS back_forward_cache,
    SUM(navigation_types.prerender.fraction) AS prerender,
    SUM(navigation_types.navigate.fraction
      + navigation_types.navigate_cache.fraction
      + navigation_types.reload.fraction
      + navigation_types.restore.fraction
      + navigation_types.back_forward.fraction
      + navigation_types.back_forward_cache.fraction
      + navigation_types.prerender.fraction) AS total
  FROM
    `chrome-ux-report.all.202403`
  WHERE
    experimental.popularity.rank <= 10000 AND
    form_factor.name = 'phone'
  GROUP BY
    origin
)

SELECT
  origin,
  ROUND(SAFE_DIVIDE(navigate, total), 4) AS navigate,
  ROUND(SAFE_DIVIDE(navigate_cache, total), 4) AS navigate_cache,
  ROUND(SAFE_DIVIDE(reload, total), 4) AS reload,
  ROUND(SAFE_DIVIDE(restore, total), 4) AS restore,
  ROUND(SAFE_DIVIDE(back_forward, total), 4) AS back_forward,
  ROUND(SAFE_DIVIDE(back_forward_cache, total), 4) AS back_forward_cache,
  ROUND(SAFE_DIVIDE(prerender, total), 4) AS prerender
FROM
  tmp

Gerçekleştirilmiş tablolar

Özet yeterli olduğunda, bunun yerine gerçekleştirilmiş tabloları sorgulamak genellikle daha uygun (ve daha ucuz) olur. Örneğin, aşağıdaki sorgu chrome-ux-report.materialized.device_summary tablosundan kullanılabilir navigation_types verilerini ayıklar. Bu tablo aya, kaynağa ve cihaz türüne göre ayarlanır.

SELECT
  yyyymm,
  device,
  navigation_types_navigate,
  navigation_types_navigate_cache,
  navigation_types_reload,
  navigation_types_restore,
  navigation_types_back_forward,
  navigation_types_back_forward_cache,
  navigation_types_prerender
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://example.com' AND
  navigation_types_navigate IS NOT NULL
ORDER BY
  yyyymm DESC,
  device DESC

Bu kesirlerin toplamının satır başına 1,0'a eşit olmayacağını unutmayın.Bu nedenle, her kesiri, sorgunun yorumlanacağı sonuçların toplamına bölmeniz gerekir.

Bunun nedeni, chrome-ux-report.materialized.device_summary hücresindeki navigation_type kesirlerinin (ör.histogram yoğunlukları) kaynak ve tarih başına cihaz başına yerine kaynak başına 1,0'a eşit olmasıdır. Bu, gezinme türü dağılımının cihazlar arasında gösterilmesini sağlar:

SELECT
  device,
  navigation_types_back_forward
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403
device navigation_types_back_forward
phone 0.0663
desktop 0.0179
tablet 0.0009

Bu sorgu sonucunda kesirler, https://www.google.com kaynağı için sayfa yüklemelerinin yüzdesini yansıtır: Bu sayfa yüklemelerinin% 6,63'ünde telefon, %1,79 masaüstü ve% 0,09 tablette back_forward gezinme türü bulunur.

phone web sitesindeki back_forward oranının oldukça yüksek olması, bu sayfa yüklemelerini bfcache'den sunulabilecek şekilde optimize etmeye çalışabileceğimizi gösteriyor.

Bununla birlikte, sayfa yüklemelerinin ne kadarlık bir kısmının bfcache tarafından sunulduğunu, diğer bir deyişle bfcache isabet oranını göz önünde bulundurmak da önemlidir. Aşağıdaki sorgu, > Telefon ve masaüstünde% 60 isabet oranları.

SELECT
  device,
  navigation_types_back_forward_cache /
    (navigation_types_back_forward + navigation_types_back_forward_cache)
    AS back_forward_cache_hit_rate
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403
device back_forward_cache_hit_rate
phone 0.6239
desktop 0.6805
tablet 0.7353

Bu nedenle, telefonlardaki back_forward oranının yüksek olmasının nedeni, önbelleğe alma oranının azalması değil, daha çok kullanıcıların telefonlarda nasıl ileri ve geri gittiklerine dair bir yansımasıdır.

Gezinme türlerini görmenin en kolay yolu, bu bağlantıdaki ilgili kaynaktan erişilebilen CrUX kontrol panelidir. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, başlangıçta yalnızca bir aylık veri mevcuttur ancak zaman içinde geçmiş, aylık olarak türlerdeki değişiklikleri görmenize olanak tanır.

CrUX Kontrol Paneli&#39;ndeki Gezinme Türleri Dağıtım ekranının bir aylık verileri gösteren ekran görüntüsü.
CrUX kontrol panelindeki gezinme türleri

Gördüğünüz gibi, Kontrol Paneli sayfasının üst kısmında, görülecek yerlerin optimize edilmesi gereken daha hızlı gezinme türlerini vurguladık.

Sonuç

CrUX'teki gezinme türü dökümlerinin sizin için yararlı olacağını ve sitenizin performansını anlayıp optimize etmenize yardımcı olacağını umuyoruz. HTTP önbelleği, bfcache ve önceden işlemenin verimli bir şekilde kullanılmasını sağlayarak siteler, sunucuya geri dönmeyi gerektiren sayfa yüklemelerinden çok daha hızlı sayfa yüklemeleri gerçekleştirebilir.

Ayrıca, kullanıcıların verileri istedikleri gibi kullanabilmeleri ve CrUX API'lerinde gösterilenlerin URL'ye göre tür dökümlerini görebilmesi için verileri çeşitli CrUX erişim noktalarında kullanıma sunmaktan da memnuniyet duyuyoruz.

CrUX'e yapılan bu eklemeyle ilgili geri bildirimlerinizi sosyal medyada veya CrUX tartışma grubunda öğrenmek isteriz.