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 25 veri noktasıyla bir haftalık aralıkla 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 durumda 27 Aralık 2022 - 23 Ocak 2023) için histogram yoğunluğu değerlerini ve yüzdelik dilim 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 olarak değiştirin. Önceki çağrıda kullanılan 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ı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 ait yoğunluk, 0,9187 ise 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 1377 ms'den az, %25'inde ise 1377 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ıtlarda 25 zaman serisi girişi sağlanır. Bu toplama dönemlerinin her birinin bitiş tarihi 7 gün arayla gelen cumartesi günleri olduğu için bu 6 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 Geçmiş API'si, 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
Peki veriler neden bu şekilde şekillendirilir? Bu sayede grafiklerin çizilmesi kolaylaşıyor. Örneğin, https://web.dev için Interaction to Next Paint (INP) metriğinin p75 değerlerini gösteren bir grafik aşağıda verilmiştir:
Bu çizgi grafikte, y eksenindeki her değer p75s zaman serisinden alınan bir p75 değeridir ve x ekseni, her toplama dönemi için lastDate olarak ayarlanan zamandır.
Bu histogramlarda üç kutu bulunduğundan, histogram kutusu zaman serisi için üç kutulu grafik olarak bilinen bir grafik verilmiştir.
X ekseni, her koleksiyon dönemi için lastDate olarak ayarlanır. Ancak bu kez y ekseni, INP metriği için belirli bir aralığa giren sayfa yüklemelerinin yüzdesidir ve yığılmış çubuk grafikle gösterilir. p75 grafiği hızlı bir genel bakış sunar. Tek bir grafikte birden fazla metrik eklemek veya hem PHONE hem de DESKTOP için çizgiler göstermek nispeten kolaydır. Üç bölmeli grafik, her toplama dönemi boyunca ölçülen metrik değerlerinin dağılımı hakkında fikir verir.
Örneğin, p75 grafiği https://web.dev'in gözlem döneminde neredeyse kabul edilebilir INP değerlerine sahip olduğunu öne sürse de üç bölmeli grafik, sayfa yüklemelerinin küçük bir kısmında INP'nin aslında düşük olduğunu gösterir. Her iki grafikte de Ekim ayının sonlarına doğru başlayan ve Kasım ayının ortasına kadar düzeltilen bir performans gerileme olduğunu anlamak nispeten kolaydır.
Bu tür grafikleri kendiniz oluşturmak için örnek bir Colab 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