Bu kılavuzda, web performans verilerinin zaman serisi sağlayan Chrome Kullanıcı Deneyimi Raporu (CrUX) Geçmişi API'si uç noktası tanıtılmaktadır. Bu veriler haftalık olarak güncellenir ve bir haftalık 25 veri noktasıyla yaklaşık 6 aylık geçmişi görmenize olanak tanır.
Orijinal CrUX API uç noktasından günlük güncellemelerle kullanıldığında, artık hem en son verileri hem de daha önce olanları hızlı bir şekilde görebilirsiniz. Bu sayede, web sayfası zaman içinde gerçekleşen değişiklikleri görmek için güçlü bir araç haline gelir.
Günlük CrUX API'yi sorgulama
CrUX API ile ilgili önceki bir makaleden özetlemek gerekirse, belirli bir kaynağa ait 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üde, 27 Aralık 2022 ile 23 Ocak 2023 arasındaki belirli 28 günlük toplama dönemi için histogram yoğunluk değerleri ve yüzdelik dilim değerleri bulunur.
CrUX History API'yi sorgulama
Geçmiş uç noktasını çağırmak için curl komutunda URL'deki queryRecord değerini queryHistoryRecord olarak değiştirin. Önceki çağrıyla aynı CrUX API anahtarını kullanabilirsiniz.
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"}'
Yanıtların genel şekli benzerdir ancak çok daha fazla veri vardır. Artık tek bir veri noktası yerine, 75. yüzdelik dilimi (p75) ve histogram yoğunluk değerlerini içeren alanlar için zaman serileri bulunmaktadır.
{
"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 2500 ms'lik paketi için densities zaman serisi, [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187]. değerine karşılık gelen collectionPeriods girişi sırasında bu yoğunlukların her biri gözlemlendi. Örneğin, beşinci yoğunluk olan 0,9183, 3 Eylül 2022'de sona eren beşinci toplama dönemindeki yoğunluk, 0,9187 ise bundan sonraki hafta sona eren dönemdeki yoğunluktur.
Başka bir deyişle, https://web.dev örneğindeki son zaman serisi girişleri yorumlandığında, 14 Ağustos 2022 ile 10 Eylül 2022 arasında sayfa yüklemelerinin %91,87'sinin 2500 ms'den küçük LCP değerlerine, %5,27'sinde 2500 ms ile 4000 ms arasında, 80 ms'den 8000 ms'den yüksek değerlere sahip 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 durum, bu toplama döneminde kullanıcı deneyimlerinin% 75'inin 1377 ms'den az, %25'inin ise 1377 ms'den yüksek LCP'ye sahip olduğu anlamına gelir.
Örnekte yalnızca 6 zaman serisi girişi ve toplama dönemi listelenirken API'den gelen yanıtlar 25 zaman serisi girişi sağlar. Bu toplama dönemlerinin her birinin bitiş tarihi, aradaki 7 gün olan cumartesi günleri olduğu için 6 ayı kapsar.
Herhangi bir yanıtta, histogram bin yoğunluklarına ve p75 değerlerine ilişkin zaman serisinin uzunluğu, collectionPeriods alanındaki dizinin uzunluğuyla tam olarak aynı olacaktır: Bu dizilerdeki dizine dayalı bire bir eşleşme vardır.
Sayfa düzeyindeki verileri sorgulama
CrUX History API, kaynak düzeyindeki verilerin yanı sıra sayfa düzeyindeki geçmiş verilere de erişim sağlar. Kaynak düzeyindeki veriler daha önce BigQuery'deki CrUX veri kümesi (veya CrUX Kontrol Paneli) kullanılarak (veya CrUX Kontrol Paneli kullanılarak) kullanılabilirken, sayfa düzeyindeki geçmiş veriler yalnızca sitelerin verileri toplayıp depoladığı durumlarda kullanılabiliyordu. Yeni API, artık sayfa düzeyindeki geçmiş verilerin kilidini açıyor.
Sayfa düzeyindeki veriler aynı şekilde sorgulanabilir, ancak yükte origin yerine url kullanılabilir:
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üzeyinde (ve kaynak düzeyinde) geçmiş veriler, CrUX'in geri kalanıyla aynı uygunluk koşullarına tabidir. Bu nedenle, özellikle sayfaların geçmiş kaydı tam olmayabilir. Böyle durumlarda "eksik" olan veriler histogramTimeseries yoğunlukları için "NaN", percentilesTimeseries için de null ile gösterilir. Farkın nedeni, histogram yoğunluklarının her zaman sayı olmasıdır. Yüzdelik dilimler ise sayılar veya dizeler olabilir (CLS, sayı gibi görünseler bile dize kullanır).
Verileri görselleştirme
O halde, verilerin neden bu şekilde şekillendirildiğini sorabilirsiniz. Bu sayede grafik oluşturmayı kolaylaştırdığı tespit edildi. Örneğin, https://web.dev için Sonraki Boyamayla Etkileşim (INP) özelliğinin p75 değerlerinin bir grafiğini burada görebilirsiniz:
Bu çizgi grafikte, y eksenindeki her bir değer p75s zaman serisine ait bir p75 değeridir ve x ekseni ise her bir toplama dönemi için lastDate olarak ayarlanan zamandır.
Burada, üç bölme grafiği olarak bilinen, histogramlar için üç bölme içeren bir histogram zaman serisi grafiği verilmiştir.
X ekseni, her toplama dönemi için lastDate olarak ayarlanır. Bununla birlikte, bu sefer y ekseni, INP metriği için belirli bir aralıkta yer alan ve yığınlı çubuk grafikle gösterilen sayfa yüklemelerinin yüzdesidir. p75 grafiği, hızlı bir genel bakış sağlar. Tek bir grafikte birden çok metrik eklemek veya hem PHONE hem de DESKTOP için çizgi göstermek nispeten daha kolaydır. Üç kutulu grafik, her veri toplama döneminde ölçülen metrik değerlerin dağılımı hakkında bir fikir verir.
Örneğin, p75 grafiği, https://web.dev sitesinin gözlem dönemi boyunca neredeyse kabul edilebilir INP değerlerine sahip olduğunu gösterse de üç kutulu grafik, sayfa yüklemelerinin küçük bir bölümünde INP'nin aslında zayıf olduğunu göstermektedir. Her iki grafikte de Ekim ayının sonuna doğru başlayan ve Kasım ayının ortalarında düzeltilen bir performans gerilemesinin yaşandığı sonucuna varmak nispeten kolaydır.
Bu tür grafikleri kendiniz oluşturmak için örnek bir Colab oluşturduk. Colab veya diğer adıyla "Colaboratory", Python'u tarayıcınızın içinden yazmanıza ve çalıştırmanıza olanak tanır. CrUX History API Colab (kaynak), API'ye çağrı yapmak ve verilerin grafiğini oluşturmak için Python'u kullanır.
Bu Colab sayesinde kısa bir form doldurarak p75 grafikleri ile üç kutulu grafikler oluşturabilir, verileri tablo biçiminde alabilir ve CrUX API için istek ve yanıt çiftini görebilirsiniz. Bunu kullanmak için programcı olmanız gerekmez, ancak Python koduna bakıp onu harika bir şekilde değiştirebilirsiniz. Lütfen keyifle bakın ve bulduklarınız hakkında geri bildirim sağlamaktan çekinmeyin!
Burada sadece Colab veya Python ile sınırlı kalmadınız. Burada, yeni API'yi nasıl kullanabileceğinize dair örneklerden yalnızca birisini paylaşıyoruz. JSON tabanlı bir HTTP uç noktası olarak API, her teknolojiden sorgulanabilir.
Sonuç
CrUX History API uç noktası kullanıma sunulmadan önce site sahipleri, CrUX'ten elde edebilecekleri geçmiş bilgileri sınırlıydı. BigQuery ve CrUX Kontrol Paneli kullanılarak aylık kaynak düzeyindeki verilere ulaşılabiliyor ancak haftalık verilere ulaşılamıyordu ve sayfa düzeyinde geçmiş veriler mevcut değildi. Site sahipleri bu verileri günlük API'yi kullanarak kaydedebiliyordu. Ancak buna ihtiyaç genellikle metriklerdeki regresyondan sonra keşfedildi.
Kullanıma sunulan bu CrUX History API'nin, site sahiplerinin değişen site metriklerini daha iyi anlamalarını sağlaması ve sorun çıktığında teşhis aracı olarak kullanılması umudu. Yeni API'yi kullanıyorsanız Chrome Kullanıcı Deneyimi Raporu (Tartışmalar) Google Grubu'ndan geri bildirimlerinizi bekliyoruz.
Teşekkür
Dave Herring tarafından Unsplash'teki hero resim