Core Web Vitals: Pengertian, Fungsi, dan Penggunaannya

Mungkin ada sebagian dari pemilik website yang sudah tahu apa itu Core Web Vitals, sebuah metrik yang digunakan untuk meningkatkan performa website dan user experience. Metrik ini juga digunakan sebagai salah satu indikator untuk menentukan peringkat website di halaman mesin pencari. Bagi Anda para pemilik website harus mempelajari hal-hal yang berhubungan dengan Core Web Vitals.

Apa itu Core Web Vitals?

Core Web Vitals adalah metrik yang digunakan oleh Google untuk menilai pengalaman pengguna di sebuah website. Metrik ini dirilis pada 2020 oleh Google setelah indikator mobile friendlines dan http.

Apa itu Core Web Vitals

Terdapat tiga indikator utama pada Core Web Vitals dalam menilai user experience yaitu kecepatan loading web, stabilitas tata letak halaman web, dan respon setiap elemen web.

Para pengelola website dapat dengan mudah menganalisis bagaimana pengalaman pengguna website milik mereka dan apa saja bagian yang perlu ditingkatkan sehingga dapat mengoptimalkan user experience menggunakan metrik ini.

Fungsi Core Web Vitals

Setelah mengetahui apa itu Core Web Vitals, Anda juga perlu memahami apa saja fungsi dari Core Web Vitals. Berikut fungsi dari Core Web Vitals bagi pemilik website.

  • Mengukur kecepatan loading halaman website
  • Mengetahui sejauh mana efektivitas respons elemen-halemen website
  • Mengukur stabilitas layout halaman
Seberapa Pentingkah Core Web Vitals

Seberapa Pentingkah Core Web Vitals?

Metrik user experience pada halaman website menjadi pertimbangan peringkat untuk berangkat seluler pada 2021. Untuk desktop, Google telah menyelesaikan sistem pada 2022. Core Web Vitals menjadi sinyal pengalaman halaman website yang mengindikasikan seberapa efektif website dapat diakses secara aman, mobile-friendly, dan tanpa gangguan.

Pentingnya Core Web Vitals dapat meningkatkan strategi Search Engine Optimization (SEO) sehingga website mudah ditemukan di halaman pencarian. Metrik ini juga membantu pengelola website untuk memastikan bahwa website memiliki performa yang stabil dan cepat.

Baca Juga:  Usability Testing Adalah: Pengertian, Cara Melakukan Usability Testing, dan Contohnya

Setidaknya 50% user perangkat mobile langsung menutup halaman website jika loadingnya membutuhkan waktu lebih dari 2,5 detik. Jika lebih lama dari itu maka dapat meningkatkan bounce rate sampai 32%.

Matriks Utama Core Web Vitals

Terdapat 3 indikator metrik Core Web Vitals dalam menilai sebuah website.

Largest Contentful Paint (LCP)

LCP merupakan matriks yang digunakan untuk mengukur kecepatan website, artinya, Anda dapat mengetahui berapa lama waktu yang dibutuhkan setiap website untuk menampilkan semua elemen di website tersebut ketika pertama kali memuat halaman website. Beberapa elemen diantaranya adalah teks, gambar, audio, video, dan elemen lainnya.

Baca Juga: Largest Contentful Paint: Pengertian dan Cara Optimasinya

Metrik ini juga disebut dengan Page Speed atau kecepatan website. Minimal page speed yang dibutuhkan yaitu tidak lebih dari 2,5 detik sehingga dapat memberikan user experience yang lebih baik. Beberapa penyebab halaman website memiliki skor LCP rendah yaitu gambar dan video yang memiliki ukuran besar, client site rendering, dan server yang lambat.

First Input Delay (FID)

FID merupakan matriks yang digunakan untuk menilai respon setiap elemen website, artinya Anda dapat mengetahui berapa lama waktu yang dibutuhkan website untuk merespon interaksi yang pertama kali dilakukan oleh user. Interaksi awal tersebut dapat berubah input data, klik, zoom, scroll, dan lain-lain.

Baca Juga: First Input Delay: Pengertian dan Cara Optimasinya

Untuk memperoleh indikator FID yang bagus maka interaksi pertama di halaman website harus tidak lebih dari 100 milidetik. Kondisi jaringan dan hardware juga mempengaruhi delay sehingga para pengguna mungkin mengalami delay yang berbeda-beda.

Cumulatif Layout Shift (CLS)

Cls merupakan matrik yang digunakan untuk menilai pengalaman visual halaman atau stabilitas visual dengan mengecek apakah terdapat pergeseran tata letak yang tidak terduga.

Baca Juga: Cumulative Layout Shift: Pengertian dan Cara Optimasinya

Gerakan tak terduga yang dimaksud yaitu saat elemen seperti tombol, teks, maupun gambar terdorong ke bagian bawah ketika halaman website masih loading. Kejadian ini cukup mengesalkan bagi para pengguna karena dapat membuat mereka secara tidak sengaja mengeklik elemen yang lain.

Baca Juga:  Social Commerce: Pengertian dan Cara Optimasinya

Cara Menilai Core Web Vitals

Nilai CLS yang baik dan menjadi tolok ukur yaitu tidak lebih dari 0,1.

Adapun faktor yang paling sering menyebabkan pergeseran layout yaitu adanya widget, gambar, dan iklan banner, sematan, atau iframe tanpa dimensi. Untuk menilai Core Web Vitals, Anda bisa menggunakan tools rekomendasi dari Google.

Tool untuk Mengukur Core Web Vitals

Terdapat setidaknya tiga tools untuk mengukur Core Web Vitals.

Tool untuk Mengukur Core Web Vitals

PageSpeed Insights

Tool ini digunakan untuk memberikan laporan data di perangkat mobile dan desktop selama 28 hari. Selain itu tool ini juga memberikan laporan analisis uji kecepatan website untuk mengetahui waktu loading yang dibutuhkan. Caranya yaitu buka website PageSpeed Insights, lalu masukkan URL, klik tombol Analyze.

Lighthouse

Tool ini bersifat open-source dan otomatis yang dapat digunakan untuk memonitoring performa website. Beberapa matriks yang tidak dimiliki oleh PageSpeed Insights ternyata ada pada Lighthouse seperti seo dan aksesbilitas.

Cara menggunakan tool ini yaitu install ekstensi >> klik kanan halaman yang akan dianalisis >> Inspect >> Lighthouse

Search Console

Tool ini dapat menampilkan metrik performa website pada laporan Core Web Vitals. Search Console memudahkan Anda untuk melakukan pengecekan setiap halaman website dalam waktu yang sama.

Cara Optimasi Core Web Vitals

Berikut merupakan cara yang dapat dilakukan untuk mengoptimasi Core Web Vitals.

  • Kompres file yang ukurannya besar seperti video atau gambar.
  • Menggunakan plugin cache atau CDN untuk meningkatkan kecepatan loading website.
  • Mengoptimalisasi file CSS dan JavaScript dengan cara memperbaiki render blocking dan memperkecil ukuran.
  • Gunakan JavaScript untuk memperbaiki hal-hal penting seperti masalah rendering di browser.
  • Tidak menggunakan elemen dengan posisi atau ukuran yang dapat berubah tiba-tiba.

Demikian pembahasan tentang apa itu Core Web Vitals. Coding Studio menghadirkan layanan kursus yang memudahkan Anda untuk memahami Core Web Vitals dalam mengembangkan website.