1. Sebelum memulai
Dalam codelab ini, Anda akan mempelajari cara mengukur Data Web Inti halaman web dengan PageSpeed Insights API dan CrUX API.
Kedua API menampilkan data Core Web Vitals yang identik, tetapi setiap API menawarkan manfaat yang berbeda. Selain data CrUX dari kolom, PageSpeed Insights API juga menyediakan data dari Lighthouse, yang merupakan alat open source otomatis Google yang mengaudit halaman web dan merekomendasikan cara untuk meningkatkannya. CrUX API tidak menyediakan data Lighthouse, sehingga eksekusinya lebih cepat.
Google merekomendasikan agar Anda mengukur Data Web Inti di perangkat seluler dan desktop. Data Web Inti mencakup tiga metrik berikut, yang berlaku untuk semua halaman web dan memberi Anda insight penting tentang pengalaman pengguna:
- Largest Contentful Paint (LCP). Mengukur performa pemuatan dan harus terjadi dalam waktu 2,5 detik sejak halaman mulai dimuat.
- Penundaan Input Pertama (FID). Mengukur interaksi dan harus terjadi dalam waktu 100 milidetik.
- Pergeseran Tata Letak Kumulatif (CLS). Mengukur stabilitas visual dan harus berada dalam 0,1.
Prasyarat
- Artikel Data Vital Web
- Pengetahuan dasar tentang command line
- Artikel tentang menentukan nilai minimum metrik Core Web Vitals
Yang akan Anda pelajari
- Ukur Data Web Inti halaman web dengan PageSpeed Insights 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 Core Web Vitals dengan PageSpeed Insights API
- Jika Anda memerlukan data performa untuk versi desktop URL, minta data dari PageSpeed Insights API dan simpan dalam file
response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
Ganti placeholder YOUR_URL dengan URL Anda.
Di akhir string API, perhatikan bahwa parameter kueri strategy ditetapkan ke nilai desktop, yang menentukan permintaan data desktop.
- Jika Anda memerlukan data performa untuk versi seluler URL, minta data dari PageSpeed Insights API dan simpan dalam file
response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
Ganti placeholder YOUR_URL dengan URL Anda.
Di akhir string API, perhatikan bahwa parameter kueri strategy disetel ke nilai mobile, yang menentukan permintaan data seluler.
- Di editor teks, buka file
response.txt, lalu temukan propertiloadingExperience:
response.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 tayangan halaman yang memiliki pengalaman 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 web 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 origin, bukan hanya URL. Laporan ini memberikan informasi yang sama untuk setiap Data Web Inti seperti yang dijelaskan pada langkah sebelumnya.
3. Mengukur Core Web Vitals dengan CrUX API
Mendapatkan kunci API
- Di Konsol Google Cloud, telusuri
Chrome UX, lalu pilih Chrome UX Report API di menu drop-down. - Di halaman Chrome UX Report API, klik Enable, lalu tunggu hingga tombol Enable berubah menjadi tombol Manage, lalu pilih Manage.
- Di menu navigasi, klik Credentials, lalu pilih Create Credentials > API key, lalu salin kunci API.
Buat 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:
response.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 tidak ada cukup data performa yang tersedia untuk URL tertentu. Masalah ini biasanya muncul saat Anda menguji halaman web dengan traffic rendah.
4. Selamat
Selamat! Anda mengukur Data Web Inti halaman web dengan PageSpeed Insights API dan CrUX API.