Panduan ini memperkenalkan endpoint Chrome UX Report (CrUX) History API, yang menyediakan deret waktu data performa web. Data ini diperbarui setiap minggu, dan memungkinkan Anda melihat histori selama sekitar 6 bulan, dengan 25 titik data yang berjarak seminggu.
Saat digunakan dengan update harian dari endpoint CrUX API asli, kini Anda dapat dengan cepat melihat data terbaru dan peristiwa yang terjadi sebelumnya. Dengan begitu, Anda dapat melihat perubahan halaman web dari waktu ke waktu dengan cepat.
Membuat kueri CrUX API harian
Sebagai rangkuman dari artikel sebelumnya tentang CrUX API, Anda dapat memperoleh ringkasan data kolom untuk tempat asal tertentu dengan cara ini:
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 }
}
}
}
Ringkasan ini mencakup nilai kepadatan histogram dan nilai persentil untuk periode pengumpulan 28 hari tertentu, dalam hal ini, dari 27 Desember 2022 hingga 23 Januari 2023.
Membuat kueri ke CrUX History API
Untuk memanggil endpoint histori, ubah queryRecord di URL menjadi queryHistoryRecord di perintah curl. Penggunaan kunci CrUX API yang sama seperti untuk panggilan sebelumnya akan berfungsi.
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"}'
Bentuk respons secara keseluruhan serupa—tetapi ada lebih banyak data. Alih-alih satu titik data, sekarang ada deret waktu untuk kolom yang berisi nilai persentil ke-75 (p75) dan kepadatan histogram.
{
"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 }
}
]
}
}
Dalam contoh ini, deret waktu densities untuk bucket 0 hingga 2500 md dari metrik Largest Contentful Paint (LCP) adalah [0.9190, 0.9203, 0.9194, 0.9195, 0.9183, 0.9187].. Setiap kepadatan ini diamati selama entri collectionPeriods yang sesuai. Misalnya, kepadatan kelima, 0,9183, adalah kepadatan untuk periode pengumpulan kelima, berakhir pada 3 September 2022, dan 0,9187 adalah kepadatan pada periode yang berakhir minggu setelahnya.
Dengan kata lain, dengan menafsirkan entri deret waktu terakhir dalam contoh untuk https://web.dev, ditemukan bahwa dari 14 Agustus 2022 hingga 10 September 2022, 91,87% pemuatan halaman memiliki nilai LCP yang lebih kecil dari 2.500 md, 5,27% memiliki nilai antara 2.500 md dan 4.008 md, dan 4.00% memiliki nilai lebih besar dari 2.500 md, dan 4.008 md
Demikian pula, ada deret waktu untuk nilai p75: LCP p75 untuk 14 Agustus 2022 hingga 10 September 2022 adalah 1377. Artinya, untuk periode pengumpulan ini, 75% pengalaman pengguna memiliki LCP kurang dari 1.377 milidetik, dan 25% pengalaman pengguna memiliki LCP lebih besar dari 1377 milidetik.
Meskipun contoh ini hanya mencantumkan 6 entri deret waktu dan periode pengumpulan, respons dari API menyediakan 25 entri deret waktu; karena tanggal akhir untuk masing-masing periode pengumpulan ini adalah hari Sabtu yang berjarak 7 hari, maka ini mencakup 6 bulan.
Dalam respons tertentu, panjang deret waktu untuk kepadatan bin histogram dan untuk nilai p75 akan sama persis dengan panjang array di kolom collectionPeriods: Terdapat korespondensi one-to-one berdasarkan indeks ke dalam array ini.
Membuat kueri data tingkat halaman
Selain data tingkat origin, CrUX History API memungkinkan akses ke data histori tingkat halaman. Meskipun data tingkat origin telah tersedia sebelumnya menggunakan set data CrUX di BigQuery (atau menggunakan Dasbor CrUX), data historis tingkat halaman hanya tersedia jika situs mengumpulkan dan menyimpan datanya sendiri. API baru ini kini membuka data tingkat halaman historis.
Kueri data tingkat halaman dapat dilakukan dengan cara yang sama, tetapi dalam payload menggunakan url, bukan origin:
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/"}'
Data historis tingkat halaman (dan tingkat asal) tunduk kepada persyaratan kelayakan yang sama dengan CrUX lainnya, sehingga halaman secara khusus mungkin tidak memiliki catatan historis yang lengkap. Dalam kasus ini, data yang "tidak ada" akan diwakili oleh "NaN" untuk kepadatan histogramTimeseries dan null untuk percentilesTimeseries. Alasan perbedaannya adalah kepadatan histogram selalu berupa angka, sedangkan persentil dapat berupa angka atau string (CLS menggunakan string, meskipun terlihat seperti angka).
Memvisualisasikan data
Jadi, Anda mungkin bertanya, mengapa data dibentuk seperti itu? Ditemukan bahwa hal ini mempermudah pemetaan grafik. Misalnya, berikut adalah grafik nilai p75 untuk Interaction To Next Paint (INP) untuk https://web.dev:
Pada diagram garis ini, setiap nilai sumbu y adalah nilai p75 dari deret waktu p75s, dan sumbu x adalah waktu, yang disiapkan sebagai lastDate untuk setiap periode pengumpulan.
Berikut ini adalah grafik untuk deret waktu bin histogram—dikenal sebagai diagram tri-bin—karena histogram ini memiliki tiga bin.
Sumbu x disiapkan sebagai lastDate untuk setiap periode pengumpulan. Namun, kali ini sumbu y adalah persentase pemuatan halaman yang jatuh ke dalam rentang tertentu untuk metrik INP, yang ditampilkan melalui diagram batang bertumpuk. Diagram p75 memberikan ringkasan singkat, dan dalam satu diagram, relatif mudah untuk menambahkan beberapa metrik, atau menampilkan garis untuk PHONE dan DESKTOP. Diagram tri-bin memberikan gambaran tentang distribusi nilai metrik yang diukur selama setiap periode pengumpulan.
Misalnya, meskipun diagram p75 menunjukkan bahwa https://web.dev memiliki nilai INP yang hampir dapat diterima selama periode pengamatan, diagram tri-bin menunjukkan bahwa untuk sebagian kecil pemuatan halaman, INP sebenarnya buruk. Dalam kedua diagram tersebut, relatif mudah untuk menyimpulkan bahwa ada regresi performa yang dimulai menjelang akhir Oktober, dan diperbaiki pada pertengahan November.
Untuk membuat sendiri diagram tersebut, kami telah membuat contoh Colab. Colab, atau 'Colaboratory', memungkinkan Anda menulis dan mengeksekusi Python dari dalam browser Anda. CrUX History API Colab (sumber) menggunakan Python untuk melakukan panggilan ke API dan membuat diagram data.
Colab ini memungkinkan Anda membuat diagram p75 dan diagram tri-bin, mendapatkan data dalam bentuk tabel, serta melihat pasangan permintaan dan respons untuk CrUX API, dengan mengisi formulir singkat. Anda tidak perlu menjadi programmer untuk menggunakan ini—tetapi Anda tentu bisa melihat kode Python dan mengubahnya menjadi sesuatu yang luar biasa. Selamat menikmati dan jangan ragu untuk memberikan masukan tentang temuan Anda.
Tentu saja Anda tidak dibatasi pada Colab atau Python, dan ini hanyalah salah satu contoh cara menggunakan API baru ini. Sebagai endpoint HTTP berbasis JSON, API dapat dikueri dari teknologi apa pun.
Kesimpulan
Sebelum pengenalan endpoint CrUX History API, pemilik situs tidak terlalu banyak mendapatkan informasi historis yang dapat diperoleh dari CrUX. Data tingkat origin bulanan tersedia menggunakan BigQuery dan Dasbor CrUX, tetapi data mingguan tidak tersedia begitu juga data historis tingkat halaman. Pemilik situs dapat merekam sendiri data ini menggunakan API harian, tetapi sering kali kebutuhan akan data ini hanya ditemukan setelah regresi dalam metrik.
Dengan diperkenalkannya API Histori CrUX ini, kami berharap dapat membantu pemilik situs lebih memahami metrik situs yang berubah-ubah, dan sebagai alat diagnostik saat terjadi masalah. Jika Anda menggunakan API baru, kami mengharapkan masukan Anda di grup google (Diskusi) Laporan UX Chrome.
Ucapan terima kasih
Banner besar oleh Dave Herring di Unsplash