Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Barry Pollard

Johannes Henkel

Chrome Kullanıcı Deneyimi Raporu (CrUX), Mart 2024 veri kümesinden itibaren navigation_types metriği içermektedir. 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 yol açar. Bu nedenle, sitenizin performansına bakarken, bu farklı türlerin göreceli sıklığını anlamak yararlıdır. Örneğin, bir gezinmede geriye doğru (bfcache) kullanıldığında, bu genellikle neredeyse anında gezinmeyle sonuçlanır. Bu da çok küçük LCP ve FCP metrikleri ile daha düşük CLS ve INP metriklerine yansır.

Gezinme türü dökümünü göstererek, site sahiplerini sitelerinde kullanılan gezinme türleri konusunda daha fazla bilgilendirmeye teşvik etmeyi ve önbelleğe alma ayarlarını, bfcache engelleyicileri ve önceden işlemeyi inceleyerek daha hızlı türlerden bazılarını teşvik etmeyi umuyoruz.

navigation_types metriği; günlük CrUX API'de, CrUX History API'de (başlangıçta 3 haftalık geçmiş mevcuttur ve önümüzdeki 6 ay içinde haftalık olarak tam kapsamaya ulaşacak şekilde artacaktır), en son CrUX BigQuery veri kümesinde ve CrUX Kontrol Paneli'nde mevcuttur. Geçmişe sahip olmak, site sahiplerinin zaman içinde gezinme türü kullanımındaki değişiklikleri görüntülemesine de olanak tanır. Bu, iyileştirmelerin (örneğin, bfcache engelini kaldırma) izlenmesini sağlayabilir. Ayrıca, sitelerinde hiçbir değişiklik yapılmamış olsa bile metriklerdeki değişikliklerin açıklanmasına da 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.
`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 almayı kullanır, ancak ana HTML belgesi çoğu zaman önemli ölçüde daha az önbelleğe alınır. Bu mümkün olduğunda, yerel olarak ve CDN'de önbelleğe alınabilir olmaktan önemli performans iyileştirmeleri sağlayabilir.
`reload`	Kullanıcı, yeniden yükle düğmesine veya adres çubuğuna Enter tuşuna basarak veya sekme kapatma işlemini geri alarak sayfayı yeniden yükledi. Sayfanın yeniden yüklenmesi, ana sayfanın değişip değişmediğinin kontrol edilmesi için genellikle sunucuya yeniden doğrulama yapılmasıyla sonuçlanır. Sayfaların yeniden yüklenmesinin yüksek bir yüzdesi, kullanıcıların hayal kırıklığına uğradığını gösteriyor olabilir.
`restore`	Sayfa, tarayıcı yeniden başlatıldıktan veya bellekle ilgili nedenlerden dolayı kaldırılmış bir sekme yeniden yüklenmişse. Android üzerinde Chrome için bunlar bunun yerine `reload` olarak bildirilir.
`back_forward`	Geçmiş bölümünde gezinme. Diğer bir deyişle, sayfa yakın zamanda görüldü ve geri dönüldü. Doğru önbelleğe alma kullanıldığında, bunların makul ölçüde hızlı olması gerekir ancak yine de sayfanın işlenmesini ve JavaScript'in yürütülmesini gerektirir. Her ikisinde de bfcache önlenir.
`back_forward_cache`	Bfcache'den sunulan bir geçmiş gezinmesi. Bfcache'den yararlanmak için sayfalarınızı optimize etmek deneyimlerin daha hızlı olmasını sağlayacaktır. Siteler, bu kategorideki gezinme yüzdesini artırmak için bfcache engelleyicileri kaldırmaya çalışmalıdır.
`prerender`	Sayfa önceden işlenmiş olduğundan (bfcache'a benzer şekilde), sayfaların neredeyse anında yüklenmesine neden olabilir.

Bazı durumlarda, sayfa yükleme işlemi, birden fazla gezinme türünün bir kombinasyonu olabilir. Bu durumda CrUX, ilk eşleşmeyi önceki tablonun tersi sırayla (aşağıdan yukarıya) bildirir.

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

CrUX, herkese açık bir veri kümesi olduğundan raporlamada ayrıntı düzeyi sınırlıdır. Birçok kaynak ve URL için, uygun trafik yetersiz olduğundan navigation_types metriği kullanılamamaktadır. Daha fazla bilgi için CrUX metodolojisini inceleyin.

Ayrıca CrUX, gezinme türüne göre diğer metriklerin dökümünü de sunamamaktadır. Bu durum, CrUX'te bulunan başlangıç ve URL sayısını daha da azaltacaktır.

Trafiği gezinme türleri gibi ölçütlere göre bölebilmek için sitelerin kendi Gerçek Kullanıcı İzleme'yi (RUM) 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örebileceğinizi unutmayın. 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 ederken bfcache notRestoredWhys API, belirli bir sayfa yüklemenin bfcache'den neden yayınlanamadığı konusunda tam olarak bilgi verebilir.

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 dahil olmak üzere API belgelerinde daha ayrıntılı olarak açıklanmıştı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 }
    }
  }
}

Yanıtta CrUX, navigation_types metriğini her gezinme türü için sayfa yüklemelerinin kesirlerini içeren bir nesne olarak bildirir. Her kesir, belirli bir anahtar için 0.0 (sayfa yüklemelerinin% 0'ını belirtir) ile 1.0 (sayfa yüklemelerinin% 100'ünü belirtir) arasında bir değerdir.

Bu yanıttan, 6 Mart 2024'te başlayan toplama dönemi için (2 Nisan 2024'e kadar ve dahil) gezinmelerin (sayfa yüklemeleri) %6, 77'sinin tarayıcının bfcache'den sunulduğunu görebilirsiniz. Benzer şekilde, diğer kesirlerden bazıları sayfa yükleme optimizasyonları fırsatlarını belirlemeye yardımcı olabilir. Belirli bir anahtar için (bir URL ya da kaynak ve form faktörünün kombinasyonu dahil) navigation_types kesirlerinin toplamının yaklaşık 1,0 olduğunu unutmayın.

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 kesirler zaman içinde görselleştirilebilir. İsteğinizi CrUX API'den CrUX History API'ye geçirmek için, isteğinizi queryRecord yerine queryHistoryRecord uç noktasında çalıştırın. Örneğin, CrUX Geçmişi Colab'imiz, navigation_types metriğini yığın çubuklar olarak çizer:

Gezinme türlerinin 3 hafta boyunca en çok "gezinme" türünde olduğu ve üç hafta boyunca önemli bir değişiklik içermeyen gezinme türlerinin geçmişini gösteren yığınlı çubuk grafik. — Zaman içindeki gezinme türleri

Önceki ekran görüntüsünde geçmiş, yalnızca 3 toplama dönemi (her biri 28 gün, 7 gün arayla) için kullanılabilir. Bu alan tamamen doldurulduğunda 25 veri toplama döneminin tamamını kapsayacaktır. Bu geçmişi görselleştirmek, optimizasyonların etkili olduğunu veya gerilediğini teyit etmeyi mümkün kılar. Bu, özellikle bir sayfayı bfcache ve önceden işleme için optimize eden HTTP önbellek yapılandırması için geçerlidir.

CrUX BigQuery'de gezinme türleri

CrUX BigQuery tablolarında artık her türden oluşturulmuş bir navigation_type kaydı bulunurken özet gerçekleştirilmiş görünümlerde her tür için bir tane olmak üzere birden çok navigation_types_* sütunu bulunuyor.

Ayrıntılı tablolar

CrUX BigQuery'deki ayrıntılı tablo şeması, web performansı metrikleri için ayrıntılı histogramlar sağlar. Bu analizler, bu örnek analizinde belirli gezinme türlerinin hızlı veya iyi yükleme performansıyla nasıl ilişkilendirilebileceğini göstermemize olanak tanır.

Örneğin, back_forward_cache oranını ve bu oranın sayfaların hemen 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) korelasyonunu inceledik. Aşağıdaki grafikte gösterilen back_forward_cache ile instant_lcp_density arasında güçlü bir istatistiksel korelasyon (üst=0,87) ve back_forward_cache ile good_lcp_density arasında orta düzeyde bir korelasyon (url=0,29) gözlemledik.

Anında sayfa yüklemelerinin oranı ile bfcache sayfa yüklemelerinin oranı arasında güçlü bir ilişki gösteren korelasyon grafiği — Anlık sayfa yüklemelerinin bfcache kullanımıyla ilişkisi

Bu analiz için Colab'de gerekli açıklamaya yer verilmiştir. Burada yalnızca CrUX BigQuery'deki ayrıntılı tablolardan en popüler 10.000 kaynağın Navigation_types kesirlerini çıkaran sorgu ele alınmaktadır:

Buradan all.202403 tablosuna erişiriz (FROM maddesine bakın) ve phone için form_factor filtresini uygularız ve en popüler 10.000 kaynak için popülerlik sıralaması <= 10.000 olan kaynakları seçeriz (WHERE maddesine bakın).
BigQuery'de navigation_types metriğini sorgularken, navigation_types kesirlerinin toplamına bölünmesi gerekir. Çünkü kesirler yalnızca kaynak başına toplanır, (kaynak, form faktörü) kombinasyonu başına toplanmaz.
Her kaynak navigation_types özelliğine sahip olmayacağından SAVE_DIVIDE özelliğinin 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

Bir özet yeterli olduğunda gerçekleştirilmiş tabloları sorgulamak genellikle daha elverişli (ve daha ucuz) olur. Örneğin, aşağıdaki sorgu chrome-ux-report.materialized.device_summary tablosundaki kullanılabilir navigation_types verilerini çıkarır. Bu tablo ay, kaynak 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 her satırda 1,0 toplamına ulaşmayacağını unutmayın.Bu nedenle, her bir kesir, sorgunun yorumlanacağı sonuçların toplamına bölünmesi gerekir.

Bunun nedeni, chrome-ux-report.materialized.device_summary içindeki navigation_type kesirlerinin (histogram yoğunlukları gibi) her tarih için kaynak ve cihaz başına elde edilen değer yerine kaynak başına 1,0'a kadar toplanmasıdır. Bu, cihazlar arasında gezinme türü dağılımını görüntülemenize olanak tanır:

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, kaynak https://www.google.com için sayfa yüklemelerinin yüzdesini yansıtır: Bu sayfa yüklemelerinin% 6,63'ü telefonda back_forward, masaüstünde% 1,79 ve tablette% 0,09 gezinme türündedir.

phone alanındaki oldukça yüksek back_forward yüzdesi, bu sayfa yüklemelerini bfcache'den sunulabilecek şekilde optimize etmeye çalışabileceğimizi gösterir.

Bununla birlikte, sayfa yüklemelerinin ne kadarlık bir kısmının bfcache tarafından halihazırda sunulduğunun dikkate alınması da önemlidir. Bu oran, bfcache isabet oranıdır. Aşağıdaki sorgu, telefon ve masaüstü için% 60'ın üzerinde isabet oranı göz önünde bulundurulduğunda, söz konusu kaynağın zaten iyi bir şekilde optimize edilmiş olabileceğini göstermektedir.

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`

Telefonlardaki yüksek back_forward oranı, daha az bfcache kullanımından değil, kullanıcıların telefonlarda daha fazla geri ve ileri gitme şeklini yansıtır.

CrUX Kontrol Paneli'ndeki gezinme türleri

Gezinme türlerini görmenin en kolay yolu, bir kaynak için bu bağlantıdan erişilebilen CrUX Kontrol Paneli'dir. Aşağıdaki ekran görüntüsünde de görebileceğiniz gibi, başlangıçta yalnızca bir aylık veri mevcuttur, ancak zamanla geçmiş, her ay türlerdeki değişiklikleri görebileceğiniz şekilde dolar.

Sizin de görebileceğiniz gibi, Kontrol Paneli'nin bu sayfasının üst kısmında, turistik yerlerin optimize edilmesi gereken daha hızlı gezinme türlerini vurguladık.

Sonuç

CrUX'teki gezinme türü dökümlerini yararlı bulacağınızı ve bu dökümlerin, sitenizin performansını anlayıp optimize etmenize yardımcı olacağını umuyoruz. Siteler; HTTP önbelleğine, bfcache'e ve önceden işlemenin verimli bir şekilde kullanılmasını sağlayarak sayfaların tekrar sunucuya gönderilmesini gerektiren sayfa yüklemelerine kıyasla çok daha hızlı yüklenmesini sağlayabilir.

Ayrıca verilerin çeşitli CrUX erişim noktalarında kullanıma sunulmasından da mutluluk duyuyoruz. Böylece kullanıcılar verileri istedikleri gibi kullanabilir ve CrUX API'lerinde görüntülenenler için URL'ye göre tür dökümlerini görebilirler.

CrUX'e yapılan bu eklemeyle ilgili görüşlerinizi sosyal medyada veya CrUX tartışma grubunda duymayı çok isteriz.