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'te hangi gezinme türleri kullanılabilir?
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:
Ö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.
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) vephone
içinform_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ğındanSAVE_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.