Google Developers Indonesia Blog: Pengenalan Web Vitals: metrik penting untuk kesehatan situs

Pengenalan Web Vitals: metrik penting untuk kesehatan situs

14 May 2020

Mengoptimalkan kualitas pengalaman pengguna adalah kunci keberhasilan jangka panjang dari situs apa pun di web. Melalui interaksi dan kolaborasi berkelanjutan kami dengan jutaan developer web dan pemilik situs, kami telah mengembangkan banyak metrik dan fitur yang bermanfaat di Google untuk membantu pemilik bisnis, marketing, dan developer mengidentifikasi peluang guna meningkatkan pengalaman pengguna. Namun, banyaknya metrik dan fitur tersebut menciptakan tantangan set prioritas, kejelasan, dan konsistensi bagi banyak orang.

Hari ini kami memperkenalkan program baru, Web Vitals, sebuah inisiatif dari Google untuk memberikan panduan terpadu bagi sinyal kualitas, yang kami percaya, sangat penting untuk menghadirkan pengalaman pengguna yang luar biasa di web.

Core Web Vitals

Terdapat banyak aspek dalam mengukur kualitas pengalaman pengguna, yang sebagian besar berhubungan dengan situs dan konteks, tetapi ada serangkaian sinyal umum — "Core Web Vitals" — yang sangat penting untuk semua pengalaman web. Kebutuhan pengalaman pengguna inti tersebut meliputi pengalaman memuat, interaktivitas, serta stabilitas visual konten halaman, dan penggabungan semuanya itu adalah dasar dari Core Web Vitals 2020.

Largest Contentful Paint mengukur persepsi kecepatan pemuatan dan menandai titik di timeline pemuatan halaman saat konten utama halaman dimuat.
First Input Delay mengukur responsivitas dan pengalaman yang dirasakan pengguna saat pertama kali berinteraksi dengan halaman.
Cumulative Layout Shift mengukur stabilitas visual dan menghitung jumlah perubahan layout tidak terduga dari konten halaman yang terlihat.

Semua metrik ini menangkap hasil penting yang berpusat pada pengguna, terukur kolom, dan memiliki fitur serta metrik diagnostik lab pendukung yang ekuivalen. Misalnya, meskipun Largest Contentful Paint adalah metrik pemuatan topline, ia juga sangat bergantung pada First Contentful Paint (FCP) dan Time to First Byte (TTFB), yang harus selalu dimonitor dan ditingkatkan.

Mengukur Core Web Vitals

Tujuan kami adalah menjadikan Core Web Vitals sederhana dan mudah diakses serta diukur untuk semua pemilik situs dan developer, baik di seluruh Google maupun dalam dasbor dan fitur mereka sendiri.

Chrome UX Report memungkinkan pemilik situs dengan cepat menilai kinerja situs untuk setiap Web Vital, seperti yang dirasakan oleh pengguna Chrome sesungguhnya. Set data BigQuery telah memunculkan histogram yang dapat diakses secara publik untuk semua Core Web Vitals, dan kami sedang mengerjakan REST API baru yang akan membuat pengaksesan data tingkat sumber dan URL menjadi sederhana dan mudah — ikuti terus.

Kami sangat menganjurkan semua pemilik situs mengumpulkan analytics pengukuran pengguna-nyata mereka sendiri untuk setiap Core Web Vital. Untuk mengaktifkannya, sejumlah browser, termasuk Google Chrome, telah menerapkan dan mengirimkan dukungan bagi semua spesifikasi draf Core Web Vitals terkini: Largest Contentful Paint, Layout Instability, dan Event Timing. Selain itu, hari ini kami meluncurkan library JavaScript web-vitals open-source yang menyediakan pemaket kecil dan siap produksi, yang bisa digunakan dengan semua penyedia analytics yang mendukung metrik kustom atau sebagai referensi cara menangkap secara akurat setiap Core Web Vitals untuk pengguna situs Anda.

// Contoh penggunaan web-vitals untuk mengukur & melaporkan CLS, FID, dan LCP.

import {getCLS, getFID, getLCP} from 'web-vitals';

function reportToAnalytics(data) {

const body = JSON.stringify(data);

(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||

fetch('/analytics', {body, method: 'POST', keepalive: true});

}

getCLS((metric) => reportToAnalytics({cls: metric.value}));

getFID((metric) => reportToAnalytics({fid: metric.value}));

getLCP((metric) => reportToAnalytics({lcp: metric.value}));

Dalam proses pengujian dan pengembangan, kami merasakan pentingnya memiliki akses mudah ke status setiap Core Web Vital, baik dalam pengembangan maupun saat kami menjelajahi web. Untuk membantu developer menemukan peluang pengoptimalan hari ini, kami juga merilis pratinjau developer ekstensi Core Web Vitals terbaru. Ekstensi ini memunculkan indikator visual di Chrome tentang status masing-masing vital saat Anda menjelajahi web dan, di masa mendatang, Anda juga bisa melihat kumpulan insight pengguna nyata (disediakan oleh Chrome UX Report) tentang status setiap core vital untuk URL dan sumber saat ini.

Yang terakhir, dalam beberapa bulan mendatang kami akan mengupdate Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console Speed Report, dan fitur populer lainnya untuk menyorot dan memberikan panduan yang konsisten dan dapat ditindaklanjuti untuk meningkatkan Core Web Vitals.

Evolusi Core Web Vitals

Set Core Web Vitals 2020 terkini bukanlah set metrik lengkap yang menangkap pengalaman pengguna ideal di web. Kami berharap bisa mengupdate Core Web Vitals setiap tahun dan memberikan update rutin tentang kandidat masa depan, motivasi, dan status implementasi.

Menatap 2021, kami berinvestasi dalam membangun pemahaman dan kemampuan yang lebih baik untuk mengukur kecepatan halaman, dan karakteristik pengalaman pengguna penting lainnya. Misalnya, memperluas kemampuan untuk mengukur latensi masukan semua interaksi, bukan hanya interaksi pertama; metrik baru untuk mengukur dan menilai kelancaran; primitif dan metrik pendukung yang memungkinkan penyampaian pengalaman instan dan perlindungan privasi di web; dan lainnya.

Pastikan mengikuti update kami di web.dev dan berlangganan milis kami untuk mendapatkan update mendatang tentang vitals dan semua hal yang berkaitan dengan Web.