seokita.id

SEO teknis, riset keyword, on-page optimization untuk pasar Indonesia

Core Web Vitals 2025: Perbaiki LCP & CLS Hari Ini

by Bayu Wicaksono
Core Web Vitals 2025: Perbaiki LCP & CLS Hari Ini

Kesalahan yang Paling Sering Bikin Halaman Anda Kalah di SERP

Banyak pemilik bisnis sudah menulis konten panjang, riset keyword, dan bangun backlink — tapi rankingnya stagnan. Salah satu penyebab yang sering terlewat: Core Web Vitals yang buruk.

Google secara resmi menggunakan sinyal pengalaman halaman (page experience signals) sebagai faktor ranking sejak 2021, dan bobotnya makin signifikan di 2024–2025. Artinya, dua halaman dengan kualitas konten setara akan dimenangkan oleh halaman yang lebih cepat dan lebih stabil secara visual.

Di pasar Indonesia, masalah ini lebih parah karena dua alasan:

  1. Infrastruktur hosting lokal yang bervariasi — banyak bisnis masih pakai shared hosting murah dengan server response time di atas 600ms.
  2. Pengguna mobile-first — lebih dari 70% traffic organik Indonesia datang dari perangkat mobile dengan koneksi 4G yang tidak selalu stabil.

Artikel ini fokus pada dua metrik yang paling sering jadi biang masalah: LCP (Largest Contentful Paint) dan CLS (Cumulative Layout Shift).

Apa Itu LCP dan CLS, dan Kenapa Bisnis Anda Harus Peduli

LCP mengukur seberapa cepat elemen terbesar di layar (biasanya gambar hero atau heading utama) muncul setelah pengguna membuka halaman. Target Google: di bawah 2,5 detik.

CLS mengukur seberapa banyak elemen halaman bergeser saat loading. Pernah mau klik tombol tapi tiba-tiba tombolnya pindah karena iklan atau gambar baru muncul? Itu CLS tinggi. Target Google: di bawah 0,1.

Dampak bisnis langsung:

  • Studi dari Google/Deloitte menunjukkan perbaikan 0,1 detik pada load time meningkatkan konversi hingga 8% di situs retail.
  • CLS tinggi meningkatkan bounce rate karena pengguna frustrasi dengan tampilan yang "melompat-lompat".
  • Halaman dengan Core Web Vitals buruk secara konsisten kalah di fitur Page Experience yang ditampilkan di Google Search Console.

Cara Audit Core Web Vitals Situs Anda (Langkah Pertama)

Sebelum perbaiki apapun, Anda harus tahu kondisi aktual situs. Jangan menebak.

Tools yang dipakai:

  • Google Search Console → Core Web Vitals Report — data field (real user), paling akurat untuk keputusan SEO.
  • PageSpeed Insights (pagespeed.web.dev) — gabungan data lab dan field, gratis.
  • WebPageTest.org — untuk analisis waterfall detail, lihat resource mana yang paling lambat.
  • GTmetrix — alternatif dengan tampilan lebih visual, cocok untuk presentasi ke klien atau tim.

Cara baca data di Search Console:

Buka Search Console → pilih properti Anda → klik "Core Web Vitals" di sidebar kiri. Anda akan lihat dua laporan: Desktop dan Mobile. Fokus ke Mobile dulu karena mayoritas traffic Indonesia dari sana.

Halaman dikategorikan menjadi tiga:

  • ✅ Good (hijau)
  • ⚠️ Needs Improvement (kuning)
  • ❌ Poor (merah)

Prioritaskan halaman dengan status Poor yang punya traffic organik tertinggi. Lihat di Google Analytics atau GSC Performance report untuk tahu halaman mana yang paling banyak diklik dari search.

Checklist Perbaikan LCP: 8 Langkah Teknis

LCP buruk hampir selalu disebabkan oleh salah satu dari empat hal: server lambat, resource blocking, gambar tidak dioptimasi, atau rendering JavaScript yang berat.

✅ Checklist LCP

1. Audit server response time (TTFB) Target TTFB di bawah 200ms. Cek di PageSpeed Insights bagian "Reduce initial server response time". Kalau TTFB Anda di atas 600ms, pertimbangkan:

  • Pindah ke hosting dengan server di Singapura atau Jakarta (lebih dekat ke pengguna Indonesia).
  • Aktifkan object caching (Redis atau Memcached) jika pakai WordPress.
  • Gunakan CDN seperti Cloudflare (gratis) untuk cache konten statis.

2. Preload elemen LCP Tambahkan tag <link rel="preload"> untuk gambar hero atau font utama di <head> halaman. Ini memberi tahu browser untuk prioritaskan resource tersebut.

Contoh kode:

<link rel="preload" as="image" href="/images/hero-banner.webp">

Jika pakai WordPress, plugin Perfmatters atau WP Rocket bisa otomatisasi ini tanpa coding.

3. Konversi gambar ke format WebP atau AVIF Gambar JPEG/PNG di halaman hero adalah penyebab LCP lambat nomor satu. WebP rata-rata 25–35% lebih kecil dari JPEG dengan kualitas visual yang sama.

Cara cepat: upload gambar ke Squoosh.app, pilih format WebP, turunkan kualitas ke 80%, download dan replace gambar lama.

4. Tambahkan atribut fetchpriority="high" pada gambar LCP Ini sinyal eksplisit ke browser bahwa gambar ini harus diload duluan.

<img src="hero.webp" fetchpriority="high" alt="...">

5. Hapus atau defer render-blocking CSS/JS Buka PageSpeed Insights, lihat bagian "Eliminate render-blocking resources". Setiap file CSS atau JS yang diload di <head> tanpa atribut defer atau async akan menunda rendering halaman.

Untuk WordPress: aktifkan "Delay JavaScript" di WP Rocket atau Perfmatters.

6. Aktifkan compression (Gzip atau Brotli) Cek di GTmetrix tab "Structure" — kalau ada warning "Enable text compression", berarti server Anda belum mengompresi file HTML/CSS/JS. Brotli lebih efisien dari Gzip. Aktifkan via cPanel hosting atau konfigurasi Nginx/Apache.

7. Gunakan lazy loading HANYA untuk gambar di bawah fold Kesalahan umum: developer menambahkan loading="lazy" ke semua gambar termasuk gambar hero. Ini justru memperlambat LCP karena browser menunda load gambar yang seharusnya prioritas.

Aturan: gambar di atas fold (visible tanpa scroll) → jangan lazy load. Gambar di bawah fold → pakai loading="lazy".

8. Minifikasi CSS kritis dan inline ke <head> CSS kritis adalah style yang dibutuhkan untuk render tampilan awal halaman. Dengan inline CSS kritis di <head>, browser tidak perlu request file CSS eksternal sebelum bisa render konten.

Tool: Critical (npm package) atau fitur "Critical CSS" di WP Rocket.

Checklist Perbaikan CLS: 5 Langkah yang Sering Diabaikan

CLS tinggi hampir selalu bisa diperbaiki dengan disiplin satu aturan: reservasikan ruang untuk setiap elemen sebelum diload.

✅ Checklist CLS

1. Selalu tentukan width dan height pada tag <img> Ini penyebab CLS nomor satu. Kalau browser tidak tahu ukuran gambar sebelum diload, ia tidak bisa reservasi ruang — dan saat gambar muncul, konten di bawahnya bergeser.

<img src="produk.webp" width="800" height="600" alt="...">

Untuk WordPress, plugin Smush atau update ke WordPress 5.5+ sudah otomatis menambahkan dimensi gambar.

2. Hindari insert konten dinamis di atas konten yang sudah ada Iklan, banner promo, atau widget chat yang muncul belakangan dan mendorong konten ke bawah = CLS tinggi. Solusi: reservasi ruang tetap (fixed height container) untuk elemen tersebut meski belum diload.

3. Preload font dan gunakan font-display: swap Font web yang lambat menyebabkan teks berubah ukuran/posisi saat font akhirnya diload (FOUT — Flash of Unstyled Text). Tambahkan di CSS:

@font-face {
  font-family: 'NamaFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

4. Pastikan iklan (Google AdSense/ads) punya ukuran fixed Iklan yang load belakangan tanpa container berukuran tetap adalah sumber CLS yang sangat umum di situs publisher Indonesia. Bungkus ad unit dalam <div> dengan min-height yang sesuai ukuran ad.

5. Cek elemen animasi dan transisi CSS Animasi yang mengubah properti top, left, margin, atau padding akan trigger layout shift. Ganti dengan animasi menggunakan transform dan opacity — keduanya diproses di GPU dan tidak menyebabkan CLS.

Tools dan Workflow Monitoring Berkelanjutan

Perbaikan sekali saja tidak cukup. Setiap update plugin, tema, atau tambahan widget bisa merusak Core Web Vitals yang sudah baik.

Setup monitoring mingguan:

  1. Google Search Console → Core Web Vitals → aktifkan email notifikasi untuk status "Poor" baru.
  2. PageSpeed Insights API — kalau Anda punya developer, integrasikan ke pipeline CI/CD agar setiap deploy otomatis dicek.
  3. Ahrefs Site Audit atau Screaming Frog — keduanya bisa scan Core Web Vitals untuk seluruh situs, bukan hanya halaman per halaman.

Studi kasus singkat: Salah satu klien e-commerce di niche fashion lokal punya LCP rata-rata 4,8 detik di mobile. Setelah kami:

  • Pindah hosting ke server Singapura
  • Konversi semua gambar produk ke WebP
  • Aktifkan Cloudflare dengan cache agresif
  • Preload gambar hero

LCP turun ke 2,1 detik dalam 3 minggu. Organic traffic naik 22% dalam 60 hari berikutnya — sebagian karena ranking naik, sebagian karena bounce rate turun dari 68% ke 51%.

Kesalahan Umum yang Harus Dihindari

⚠️ Kesalahan #1: Mengoptimasi berdasarkan data lab (PageSpeed Insights saja) tanpa cek data field di Search Console. Data lab pakai koneksi simulasi, bukan kondisi nyata pengguna Indonesia.

⚠️ Kesalahan #2: Install banyak plugin caching sekaligus (misalnya WP Rocket + W3 Total Cache + Autoptimize). Konflik antar plugin justru memperlambat situs.

⚠️ Kesalahan #3: Fokus hanya ke homepage. Google menilai Core Web Vitals per-URL. Halaman produk atau artikel yang dapat traffic organik harus diaudit satu per satu.

⚠️ Kesalahan #4: Menganggap Core Web Vitals sudah selesai setelah skor PageSpeed hijau. Skor lab bisa hijau tapi field data tetap merah kalau server Anda lambat saat traffic tinggi.

Prioritas Pertama yang Harus Dikerjakan Minggu Ini

Kalau Anda hanya punya waktu untuk satu hal, lakukan ini:

Buka Google Search Console → Core Web Vitals → Mobile → filter halaman dengan status "Poor" → urutkan berdasarkan traffic organik tertinggi → ambil URL nomor satu → masukkan ke PageSpeed Insights → identifikasi penyebab LCP tertinggi → perbaiki hanya itu dulu.

Jangan coba perbaiki semua sekaligus. Satu halaman, satu masalah, satu minggu. Setelah Google merayapi ulang dan data field diperbarui (biasanya 28 hari), baru lanjut ke masalah berikutnya.

Core Web Vitals bukan faktor ranking terbesar, tapi ini salah satu yang paling bisa Anda kontrol langsung — tanpa harus menunggu backlink atau menunggu konten lama mendapat authority. Perbaiki teknikal dulu, baru strategi konten Anda akan bekerja lebih efektif.