Apa Itu Core Web Vitals?

Awal bulan May 2020, Google merilis sebuah metrik baru yang dinamakan dengan “Core Web Vitals”. Sebuah metrik yang digunakan untuk meningkatkan user experience dalam sebuah website.

Google juga akan menggunakan metrik ini sebagai indikator untuk menentukan rangking website. Sehingga bagi kamu pemilik website sangat penting untuk mempelajari hal yang berkaitan dengan Core Web Vitals.

Apa Itu Core Web Vitals?

Core Web Vitals adalah metrik yang digunakan Google untuk meningkatkan user experience (pengalaman pengguna) pada sebuah website.

Metrik ini sebelumnya terdiri dari 4 indikator:

• Mobile Friendly.
• Safe Browsing (penelusuran yang aman).
• HTTPS.
• No Intrusive Interstitial (penelusuran tanpa gangguan).

Kemudian pada Juli 2020, Google melakukan update dengan menetapkan 3 indikator baru pada core web vitals:

• Largest Contentful Paint (LCP) : Kecepatan Website.
• First Input Delay (FID) : Respon setiap elemen website.
• Cumulative Layout Shift (CLS) : Stabilitas tata letak halaman website.

Cara Mengetahui Core Web Vitas Sebuah Website

Untuk mengetahui core web vitals, kamu bisa menggunakan PageSpeed Insight.

A. Buka PageSpeed Insight.

B. Masukkan alamat website kamu pada kolom analisa dan klik tombol “Analyze”.

C. Kamu bisa melihat informasi core web vitals seperti berikut.

Tools ini juga akan memberitahu beberapa hal yang bisa kamu lakukan untuk mengoptimalkan core web vitals website kamu.

Indikator Core Web Vitals

Berikut penjelasan lengkap mengenai 3 indikator yang telah saya sebutkan sebelumnya.

1. Largest Contentful Paint (LCP)

LCP adalah waktu yang dibutuhkan sebuah website untuk menampilkan setiap elemen yang terdapat pada website tersebut. Elemen yang dimaksud tidak hanya teks, namun juga meliputi konten gambar, video, audio, dan elemen lainnya.

LCP juga disebut dengan Page Speed (kecepatan website). Dan untuk menghasilkan user experience yang baik, Google nyatakan skor minimal kecepatan website kamu adalah 2,5 sec dan sangat tidak baik jika website kamu memiliki kecepatan hingga 4.0 sec atau lebih. Kamu juga bisa lihat pada gambar dibawah.

Sumber: Google

Cara Optimalisasi LCP

• Mengoptimalisasi file yang berukuran besar, misalnya kompress gambar atau video yang ada di website.
• Gunakan CDN (Content Delivery Network) atau plugin chace agar loading website semakin cepat.
• Menyederhanakan file JavaScript dan CSS dengan memperkecil ukuran atau memperbaiki render-blocking JavaScript dan CSS.
• Perbaiki masalah rendering pada browser dengan memastikan kamu hanya memakai JavaScript untuk hal yang benar-benar penting.

2. First Input Delay (FID)

FID adalah waktu yang diperlukan sebuah website untuk merespon interaksi pertama kali yang dilakukan oleh pengguna (visitor). Interaksi ini bisa berupa klik, memasukkan data (input), dan tidak termasuk scroll, maupun zoom.

Google juga mengatakan, untuk mendapatkan indikator FID yang baik, interaksi pertama di website harus terjadi sebelum 100 milidetik.

Sumber: Google

Cara Optimalisasi FID

Untuk mengoptimalisasi FID yaitu dengan cara mengoptimalkan file JavaScript atau meminimalkan penggunaan kode JavaScript. Hal ini juga akan membantu meningkatkan kecepatan (loading) website kamu.

3. Cumulative Layout Shift (CLS)

CLS adalah waktu yang digunakan untuk mengukur perubahan layout halaman website ketika diakses oleh pengguna. CLS disini juga mencakup font, gambar, atau tombol yang terdapat pada halaman website.

CLS yang buruk misalnya ketika memasang banner iklan atau promo di blog, kemudian ketika kamu membaca sebuah paragraf, tiba-tiba paragraf tersebut berpindah tempat ke bagian bawah atau bagian atas. Hal ini terjadi karena ada elemen lain yang terlambat muncul ketika dimuat.

Nah untuk CLS yang baik, Google menyarankan skor minimal yang baik adalah 0,1. Dan sangat tidak baik (poor) jika kamu memiliki skor hingga 0.25 atau lebih.

Sumber: Google

Cara Optimalisasi CLS

Untuk mengoptimalisasi CLS website kamu, kamu bisa menggunakan plugin Lazy Load. Atau kamu juga bisa memastikan ukuran serta layout gambar menggunakan JavaScript, berikut contohnya:

.wrapper {
position: relative;
height: 0;
/* Formula is: (height / width * 100%) */
padding-top: calc(360 / 360 * 100%);
}
.wrapper__img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}

Tinggal ganti value di atas sesuai dengan kebutuhan website kamu.

Nah itulah beberapa pembahasan mengenai Core Web Vitals. Sekarang giliran kamu untuk mengimplementasikan pada website kamu untuk mendapatkan core web vitals yang baik.

Selamat mencoba dan semoga bermanfaat.