Tentang codelab ini
1. Sebelum memulai
Dalam codelab ini, Anda akan mempelajari cara mengukur Data Web Inti halaman web dengan PageSpeed Insights (PSI) API dan Chrome UX Report (CrUX) API.
Kedua API menampilkan data Data Web Inti yang identik, tetapi setiap API menawarkan manfaat yang berbeda. Selain data CrUX dari lapangan, PSI API juga menyediakan data dari Lighthouse, yang merupakan alat open source otomatis Google yang mengaudit halaman web dan merekomendasikan cara meningkatkannya. CrUX API tidak menyediakan data Lighthouse, sehingga berjalan lebih cepat.
Google merekomendasikan agar Anda mengukur Data Web Inti di perangkat seluler dan desktop. Data Web Inti mencakup tiga metrik ini, yang berlaku untuk semua halaman web dan memberikan analisis penting kepada Anda terkait pengalaman pengguna:
- Largest Contentful Paint (LCP). Mengukur performa pemuatan dan akan terjadi dalam 2,5 detik saat halaman mulai dimuat.
- Penundaan Input Pertama (FID). Mengukur interaktivitas dan akan terjadi dalam waktu 100 milidetik.
- Pergeseran Tata Letak Kumulatif (CLS). Mengukur stabilitas visual dan harus dalam 0,1.
Prasyarat
- Artikel Data Web.
- Menentukan artikel ambang batas metrik Data Web Inti.
- Pengetahuan dasar tentang cara menggunakan command line.
Yang akan Anda lakukan
- Ukur Data Web Inti halaman web dengan PSI API.
- Ukur Data Web Inti halaman web dengan CrUX API.
Yang Anda butuhkan
- Akun Google
- Akses ke command line
- Editor teks pilihan Anda
- Browser web pilihan Anda
- URL pilihan Anda (Codelab ini menggunakan https://developers.google.com.)
2. Mengukur Data Web Inti dengan PSI API
- Jika Anda memerlukan data performa untuk URL versi desktop, jalankan perintah
curlini untuk meminta data dari PageSpeed Insights API dan menyimpannya dalam fileresponse.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
Ganti placeholder YOUR_URL dengan URL Anda.
- Jika Anda memerlukan data performa untuk URL versi seluler, tetapkan parameter kueri
strategyke nilaimobiledi akhir string API dalam perintah yang disediakan di langkah sebelumnya:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Ganti placeholder YOUR_URL dengan URL Anda.
- Di editor teks, buka file
response.txt, lalu temukan propertiloadingExperience:
respons.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
Properti loadingExperience melaporkan informasi ini untuk setiap Data Web Inti berdasarkan URL dan jenis perangkat yang ditunjukkan dalam permintaan API:
- Properti
percentilemenunjukkan persentil ke-75 untuk setiap metrik. - Properti
distributionsmenunjukkan persentase kunjungan halaman yang memiliki pengalaman yang baik, perlu peningkatan, atau buruk untuk setiap metrik. - Properti
categorymengklasifikasikan performa setiap metrik sebagai lambat, rata-rata, atau cepat.
Jika konten properti loadingExperience kosong, URL tidak memiliki cukup data performa yang tersedia. Masalah ini biasanya muncul saat Anda menguji halaman dengan traffic rendah.
- Temukan properti
originLoadingExperience:
response.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
Properti originLoadingExperience melaporkan pengalaman gabungan untuk seluruh asal, bukan hanya URL. API ini memberikan informasi yang sama untuk setiap Data Web Inti seperti yang dijelaskan di langkah sebelumnya.
3. Mengukur Data Web Inti dengan CrUX API
Mendapatkan kunci API
- Di Google Cloud Console, telusuri
Chrome UXlalu pilih Chrome UX Report API di menu drop-down. - Di halaman Chrome UX Report API, klik Aktifkan, lalu tunggu tombol Aktifkan berubah menjadi tombol Kelola dan pilih Kelola.
- Di menu navigasi, klik Kredensial, lalu pilih Buat Kredensial > Kunci API dan salin kunci API.
Ajukan permintaan
- Dari command line, minta data performa untuk URL Anda dari CrUX API dan simpan dalam file
response.txt:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
Ganti placeholder YOUR_API_KEY dengan kunci API Anda, lalu ganti placeholder YOUR_URL dengan URL Anda.
- Di editor teks, buka file
response.txt:
respons.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
Respons CrUX API memberikan informasi ini untuk setiap Data Web Inti:
- Properti
histogrammenunjukkan persentase pengguna yang memiliki pengalaman lambat, rata-rata, atau cepat untuk metrik tertentu. - Properti
percentilesmenunjukkan pengamatan persentil ke-75 untuk metrik tertentu.
Jika Anda melihat pesan error yang menyatakan bahwa data tidak ditemukan, berarti data performa yang tersedia untuk URL tersebut tidak cukup. Masalah ini biasanya muncul saat Anda menguji halaman dengan traffic rendah.
4. Selamat
Selamat! Anda mengukur Data Web Inti halaman web dengan PSI API dan CrUX API.