Core Web Vitals: Quick Wins yang Paling Ngefek

Apa Sih Core Web Vitals Itu?

Jadi Core Web Vitals itu metrik yang dipake Google buat ngukur pengalaman user di website kamu. Ada tiga metrik utama:

• LCP (Largest Contentful Paint) seberapa cepat konten utama ke-load
• INP (Interaction to Next Paint) seberapa responsif website saat user klik atau ketik
• CLS (Cumulative Layout Shift) seberapa stabil layout halaman (nggak loncat loncat)

Kenapa penting? Karena Google pake metrik ini sebagai ranking factor. Website yang skornya jelek bakal susah naik di search result. Plus, user juga males nunggu website yang lambat.

Quick Win #1: Optimasi Gambar

Ini yang paling gede efeknya buat LCP. Kebanyakan website lambat gara gara gambar yang nggak dioptimasi.

Yang harus kamu lakuin:

• Pakai format WebP atau AVIF daripada PNG/JPG. Ukurannya bisa 50% lebih kecil dengan kualitas yang sama
• Tentuin width dan height di tag image biar browser tau ukurannya sebelum load (ini juga bantu CLS)
• Pakai lazy loading buat gambar yang ada di bawah fold. Nggak perlu load semua gambar sekaligus
• Kalau pakai Next.js, manfaatin komponen Image yang udah otomatis optimize

Contoh di Next.js:

import Image from "next/image";

<Image
  src="/hero.webp"
  alt="Hero banner"
  width={1200}
  height={600}
  priority // buat gambar above the fold
/>

Dengan cara ini aja LCP kamu bisa improve sampai 40% loh.

Quick Win #2: Font Loading Strategy

Font yang lambat ke-load bikin text invisible (FOIT) atau berubah tiba tiba (FOUT). Dua duanya bikin user experience jelek.

Solusinya:

• Pakai font-display: swap biar text tetep keliatan pake fallback font dulu
• Preload font yang kamu pake di above the fold
• Kalau bisa, pakai variable font satu file buat semua weight
• Self host font daripada load dari Google Fonts (lebih cepet, nggak perlu DNS lookup tambahan)

Di Next.js bisa pakai next/font:

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

Ini otomatis self host dan optimize font loading.

Quick Win #3: Caching yang Bener

Caching itu kayak nyimpen salinan file biar nggak perlu download ulang tiap kali user visit. Efeknya gede banget buat returning visitors.

Yang perlu di-set:

• Static assets (JS, CSS, gambar) kasih Cache Control immutable dengan max age panjang (1 tahun)
• HTML kasih cache pendek atau pakai stale while revalidate
• Manfaatin CDN biar file diserve dari server terdekat sama user
• Kalau pakai Next.js, ISR (Incremental Static Regeneration) bisa jadi game changer

Contoh header:

Cache-Control: public, max-age=31536000, immutable

Dengan caching yang bener, subsequent visit bisa load dalam hitungan milidetik.

Quick Win #4: Anti Layout Shift

CLS itu metrik yang sering diabaiin padahal efeknya ke user experience gede banget. Pernah nggak lagi mau klik sesuatu trus tiba tiba layout geser dan kamu malah klik yang lain? Nah itu CLS.

Cara ngatasinnya:

• Selalu kasih dimensi eksplisit ke gambar dan video
• Pakai aspect-ratio CSS buat elemen yang ukurannya dinamis
• Jangan masukin konten baru di atas konten yang udah ke-render (iklan, banner, dll)
• Font fallback yang ukurannya mirip sama web font kamu
• Hindari animasi yang trigger layout (pakai transform dan opacity aja)

Contoh CSS:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Quick Win #5: JavaScript yang Lean

JavaScript yang kebanyakan bikin INP jelek karena main thread sibuk parsing dan executing script.

Tips:

• Code splitting jangan load semua JS sekaligus. Cuma load yang dibutuhin halaman itu
• Tree shaking pastiin bundler nge-remove code yang nggak dipake
• Pakai dynamic import buat komponen yang nggak critical
• Kurangi third party script (analytics, chat widget, dll) yang nggak essential
• Defer script yang nggak urgent

Di Next.js:

import dynamic from "next/dynamic";
const HeavyChart = dynamic(() => import("./Chart"), {
  loading: () => <p>Loading chart...</p>,
});

Cara Ngecek Skor Kamu

Beberapa tools yang bisa kamu pake buat ngecek Core Web Vitals:

• PageSpeed Insights tools resmi dari Google, kasih skor plus saran improvement
• Chrome DevTools (Lighthouse) bisa diakses langsung dari browser
• Search Console tab Core Web Vitals nunjukin data real dari user yang visit
• web.dev/measure alternatif dari Google juga

Target skornya:

Metrik	Good	Needs Improvement	Poor
LCP	di bawah 2.5s	2.5s sampai 4s	di atas 4s
INP	di bawah 200ms	200ms sampai 500ms	di atas 500ms
CLS	di bawah 0.1	0.1 sampai 0.25	di atas 0.25

Kesimpulan

Core Web Vitals itu bukan cuma soal skor hijau di PageSpeed Insights. Ini soal kasih pengalaman terbaik buat user yang visit website kamu. Dan bonus nya, Google juga bakal lebih suka sama website kamu.

Mulai dari yang paling gede impact nya: optimasi gambar dan font. Trus lanjut ke caching dan JavaScript optimization. Nggak perlu sempurna dari awal, yang penting progressnya konsisten.

Kalau butuh bantuan optimasi Core Web Vitals buat website bisnis kamu, DaunsCode siap bantu. Kita udah berpengalaman bikin website yang skornya hijau semua dari awal.