Mengapa Core Web Vitals Menjadi Faktor Peringkat Langsung

Pada 2021, Google secara resmi memasukkan Core Web Vitals ke dalam algoritma peringkatnya sebagai bagian dari Page Experience Update. Berbeda dari banyak faktor SEO lainnya, Core Web Vitals dapat diukur dengan sangat tepat — Google menyediakan ambang batas yang jelas untuk membedakan performa "Good," "Needs Improvement," dan "Poor".

Tiga Core Web Vitals saat ini adalah:

1. 1LCP (Largest Contentful Paint): Performa pemuatan

1. 1CLS (Cumulative Layout Shift): Stabilitas visual
2. 2INP (Interaction to Next Paint): Responsivitas (menggantikan FID pada Maret 2024)

LCP (Largest Contentful Paint): Performa Pemuatan

Apa yang diukur: Waktu sejak pemuatan halaman dimulai hingga elemen terlihat terbesar (biasanya gambar hero atau heading utama) selesai dirender.

Teknik utama untuk meningkatkan LCP:

1. Optimalkan Elemen LCP

Elemen LCP biasanya berupa gambar hero atau heading

. Identifikasi milik Anda menggunakan Chrome DevTools → tab Performance → penanda LCP.

2. Preload Gambar LCP

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Menambahkan fetchpriority="high" memberi tahu browser untuk mengunduh gambar ini sebelum resource lain.

3. Konversi Gambar ke WebP atau AVIF

Gambar hero JPEG berukuran 450 KB yang dikonversi ke WebP menjadi sekitar 290 KB — mengurangi LCP secara proporsional terhadap waktu render.

4. Gunakan CDN

Cloudflare, Fastly, atau CDN serupa mengirimkan aset dari edge node yang secara geografis dekat dengan pengguna. Untuk situs Korea yang melayani pengguna Korea, edge node Korea mengurangi latensi sebesar 50–80ms dibandingkan server origin.

5. Hilangkan Resource yang Memblokir Render

CSS dan JavaScript di dalam memblokir rendering hingga selesai dimuat. Tunda JS yang tidak kritis; inline CSS kritis.

CLS (Cumulative Layout Shift): Stabilitas Visual

Apa yang diukur: Jumlah pergeseran layout visual yang tidak terduga selama masa hidup halaman. Ketika sebuah elemen bergerak setelah render awal (misalnya, iklan dimuat lalu mendorong konten ke bawah), ini disebut pergeseran layout.

Teknik utama untuk meningkatkan CLS:

1. Selalu Tetapkan Dimensi Gambar

<img src="photo.jpg" alt="Photo">

<img src="photo.jpg" alt="Photo" width="800" height="600">

Di Next.js, dengan prop width dan height (atau fill) secara otomatis mencegah CLS.

2. Sediakan Ruang untuk Unit Iklan

Iklan AdSense dimuat secara asinkron — jika Anda tidak menyediakan ruang untuknya, iklan akan mendorong konten ke bawah saat dimuat. Tambahkan wrapper dengan tinggi minimum di sekitar setiap slot iklan:

.ad-container { min-height: 250px; }

3. Hindari Pergantian Font yang Terlambat Dimuat

Font web yang dimuat setelah render awal membuat teks "melompat" saat font berubah. Gunakan font-display: optional atau preload font kritis:

<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>

INP (Interaction to Next Paint): Responsivitas

Apa yang diukur: Latensi antara interaksi pengguna (klik, ketuk, tekan tombol) dan respons visual browser. Menggantikan FID pada Maret 2024.

Teknik utama untuk meningkatkan INP:

1. Pecah Tugas JavaScript yang Panjang

Tugas yang berjalan lebih dari 50ms di main thread memblokir respons interaksi pengguna. Gunakan scheduler.yield() atau setTimeout untuk memecah tugas besar menjadi bagian-bagian yang lebih kecil.

2. Kurangi Dampak Skrip Pihak Ketiga

Analytics, skrip iklan, dan widget chat sering berjalan di main thread. Audit skrip pihak ketiga di Chrome DevTools → Performance → tab Bottom-Up. Hapus skrip yang tidak diperlukan; muat skrip lainnya dengan defer atau async.

3. Optimalkan Pembaruan Komponen React/Next.js

Dalam aplikasi React, render ulang yang mahal memblokir main thread. Gunakan React.memo, useMemo, dan useCallback untuk mencegah render ulang yang tidak diperlukan saat interaksi.

Mengukur Core Web Vitals Anda

Data lapangan (data pengguna nyata):

• Google Search Console → laporan Core Web Vitals
• PageSpeed Insights → bagian Field Data

Data lab (simulasi):

• PageSpeed Insights → bagian Lab Data
• Chrome DevTools → audit Lighthouse
• WebPageTest.org

Perbedaan utama: Google memberi peringkat berdasarkan data lapangan (pengguna nyata), bukan data lab. Skor lab memberikan arahan umum, tetapi mungkin tidak persis sama dengan sinyal peringkat.

Kesimpulan

Meningkatkan Core Web Vitals adalah salah satu dari sedikit aktivitas SEO dengan hasil yang dapat diukur secara langsung. Mulailah dengan mengidentifikasi kegagalan metrik terbesar Anda di Google Search Console. Untuk sebagian besar situs, LCP adalah target dengan dampak tertinggi — mengoptimalkan gambar hero saja sering kali memindahkan skor dari "Needs Improvement" ke "Good." Perbaiki CLS berikutnya (biasanya masalah dimensi gambar atau penempatan iklan), lalu tangani INP dengan mengaudit eksekusi JavaScript.