Core Web Vitals: Pengertian, Indikator, Cara Memeriksa, dan Optimasinya

Table of Contents
Pengertian Core Web Vitals
Core Web Vitals

Pengertian Core Web Vitals

Core web vitals adalah metrik update algoritma Google berkaitan dengan page experience atau pengalaman pengguna. Saat ini, pemilik situs tidak hanya harus memiliki konten yang bagus, namun juga dituntut untuk memastikan situsnya memberikan user experience yang nyaman bagi pengunjung.

Core web vitals merupakan aspek yang membantu para pemilik situs untuk mengukur seberapa mudah atau nyaman sebuah halaman ketika digunakan oleh pengunjung yang datang. Semakin bagus nilai core web vitals-nya, berarti user experience situs Anda semakin baik.

Dengan begitu, kemungkinan akan tampil di halaman pertama hasil pencarian juga akan semakin tinggi. Faktor ini memang tergolong sangat baru, jika sebelumnya berkaitan dengan teknis website dan konten, saat ini sudah beralih ke UX pengguna.

Indikator Core Web Vitals

1. LCP (Largest Contentful Paint)
LCP berkaitan dengan kecepatan website. LCP merupakan waktu yang dibutuhkan elemen terbesar di sebuah halaman untuk dimuat. Elemen yang dimaksud tidak harus berupa gambar atau video. Teks panjang pun dapat dianggap LCP.

Perlu diingat bahwa faktor ini hanya memperhatikan konten dengan ukuran terbesar yang tampil pertama kali ketika halaman diakses. Artinya, elemen-elemen lain di bawahnya tidak termasuk meskipun juga berukuran besar.

LCP ditetapkan untuk menggantikan salah satu metrik yang pernah digunakan Google, yaitu FCP (first contentful paint). Sesuai namanya, FCP adalah elemen halaman yang pertama kali dimuat, meskipun berukuran kecil seperti logo atau menu navigasi di header.

2. FID (First Input Delay)
FID berkaitan dengan baik atau tidaknya respons elemen halaman website. FID merupakan waktu yang dibutuhkan website untuk merespons interaksi pertama yang dilakukan pengunjung. Interaksi yang dimaksud berupa klik atau input, tetapi bukan scroll dan zoom.

Meskipun FID diukur dari interaksi pengunjung ketika sebagian besar elemen halaman sudah dimuat, indikator ini belum sempurna.

Karena Google masih menggunakan data lab untuk menentukan kriteria penilaian FID. Padahal, interaksi pertama pada halaman website dapat terjadi kapan saja. Dengan demikian, nilai FID Anda buruk jika pengunjung website tidak segera mengklik tombol atau menu.

Saat ini, solusi yang dapat Anda lakukan untuk mendapatkan skor baik untuk FID adalah mengoptimalkan kinerja file-file JavaScript atau meminimalkan penggunaannya. Sebagai catatan, beberapa tool untuk memeriksa skor core web vitals menggunakan istilah Total Blocking Time (TBT) untuk FID.

3. CLS (Cumulative Layout Shift)
CLS berkaitan dengan stabilitas layout halaman website. CLS merupakan indikator yang mengukur seberapa banyak perubahan layout halaman website yang terjadi saat dimuat. Bayangkan Anda sedang mengakses sebuah halaman website. Di dalamnya ada tombol yang ingin Anda klik sebelum halaman ini sepenuhnya dimuat.

Sayangnya, tombol tersebut bergeser ke bawah begitu hampir diklik. Alasannya karena ada elemen lain yang terlambat muncul. Contoh lainnya berkaitan dengan penempatan slot banner iklan yang kurang tepat. Misalnya, Anda membuka sebuah artikel blog dan mulai membacanya sebelum halaman sepenuhnya dimuat.

Tiba-tiba, paragraf yang sedang Anda simak meluncur ke bawah berkat kemunculan banner iklan yang tidak Anda duga. Meski terdengar sepele, ini menjengkelkan jika Anda sedang asyik membaca. Baik  tidaknya skor CLS Anda diukur dari hal-hal seperti itu. Namun demikian, CLS hanya menghitung seringnya perubahan layout yang tidak terduga.

Jika website Anda memiliki menu yang dapat disembunyikan atau drop-down, perubahan tampilan yang terjadi tidak dianggap sebagai faktor pengurang skor.

Cara Memeriksa Skor Web Vitals

Untuk mengetahui skor core web vitals terdapat beberapa tools yang bisa Anda gunakan di antaranya PageSpeed Insights, Google Search Console, Chrome UX Report, dan Chrome Web Vitals Extension. Rekomendasi 2 tools yang dapat Anda gunakan yaitu Google Search Console dan PageSpeed Insights.

Perbedaannya antara 2 tools ini yaitu, jika menggunakan Google Search Console, Anda bisa melihat data web vitals secara garis besarnya, dan untuk PageSpeed Insights bisa mengidentifikasi elemen yang perlu dioptimalkan. Kedua tools ini bisa Anda gunakan bersamaan.

Untuk melihat skor web vital di Google Search Console yaitu masuk seperti biasa ke halaman search console. Setelah itu klik menu Core Web Vital di sidebar. Untuk melihat data core web vital di PageSpeed Insight yaitu, akses situs PageSpeed Insight lalu masukan URL website atau halaman Anda.

Nanti Anda akan menemukan Field Data untuk melihat hasil dari ketiga indikator Core Web Vitals yang sudah dibahas sebelumnya ditambah.

Cara Optimasi Core Web Vitals

Berikut beberapa cara optimasi core web vitals yang bisa Anda coba di antaranya,
1. Optimasi LCP
Loading website bisa dikatakan bagus jika di bawah 2,5 detik, selain itu Anda perlu melakukan perbaikan. Untuk mengeceknya silahkan buka pada bagian LCP dan silahkan analisa apa saja yang menjadi penyebabnya. Cek apa saja yang menjadi penyebab loading paling lama.

Terdapat beberapa hal yang bisa Anda optimalkan pada bagian LCP ini di antaranya,
a. Kompres gambar dan file ke ukuran yang lebih kecil
b. Menambahkan plugin lazy load pada website
c. Perkecil dan perbaiki render-blocking JS dan CSS website
d. Gunakan plugin cache website atau bisa juga dengan CDN

Pada kasus website ini masalah utamanya ada di CSS, preload gambar dan render blocking resource.

2. Optimasi FID
Patokan bagus untuk skor FID website adalah di bawah 100 milidetik, jika diatas itu website butuh perbaikan. Caranya untuk membuat website lebih cepat selain mengkompres gambar adalah dengan mengoptimalkan Javascript website.

Untuk bisa melakukan optimasi Javascript Anda perlu memahami bahasa pemrograman website, jika tidak bisa minta bantuan ke developer website. Pada kasus website ini masalah utamanya ada pada avoid serving legacy JavaScript to modern browsers.

3. Optimasi CLS
Terakhir optimasi CLS website, pada kasus website ini masalah utamanya terdapat pada bagian avoid large layout shifts. Cara optimasi untuk menaikkan skor CLS adalah dengan beberapa hal di antaranya,
a. Aturlah dimensi gambar sesuai dengan ukuran website
b. Tentukan tempat khusus untuk jenis iklan dinamis, karena iklan ini akan bersinggungan dengan elemen lain.
c. Aturlah ruang khusus untuk embed file-file yang memiliki ukuran besar seperti video, gambar dan sejenisnya.
d. Gunakan fitur preload untuk font website

Kesimpulan

Google telah mengumumkan bahwa page experience akan menjadi salah satu penilaian utama untuk menentukan ranking sebuah situs di halaman hasil pencarian Google. Tentunya, agar page experience situs Anda baik, core web vitals sebagai metrik-metrik penyusunya harus dipastikan memiliki nilai tertinggi.

Baca Juga: Google Ranking: Pengertian, Faktor Utama, dan Tools Cek Peringkat Website di Google

Ini berarti situs Anda harus cepat di-load, stabil, dan pengguna bisa segera melakukan interaksi dengan elemen-elemennya. Tanpa memperhatikan ini, menjadi situs yang tampil di urutan pertama ketika seseorang melakukan pencarian di Google akan sulit.

Jika begitu, mendatangkan traffic dan meningkatkan penjualan pun akan menjadi jauh lebih menantang.

Dari berbagai sumber

Download

Aletheia Rabbani
Aletheia Rabbani “Barang siapa yang tidak mampu menahan lelahnya belajar, maka ia harus mampu menahan perihnya kebodohan” _ Imam As-Syafi’i

Post a Comment