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 bir haftaya göre aralıklı 25 veri noktasıyla yaklaşık 6 aylık geçmişi görmenize olanak tanır.
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 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ı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ıtı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 kullanılmaktadı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 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'den 10 Eylül 2022'ye kadar olan 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.
Örnek yalnızca 6 zaman serisi girişi ve toplama dönemi listelemesine rağmen API'nin yanıtları 25 zaman serisi girişi sağlar. Bu toplama dönemlerinin bitiş tarihleri arasında 7 gün olan cumartesi günleri olduğu için bu süre 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ı olur: Bu dizilerdeki dizinlere göre bire bir ilişki vardır.
Sayfa düzeyindeki verileri sorgulama
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 dizeleri 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 Sonraki Boyamayla Etkileşim (INP) ile ilgili p75 değerlerinin grafiğini aşağıda görebilirsiniz:
Bu çizgi grafikte, y eksenindeki her değer p75s zaman serisinden bir p75 değeridir ve x ekseni ise her toplama dönemi için lastDate olarak ayarlanan zamandır.
Aşağıda, histogram kutusu zaman serisi grafiği (üç kutulu grafik olarak da bilinir) verilmiştir. Bu histogramlarda üç kutu bulunduğundan bu grafikte üç kutulu grafik kullanılmıştır.
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ış sağlar ve 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 grafiklemek 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 yalnızca bir örnektir. 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ılabilirken 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