Cara Optimasi Core Web Vitals di 2026: LCP, CLS, INP yang Baik untuk SEO

Optimasi Core Web Vitals: Performa = Ranking

Sejak Google menjadikan Core Web Vitals sebagai ranking factor resmi, website yang lambat bukan hanya frustrasi user — tapi juga kehilangan traffic organic. Di 2026, standar sudah naik dan ekspektasi user makin tinggi.

Tiga Metrik Utama

Cara Ukur

# Lighthouse via Chrome DevTools
1. Buka Chrome DevTools (F12)
2. Tab Lighthouse
3. Pilih "Performance"
4. Generate Report

# PageSpeed Insights (pakai data real user)
https://pagespeed.web.dev/

# WebPageTest (lebih detail)
https://www.webpagetest.org/

Optimasi LCP (Largest Contentful Paint)

LCP biasanya adalah hero image atau heading besar. Cara memperbaiki:

1. Preload critical resources

<!-- Di Next.js, pakai priority pada gambar utama -->
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority  // Ini penting!
/>

2. Optimasi gambar

// JANGAN
<img src="/hero.jpg" />

// HARUS
import Image from "next/image"
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  quality={85}         // Default 75 kadang terlalu rendah
  placeholder="blur"   // Blur placeholder saat loading
  blurDataURL="..."    // Base64 preview
  priority             // Untuk above-the-fold images
/>

3. Hosting di CDN Gambar dari CDN (seperti Vercel Image Optimization) bisa 2-3x lebih cepat dari server biasa.

Optimasi CLS (Cumulative Layout Shift)

CLS terjadi ketika elemen halaman berpindah saat loading. Penyebab paling umum:

// PENYEBAB: Gambar tanpa dimensi
<img src="/product.jpg" /> // Layout shift!

// SOLUSI: Selalu tentukan dimensi
<Image src="/product.jpg" width={400} height={300} alt="..." />

// PENYEBAB: Font loading yang tidak smooth
// SOLUSI: Font display swap
@font-face {
  font-family: "Inter";
  font-display: swap; // Tampilkan fallback font dulu
}

// PENYEBAB: Skeleton loader yang beda ukuran dengan konten asli
// SOLUSI: Pastikan skeleton loader sama persis ukurannya

Ad dan embed yang menyebabkan shift:

/* Reserve space untuk ad sebelum load */
.ad-container {
  min-height: 250px; /* Ukuran ad yang diharapkan */
  width: 300px;
}

Optimasi INP (Interaction to Next Paint)

INP menggantikan FID di 2024. Cara meningkatkannya:

1. Hindari long tasks di main thread

// BURUK: Kalkulasi berat di event handler
button.addEventListener("click", () => {
  const result = heavyCalculation(bigData) // Blok UI!
  displayResult(result)
})

// BAIK: Pindah ke Web Worker atau pecah jadi chunks
button.addEventListener("click", async () => {
  const result = await runInWebWorker(heavyCalculation, bigData)
  displayResult(result)
})

// Atau pakai scheduler API
button.addEventListener("click", async () => {
  displayLoadingState()
  
  await new Promise(resolve => setTimeout(resolve, 0)) // Yield to browser
  
  const result = heavyCalculation(bigData)
  displayResult(result)
})

2. Optimasi re-renders di React

// Pakai React Compiler (Next.js 16) untuk auto-optimasi
// Atau manual dengan useMemo/useCallback di area kritis

const expensiveValue = useMemo(
  () => computeExpensiveValue(data),
  [data]
)

Script Loading yang Benar

// next/script priorities
import Script from "next/script"

// beforeInteractive: Butuh sebelum halaman interactive (jarang)
// afterInteractive: Default, setelah halaman interactive
// lazyOnload: Setelah semua resource lain loaded
// worker: Di Web Worker (eksperimental)

<Script
  src="https://analytics.example.com/script.js"
  strategy="lazyOnload"  // Jangan block render!
/>

Checklist Optimasi

• Semua gambar above-the-fold pakai priority
• Semua <img> diganti dengan <Image> Next.js
• Font pakai font-display: swap
• Tidak ada script sync yang block render
• Skeleton loaders ukurannya sama dengan konten
• Third-party scripts pakai lazyOnload
• Tidak ada large layout shifts saat scroll

Target Skor yang Baik

LCP: < 2.5 detik    (hijau di PageSpeed)
CLS: < 0.1          (hijau di PageSpeed)
INP: < 200ms        (hijau di PageSpeed)
TTFB: < 800ms       (Time to First Byte)
FCP: < 1.8 detik    (First Contentful Paint)

Di Digital Uptime, setiap website yang kami deliver wajib lulus audit PageSpeed dengan skor minimal 90. Mau kami audit dan optimasi website Anda? Konsultasi sekarang.