Mengoptimalkan kualitas pengalaman pengguna merupakan kunci keberhasilan jangka panjang situs mana pun di web. Baik Anda pemilik bisnis, pemasar, atau developer, Data Web dapat membantu mengukur pengalaman situs dan mengidentifikasi peluang untuk peningkatan.
Ringkasan
Web Vitals adalah inisiatif dari Google untuk memberikan panduan terpadu guna mendapatkan sinyal kualitas yang penting untuk menghadirkan pengalaman pengguna yang memuaskan di web.
Selama bertahun-tahun, Google telah menyediakan sejumlah alat untuk mengukur dan melaporkan performa. Beberapa developer sudah ahli dalam menggunakan alat ini, sementara yang lain menganggap banyak alat dan metrik 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
Core Web Vitals adalah subkumpulan Web Vitals yang berlaku untuk semua halaman web, harus diukur oleh semua pemilik situs, dan akan ditampilkan di semua alat Google. Setiap Core Web Vitals mewakili faset pengalaman pengguna yang berbeda, dapat diukur di lapangan, dan mencerminkan pengalaman dunia nyata dari hasil yang penting yang berpusat pada pengguna.
Metrik yang membentuk Core Web Vitals akan berkembang dari waktu ke waktu. Kumpulan saat ini untuk tahun 2020 berfokus pada tiga aspek pengalaman pengguna—pemuatan, interaktivitas, dan stabilitas visual—serta mencakup metrik berikut (dan nilai minimumnya masing-masing):
- Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP harus 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 kurang.
Untuk memastikan Anda mencapai target yang direkomendasikan untuk metrik ini bagi sebagian besar pengguna, batas yang perlu diukur adalah persentil ke-75 pemuatan halaman, yang disegmentasikan di seluruh perangkat seluler dan desktop.
Alat yang menilai kepatuhan Core Web Vitals harus mempertimbangkan penerusan halaman jika memenuhi target yang direkomendasikan di persentil ke-75 untuk ketiga metrik Core Web Vitals.
Lifecycle
Metrik pada jalur Core Web Vitals melewati siklus proses yang terdiri dari tiga fase: eksperimental, tertunda, dan stabil.
Setiap fase dirancang untuk memberi tahu developer cara memikirkan setiap metrik:
- Metrik eksperimental adalah calon Core Web Vitals yang mungkin masih mengalami perubahan signifikan, bergantung pada pengujian dan masukan komunitas.
- Metrik yang tertunda adalah Core Web Vitals di masa mendatang yang telah lulus tahap pengujian dan masukan serta memiliki linimasa yang jelas untuk menjadi stabil.
- Metrik stabil adalah kumpulan Core Web Vitals saat ini yang dianggap penting oleh Chrome untuk pengalaman pengguna yang luar biasa.
Core Web Vitals berada pada tahap siklus proses berikut:
Eksperimental
Saat pertama kali dikembangkan dan memasuki ekosistem, metrik dianggap sebagai metrik eksperimental.
Tujuan fase eksperimental adalah menilai kesesuaian metrik, pertama dengan mengeksplorasi masalah yang harus dipecahkan, dan mungkin mengulangi tahapan yang mungkin gagal untuk diatasi oleh metrik sebelumnya. 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 siklus proses Core Web Vitals 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 sangat penting.
Tertunda
Saat tim Chrome menentukan bahwa metrik eksperimental telah menerima masukan yang memadai dan terbukti efektivitasnya, metrik ini akan menjadi metrik tertunda. Misalnya, pada tahun 2023, INP dipromosikan dari status eksperimental menjadi tertunda dengan tujuan untuk menghentikan FID pada akhirnya.
Metrik yang tertunda akan ditahan dalam fase ini selama minimal enam bulan untuk memberikan waktu bagi ekosistem untuk beradaptasi. Masukan komunitas tetap menjadi aspek penting dalam fase ini, karena semakin banyak developer yang mulai menggunakan metrik ini.
Stabil
Saat metrik kandidat Core Web Vital selesai, metrik ini akan menjadi metrik stabil. Saat inilah metrik tersebut 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 di log perubahan metrik. Core Web Vitals juga disertakan dalam penilaian apa pun.
Alat untuk mengukur dan melaporkan Core Web Vitals
Google percaya bahwa Core Web Vitals 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 Core Web Vitals.
Alat lapangan untuk mengukur Core Web Vitals
Laporan Pengalaman Pengguna Chrome mengumpulkan data pengukuran pengguna yang nyata dan anonim untuk setiap Core Web Vitals. Data ini memungkinkan pemilik situs menilai performa dengan cepat tanpa mengharuskan mereka menginstrumentasikan analisis di halaman secara manual, dan mendukung alat seperti PageSpeed Insights, dan laporan Core Web Vitals di Search Console.
| LCP | INP | CLS | |
| Laporan Pengalaman Pengguna Chrome | |||
| PageSpeed Insights | |||
| Search Console (laporan Core Web Vitals) |
Data yang diberikan oleh Laporan Pengalaman Pengguna Chrome menawarkan cara cepat untuk menilai performa situs, tetapi tidak memberikan telemetri per kunjungan halaman mendetail yang sering kali diperlukan untuk mendiagnosis, memantau, dan bereaksi cepat terhadap regresi secara akurat. Oleh karena itu, sebaiknya situs menyiapkan sendiri pemantauan pengguna yang sebenarnya.
Mengukur Core Web Vitals di JavaScript
Setiap Core Web Vitals dapat diukur di JavaScript menggunakan API web standar.
Cara termudah untuk mengukur semua Core Web Vitals adalah dengan menggunakan library JavaScript web-vitals, yaitu wrapper kecil siap produksi seputar API web dasar yang mengukur setiap metrik dengan cara yang secara akurat sesuai dengan cara pelaporannya 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 agar 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 Core Web Vitals, bahkan yang tidak harus menyertakan fitur metrik kustom dasar yang memungkinkan Anda mengukur Core Web Vitals di alat mereka.
Salah satu contohnya adalah Laporan Data Web, yang memungkinkan pemilik situs mengukur Core Web Vitals mereka menggunakan Google Analytics. Untuk panduan tentang mengukur Core Web Vitals menggunakan alat analisis lainnya, lihat Praktik terbaik untuk mengukur Data Web di lapangan.
Anda juga dapat melaporkan setiap Core Web Vitals tanpa menulis kode apa pun menggunakan Ekstensi Chrome Web Vitals. Ekstensi ini menggunakan library web-vitals untuk mengukur setiap metrik tersebut dan menampilkannya kepada pengguna saat mereka menjelajahi web.
Ekstensi ini dapat berguna untuk memahami performa situs Anda sendiri, situs pesaing, dan web secara keseluruhan.
| LCP | INP | CLS | |
|---|---|---|---|
| data vital web | |||
| 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 implementasinya:
Untuk mendapatkan panduan tambahan tentang pengukuran 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 Core Web Vitals
Meskipun semua Data Web Inti merupakan metrik kolom, banyak di antaranya juga dapat diukur di lab.
Pengukuran lab adalah cara terbaik untuk menguji performa fitur selama pengembangan, sebelum dirilis ke pengguna. Hal ini juga merupakan cara terbaik untuk mengetahui regresi performa sebelum terjadi.
Alat berikut dapat digunakan untuk mengukur Core Web Vitals di lingkungan lab:
| LCP | INP | CLS | |
|---|---|---|---|
| DevTools Chrome | (sebagai gantinya, gunakan TBT) | ||
| Mercusuar | (sebagai gantinya, gunakan TBT) |
Meskipun pengukuran laboratorium adalah bagian penting dalam memberikan pengalaman yang luar biasa, pengukuran ini bukanlah pengganti pengukuran lapangan.
Performa situs dapat bervariasi secara substansial berdasarkan kemampuan perangkat pengguna, kondisi jaringan, proses lain yang mungkin berjalan di perangkat, dan cara pengguna berinteraksi dengan halaman. Faktanya, skor setiap metrik Core Web Vitals dapat dipengaruhi oleh interaksi pengguna. Hanya pengukuran lapangan yang dapat menangkap gambaran lengkap secara akurat.
Rekomendasi untuk meningkatkan skor Anda
Panduan berikut menawarkan rekomendasi khusus tentang cara mengoptimalkan halaman untuk setiap Core Web Vitals:
Data Web Lainnya
Meskipun Core Web Vitals 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 Core Web Vitals—untuk membantu menangkap bagian yang lebih besar dari pengalaman atau untuk membantu mendiagnosis masalah tertentu.
Misalnya, metrik Time to First Byte (TTFB) dan First Contentful Paint (FCP) merupakan aspek penting dari pengalaman pemuatan, dan keduanya berguna dalam mendiagnosis masalah terkait LCP (waktu respons server yang lambat atau resource yang memblokir rendering).
Demikian pula, metrik seperti Total Blocking Time (TBT) adalah metrik lab yang sangat penting dalam menangkap dan mendiagnosis potensi masalah interaktivitas yang dapat memengaruhi INP. Namun, nilai ini bukan bagian dari kumpulan Core Web Vitals karena tidak terukur kolom, dan juga tidak mencerminkan hasil yang berpusat pada pengguna.
Perubahan pada Data Web
Web Vitals dan Core Web Vitals mewakili sinyal terbaik yang tersedia yang dimiliki developer saat ini untuk mengukur kualitas pengalaman di seluruh web, tetapi sinyal ini tidak sempurna dan peningkatan atau penambahan di masa mendatang harus diharapkan.
Core Web Vitals relevan dengan semua halaman web dan ditampilkan di berbagai alat Google yang relevan. Perubahan pada metrik ini akan berdampak luas; Dengan demikian, developer harus memastikan definisi dan nilai minimum Core Web Vitals tetap stabil, dan mendapatkan pemberitahuan sebelumnya serta ritme tahunan yang dapat diprediksi akan diperbarui.
Data Web lainnya sering kali bersifat spesifik per konteks atau alat, dan mungkin lebih eksperimental daripada Data Web Inti. Dengan demikian, definisi dan nilai minimumnya dapat berubah seiring frekuensi yang lebih besar.
Untuk semua Web Vitals, perubahan akan didokumentasikan dengan jelas dalam CHANGELOG publik ini.