Core Web Vitals: Pengertian dan Tips Mengoptimalkan Halaman Website

Core Web Vitals saat ini menjadi serangkaian faktor yang dianggap penting oleh Google. Jika Anda adalah pemilik website, maka Anda perlu memperhatikan faktor-faktor tersebut agar website dapat menduduki peringkat tertinggi pada halaman hasil pencarian Google dan mengalahkan kompetitor bisnis yang lain.

Seperti yang sudah diketahui oleh banyak orang, peringkat website di halaman Google dipengaruhi oleh berbagai hal seperti penggunaan kata kunci, popularitas website, dan lain-lain. Saat ini, Google juga akan menilai kinerja website ketika menentukan peringkat halaman website.

Perlu Anda ketahui, pada bulan Juni 2021, Page Experience telah ditetapkan sebagai faktor peringkat resmi oleh Google. Secara garis besar Page Experience ini berisi sekumpulan faktor yang dipergunakan untuk mengukur bagaimana pengalaman users ketika mereka berinteraksi dengan sebuah halaman website. Salah satu faktor tersebut dikenal dengan istilah Core Web Vitals. Jadi, apa itu Core Web Vitals? Simak penjelasan kami berikut ini.

Apa Itu Core Web Vitals?

Core Web Vitals adalah sekumpulan metrik standar yang digunakan untuk mengukur user experience di dalam halaman website. Core Web Vitals ini akan menyoroti tiga area yaitu:

• Page loading 
• Kemudahaan interaksi
• Stabilitas tampilan visual halaman web dari sudut pandang pengguna

Berikut adalah 3 metrik utama di dalam Core Web Vitals yang dapat Anda pergunakan untuk menilai performa halaman website Anda:

1. Largest Contentful Paint (LCP)

Largest Contentful Paint adalah metrik Core Web Vitals yang dapat digunakan untuk mengukur loading performance saat user pertama kali membuka halaman website sampai melihat sebagian besar konten di layar. Jadi, metrik ini menganalisis berapa lama waktu yang dibutuhkan agar gambar atau blok teks terbesar terlihat dalam viewport browser.

Untuk mengukur skor LCP, Anda menggunakan tools seperti Google PageSpeed ​​Insights atau melalui Google Search Console. Halaman website dengan LCP mencapai 2,5 detik maka halaman web tersebut dianggap memiliki kinerja yang baik (hijau), sedangkan  halaman dengan waktu 4,0 detik akan dianggap buruk (merah).

2. Cumulative Layout Shift (CLS)

Cumulative Layout Shift adalah metrik untuk menilai stabilitas halaman website saat dimuat. Artinya, metrik ini digunakan untuk melihat apakah elemen-elemen yang ada di halaman website tetap berada di tempatnya ketika halaman sedang dimuat. Jika halaman website Anda memiliki elemen teks, tombol, atau gambar yang berpindah-pindah saat halaman dimuat, maka web Anda memiliki CLS yang tinggi dan itu buruk. Untuk memberikan pengalaman pengguna yang baik, halaman harus bisa mempertahankan skor CLS kurang dari 0,1. 

Stabilitas tampilan visual memang dianggap penting oleh Google karena dapat memberi pengaruh pada user experience. Sebagai contoh, ketika pengguna mencoba mengklik sebuah link atau mencoba mengisi formulir kemudian elemen tersebut berpindah-pindah, maka user memiliki peluang untuk salah klik. Hal tersebut tentu perlu Anda hindari karena dapat membuat kerugian bagi user serta menciptakan pengalaman yang buruk. 

Menurut Google, ada lima alasan utama mengapa pergerakan tata letak tersebut terjadi, yaitu:

• Gambar dengan dimensi yang tidak ditetapkan
• Iklan, iframe, atau file sematan dengan dimensi yang tidak ditetapkan
• Konten dinamis
• Web Font yang menyebabkan FOIT/FOUT (Flash of Invisible Text / Flash of Unstyled Text)
• Tindakan menunggu respons dari network sebelum update Document Object Model (DOM)

3. First Input Delay (FID)

First Input Delay adalah metrik untuk mengukur latensi input  atau waktu yang dibutuhkan elemen halaman untuk merespons input pengguna. Agar website dapat memberikan user experience yang baik, maka skor FID harus kurang dari 100 milidetik. 

Jadi, melalui metrik ini, Anda dapat melihat waktu aktual yang diperlukan pengguna untuk dapat berinteraksi dengan cepat dengan halaman website. Interaksi yang dimaksud seperti:

• Memilih item pada menu dropdown
• Mengklik menu navigasi
• Memasukkan alamat email ke dalam bidang formulir
• Dan lain-lain.

Untuk halaman website yang kaya konten, seperti blog atau artikel, maka FID biasanya bukan menjadi faktor besar karena “interaksi” yang dimaksud biasanya hanya menggeser halaman ke bawah. Namun Jika halaman website Anda memerlukan banyak interaksi seperti halaman login yang mengharuskan user menginput email dan password, atau halaman formulir yang meminta data user maka FID menjadi metrik yang perlu mendapat banyak perhatian.

Baca Juga: 5 Cara Optimasi SEO Youtube Untuk Tingkatkan Views Video Anda

Tips Mengoptimalkan Skor Core Web Vitals

1. Mengoptimalkan Largest Contentful Paint (LCP)

Pada umumnya masalah waktu loading yang lama dapat diatasi dengan mengurangi kuantitas data yang dikirim ke browser. Berikut adalah beberapa tips yang bisa Anda lakukan:

• Upgrade layanan server atau hosting yang Anda gunakan. Pastikan download speeds tetap dapat bekerja dengan cepat meskipun saat penggunaan tinggi.
• Aktifkan kompresi server dan HTTP/2+. 
• Hapus kode dan plugin CMS yang tidak digunakan lalu aktifkan caching yang efektif.
• Manfaatkan Content Delivery Network (CDN untuk membagi beban dan aset host di server yang secara geografis lebih dekat dengan pengguna.
• Optimalkan konten gambar di halaman web Anda. Gunakan format file yang sesuai serta kurangi size atau dimensi gambar.
• Hapus file JavaScript dan CSS yang tidak digunakan.
• Gabungkan dan perkecil file JavaScript dan CSS.
• Aktifkan lazy loading sehingga gambar akan dimuat saat gambar tersebut benar-benar dibutuhkan.

2. Mengoptimalkan Cumulative Layout Shift (CLS)

Ada beberapa tips yang bisa Anda implementasikan agar website memiliki skor CLS kurang dari 0,1. 

• Tambahkan atribut lebar dan tinggi ke HTML tag  dan  atau gunakan properti rasio aspek CSS baru untuk memastikan bahwa ruang yang sesuai telah dipesan pada halaman web sebelum aset diunduh.
• Pastikan gambar dan aset lain yang muncul di bagian atas halaman direquest sedini mungkin.
• Minimalkan penggunaan web font dan pertimbangkan untuk menggunakan font OS yang tersedia jika memungkinkan.
• Hindari menyisipkan elemen di bagian atas halaman kecuali jika elemen tersebut merespons tindakan pengguna seperti klik.
• Gunakan transformasi dan opasitas CSS untuk animasi yang lebih efisien dan tidak memerlukan tata letak ulang.
• Pertimbangkan untuk menggunakan critical inline CSS. Sematkan CSS “above-the-fold” di dalam  block di bagian atas halaman website kemudian load stylesheets tambahan secara asinkron.

3. First Input Delay (FID)

Agar skor FID kurang dari 100 milidetik, Anda dapat melakukan beberapa tips berikut:

• Kecil kemungkinan user bisa berinteraksi dengan halaman website saat halaman tersebut sedang memuat JS. Jadi, Minimalkan JavaScript halaman web Anda untuk mengoptimalkan skor FID.
• Gunakan browser cache untuk proses loading konten yang lebih cepat. Hal ini juga dapat membantu browser pengguna untuk bisa menjalankan tugas JS loading dengan cepat.
• Pastikan browser dapat menyimpan file secara efektif serta atur hash Expires , Last-Modified , atau ETag yang sesuai di header HTTP.
• Hapus file JavaScript dan CSS yang tidak digunakan.
• Meminimalkan request JavaScript pihak ketiga untuk analitik, widget media sosial, forum diskusi, dll

Baca Juga: SEO Audit: 7 Hal Yang Harus Dilakukan Saat Mengaudit Website

Core Web Vitals menyediakan metrik utama untuk menilai pengalaman pengguna website. Dengan memperhatikan metrik  LCP, CLS, dan FID maka website Anda akan memiliki peluang lebih besar untuk mendapatkan peringkat tertinggi di halaman mesin pencari.

Jika Anda membutuhkan tim digital marketing atau spesialis SEO untuk mengoptimalkan performa website Anda, silakan gunakan layanan Cari Developer di WDI. Layanan ini menyediakan daftar perusahaan web developer atau agensi digital marketing yang dapat membantu bisnis Anda berkembang di era digital.