Web Vitals

Mengoptimalkan kualitas pengalaman pengguna merupakan kunci keberhasilan jangka panjang untuk semua situs di web. Baik Anda pemilik bisnis, pemasar, atau developer, Data Web dapat membantu mengukur pengalaman situs Anda dan mengidentifikasi peluang untuk peningkatan kualitas.

Ringkasan

Data Web adalah inisiatif dari Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting untuk memberikan pengalaman pengguna yang luar biasa di web.

Google telah menyediakan sejumlah alat selama bertahun-tahun untuk mengukur dan melaporkan performa. Beberapa developer ahli dalam menggunakan alat-alat ini, sementara yang lain merasa banyaknya alat dan metrik yang sulit untuk diikuti.

Pemilik situs tidak perlu menjadi pakar performa untuk memahami kualitas pengalaman yang mereka berikan kepada pengguna. Inisiatif Data Web bertujuan untuk menyederhanakan lanskap dan membantu 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 akan ditampilkan di semua alat Google. Setiap Data Web Inti merepresentasikan faset pengalaman pengguna yang berbeda, dapat diukur di lapangan, dan mencerminkan pengalaman nyata dari hasil yang berpusat pada pengguna yang penting.

Metrik yang membentuk Data Web Inti akan berkembang dari waktu ke waktu. Kumpulan saat ini untuk 2020 berfokus pada tiga aspek pengalaman pengguna—pemuatan, interaktivitas, dan stabilitas visual—serta mencakup metrik berikut (dan masing-masing nilai minimumnya):

Rekomendasi nilai minimum Largest Contentful Paint Rekomendasi nilai minimum Penundaan Input Pertama Rekomendasi batas Pergeseran Tata Letak Kumulatif
  • Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP akan muncul dalam waktu 2,5 detik sejak 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, halaman harus mempertahankan CLS 0.1. atau lebih rendah.

Guna memastikan Anda mencapai target yang direkomendasikan untuk metrik ini bagi sebagian besar pengguna, nilai minimum yang baik untuk diukur adalah persentil ke-75 pemuatan halaman, yang disegmentasikan di seluruh perangkat seluler dan desktop.

Alat yang menilai kepatuhan Data Web Inti harus mempertimbangkan halaman yang lulus jika memenuhi target yang direkomendasikan pada persentil ke-75 untuk ketiga metrik Data Web Inti.

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 untuk menilai kesesuaian metrik, pertama dengan mengeksplorasi masalah yang harus dipecahkan, dan mungkin melakukan iterasi berdasarkan metrik sebelumnya yang mungkin gagal ditangani. Misalnya, Interaction to Next Paint (INP) awalnya dikembangkan sebagai metrik eksperimental untuk mengatasi masalah performa runtime yang ada di 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 merupakan fase di mana masukan dari komunitas menjadi yang 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 menjadi tertunda dengan tujuan untuk akhirnya menghentikan FID.

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

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 Core Web Vitals yang Stabil tidak akan berubah lebih dari sekali per tahun. Setiap perubahan pada Core Web Vital akan dikomunikasikan dengan jelas dalam dokumentasi resmi metrik, serta dalam log perubahan metrik. Data Web Inti juga disertakan dalam penilaian.

Alat untuk 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 mereka dengan cepat tanpa mengharuskan mereka menggunakan analisis instrumen manual di halaman mereka, dan mendukung alat seperti PageSpeed Insights, serta 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 sebenarnya 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 kecil yang siap produksi di sekitar API web dasar yang mengukur setiap metrik secara akurat cocok dengan cara metrik tersebut dilaporkan oleh semua alat Google yang tercantum sebelumnya.

Dengan library web-vitals, pengukuran setiap metrik dapat dilakukan dengan memanggil fungsi tunggal (lihat dokumentasi untuk mengetahui detail penggunaan dan API lengkap):

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 Anda untuk menggunakan library web-vitals untuk mengukur dan mengirim data Core Web Vitals 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 panduan tentang pengukuran Data Web Inti menggunakan alat analisis lainnya, lihat Praktik terbaik untuk mengukur Data Web di lapangan.

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 membantu dalam memahami performa situs Anda sendiri, situs pesaing, dan web secara keseluruhan.

  LCP INP CLS
web-vitals
Ekstensi Data Web

Developer yang lebih memilih untuk mengukur metrik ini secara langsung menggunakan API web dasar dapat menggunakan panduan metrik ini untuk mengetahui 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

Pertama dan terpenting, semua Data Web Inti merupakan metrik lapangan, tetapi banyak di antaranya juga dapat diukur di lab.

Pengukuran lab adalah cara terbaik untuk menguji performa fitur selama pengembangan—sebelum dirilis ke pengguna. Selain itu, analisis ini merupakan cara terbaik untuk mengetahui 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)

Meskipun pengukuran lab adalah bagian penting dalam memberikan pengalaman yang luar biasa, namun pengukuran ini bukanlah pengganti pengukuran lapangan.

Performa situs dapat sangat bervariasi bergantung pada kemampuan perangkat pengguna, kondisi jaringan, proses lain yang mungkin berjalan di perangkat, dan cara proses berinteraksi dengan halaman. Faktanya, setiap metrik Data Web Inti dapat memiliki skor yang 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 metrik pendukung lainnya.

Metrik lain ini dapat berfungsi sebagai proxy—atau sebagai metrik tambahan untuk ketiga Data Web Inti—untuk membantu menangkap sebagian besar pengalaman atau membantu dalam mendiagnosis masalah tertentu.

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

Demikian pula, metrik seperti Total Blocking Time (TBT) merupakan metrik lab yang sangat penting dalam menemukan dan mendiagnosis potensi masalah interaktivitas yang dapat memengaruhi INP. Namun, data ini bukan bagian dari kumpulan Data Web Inti karena tidak terukur secara lapangan, dan juga 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 harus diharapkan peningkatan atau penambahan di masa mendatang.

Data Web Inti relevan dengan semua halaman web dan ditampilkan di berbagai alat Google yang relevan. Perubahan pada metrik ini akan memiliki dampak jangkauan yang luas; dengan demikian, developer diharapkan mengetahui bahwa definisi dan nilai minimum Data Web Inti akan stabil, dan pembaruannya akan mendapatkan pemberitahuan sebelumnya serta ritme tahunan yang dapat diprediksi.

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

Untuk semua Data Web, perubahan akan didokumentasikan dengan jelas dalam CHANGELOG publik ini.