Core Web Vitals 2026: Cara Fix LCP, INP, CLS untuk SEO

"Skor PageSpeed Insights saya 95/100, tapi kenapa ranking tidak naik?"

Karena Google tidak peduli dengan skor PageSpeed. Google peduli dengan Core Web Vitals (CWV).

Anda bisa punya skor 100/100 tapi CWV status "Failed" → Ranking tetap tidak optimal. Sebaliknya, skor 60/100 tapi CWV "Passed" → Ranking bisa bagus.

    </p>

Real-World Impact

Case Study (Tokopedia):
- Improve LCP dari 4.2s → 2.1s
- Conversion rate naik 12%
- Bounce rate turun 8%

Case Study (Shopee):
- Fix CLS dari 0.25 → 0.05
- Time on site naik 15%

Lab Data vs Field Data

Lab Data (PageSpeed Insights):
- Simulasi di server Google
- Koneksi cepat, device powerful
- Tidak mewakili user real

Field Data (Chrome User Experience Report):
- Data dari user real
- Ini yang Google pakai untuk ranking
- Lihat di Search Console > Core Web Vitals

Fokus ke Field Data, bukan Lab Data.

1. LCP (Largest Contentful Paint) Deep Dive

Apa itu LCP?
Waktu yang dibutuhkan untuk elemen terbesar di layar (biasanya hero image atau H1) muncul.

Target: < 2.5 detik

Apa yang dihitung sebagai LCP?
- Hero image
- Background image (CSS)
- Video thumbnail
- H1 text block (jika besar)

Common Culprits:
1. Hero image terlalu besar (5MB+ uncompressed)
2. Font loading delay (FOIT - Flash of Invisible Text)
3. Server response lambat (TTFB > 0.8s)

How to Fix LCP:

Fix #1: Optimize Hero Image

<!-- ❌ BAD --> <img src="hero.jpg" /> <!-- ✅ GOOD --> <img src="hero.webp" width="1920" height="1080" fetchpriority="high" decoding="async" />

• Convert ke WebP (70% lebih kecil)
• Set fetchpriority="high" (prioritaskan download)
• Jangan lazy load hero image

Fix #2: Preload Critical Resources

<link rel="preload" as="image" href="hero.webp" /> <link rel="preload" as="font" href="font.woff2" crossorigin />

Fix #3: Use CDN

Serve gambar dari CDN (Cloudflare, BunnyCDN) untuk reduce TTFB.

Apa itu INP?
Waktu dari user klik button sampai website merespon (visual feedback).

Target: < 200 ms

INP menggantikan FID (First Input Delay) sejak Maret 2024.

Common Culprits:
1. JavaScript execution berat (parsing 500KB+ JS)
2. Long tasks (task > 50ms block main thread)
3. Third-party scripts (chat widget, analytics)

How to Fix INP:

Fix #1: Delay Non-Critical JavaScript

// ❌ BAD: Load chat widget immediately <script src="chat-widget.js"></script> // ✅ GOOD: Load after user interaction window.addEventListener('scroll', () => { const script = document.createElement('script'); script.src = 'chat-widget.js'; document.body.appendChild(script); }, { once: true });

Fix #2: Code Splitting (React/Next.js)

// ❌ BAD: Import semua di awal import HeavyComponent from './HeavyComponent'; // ✅ GOOD: Dynamic import const HeavyComponent = dynamic(() => import('./HeavyComponent'));

Fix #3: Remove Unused JavaScript

Gunakan Chrome DevTools > Coverage untuk lihat JS yang tidak terpakai.

Apa itu CLS?
Seberapa banyak elemen bergeser saat halaman loading (annoying banget).

Target: < 0.1

Common Culprits:
1. Image tanpa dimensi (width/height)
2. Ads yang muncul tiba-tiba
3. Font loading (FOIT/FOUT)
4. Dynamic content injection

How to Fix CLS:

Fix #1: Set Image Dimensions

<!-- ❌ BAD: No dimensions --> <img src="product.jpg" /> <!-- ✅ GOOD: Explicit dimensions --> <img src="product.jpg" width="800" height="600" />

Browser akan "reserve space" untuk gambar → Tidak ada layout shift.

Fix #2: Reserve Space for Ads

.ad-container { min-height: 250px; /* Reserve space */ }

Fix #3: Font Loading Strategy

@font-face { font-family: 'CustomFont'; src: url('font.woff2'); font-display: swap; /* Show fallback font immediately */ } ### Platform-Specific Optimization