seokita.id

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

Core Web Vitals Optimization Checklist untuk Website Bisnis

by Bayu Wicaksono
Core Web Vitals Optimization Checklist untuk Website Bisnis

Kenapa Core Web Vitals Sering Diabaikan Padahal Ini Ranking Factor Nyata

Banyak pemilik bisnis fokus ke keyword dan backlink, tapi lupa satu hal yang langsung dinilai Google saat crawling: performa halaman. Core Web Vitals bukan sekadar metrik teknis — sejak Google Page Experience update bergulir penuh, skor ini memengaruhi peringkat secara langsung, terutama di hasil pencarian mobile.

Yang lebih mengkhawatirkan: Google Search Console bisa menampilkan status "Poor" di halaman produk atau landing page Anda, dan Anda tidak tahu sampai traffic mulai turun. Saya pernah audit website klien di niche otomotif — skornya merah semua di mobile, padahal konten dan backlink-nya sudah kuat. Setelah perbaikan Core Web Vitals selama tiga minggu, CTR naik 18% dan posisi rata-rata naik 2,3 poin.

Artikel ini adalah core web vitals optimization checklist yang bisa Anda eksekusi sendiri, lengkap dengan tools gratis dan urutan prioritas yang masuk akal.

Apa Itu Core Web Vitals dan Mana yang Paling Kritis?

Google mengukur tiga sinyal utama:

  • LCP (Largest Contentful Paint): Seberapa cepat elemen terbesar di halaman (biasanya hero image atau heading besar) muncul di layar. Target: ≤ 2,5 detik.
  • INP (Interaction to Next Paint): Seberapa responsif halaman saat pengguna klik, tap, atau ketik. Ini menggantikan FID sejak Maret 2024. Target: ≤ 200ms.
  • CLS (Cumulative Layout Shift): Seberapa stabil tata letak halaman — apakah elemen loncat-loncat saat dimuat. Target: ≤ 0,1.

Dari pengalaman audit puluhan website Indonesia, LCP adalah masalah paling umum — mayoritas karena gambar tidak dioptimasi dan server response time lambat. CLS sering muncul di website yang pakai Google Fonts atau iklan tanpa dimensi tetap.

Cara Cek Skor Core Web Vitals Anda Sekarang

Sebelum mulai perbaikan, Anda perlu tahu kondisi aktual. Gunakan tools ini:

  1. Google Search Console → Core Web Vitals report — Ini data field data (real user), bukan lab. Paling relevan untuk SEO.
  2. PageSpeed Insights (pagespeed.web.dev) — Masukkan URL spesifik, lihat skor mobile dan desktop terpisah. Prioritaskan mobile.
  3. Chrome DevTools → Lighthouse tab — Untuk debugging lokal sebelum deploy perubahan.
  4. CrUX Dashboard (lookerstudio.google.com) — Kalau website Anda sudah punya cukup traffic, ini bisa tracking tren historis.

Kesalahan umum: Banyak yang cek PageSpeed Insights sekali, dapat skor 90+, lalu merasa aman. Padahal skor lab ≠ skor field. Yang dihitung Google untuk ranking adalah field data dari pengguna nyata — termasuk pengguna dengan koneksi 4G lambat di luar kota.

Core Web Vitals Optimization Checklist: LCP

LCP adalah prioritas nomor satu karena paling besar dampaknya ke persepsi kecepatan dan ranking.

Checklist LCP:

  • Identifikasi elemen LCP — Buka PageSpeed Insights, scroll ke bagian "Diagnostics", lihat elemen mana yang jadi LCP (biasanya hero image).
  • Kompres semua gambar ke format WebP — Gunakan Squoosh (squoosh.app) atau plugin ShortPixel kalau pakai WordPress. Target ukuran file hero image: di bawah 150KB.
  • Tambahkan fetchpriority="high" pada hero image — Ini memberitahu browser untuk load gambar ini lebih dulu. Contoh: <img src="hero.webp" fetchpriority="high" alt="...">
  • Aktifkan lazy loading hanya untuk gambar di bawah fold — Jangan pasang loading="lazy" di hero image. Ini kesalahan yang sangat sering terjadi.
  • Pindah ke hosting dengan TTFB ≤ 200ms — Kalau server response time Anda lambat, semua optimasi lain percuma. Cek TTFB di PageSpeed Insights bagian "Server response time". Hosting lokal Indonesia yang punya data center Jakarta biasanya lebih cepat untuk pengguna Indonesia.
  • Aktifkan CDN — Cloudflare plan gratis sudah cukup untuk sebagian besar website bisnis.
  • Preload font jika font adalah elemen LCP — Tambahkan <link rel="preload" as="font"> di <head>.

Core Web Vitals Optimization Checklist: INP

INP adalah metrik paling baru dan sering paling membingungkan. Intinya: kalau pengguna klik tombol atau isi form dan halaman terasa "macet" sebelum merespons, INP Anda buruk.

Checklist INP:

  • Audit JavaScript yang berjalan di main thread — Buka Chrome DevTools → Performance tab → rekam interaksi. Cari "Long Tasks" (blok merah di atas 50ms).
  • Defer atau async semua script non-kritis — Tambahkan defer atau async pada tag <script> yang tidak perlu dijalankan saat halaman pertama dimuat.
  • Hapus atau ganti plugin berat di WordPress — Plugin page builder seperti Elementor atau Divi sering inject JavaScript besar. Audit dengan Query Monitor plugin.
  • Minifikasi JavaScript dan CSS — Gunakan plugin seperti WP Rocket, LiteSpeed Cache, atau NitroPack. Kalau non-WordPress, gunakan build tools seperti Vite atau Webpack.
  • Kurangi jumlah third-party script — Setiap pixel tracking, live chat widget, dan pop-up tool menambah beban main thread. Audit di PageSpeed Insights bagian "Reduce the impact of third-party code".
  • Gunakan content-visibility: auto untuk konten panjang — Ini membuat browser skip rendering elemen yang belum terlihat, mengurangi beban saat interaksi.

Kesalahan umum: Memasang terlalu banyak plugin WordPress sekaligus — analytics, heatmap, chatbot, pop-up, dan retargeting pixel — tanpa sadar bahwa semuanya berjalan bersamaan dan memblokir interaktivitas halaman.

Core Web Vitals Optimization Checklist: CLS

CLS yang buruk membuat pengguna frustrasi — tombol yang loncat saat mau diklik, teks yang bergeser tiba-tiba. Ini juga yang paling mudah diperbaiki.

Checklist CLS:

  • Selalu tentukan dimensi width dan height pada semua gambar — Ini mencegah browser mengubah tata letak saat gambar selesai dimuat. Contoh: <img src="foto.webp" width="800" height="450" alt="...">
  • Tentukan dimensi untuk elemen iklan dan embed — Google AdSense, iframe YouTube, dan widget media sosial harus punya container dengan ukuran tetap.
  • Preload Google Fonts atau ganti ke system fonts — Google Fonts yang dimuat terlambat menyebabkan FOUT (Flash of Unstyled Text) dan CLS. Solusi cepat: tambahkan font-display: swap di CSS.
  • Hindari menyisipkan konten di atas konten yang sudah dimuat — Banner cookie, notifikasi, atau iklan yang muncul di atas fold setelah halaman dimuat adalah penyebab CLS terbesar.
  • Cek animasi CSS — Animasi yang mengubah properti top, left, margin, atau padding menyebabkan layout shift. Ganti dengan transform dan opacity yang tidak memicu reflow.
  • Audit dengan Layout Shift Regions di Chrome DevTools — Buka DevTools → Rendering → centang "Layout Shift Regions" untuk visualisasi elemen mana yang bergeser.

Tools dan Workflow yang Saya Rekomendasikan

Berikut workflow audit yang saya gunakan untuk klien:

Langkah 1 — Baseline data: Buka Google Search Console → Core Web Vitals → lihat halaman mana yang statusnya "Poor" atau "Needs Improvement". Ekspor daftarnya.

Langkah 2 — Analisis per halaman: Masukkan URL satu per satu ke PageSpeed Insights. Fokus ke tab Mobile. Screenshot hasilnya sebagai baseline.

Langkah 3 — Prioritas perbaikan: Urutan prioritas: LCP dulu (paling besar dampaknya), lalu CLS (paling mudah diperbaiki), terakhir INP (paling teknis).

Langkah 4 — Implementasi dan tunggu validasi: Setelah perbaikan, Google butuh waktu 28 hari untuk mengumpulkan field data baru. Jangan panik kalau skor di Search Console belum berubah dalam seminggu.

Langkah 5 — Monitor rutin: Set reminder bulanan untuk cek laporan Core Web Vitals di Search Console. Perubahan theme, plugin baru, atau iklan baru bisa merusak skor yang sudah bagus.

Tools gratis yang saya gunakan:

  • PageSpeed Insights — audit per URL
  • Google Search Console — field data dan validasi
  • Squoosh — kompresi gambar
  • GTmetrix — waterfall chart untuk debug
  • WebPageTest — advanced testing dengan lokasi server Jakarta

Studi Kasus Singkat: Website E-commerce Lokal

Klien saya di niche fashion lokal punya website WooCommerce dengan LCP rata-rata 6,2 detik di mobile. Masalah utama: hero image berukuran 1,2MB dalam format JPEG, tidak ada CDN, dan tiga plugin live chat aktif bersamaan.

Yang kami lakukan dalam dua minggu:

  1. Kompres semua gambar produk ke WebP, hero image turun dari 1,2MB ke 89KB.
  2. Aktifkan Cloudflare CDN gratis.
  3. Nonaktifkan dua dari tiga plugin live chat, sisakan satu dengan script yang di-defer.
  4. Tambahkan fetchpriority="high" di hero image.
  5. Tentukan dimensi semua gambar produk di template.

Hasilnya setelah 28 hari: LCP turun ke 2,1 detik, CLS dari 0,28 ke 0,04. Posisi rata-rata untuk keyword produk utama naik dari halaman 2 ke posisi 6–8 di halaman 1.

Ini bukan kebetulan — Google sendiri menyatakan Core Web Vitals menjadi tiebreaker ketika dua halaman punya konten dan otoritas yang setara.

Prioritas Pertama yang Harus Anda Kerjakan Hari Ini

Kalau Anda hanya punya waktu satu jam minggu ini, lakukan ini:

Buka PageSpeed Insights → masukkan URL halaman utama bisnis Anda → lihat skor LCP di tab Mobile → identifikasi elemen LCP-nya.

Kalau elemen LCP adalah gambar dan ukurannya di atas 200KB, kompres ke WebP sekarang menggunakan Squoosh (gratis, tanpa install). Upload ulang, tambahkan fetchpriority="high", dan hilangkan loading="lazy" jika ada di gambar tersebut.

Satu langkah ini saja sudah bisa memangkas LCP Anda 30–50% — dan itu sudah cukup untuk mulai melihat perbedaan di field data 28 hari ke depan.

Core web vitals optimization checklist ini bukan proyek sekali jalan. Jadikan bagian dari rutinitas SEO bulanan Anda, dan skor yang baik akan menjadi keunggulan kompetitif yang sulit disaingi kompetitor yang masih fokus ke taktik lama.