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.
Tingkatkan kredibilitas bisnis kamu dengan memiliki Website!
Miliki website profesional yang powerful dengan desain eksklusif dan pastinya SEO friendly untuk bisnis kamu. Konsultasi bersama specialist kami sekarang!
Mulai Konsultasi!Ingin konsultasi
dengan para specialist
Whello?
Tips lainnya dari kami
Cara Meningkatkan Domain Authority, Ini Langkah yang Harus Dilakukan
Domain authority merupakan salah satu faktor penting dalam SEO. Berikut beberapa cara meningkatkan domain authority yang bisa kamu lakukan.
Panduan Lengkap Memaksimalkan Internal Linking untuk Optimasi SEO
Tingkatkan kualitas SEO dan pengalaman pengguna pada website dengan mengoptimalkan penggunaan internal linking yang efektif. Ini panduannya!
Video Ads: Pengertian dan 7 Manfaatnya untuk Meningkatkan Branding
Sebagai content creator, kamu pasti sudah mengetahui istilah video ads. Yuk, simak penjelasan apa saja manfaatnya untuk tingkatkan branding!
Follow us on Instagram
Temukan tips bermanfaat digital marketing serta keseruan spesialis Whello dalam menumbuhkan brand, hanya di Instagram @whello.indonesia. Follow, ya!