Core Web Vitals

Core Web Vitals adalah alat ukur yang digunakan oleh Google untuk menghitung kualitas pengalaman user berlama-lama di sebuah situs web. Kamu dapat mengunjungi website page speed insight  untuk melihat performa dari website kamu. Metrix ini biasanya terdiri dari 4 (empat) variable, diantaranya performa, aksesbilitas, praktik terbaik, dan SEO.

Membangun website dengan memperhatikan Core Web Vitals menjadi bagian penting dalam algoritma pencarian Google karena memengaruhi peringkat SEO suatu situs.

Komponen Core Web Vitals

1. Largest Contentful Paint (LCP)

   Largest Contentful Paint (LCP) adalah salah satu metrik utama dari Core Web Vitals yang digunakan untuk mengukur kecepatan pemuatan elemen konten terbesar di halaman web. LCP menggambarkan seberapa cepat pengguna dapat melihat elemen konten utama halaman (seperti teks besar, gambar hero, atau video) setelah halaman mulai dimuat.

   Elemen yang Diukur oleh LCP

   LCP biasanya mengacu pada elemen terbesar yang terlihat dalam viewport pengguna, seperti:

   • Gambar atau video besar (misalnya, gambar hero).
   • Blok teks besar (misalnya, heading utama).
   • Elemen latar belakang yang dimuat menggunakan properti CSS background-image.

   ---

   Target Optimal untuk LCP

   Google memberikan pebilaian berikut untuk LCP :

   • LCP ≤ 2,5 detik (Baik)
   • 2,5 detik < LCP ≤ 4 detik (Perlu peningkatan)
   • LCP > 4 detik (Buruk)

   ---

   Faktor yang Mempengaruhi LCP

   1. Kecepatan Server
      • Server yang lambat memperlambat pengiriman konten ke pengguna.
   2. Resource yang Tidak Dioptimalkan
      • Gambar atau video yang terlalu besar dan tidak dikompresi.
      • Font web yang membutuhkan waktu lama untuk dimuat.
   3. Render-Blocking Resources
      • File CSS atau JavaScript yang memblokir rendering elemen penting.
   4. Client-Side Rendering
      • Penggunaan JavaScript berat yang menunda rendering konten di sisi klien.

   ---

   Mengapa LCP Penting?

   LCP merupakan indikator langsung tentang pengalaman pengguna. Jika elemen utama halaman membutuhkan waktu lama untuk dimuat, pengguna cenderung merasa frustrasi dan mungkin meninggalkan situs, yang berdampak negatif pada:

   • Memudahkan keindex dan rangking di halaman pencarian, karena google lebih mengutamakan halaman dengan skor Core Web Vitals yang baik.
   • Halaman yang lebih cepat cenderung meningkatkan engagement dan konversi.

2. First Input Delay (FID) Core Web Vitals

   First Input Delay (FID) adalah salah satu metrik dari Core Web Vitals yang mengukur waktu respons sebuah halaman terhadap interaksi pengguna pertama, seperti:

   • Klik pada tombol atau tautan.
   • Tekan tombol di keyboard.
   • Sentuhan layar pada perangkat mobile.

   FID menunjukkan waktu yang dibutuhkan browser untuk mulai merespons interaksi setelah pengguna pertama kali mencoba berinteraksi dengan halaman.

   ---

   Target Optimal untuk FID

   Google memberikan penilaian berikut untuk FID

   • FID ≤ 100 ms (Baik).
   • 100 ms < FID ≤ 300 ms (Perlu peningkatan)
   • FID > 300 ms (Jelek)

   ---

   Faktor yang Mempengaruhi FID

   1. Beban JavaScript Berat
      • Browser mungkin sibuk menjalankan JavaScript yang berat, seperti parsing, kompilasi, dan eksekusi, sehingga menunda respons terhadap interaksi pengguna.
   2. Tugas Utama yang Panjang (Long Tasks)
      • Tugas yang memakan waktu lebih dari 50 ms di main thread dapat menghalangi browser merespons input dengan cepat.
   3. Render-Blocking Resources
      • File CSS atau JavaScript yang memblokir rendering dapat memperpanjang waktu hingga halaman siap merespons.
   4. Efisiensi Browser
      • Performa browser dalam memuat, memproses, dan merender halaman juga dapat memengaruhi FID.

   ---

   Mengapa FID Penting?

   FID mengukur interaktivitas awal halaman, yang sangat penting untuk pengalaman pengguna.

   • Responsif terhadap pengguna, Jika halaman lambat merespons input, pengguna mungkin merasa frustrasi dan meninggalkan situs.
   • Memudahkan terlisting di mesin pencarian dengan SEO organik, Google menganggap FID sebagai faktor penting untuk peringkat pencarian.
   • User Engagement Situs yang cepat merespons cenderung lebih disukai pengguna.

   Perbedaan FID dengan Metrik Lain

   • FID vs LCP
     • FID berfokus pada waktu respons terhadap interaksi.
     • LCP berfokus pada waktu muat elemen konten terbesar.
   • FID vs TTI (Time to Interactive)
     • TTI mengukur kapan halaman sepenuhnya siap untuk interaksi tanpa penundaan.
     • FID hanya melihat waktu respons untuk interaksi pertama.
3. Cumulative Layout Shift (CLS) Core Web VitalsCumulative Layout Shift (CLS) adalah metrik dalam Core Web Vitals yang mengukur stabilitas visual halaman web. CLS mengevaluasi seberapa sering elemen pada halaman bergeser secara tiba-tiba selama proses pemuatan halaman, yang dapat mengganggu pengalaman pengguna.Contoh umum dari pergeseran tata letak meliputi:
   • Teks yang bergerak karena gambar dimuat belakangan.
   • Tombol yang bergeser sehingga pengguna mengklik sesuatu yang tidak diinginkan.

   ---

   Cara Kerja CLS

   CLS dihitung dengan menggabungkan dua faktor:

   1. Impact Fraction, adalah Persentase area viewport yang terpengaruh oleh elemen yang bergeser.
   2. Distance Fraction, adalah Seberapa jauh elemen bergeser di dalam viewport.

   Rumus

   

   ---

   Target Optimal untuk CLS

   Google memberikan panduan berikut :

   • CLS ≤ 0,1 (Baik)
   • 0,1 < CLS ≤ 0,25  (Perlu peningkatan)
   • CLS > 0,25 (Jelek)

   ---

   Penyebab Umum CLS

   1. Gambar tanpa Dimensi
      • Gambar atau video yang dimuat tanpa atribut width dan height menyebabkan tata letak bergeser saat file selesai dimuat.
   2. Iklan atau Embed yang Tidak Terprediksi
      • Elemen seperti iklan atau widget yang dimuat dinamis dapat menyebabkan perubahan tata letak.
   3. Font yang Terlambat Dimuat
      • Penggunaan font khusus tanpa fallback font dapat menyebabkan teks bergeser ketika font dimuat.
   4. Konten yang Ditambahkan Secara Dinamis
      • Penambahan elemen baru (seperti banner, pop-up, atau notifikasi) tanpa ruang yang disiapkan sebelumnya.

Mengapa Core Web Vitals Penting?

• Pengalaman Pengguna: Membantu memastikan bahwa pengguna mendapatkan pengalaman yang lancar dan cepat saat mengunjungi situs web.
• SEO (Search Engine Optimization): Google menggunakan Core Web Vitals sebagai salah satu faktor peringkat dalam hasil pencarian. Situs dengan skor baik lebih cenderung mendapatkan posisi yang lebih tinggi.
• Konversi: Kinerja web yang baik dapat meningkatkan tingkat konversi, seperti pembelian atau pengisian formulir.

Cara Mengukur Core Web Vitals

• Google PageSpeed Insights: Alat gratis untuk mengukur Core Web Vitals dan memberikan rekomendasi.
• Google Search Console: Memberikan laporan khusus tentang Core Web Vitals untuk seluruh situs web.
• Lighthouse: Alat pengujian performa yang dapat dijalankan langsung di browser Chrome.

Optimasi Core Web Vitals adalah langkah penting untuk meningkatkan performa situs web Anda, baik untuk pengguna maupun untuk mesin pencari.