Bu kılavuzda, zaman serisi web performansı verileri sağlayan Chrome Kullanıcı Deneyimi Raporu (CrUX) Geçmiş API'si 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 günlük güncellemelerle birlikte kullanıldığında artık hem en son verileri hem de daha önceleri hızlı bir şekilde görebilirsiniz. Bu özellik, web sayfasındaki zaman içindeki değişikliklerini görmek için güçlü bir araç sunar.
Günlük CrUX API'yi sorgulayın
CrUX API ile ilgili önceki bir makalede özetlemek gerekirse, 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önemine (bu örnekte 27 Aralık 2022 ile 23 Ocak 2023 arasındaki) ait histogram yoğunluk değerlerini ve yüzdelik değerlerini içerir.
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"}'
Bir yanıtın genel şekli benzer olsa da elde edilen veri miktarı çok daha fazladı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'lik grubu için densities zaman serisi [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187]. değerine sahiptir. 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öneminin yoğunluğudur ve ondan sonraki hafta sona eren dönemin yoğunluğu 0,9187'dir.
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 tarihleri arasında sayfa yüklemelerinin %91,87'sinde LCP değerlerinin 2.500 ms.den, %5,27'sinin ise 2.500 ms ile 4.025 ms. arasında değerlere sahip olduğu ve
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önemi için kullanıcı deneyimlerinin% 75'inin LCP'sinin 1.377 ms'den az, %25'inin ise 1.377 ms.den yüksek LCP'ye sahip olduğu anlamına gelir.
Örnek yalnızca 6 zaman serisi girişi ve toplama dönemi listelese de API'nin yanıtları 25 zaman serisi girişi sağlar. Bu toplama dönemlerinin her birinin bitiş tarihi, aralarında 7 gün olan cumartesi günleri olduğu için bu süre 6 ayı kapsar.
Herhangi bir yanıtta, histogram bölme yoğunlukları ve p75 değerleri için zaman serisinin uzunluğu, collectionPeriods alanındaki dizinin uzunluğuyla tam olarak aynı olur: Bu dizilerde 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 CraUX veri kümesi kullanılarak (veya CrUX Kontrol Paneli kullanılarak) kullanılabiliyordu. Ancak, sayfa düzeyindeki geçmiş veriler yalnızca siteler verileri kendileri toplayıp depoladığında kullanılabiliyordu. Yeni API artık sayfa düzeyindeki geçmiş verilere ulaşmanızı sağlıyor.
Sayfa düzeyindeki veriler aynı şekilde sorgulanabilir, ancak yükte origin yerine url kullanılarak:
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'in geri kalanıyla aynı uygunluk koşullarına tabidir. Bu nedenle, özellikle sayfaların geçmiş kaydı eksiksiz olmayabilir. Bu durumlarda "eksik" veriler histogramTimeseries yoğunluk için "NaN", percentilesTimeseries için ise null ile gösterilir. Aradaki farkın nedeni, histogram yoğunluklarının her zaman sayı olmasıdır. yüzdelik dilimler ise sayı veya dize olabilir (CLS, sayı gibi görünse bile dizeleri kullanır).
Verileri görselleştirme
Yani verilerin neden bu şekilde şekillendiğini sorabilirsiniz. Bu yöntemin grafik oluşturmayı kolaylaştırdığı tespit edildi. Örneğin, https://web.dev için Sonraki Boyamayla Etkileşim (INP) ile ilgili p75 değerlerinin bir grafiği aşağıda verilmiştir:
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.
Üç bölme grafiği olarak bilinen histogram bin zaman serisi grafiğini aşağıda görebilirsiniz, çünkü bu histogramların üç bölmesi vardır.
X ekseni, her toplama dönemi için lastDate olarak ayarlanır. Bununla birlikte bu seferki y ekseni, yığınlı çubuk grafik aracılığıyla INP metriği için belirli bir aralığa denk gelen sayfa yüklemelerinin yüzdesidir. 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. Tri-bin grafiği, her toplama döneminde ölçülen metrik değerlerinin dağılımına dair bir fikir verir.
Örneğin, p75 grafiği gözlem süresi boyunca https://web.dev'in neredeyse kabul edilebilir INP değerlerine sahip olduğunu gösterse de tri-bin grafiği, 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 regresyonunun olduğu sonucuna varmak nispeten kolaydır.
Bu tür grafikleri kendiniz oluşturmak için örnek bir Colab oluşturduk. Colab veya "Colaboratory", tarayıcınızda Python'u yazmanızı ve çalıştırmanızı sağlar. CrUX History API Colab (kaynak), API'ye çağrı yapmak ve verileri grafiklemek için Python'u kullanır.
Bu Colab sayesinde p75 grafikleri ve üç kutuplu grafikler oluşturabilir, verileri tablo biçiminde alabilir ve kısa bir form doldurarak CrUX API için istek ve yanıt çiftini görebilirsiniz. Bu özelliği kullanmak için programcı olmanız gerekmez. Ancak Python koduna bakıp kodu muhteşem bir şeye dönüştürebilirsiniz. Deneyiminizin keyfini çıkarın ve bulduklarınızla ilgili geri bildirim vermekten çekinmeyin.
Elbette Colab veya Python ile sınırlı değilsiniz. Bu, bu yeni API'yi nasıl kullanabileceğinize dair yalnızca bir örnektir. JSON tabanlı bir HTTP uç noktası olan API, herhangi bir teknolojiden sorgulanabilir.
Sonuç
CrUX History API uç noktası kullanıma sunulmadan önce site sahiplerinin CrUX'ten alabilecekleri geçmiş bilgileri sınırlıydı. Kaynak düzeyindeki aylık veriler BigQuery ve CrUX Kontrol Paneli kullanılarak alınabiliyordu ancak haftalık veriler ve sayfa düzeyindeki geçmiş veriler mevcut değildi. Site sahipleri günlük API'yi kullanarak bu verileri kendileri kaydedebiliyordu. Ancak genellikle buna duyulan ihtiyaç, metriklerde bir regresyondan sonra ortaya çıkmıştı.
Kullanıma sunulan bu CrUX History API'nin, site sahiplerinin değişen site metriklerini daha iyi anlamasını ve sorunların ortaya çıktığında bir teşhis aracı olarak görmesini sağlamayı umut ediyoruz. Yeni API'yi kullanıyorsanız Chrome UX Report (Tartışmalar) Google Grubu'nda geri bildirimlerinizi bekliyoruz.
Teşekkür
Dave Herring'in Unsplash'teki hero görseli