Tahun 2024 INP gantiin FID. Tahun 2025 Google mulai eksperimen Engagement Metrics. Sekarang 2026, ada lagi tambahan yang harus lo perhatiin. Spoiler: site lo mungkin udah underperform.
Core Web Vitals (CWV) jadi salah satu ranking factor sejak 2021. Setiap tahun ada update, dan banyak praktisi SEO Indonesia ketinggalan info terbaru.
Di artikel ini gue update lo tentang state of CWV di 2026, plus optimization tactics yang work di kondisi sekarang.
Recap: Tiga Metric Utama
1. LCP (Largest Contentful Paint)
Berapa lama element terbesar di-render. Target: under 2.5 detik.
Yang biasanya jadi LCP:
- Hero image
- Heading utama
- Video poster
2. INP (Interaction to Next Paint) — REPLACED FID
Ini metric baru yang gantiin FID di Maret 2024. Mengukur seberapa responsive site lo terhadap user interaction.
Target: under 200ms.
Bedanya dari FID: INP measure SEMUA interaction selama session, bukan cuma yang pertama. Lebih akurat representasi user experience.
3. CLS (Cumulative Layout Shift)
Seberapa banyak layout shift yang terjadi tanpa user input. Target: under 0.1.
Penyebab CLS umum:
- Image tanpa width/height attribute
- Ads yang inject mid-content
- Web fonts yang shift saat load
- Dynamic content tanpa reserved space
Yang Baru di 2026
1. Engagement Reliability (Eksperimental)
Google lagi eksperimen metric baru yang fokus ke "engagement reliability" — basically: seberapa konsisten site lo bisa kasih experience yang predictable.
Faktor yang dimeasure:
- Crash rate
- JavaScript errors
- Failed network requests
Belum jadi ranking factor official, tapi worth monitor karena bisa officially launch akhir 2026.
2. AI Generation Performance
Untuk site yang heavy pakai AI features (chatbot, recommendation engine), Google mulai ngitung performance dari AI inference.
Belum dimasukkan ke CWV, tapi monitor di-recommend.
3. Bundle Size Impact
Ini yang paling impact: Google sekarang lebih agresif penalize site dengan JavaScript bundle size berlebihan, terutama di mobile.
Threshold yang bermasalah:
- JS bundle > 500KB (compressed): warning
- JS bundle > 1MB: significant ranking impact
2026 ini adalah tahun di mana "framework abuse" mulai berkurang. Site yang ringan menang.
Cara Optimasi LCP
1. Image Optimization (Quick Win)
- Pakai format modern: WebP atau AVIF
- Implement lazy loading buat image below-the-fold
- Preload hero image dengan
<link rel="preload"> - Pakai CDN dengan image transformation (Cloudflare Images, ImageKit)
2. Critical CSS
Inline CSS yang dibutuhin untuk above-the-fold, defer sisanya:
<style>
/* Critical CSS untuk above-the-fold */
.hero { ... }
</style>
<link rel="preload" href="/styles.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
3. Server Response Time
- Pakai CDN (Cloudflare gratis udah cukup)
- Cache static assets aggressive
- Optimize database queries (kalau dynamic content)
- Pertimbangkan edge functions untuk personalization
Cara Optimasi INP
Ini area yang paling banyak fail. Banyak site yang LCP-nya bagus tapi INP-nya jelek.
1. Reduce JavaScript Execution
- Code splitting per route
- Lazy load components yang nggak critical
- Replace heavy libraries dengan vanilla JS atau lighter alternative
2. Web Workers untuk Heavy Tasks
Kalau ada computation berat, pindahkan ke Web Worker biar nggak block main thread:
// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (e) => {
// Update UI dengan hasil
};
// worker.js
self.onmessage = (e) => {
const result = expensiveOperation(e.data);
self.postMessage(result);
};
3. Debounce User Inputs
Untuk search box, filter, atau apapun yang trigger frequent updates, pakai debouncing:
function debounce(fn, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), wait);
};
}
const debouncedSearch = debounce(handleSearch, 300);
Cara Optimasi CLS
1. Always Set Dimensions
Image, video, iframe — semua harus punya width/height:
<img src="hero.webp" width="1200" height="600" alt="...">
2. Reserve Space untuk Dynamic Content
Untuk ads, embed, atau content yang load asynchronously, reserve space:
.ad-container {
min-height: 250px;
/* Reserve space biar nggak ada shift pas ad load */
}
3. Font Loading Strategy
Pakai font-display: swap dengan size-adjust untuk minimize FOUT shift:
@font-face {
font-family: 'Custom Font';
src: url('font.woff2') format('woff2');
font-display: swap;
size-adjust: 105%;
}
Tools yang Wajib
- PageSpeed Insights — official Google tool, paling akurat
- WebPageTest.org — detail breakdown waterfall
- GSC Core Web Vitals Report — data real users dari site lo
- Chrome DevTools Lighthouse — local debugging
- Calibre / SpeedCurve — continuous monitoring (paid)
Real-World Targets untuk Indonesia
Karena banyak user Indonesia masih di 4G dengan koneksi unstable, target yang realistis:
- LCP: under 2.5s (target Google), tapi try aim untuk under 2s
- INP: under 200ms (target Google), aim untuk under 150ms
- CLS: under 0.1 (target Google), aim untuk under 0.05
Kalau lo bisa hit semua ini di mobile + 3G simulation, ranking lo bakal naturally improve.
Kesimpulan
Core Web Vitals di 2026 makin demanding. Yang penting:
- Master 3 metric utama (LCP, INP, CLS)
- Monitor metric experimental (Engagement Reliability)
- Diet JavaScript bundle
- Test di real device + slow connection
- Continuous monitoring, bukan one-time fix
Performance bukan one-time project — ini ongoing discipline. Tapi reward-nya: ranking yang lebih stabil dan user experience yang lebih baik.