Mengukur Data Web Inti halaman web dengan library web-vitals

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara mengukur Data Web Inti halaman web dengan web-vitals library JavaScript.

Google merekomendasikan agar Anda mengukur Data Web Inti dan memastikan bahwa Data Web Inti tersebut berada dalam persentil ke-75 pemuatan halaman yang disegmentasikan di seluruh 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.
  • Interaction to Next Paint (INP). Mengukur interaktivitas dan harus terjadi dalam waktu 200 milidetik.
  • Pergeseran Tata Letak Kumulatif (CLS). Mengukur stabilitas visual dan harus berada dalam 0,1.

Prasyarat

Yang akan Anda lakukan

  • Tambahkan library web-vitals ke halaman web.
  • Ukur Data Web Inti halaman web di Alat Developer Google Chrome.
  • Opsional: Laporkan Data Web Inti halaman web ke Google Analytics.

Yang Anda butuhkan

  • Editor teks pilihan Anda, seperti Sublime Text atau Visual Studio Code
  • Browser web berbasis Chromium, seperti Google Chrome atau Microsoft Edge (Untuk mengetahui informasi selengkapnya tentang alasan Anda memerlukan browser web berbasis Chromium, lihat Dukungan Browser.)

2. Menambahkan library web-vitals ke halaman web

  1. Di editor teks, buat file web-vitals-test.html, lalu masukkan kode HTML ini ke dalam file:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Kode ini membuat halaman web yang Anda gunakan untuk codelab ini.

  1. Di elemen <body> kode HTML setelah elemen <p> kedua, masukkan skrip modul ini, lalu simpan file:

web-vitals-test.html

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>

Skrip modul ini memuat library web-vitals dari jaringan penayangan konten. Sekarang file Anda akan terlihat seperti cuplikan kode ini:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  onCLS(console.log);
  onINP(console.log);
  onLCP(console.log);
</script>
</body>
</html>

Semua browser modern mendukung skrip modul, yang cocok untuk kode yang hanya menggunakan API baru, seperti yang diperlukan untuk mengukur Data Web Inti. Browser yang tidak mendukung modul atau API Data Web Inti tidak akan berusaha memuat skrip ini.

3. Mengukur Data Web Inti halaman web di Chrome Developer Tools Google Chrome

  1. Di browser web, buka file yang tersimpan.
  2. Klik kanan halaman web, lalu klik Periksa di dialog.
  3. Di panel Google Chrome Developer Tools, klik tab Console, lalu pilih Console settings 6a9a7d8992edcd2c.png > Preserve log. Setelan ini memastikan bahwa log tetap ada saat Anda memuat ulang halaman web.

74044d63a2f32916.png

  1. Klik tab Jaringan, lalu klik panah perluas c5262a3662ee288c.png pada menu drop-down pembatasan dan pilih 3G Lambat. Setelan ini menyimulasikan koneksi jaringan yang lambat.

Tab Jaringan dengan setelan 3G Lambat yang dipilih di menu drop-down Pembatasan.

  1. Kembali ke tab Console, lalu klik di mana saja pada halaman web. Metrik LCP dicetak di tab Console.

Tab Konsol setelah metrik LCP dicetak.

  1. Muat ulang halaman web. Metrik CLS dicetak di tab Console.

Tab Konsol setelah metrik CLS dicetak.

  1. Kembali ke tab Network, lalu klik panah peluas c5262a3662ee288c.png pada menu drop-down pembatasan dan pilih Fast 3G. Setelan ini menyimulasikan koneksi jaringan yang cepat.
  2. Kembali ke tab Console, lalu klik di mana saja pada halaman web.Metrik LCP akan dicetak lagi di tab Console, tetapi nilainya lebih baik dari sebelumnya.

Tab Konsol setelah metrik LCP dicetak lagi.

  1. Muat ulang halaman web. Metrik CLS dicetak lagi di tab Console, tetapi meningkat dari sebelumnya.

Tab Konsol setelah metrik CLS dicetak lagi.

4. Opsional: Laporkan Data Web Inti halaman web ke Google Analytics

  • Di file web-vitals-test.html setelah pernyataan impor skrip modul, masukkan fungsi sendToGoogleAnalytics() ini, lalu simpan file:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

onCLS(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onLCP(sendToGoogleAnalytics);

Kode ini mengirimkan Core Web Vitals ke Google Analytics, tempat Anda dapat melihatnya di laporan Peristiwa Teratas:

Laporan Peristiwa Teratas di Google Analytics

Sekarang file Anda akan terlihat seperti cuplikan kode ini:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  onCLS(sendToGoogleAnalytics);
  onINP(sendToGoogleAnalytics);
  onLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Selamat

Selamat! Anda telah mempelajari cara mengukur dan melaporkan Data Web Inti halaman web dengan library web-vitals.

Pelajari lebih lanjut