Mengukur Data Web Inti dengan PSI API dan CrUX API

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

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

  1. Jika Anda memerlukan data performa untuk URL versi desktop, jalankan perintah curl ini untuk meminta data dari PageSpeed Insights API dan menyimpannya 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.

  1. Jika Anda memerlukan data performa untuk URL versi seluler, tetapkan parameter kueri strategy ke nilai mobile di 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.

  1. Di editor teks, buka file response.txt, lalu temukan properti loadingExperience:

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 percentile menunjukkan persentil ke-75 untuk setiap metrik.
  • Properti distributions menunjukkan persentase kunjungan halaman yang memiliki pengalaman yang baik, perlu peningkatan, atau buruk untuk setiap metrik.
  • Properti category mengklasifikasikan 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.

  1. 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

  1. Di Google Cloud Console, telusuri Chrome UX lalu pilih Chrome UX Report API di menu drop-down.
  2. Di halaman Chrome UX Report API, klik Aktifkan, lalu tunggu tombol Aktifkan berubah menjadi tombol Kelola dan pilih Kelola.
  3. Di menu navigasi, klik Kredensial, lalu pilih Buat Kredensial > Kunci API dan salin kunci API.

Ajukan permintaan

  1. 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.

  1. 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 histogram menunjukkan persentase pengguna yang memiliki pengalaman lambat, rata-rata, atau cepat untuk metrik tertentu.
  • Properti percentiles menunjukkan 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.

Pelajari lebih lanjut