Dipublikasikan: 4 Mei 2020
Mengoptimalkan kualitas pengalaman pengguna merupakan kunci kesuksesan jangka panjang untuk semua situs di web. Baik Anda pemilik bisnis, pemasar, maupun developer, Data Web dapat membantu mengukur pengalaman penggunaan situs Anda dan mengidentifikasi peluang untuk peningkatan.
Ringkasan
Data Web adalah inisiatif Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting dalam memberikan pengalaman pengguna yang baik di web.
Selama bertahun-tahun, Google telah menyediakan sejumlah alat untuk mengukur dan melaporkan performa. Sebagian developer ahli dalam menggunakan alat ini, sementara sebagian lainnya merasa kesulitan mengikuti banyaknya alat dan metrik.
Pemilik situs tidak perlu menjadi pakar performa untuk memahami kualitas pengalaman yang mereka berikan kepada pengguna. Inisiatif Web Vitals bertujuan untuk menyederhanakan lanskap, dan membantu situs berfokus pada metrik yang paling penting, yaitu Core Web Vitals.
Data Web Inti
Data Web Inti adalah bagian dari Data Web yang berlaku untuk semua halaman web, perlu diukur oleh semua pemilik situs, dan akan ditampilkan di semua alat Google. Setiap Core Web Vitals mewakili aspek yang berbeda dari pengalaman pengguna, dapat diukur di lapangan, dan mencerminkan pengalaman nyata terkait hasil penting yang berpusat pada pengguna.
Metrik yang membentuk Core Web Vitals akan berkembang seiring waktu. Rangkaian metrik saat ini berfokus pada tiga aspek pengalaman pengguna—pemuatan, interaktivitas, dan stabilitas visual—dan mencakup metrik berikut (beserta batasnya masing-masing):
- Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP harus terjadi dalam 2,5 detik sejak halaman pertama kali mulai dimuat.
- Interaction to Next Paint (INP): mengukur interaktivitas. Untuk memberikan pengalaman pengguna yang baik, halaman sebaiknya 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.
Agar Anda mencapai target yang direkomendasikan untuk metrik ini bagi sebagian besar pengguna Anda, batas yang tepat untuk diukur adalah persentil ke-75 dari pemuatan halaman, yang dikelompokkan berdasarkan perangkat seluler dan desktop.
Alat yang menilai kepatuhan terhadap Core Web Vitals harus mempertimbangkan halaman lulus jika memenuhi target yang direkomendasikan pada persentil ke-75 untuk ketiga metrik Core Web Vitals.
Lifecycle
Metrik di jalur Data Web Inti menjalani siklus proses yang terdiri dari tiga fase: eksperimental, menunggu keputusan, dan stabil.
Setiap fase dirancang untuk memberi sinyal kepada developer tentang cara mereka harus memikirkan setiap metrik:
- Metrik eksperimental adalah calon Data Web Inti yang mungkin masih mengalami perubahan signifikan, bergantung pada pengujian dan masukan komunitas.
- Metrik yang menunggu keputusan adalah Data Web Inti mendatang yang telah melewati tahap pengujian dan masukan serta memiliki linimasa yang jelas untuk menjadi stabil.
- Metrik stabil adalah kumpulan Data Web Inti saat ini yang dianggap penting oleh Chrome untuk pengalaman pengguna yang luar biasa.
Data Web Inti berada pada tahap siklus proses berikut:
Eksperimental
Saat pertama kali dikembangkan dan memasuki ekosistem, metrik dianggap sebagai metrik eksperimental.
Tujuan fase eksperimental adalah untuk menilai kesesuaian metrik, pertama dengan mempelajari masalah yang akan dipecahkan, dan mungkin melakukan iterasi pada metrik sebelumnya yang mungkin gagal diatasi. Misalnya, Interaction to Next Paint (INP) awalnya dikembangkan sebagai metrik eksperimental untuk mengatasi masalah performa runtime yang ada di web secara lebih komprehensif daripada First Input Delay (FID).
Fase eksperimental siklus proses Core Web Vitals juga dimaksudkan untuk memberikan fleksibilitas dalam pengembangan metrik dengan mengidentifikasi bug dan bahkan mempelajari perubahan pada definisi awalnya. Ini juga merupakan fase di mana masukan komunitas sangat penting.
Tertunda
Jika tim Chrome menentukan bahwa metrik eksperimental telah menerima masukan yang memadai dan terbukti efektif, metrik tersebut akan menjadi metrik tertunda. Misalnya, INP dipromosikan pada tahun 2023 dari status eksperimental menjadi status menunggu keputusan dengan maksud untuk menghentikan FID pada akhirnya.
Metrik yang menunggu keputusan ditahan dalam fase ini selama minimal enam bulan untuk memberi ekosistem waktu untuk beradaptasi. Masukan komunitas tetap menjadi aspek penting dalam fase ini, karena makin banyak developer mulai menggunakan metrik tersebut.
Stabil
Setelah difinalisasi, metrik kandidat Core Web Vitals akan menjadi metrik stabil. Saat itulah metrik dapat menjadi Data Web Inti.
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 perubahannya. Data Web Inti juga disertakan dalam penilaian apa pun.
Alat untuk mengukur dan melaporkan Core Web Vitals
Google yakin bahwa Core Web Vitals sangat penting untuk semua pengalaman web. Oleh karena itu, Google 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
Chrome User Experience Report mengumpulkan data pengukuran pengguna sebenarnya yang anonim untuk setiap Core Web Vitals. Data ini memungkinkan pemilik situs menilai performa mereka dengan cepat tanpa mengharuskan mereka mengukur analisis secara manual di halaman mereka, dan mendukung alat seperti Chrome DevTools, PageSpeed Insights, dan laporan Core Web Vitals di Search Console.
| LCP | INP | CLS | |
| Chrome User Experience Report | |||
| Chrome DevTools | |||
| PageSpeed Insights | |||
| Search Console (laporan Core Web Vitals) |
Data yang disediakan oleh Laporan Pengalaman Pengguna Chrome menawarkan cara cepat untuk menilai performa situs, tetapi tidak memberikan telemetri per tayangan halaman yang mendetail yang sering kali diperlukan untuk mendiagnosis, memantau, dan bereaksi dengan cepat terhadap regresi secara akurat. Oleh karena itu, kami sangat menyarankan agar situs menyiapkan pemantauan pengguna sebenarnya mereka sendiri.
Mengukur Core Web Vitals di JavaScript
Setiap Data Web Inti dapat diukur di 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 pokok yang mengukur setiap metrik dengan cara yang 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 satu fungsi. 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 guna 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 penyedia yang tidak memilikinya harus menyertakan fitur metrik kustom dasar yang memungkinkan Anda mengukur Core Web Vitals di alat mereka.
Developer yang lebih memilih untuk mengukur metrik ini secara langsung menggunakan API web yang mendasarinya 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 Core Web Vitals
Meskipun semua Data Web Inti adalah metrik lapangan, banyak di antaranya juga dapat diukur di lab.
Pengukuran lab adalah cara terbaik untuk menguji performa fitur selama pengembangan—sebelum dirilis kepada pengguna. Ini juga merupakan cara terbaik untuk mendeteksi regresi performa sebelum terjadi.
Alat berikut dapat digunakan untuk mengukur Data Web Inti di lingkungan lab:
| LCP | INP | CLS | |
|---|---|---|---|
| Chrome DevTools | |||
| Lighthouse | (sebagai gantinya, gunakan TBT) |
Meskipun pengukuran lab adalah bagian penting dalam memberikan pengalaman yang luar biasa, pengukuran ini bukanlah pengganti pengukuran lapangan.
Performa situs dapat sangat bervariasi berdasarkan kemampuan perangkat pengguna, kondisi jaringan, proses lain yang mungkin berjalan di perangkat, dan cara pengguna berinteraksi dengan halaman. Faktanya, setiap metrik Core Web Vitals dapat terpengaruh skornya oleh interaksi pengguna. Hanya pengukuran lapangan yang dapat secara akurat menangkap gambaran lengkapnya.
Rekomendasi untuk meningkatkan skor Anda
Panduan berikut menawarkan rekomendasi khusus tentang cara mengoptimalkan halaman Anda untuk setiap Data Web Inti:
Ada banyak cara untuk meningkatkan Data Web Inti, dan setiap pendekatan memiliki tingkat dampak, relevansi, dan kemudahan penggunaan yang berbeda-beda untuk setiap situasi. Lihat Cara paling efektif untuk meningkatkan Core Web Vitals untuk mengetahui daftar singkat rekomendasi utama tim Chrome.
Metrik Web lainnya
Meskipun Core Web Vitals adalah metrik penting untuk memahami dan memberikan pengalaman pengguna yang baik, ada metrik pendukung lainnya.
Metrik lainnya ini dapat berfungsi sebagai pengganti—atau sebagai metrik tambahan untuk tiga Data Web Inti—untuk membantu mencakup bagian yang lebih besar dari pengalaman atau untuk membantu mendiagnosis masalah tertentu.
Misalnya, metrik Time to First Byte (TTFB) dan First Contentful Paint (FCP) adalah aspek penting dari pengalaman pemuatan, dan keduanya berguna dalam mendiagnosis masalah LCP (waktu respons server yang lambat atau aset pemblokiran render).
Demikian pula, metrik seperti Total Waktu Pemblokiran (TBT) adalah metrik lab yang sangat penting dalam menangkap dan mendiagnosis potensi masalah interaktivitas yang dapat memengaruhi INP. Namun, metrik ini bukan bagian dari set Data Web Inti karena tidak dapat diukur di lapangan, dan tidak mencerminkan hasil yang berpusat pada pengguna.
Perubahan pada Metrik Web
Data Web dan Data Web Inti mewakili sinyal terbaik yang tersedia bagi developer saat ini untuk mengukur kualitas pengalaman di seluruh web, tetapi sinyal ini tidak sempurna dan peningkatan atau penambahan di masa mendatang harus diantisipasi.
Data Web Inti relevan untuk semua halaman web dan ditampilkan di seluruh alat Google yang relevan. Perubahan pada metrik ini akan berdampak luas; oleh karena itu, developer harus mengharapkan definisi dan nilai minimum Data Web Inti tetap stabil, dan pembaruan akan dilakukan dengan pemberitahuan sebelumnya serta irama tahunan yang dapat diprediksi.
Metrik Vitals Web lainnya sering kali spesifik untuk konteks atau alat, dan mungkin lebih bersifat eksperimental daripada Core Web Vitals. Oleh karena itu, definisi dan nilai minimumnya dapat berubah lebih sering.
Untuk semua Metrik Web, perubahan akan didokumentasikan dengan jelas dalam CHANGELOG publik ini.