preloader

Mengenal Apa Itu Core Web Vitals dan Cara Optimasinya

Apa Itu Core Web Vitals

Berdasarkan update yang diumumkan oleh Google pada Mei 2020 kemarin, terdapat faktor ranking web baru yang akan digunakan raksasa teknologi ini.

Faktor alias variabel baru tersebut disebut dengan page experience, alias pengalaman pengunjung saat mengakses sebuah halaman website.

Faktor page experience tersebut kemudian diukur menggunakan sekumpulan indikator yang disebut sebagai core web vitals.

Nah, implementasi dari penilaian ini sendiri memang baru diterapkan pada tahun 2021. Oleh karena itu, Anda yang punya website atau baru akan membuat website sekalipun, tentunya Anda perlu belajar pula tentang core web vitals.

Dengan begitu, nantinya ranking website Anda bisa dipertahankan dan bahkan ditingkatkan. Untuk lebih jelasnya mari simak penjelasan berikut ini untuk informasi lengkap tentang core web vitals.

Apa Itu Core Web Vitals?

Secara garis besar, core web vitals merupakan sekumpulan metrik website yang disusun oleh Google, dan menjadi bagian dari indikator peringkat pencarian terbaru seperti yang sudah disebut di atas, yaitu page experience.

Dengan sekumpulan metrik ini, Anda sebagai pemilik website pun perlu memerhatikan 3 (tiga) faktor atau indikator yang akan memengaruhi peringkat halaman website Anda nantinya.

Ketiga faktor tersebut adalah:

  • Largest Contentful Paint (LCP), atau seberapa cepat loading halaman
  • First Input Delay (FID), atau seberapa baik respon elemn-elemen yang ada pada halaman website
  • Cumulative Layout Shift (CLS), atau seberapa stabil layout halaman

Artinya, ketiga aspek tersebut harus Anda optimalkan pada website Anda demi mempertahankan dan meningkatkan ratingnya.

Terlebih lagi, Google memprediksi bahwa website Anda dapat mengurangi risiko pengunjung meninggalkan website Anda hingga 24 persen apabila Anda bisa mengoptimalkan ketiganya.

Oleh karena itu, bisa dilihat pula bahwa core web vitals juga memiliki pengaruh terhadap strategi SEO website Anda nanti.

Apa Saja Indikator Core Web Vitals?

Seperti yang sudah disebutkan di atas, core web vitals memiliki 3 (tiga) aspek atau indikator. Masing – masing akan dibahas lebih lanjut dalam penjelasan di bawah ini.

Largest Contentful Paint (LCP)

LCP merupakan indikator yang mengukur waktu yang dibutuhkan oleh elemen terbesar pada sebuah halaman untuk dimuat. Nah, yang dimaksud elemen di sini tak sekadar gambar atau video, tapi juga termasuk teks panjang.

Hanya saja, catat bahwa LCP ini memerhatikan hanya konten dengan ukuran paling besar, yang pertama kali tampil pada saat halaman diakses. Dengan demikian, elemen-elemen lain di bawahnya tidak diperhatikan, bahkan walaupun ukurannya juga besar.

Adanya indikator ini juga untuk menggantikan metrik yang pernah digunakan Google sebelumnya, yaitu First Contentful Paint (FCP). FCP sendiri memerhatikan elemen halaman yang dimuat pertama kali, bahkan meskipun ukurannya kecil, seperti menu navigasi pada header atau gambar logo.

First Input Delay (FID)

FID merupakan salah satu indikator core web vitals yang mengukur waktu yang dibutuhkan oleh website dalam merespon tindakan yang pertama kali dilakukan oleh pengunjung. Tindakan yang dimaksud di sini bisa jadi berupa input atau klik, tapi bukan zoom dan scroll.

Walaupun pengukuran FID dilakukan berdasarkan interaksi dengan pengunjung saat mayoritas elemen halaman telah dimuat, sebenarnya indikator ini masih terus disempurnakan. Soalnya, data lab masih digunakan dalam menentukan kriteria penilaian FIB. Sementara itu, interaksi pertama pada suatu halaman website bisa terjadi kapan saja.

Sementara itu, penentuan kriteria penilaian FID yang berlaku saat ini berarti skor FID website Anda buruk apabila pengunjung tidak langsung klik tombol atau menu. Untuk saat ini, solusi yang bisa Anda terapkan agar skor FID Anda bagus adalah mengoptimalkan performa file-file JavaScript, atau malah meminimalkan penggunaannya.

Cumulative Layout Shift (CLS)

CLS merupakan indikator core web vitals yang mengukur sebeapa banyak perubahan yang terjadi pada layout halaman website ketika sedang dimuat. Indikator yang satu ini sebatas menghitung frekuensi perubahan layout yang terjadi tanpa diduga.

Misalnya, Anda sebagai pengunjung website ingin mengklik sebuah tombol sebelum halaman dimuat sepenuhnya. Akan tetapi, begitu halaman sudah selesai dimuat semuanya, tombol yang dimaksud malah bergeser ke bawah karena ada elemen lain yang munculnya terlambat.

Atau ketika Anda akan mulai membaca artikel pada blog sebelum halaman dimuat sepenuhnya, paragraf yang Anda baca tahu-tahu “melorot” ke bawah karena ada banner iklan yang muncul tiba-tiba.

Tapi, bagaimana jika website Anda punya menu drop-down? Tenang saja, karena faktor ini tidak akan mengurangi skor CLS website Anda, kok! Karena sekali lagi, CLS adalah indikator core web vitals yang hanya memerhatikan perubahan layout yang sifatnya tak terduga.

Bagaimana Cara Mengecek Skor Core Web Vitals?

Lalu, bagaimana caranya Anda bisa mengecek skor core web vitals website Anda? Saat ini, ada beberapa alat atau tools yang sudah bisa Anda gunakan untuk menampilkan data skor tersebut.

Beberapa tools tersebut misalnya:

  • Chrome UX Report
  • Chrome Web Vitals Extension
  • Google Search Console
  • PageSpeed Insights

Kalau begitu, apakah artinya Anda harus menggunakan semua tools tersebut? Tenang saja, Anda tak perlu menggunakan keempatnya secara berbarengan, kok! Anda cukup gunakan beberapa tool saja, misalnya Google Search Console atau PageSpeed Insights.

Masing – masing tool tentu saja memiliki tampilan dan fitur – fitur khas yang berbeda – beda.

Sebagai contoh, Google Search Console dapat menyajikan data core web vitals secara garis besar atau dalam bentuk summary.

Sementara itu, PageSpeed Insights dapat membantu Anda mengidentifikasi apa saja elemen yang dapat dioptimalkan untuk meningkatkan skor core web vitals Anda.

Tips Mengoptimalkan Skor Core Web Vitals

Mengoptimalkan LCP

Untuk mendapatkan skor LCP yang baik, kecepatan untuk memuat elemen yang diperhatikan LCP harus di bawah 2,5 detik. Kalau lebih dari angka itu, apalagi sampai di atas 4 detik, nilai core web vitals pun buruk.

Beberapa cara yang bisa dilakukan misalnya:

  • Optimalkan file-file ukuran besar, misal dengan mengompres (compressing) file dan gambar
  • Efisiensi file CSS dan JavaScript
  • Tingkatkan kecepatan loading website
  • Perbaiki masalah rendering browser

Mengoptimalkan FID

Untuk mendapatkan skor FID yang baik, interaksi pertama pada website Anda harus terjadi dalam waktu kurang dari 100 milidetik. Hal tersebut tentu tidak mudah, karena FID sepenuhnya bergantung pada pengunjung. Apabila pengunjung hanya membaca tulisan atau scrolling, skor FID akan jadi buruk.

Karenanya, untuk mengoptimalkan skor FID, Anda perlu percepat loading website tapi bukan dengan cara optimasi gambar. Justru Anda perlu lakukan optimasi JavaScript, alias penyederhanaan file-file JavaScript agar penggunaannya dapat diminimalisir.

Mengapa? Karena meskipun JavaScript dapat membuat halaman website jadi semakin dinamis, penggunaan file JavaScript yang terlalu banyak pada sebuah halaman justru akan membuat halaman website jadi makin berat untuk dimuat.

Nah, kalau jumlah file-nya diringkas, halaman website jadi lebih cepat dimuat, dan penunjung bisa berinteraksi dengan lebih cepat, kan?

Mengoptimalkan CLS

Skor CLS yang baik adalah minimal 0,1 dan dihitung dengan menggunakan 2 (dua) variabel:

  • Impact fraction, atau angka yang menunjukkan efek dari perpindahan layout pada halaman
  • Distance fraction, atau jarak perpindahan elemen yang dibagi dengan dimensi terbesar layar (panjang atau tinggi)

Dengan begitu, skor CLS = impact fraction x distance fraction. Pengukurannya sendiri membutuhkan alat, sepert PageSpeed Insights.

Nah, itulah rangkuman singkat mengenai core web vitals, ketiga indikatornya, dan tips untuk mengoptimalkan skor core web vitals Anda. Semoga informasi di atas bermanfaat untuk Anda, ya!

Related Post