Yayınlanma tarihi: 7 Şubat 2023, Son güncelleme tarihi: 11 Nisan 2025
Bu kılavuzda, web performansı verilerinin zaman serisini sağlayan Chrome Kullanıcı Deneyimi Raporu (CrUX) Geçmişi API uç noktası tanıtılmaktadır. Bu veriler haftalık olarak güncellenir ve 40 veri noktasının haftalık aralıklarla yer aldığı yaklaşık 6 aylık geçmişi görmenizi sağlar.
Orijinal CrUX API uç noktasından alınan günlük güncellemelerle birlikte kullanıldığında artık hem en son verileri hem de daha önce neler olduğunu hızlıca görebilirsiniz. Bu sayede, web sayfası değişikliklerini zaman içinde görmek için bu aracı güçlü bir şekilde kullanabilirsiniz.
Bu sayfada API'yi deneyin
Günlük CrUX API'yi sorgulayın
CrUX API ile ilgili önceki bir makalede özetlendiği gibi, belirli bir kaynak için alan verilerinin anlık görüntüsünü şu şekilde alabilirsiniz:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" --header 'Content-Type: application/json' --data '{"origin": "https://web.dev"}'
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogram": [{
"start": 0, "end": 2500, "density": 0.9192
}, {
"start": 2500, "end": 4000, "density": 0.0513
}, {
"start": 4000, "density": 0.0294
}],
"percentiles": {
"p75": 1303
}
}
// ...
},
"collectionPeriod": {
"firstDate": { "year": 2022, "month": 12, "day": 27 },
"lastDate": { "year": 2023, "month": 1, "day": 23 }
}
}
}
Bu anlık görüntü, belirli bir 28 günlük toplama dönemi (bu örnekte 27 Aralık 2022 - 23 Ocak 2023) için histogram yoğunluğu değerlerini ve yüzdelik değer değerlerini içerir.
CrUX History API'yi sorgulayın
Geçmiş uç noktasını çağırmak için URL'deki queryRecord değerini curl komutundaki queryHistoryRecord değerine değiştirin. Önceki çağrıda kullanılan CrUX API anahtarını kullanabilirsiniz.
collectionPeriodCount, döndürülecek zaman serisi girişlerinin sayısını belirtir. Maksimum değer 40'tır. Belirtilmezse varsayılan olarak 25 olur.
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"origin": "https://web.dev", "collectionPeriodCount": 40}'
Yanıtın genel şekli benzerdir ancak çok daha fazla veri vardır. Artık tek bir veri noktası yerine, 75. yüzdelik dilim (p75) ve histogram yoğunluğu değerlerini içeren alanlar için zaman serileri mevcuttur.
{
"record": {
"key": {
"origin": "https://web.dev"
},
"metrics": {
"largest_contentful_paint": {
"histogramTimeseries": [{
"start": 0, "end": 2500, "densities": [
0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187
]
}, {
"start": 2500, "end": 4000, "densities": [
0.0521, 0.0513, 0.0518, 0.0518, 0.0526, 0.0527
]
}, {
"start": 4000, "densities": [
0.0288, 0.0282, 0.0286, 0.0285, 0.0290, 0.0285
]
}
],
"percentilesTimeseries": {
"p75s": [
1362, 1352, 1344, 1356, 1366, 1377
]
}
}
// ...
},
"collectionPeriods": [{
"firstDate": { "year": 2022, "month": 7, "day": 10 },
"lastDate": { "year": 2022, "month": 8, "day": 6 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 17 },
"lastDate": { "year": 2022, "month": 8, "day": 13 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 24 },
"lastDate": { "year": 2022, "month": 8, "day": 20 }
}, {
"firstDate": { "year": 2022, "month": 7, "day": 31 },
"lastDate": { "year": 2022, "month": 8, "day": 27 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 7 },
"lastDate": { "year": 2022, "month": 9, "day": 3 }
}, {
"firstDate": { "year": 2022, "month": 8, "day": 14 },
"lastDate": { "year": 2022, "month": 9, "day": 10 }
}
]
}
}
Bu örnekte, Largest Contentful Paint (LCP) metriğinin 0 ila 2.500 ms aralığı için densities zaman serisi [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187].'dır. Bu yoğunlukların her biri, ilgili collectionPeriods girişi sırasında gözlemlenmiştir. Örneğin, beşinci yoğunluk (0,9183) 3 Eylül 2022'de sona eren beşinci toplama dönemine aitken, 0,9187 yoğunluk bir hafta sonra sona eren dönemdeki yoğunluktur.
Diğer bir deyişle, https://web.dev örneğindeki son zaman serisi girişlerini yorumlarken 14 Ağustos 2022 ile 10 Eylül 2022 arasında sayfa yüklemelerinin% 91,87'sinde LCP değerlerinin 2.500 ms'den küçük, %5,27'sinde 2.500 ms ile 4.000 ms arasında ve% 2,85'inde 4.000 ms'den büyük olduğu tespit edildi.
Benzer şekilde, p75 değerleri için bir zaman serisi vardır: 14 Ağustos 2022 ile 10 Eylül 2022 arasındaki LCP p75 değeri 1377 idi. Bu, bu toplama döneminde kullanıcı deneyimlerinin% 75'inde LCP'nin 1.377 ms'den az, %25'inde ise 1.377 ms'den fazla olduğu anlamına gelir.
Örnekte yalnızca 6 zaman serisi girişi ve toplama dönemi listelenirken API'den gelen yanıtlar varsayılan olarak 25 zaman serisi girişi ve istekte "collectionPeriodCount": 40 belirtildiğinde en fazla 40 giriş sağlar. Bu toplama dönemlerinin her birinin bitiş tarihi, 7 gün arayla gelen cumartesi günleri olduğundan "collectionPeriodCount": 40, 10 ayı kapsar.
Herhangi bir yanıtta, histogram kutu yoğunluğu ve p75 değerleri için zaman serisinin uzunluğu collectionPeriods alanındaki dizinin uzunluğuyla tam olarak aynı olacaktır: Bu dizilerdeki dizinlere göre bire bir ilişki vardır.
Sayfa düzeyindeki verileri sorgulayın
CrUX History API, kaynak düzeyindeki verilerin yanı sıra geçmiş sayfa düzeyindeki verilere de erişim sağlar. Kaynak düzeyindeki veriler daha önce BigQuery'deki CrUX veri kümesi (veya CrUX Kontrol Paneli) kullanılarak kullanılabilirken sayfa düzeyindeki geçmiş veriler yalnızca sitelerin verileri toplayıp depolaması durumunda kullanılabilirdi. Yeni API, artık sayfa düzeyindeki geçmiş verilere erişmenize olanak tanır.
Sayfa düzeyindeki veriler aynı şekilde sorgulanabilir ancak yükü origin yerine url kullanılarak sorgulanabilir:
API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryHistoryRecord?key=$API_KEY" \
--header 'Content-Type: application/json' \
--data '{"url": "https://web.dev/blog/"}'
Sayfa düzeyindeki (ve kaynak düzeyindeki) geçmiş veriler, CrUX'un geri kalanıyla aynı uygunluk koşullarına tabidir. Bu nedenle, özellikle sayfaların geçmiş kayıtları eksik olabilir. Bu durumlarda "eksik" veriler, histogramTimeseries yoğunlukları için "NaN" ve percentilesTimeseries için null ile gösterilir. Farkın nedeni, histogram yoğunluklarının her zaman sayı olması, yüzdelik dilimlerin ise sayı veya dize olabilmesidir (CLS, sayı gibi görünse bile dize kullanır).
Verileri görselleştirme
Verileri görselleştirmenin en kolay yolu, CrUX History API'nin gücünü göstermek için özel olarak oluşturulmuş bir araç olan CrUX Vis'i kullanmaktır. Daha fazla bilgi için CrUX Vis dokümanlarını inceleyin.
Benzer grafikleri kendiniz oluşturmak için örnek bir Colab dosyası oluşturduk. Colab veya "Colaboratory", tarayıcınızdan Python yazmanıza ve çalıştırmanıza olanak tanır. CrUX History API Colab (kaynak), API'ye çağrı yapmak ve verileri grafik haline getirmek için Python'u kullanır.
Bu Colab, kısa bir form doldurarak p75 grafikleri, üç bölmeli grafikler oluşturmanıza, verileri tablo biçiminde almanıza ve CrUX API için istek ve yanıt çiftini görmenize olanak tanır. Bunu kullanmak için programcı olmanız gerekmez. Ancak Python koduna göz atabilir ve onu muhteşem bir şeye dönüştürebilirsiniz. Keyfini çıkarın ve karşılaştığınız içeriklerle ilgili geri bildirimde bulunmaktan çekinmeyin.
Elbette Colab veya Python ile sınırlı değilsiniz. Bu yeni API'nin nasıl kullanılacağına dair bu örnekten yararlanabilirsiniz. JSON tabanlı bir HTTP uç noktası olarak API, herhangi bir teknolojiden sorgulanabilir.
Sonuç
CrUX History API uç noktası kullanıma sunulmadan önce site sahipleri, CrUX'ten alabilecekleri geçmiş bilgilerle sınırlıydı. BigQuery ve CrUX kontrol paneli kullanılarak aylık kaynak düzeyinde veriler kullanılabilirdi ancak haftalık veriler ve sayfa düzeyinde geçmiş veriler kullanılamazdı. Site sahipleri, günlük API'yi kullanarak bu verileri kendileri kaydedebilir ancak genellikle bu ihtiyacın, metriklerde bir gerileme yaşandıktan sonra keşfedildiği görülmüştür.
Bu CrUX Geçmişi API'sinin kullanıma sunulmasıyla site sahiplerinin değişen site metriklerini daha iyi anlayabilmesi ve sorunlar ortaya çıktığında teşhis aracı olarak kullanabilmesini amaçlıyoruz. Yeni API'yi kullanıyorsanız Chrome UX Report (Discussions) google grubunda geri bildirimlerinizi bekliyoruz.
Teşekkür ederiz
Unsplash'ta Dave Herring tarafından oluşturulan hero resim