Web Vitals

Data Web adalah inisiatif Google guna memberikan panduan terpadu untuk sinyal kualitas halaman web yang penting untuk memberikan pengalaman pengguna yang luar biasa di web. Privacy Sandbox bertujuan untuk menyederhanakan berbagai alat pengukuran performa yang tersedia, dan membantu pemilik situs berfokus pada metrik yang paling penting, yaitu Data Web Inti.

Data Web Inti

Data Web Inti adalah subkumpulan Data Web yang berlaku untuk semua halaman web, harus diukur oleh semua pemilik situs, dan muncul di semua alat Google. Setiap Data Web Inti mewakili faset pengalaman pengguna yang berbeda, dapat diukur di lapangan, dan mencerminkan pengalaman dunia nyata dari hasil yang berpusat pada pengguna yang penting.

Metrik yang membentuk Data Web Inti akan berkembang dari waktu ke waktu. Kumpulan saat ini berfokus pada tiga aspek pengalaman pengguna: pemuatan, interaktivitas, dan stabilitas visual. Laporan ini mencakup metrik berikut:

Rekomendasi nilai minimum Largest Contentful Paint Rekomendasi batas Interaksi ke Next Paint Rekomendasi batas Pergeseran Tata Letak Kumulatif
  • Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP harus muncul dalam waktu 2,5 detik saat halaman pertama kali mulai dimuat.
  • Interaction to Next Paint (INP): mengukur interaktivitas. Untuk memberikan pengalaman pengguna yang baik, halaman harus memiliki INP 200 milidetik atau kurang.
  • Pergeseran Tata Letak Kumulatif (CLS): mengukur stabilitas visual. Untuk memberikan pengalaman pengguna yang baik, harus mempertahankan CLS sebesar 0.1. atau lebih rendah.

Untuk setiap metrik ini, guna memastikan Anda mencapai target yang direkomendasikan bagi sebagian besar pengguna, batas yang baik untuk diukur adalah persentil ke-75 pemuatan halaman, yang tersegmentasi di seluruh perangkat seluler dan desktop.

Alat yang menilai kepatuhan Data Web Inti harus mempertimbangkan kepatuhan halaman jika memenuhi rekomendasi target pada persentil ke-75 untuk masing-masing dari ketiga metrik ini.

Siklus Proses

Metrik di jalur Data Web Inti menjalani siklus proses yang terdiri dari tiga fase: eksperimental, tertunda, dan stabil.

Tiga fase siklus proses dari metrik Data Web Inti, divisualisasikan sebagai serangkaian tiga tanda pangkat. Dari kiri ke kanan, fase-fase tersebut adalah Eksperimental, Tertunda, dan Stabil.
Tahapan siklus proses Data Web Inti.

Setiap fase dirancang untuk memberikan petunjuk kepada developer cara berpikir tentang setiap metrik:

  • Metrik eksperimental adalah calon Data Web Inti yang mungkin masih mengalami perubahan signifikan, bergantung pada pengujian dan masukan komunitas.
  • Metrik yang tertunda adalah Data Web Inti mendatang yang telah lulus tahap pengujian dan masukan serta memiliki rentang waktu yang jelas untuk menjadi stabil.
  • Metrik stabil adalah kumpulan Data Web Inti saat ini yang dianggap Chrome penting untuk pengalaman pengguna yang luar biasa.

Data Web Inti berada pada tahap siklus proses berikut:

Eksperimental

Saat metrik awalnya dikembangkan dan memasuki ekosistem, metrik ini dianggap sebagai metrik eksperimental.

Tujuan fase eksperimental adalah menilai kesesuaian metrik, pertama dengan menjelajahi masalah yang harus dipecahkan, dan mungkin melakukan iterasi berdasarkan metrik sebelumnya yang mungkin gagal ditangani. Misalnya, INP awalnya diperkenalkan sebagai metrik eksperimental pada tahun 2022 untuk mengatasi masalah performa runtime web secara lebih komprehensif daripada Penundaan Input Pertama (FID).

Fase eksperimental dalam siklus proses Data Web Inti juga dimaksudkan untuk memberikan fleksibilitas dalam pengembangan metrik dengan mengidentifikasi bug dan bahkan mengeksplorasi perubahan pada definisi awalnya. Ini juga fase di mana umpan balik dari komunitas menjadi paling penting.

Tertunda

Saat tim Chrome menentukan bahwa metrik eksperimental telah menerima masukan yang memadai dan membuktikan keefektifannya, metrik tersebut akan menjadi metrik tertunda. Misalnya, INP dipromosikan pada tahun 2023 dari status eksperimental ke tertunda dengan tujuan untuk menghentikan FID pada akhirnya.

Metrik tertunda disimpan dalam fase ini selama minimal enam bulan untuk memberi waktu bagi ekosistem untuk beradaptasi. Masukan komunitas tetap menjadi aspek penting pada fase ini, karena semakin banyak developer yang mulai menggunakan metrik ini.

Stabil

Jika metrik kandidat Core Web Vitals diselesaikan, metrik tersebut akan menjadi metrik stabil. Pada saat inilah metrik dapat menjadi Core Web Vitals.

Metrik stabil didukung secara aktif, dan dapat mengalami perbaikan bug dan perubahan definisi. Metrik Data Web Inti yang Stabil tidak akan berubah lebih dari sekali per tahun. Setiap perubahan pada Core Web Vitals akan dikomunikasikan dengan jelas dalam dokumentasi resmi metrik, serta dalam log perubahan metrik. Core Web Vital juga disertakan dalam penilaian.

Metrik yang stabil tidak selalu permanen. Metrik yang stabil dapat dihentikan dan diganti dengan metrik lain yang menangani area masalah secara lebih efektif. Inilah yang terjadi pada FID karena INP menjadi metrik Core Web Vitals yang stabil pada tahun 2024.

Mengukur dan melaporkan Data Web Inti

Google yakin bahwa Data Web Inti sangat penting untuk semua pengalaman web. Oleh karena itu, kami berkomitmen untuk menampilkan metrik ini di semua alat populernya. Bagian berikut menjelaskan alat yang mendukung Data Web Inti.

Alat lapangan untuk mengukur Data Web Inti

Laporan Pengalaman Pengguna Chrome mengumpulkan data pengukuran pengguna yang sebenarnya dan anonim untuk setiap Core Web Vital. Data ini memungkinkan pemilik situs menilai performa dengan cepat tanpa mengharuskan mereka menyiapkan analisis secara manual untuk halamannya, dan mendukung alat seperti PageSpeed Insights dan laporan Data Web Inti Search Console.

  LCP INP CLS
Laporan Pengalaman Pengguna Chrome
PageSpeed Insights
Search Console (laporan Data Web Inti)

Data yang diberikan oleh Laporan Pengalaman Pengguna Chrome menawarkan cara cepat untuk menilai performa situs, tetapi tidak memberikan telemetri mendetail per halaman yang sering diperlukan untuk mendiagnosis, memantau, dan bereaksi dengan cepat terhadap regresi secara akurat. Oleh karena itu, sebaiknya situs menyiapkan pemantauan pengguna nyatanya sendiri.

Mengukur Data Web Inti di JavaScript

Setiap Data Web Inti dapat diukur dalam JavaScript menggunakan API web standar.

Cara termudah untuk mengukur semua Data Web Inti adalah dengan menggunakan library JavaScript web-vitals, wrapper API kecil yang siap produksi yang mengukur setiap metrik secara akurat sesuai dengan cara alat Google melaporkannya.

Dengan library web-vitals, mengukur setiap metrik semudah memanggil fungsi tunggal (lihat dokumentasi untuk mengetahui detail lengkap penggunaan dan API):

import {onCLS, onINP, onLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

Setelah mengonfigurasi situs untuk menggunakan library web-vitals untuk mengukur dan mengirim data Data Web Inti ke endpoint analisis, langkah berikutnya adalah menggabungkan dan melaporkan data tersebut untuk melihat apakah halaman Anda memenuhi nilai minimum yang direkomendasikan untuk setidaknya 75% kunjungan halaman.

Meskipun beberapa penyedia analisis memiliki dukungan bawaan untuk metrik Data Web Inti, bahkan penyedia yang tidak menyertakan fitur metrik kustom dasar yang memungkinkan Anda mengukur Data Web Inti di alat mereka.

Salah satu contohnya adalah Laporan Data Web, yang memungkinkan pemilik situs mengukur Data Web Inti menggunakan Google Analytics. Untuk mengetahui panduan mengukur Data Web Inti menggunakan alat analisis lainnya, lihat Praktik terbaik untuk mengukur Data Web di kolom.

Anda juga dapat melaporkan setiap Data Web Inti tanpa menulis kode apa pun menggunakan Ekstensi Chrome Data Web. Ekstensi ini menggunakan library web-vitals untuk mengukur setiap metrik ini dan menampilkannya kepada pengguna saat mereka menjelajahi web.

Ekstensi ini dapat berguna dalam memahami performa situs Anda sendiri, situs pesaing, dan web secara keseluruhan.

  LCP INP CLS
web-vitals
Ekstensi Data Web

Developer yang lebih suka mengukur metrik ini secara langsung menggunakan web API yang mendasarinya dapat menggunakan panduan metrik ini untuk detail implementasi:

Untuk panduan tambahan tentang cara mengukur metrik ini menggunakan layanan analisis populer atau alat analisis internal Anda sendiri, lihat Praktik terbaik untuk mengukur Data Web di lapangan.

Alat lab untuk mengukur Data Web Inti

Meskipun semua Data Web Inti merupakan metrik lapangan, banyak di antaranya juga dapat diukur di lab.

Pengukuran lab adalah cara terbaik untuk menguji performa fitur selama pengembangan. Hal ini juga merupakan cara terbaik untuk menangkap regresi performa sebelum terjadi.

Alat berikut dapat digunakan untuk mengukur Data Web Inti di lingkungan lab:

  LCP INP CLS
Chrome DevTools (sebagai gantinya, gunakan TBT)
Mercusuar (sebagai gantinya, gunakan TBT)

Alat seperti Lighthouse yang memuat halaman dalam lingkungan simulasi tanpa pengguna tidak dapat mengukur INP karena tidak memiliki input pengguna. Namun, metrik Total Blocking Time (TBT) dapat diukur oleh lab dan merupakan proxy yang dapat diterima untuk masalah INP yang mungkin terjadi karena pertentangan pada thread utama selama startup. Pengoptimalan performa yang meningkatkan TBT di lab harus meningkatkan INP di kolom. Untuk panduan lebih lanjut, lihat Rekomendasi untuk meningkatkan skor Anda.

Meskipun pengukuran lab merupakan bagian penting dalam memberikan pengalaman yang luar biasa, namun pengukuran tersebut bukanlah pengganti pengukuran lapangan. Performa situs dapat bervariasi secara dramatis berdasarkan kemampuan perangkat pengguna, kondisi jaringannya, proses lain yang mungkin berjalan di perangkat, dan cara proses berinteraksi dengan halaman. Faktanya, setiap metrik Data Web Inti dapat terpengaruh oleh interaksi pengguna. Hanya pengukuran lapangan yang dapat mengambil gambaran lengkap secara akurat.

Rekomendasi untuk meningkatkan skor Anda

Panduan berikut menawarkan rekomendasi khusus tentang cara mengoptimalkan halaman untuk setiap Data Web Inti:

Data Web Lainnya

Meskipun Data Web Inti adalah metrik penting untuk memahami dan memberikan pengalaman pengguna yang luar biasa, ada juga metrik penting lainnya.

Data Web lainnya ini sering berfungsi sebagai proxy atau metrik tambahan untuk Data Web Inti, untuk membantu menangkap bagian yang lebih besar dari pengalaman atau membantu mendiagnosis masalah tertentu.

Misalnya, Time to First Byte (TTFB) dan First Contentful Paint (FCP) merupakan aspek penting dari pengalaman pemuatan, dan keduanya berguna dalam mendiagnosis masalah dengan LCP (waktu respons server lambat atau resource yang memblokir rendering).

Demikian pula, metrik seperti Total Blocking Time (TBT) adalah metrik lab yang penting untuk menangkap dan mendiagnosis potensi masalah interaktivitas yang dapat memengaruhi INP. Namun, data ini bukan bagian dari kumpulan Data Web Inti karena tidak terukur, dan tidak mencerminkan hasil yang berpusat pada pengguna.

Perubahan pada Data Web

Data Web dan Data Web Inti merepresentasikan sinyal terbaik yang tersedia yang dimiliki developer saat ini untuk mengukur kualitas pengalaman di seluruh web, tetapi sinyal ini tidak sempurna dan kami harus mengharapkan peningkatan atau penambahan di masa mendatang.

Data Web Inti relevan dengan semua halaman web dan ditampilkan di seluruh alat Google yang relevan. Karena perubahan pada metrik ini memiliki dampak yang luas, developer diharapkan mengetahui bahwa definisi dan nilai minimum Core Web Vitals akan stabil, serta pemberitahuan sebelumnya dan jadwal update yang dapat diprediksi.

Data Web lainnya sering kali bersifat spesifik terhadap konteks atau alat, dan dapat bersifat lebih eksperimental daripada Data Web Inti. Dengan demikian, definisi dan batasnya dapat berubah dengan frekuensi yang lebih besar.

Untuk semua Data Web, perubahan didokumentasikan dalam log perubahan publik ini.