Core Web Vitals Optimasi

3 metrik dan target benchmark

Google mendefinisikan 3 tier rating untuk setiap metrik: Good, Needs Improvement, Poor. Target minimum adalah "Good" di 75% user experience (p75) untuk field data selama 28 hari. Ini penting: Google rank berdasarkan distribusi user experience, bukan average.

LCP — Largest Contentful Paint

Mengukur waktu dari navigasi start sampai elemen konten terbesar ter-render di viewport. Biasanya adalah hero image, heading besar, atau video. LCP buruk = user menunggu lama melihat konten utama.

Good: di bawah 2.5 detik
Needs Improvement: 2.5 – 4.0 detik
Poor: di atas 4.0 detik

CLS — Cumulative Layout Shift

Mengukur total layout shift yang unexpected sepanjang page lifetime. Skor = impact fraction × distance fraction. Layout shift terjadi saat elemen bergerak setelah render (image load tanpa dimension, ad injection, font swap). CLS buruk = user frustasi karena elemen berpindah saat mau klik.

Good: di bawah 0.1
Needs Improvement: 0.1 – 0.25
Poor: di atas 0.25

INP — Interaction to Next Paint

Mengukur responsiveness page terhadap user interaction. Ukur delay dari user action (click, tap, key press) ke next paint. INP melaporkan worst interaction selama sesi. Menggantikan FID sejak Maret 2024.

Good: di bawah 200ms
Needs Improvement: 200 – 500ms
Poor: di atas 500ms

Visualisasi: target benchmark

Tool testing

Ada dua jenis data: field data (real user monitoring dari Chrome User Experience Report) dan lab data (synthetic test dalam environment controlled). Google pakai field data untuk ranking. Lab data berguna untuk debugging dan testing sebelum deploy.

PageSpeed Insights (PSI)

Tool gratis dari Google di pagespeed.web.dev. Memberikan both field data (kalau traffic cukup) dan lab data dari Lighthouse. Best untuk audit awal dan quick check setelah deploy.

Chrome DevTools Lighthouse

Built-in di Chrome browser (F12 → Lighthouse tab). Menjalankan audit lab data dengan emulasi device dan throttling network. Best untuk deep debugging karena menunjukkan opportunity dan diagnostic detail per metrik.

Chrome User Experience Report (CrUX)

Dataset public Google yang agregat pengalaman real user Chrome 28 hari terakhir. Bisa diakses via PSI atau Search Console Core Web Vitals report. Ini adalah ground truth yang Google pakai untuk ranking.

WebPageTest

Tool third-party di webpagetest.org. Testing dari berbagai lokasi global dengan device dan network condition custom. Best untuk simulasi pengalaman user dari lokasi geografis berbeda (penting untuk brand Indonesia yang target audience di beberapa kota).

Fix umum per metrik

Fix LCP (loading terlalu lambat)

Optimize images. Convert ke WebP, resize max-width sesuai layout, explicit width dan height attribute
Preload LCP resource. <link rel="preload" as="image" href="hero.webp">
Remove render-blocking resources. Defer non-critical CSS dan JavaScript
Server response time. Enable caching, gunakan CDN kalau audience global
Reduce external requests. Self-host fonts, minimize third-party scripts

Fix CLS (layout shift)

Set explicit dimensions. Semua img, video, iframe harus punya width dan height attribute
Reserve space untuk ad. Kalau pakai ad network, reserve container size sebelum ad load
Font loading strategy. Gunakan font-display: swap dengan font-size-adjust untuk match fallback
Avoid dynamic content injection above existing content. Banner, popup, newsletter prompt — inject di bawah atau overlay
Animate dengan transform, bukan properties yang trigger layout.

Fix INP (responsiveness buruk)

Break long tasks. JavaScript yang block main thread > 50ms adalah sumber INP issue
Defer non-critical JavaScript. Analytics, chat widget, tracker — load setelah user interaction
Remove unused JavaScript. Audit bundle dengan Chrome Coverage tab
Use requestIdleCallback untuk background task.
Avoid layout thrashing. Batch DOM read dan write operation

.htaccess optimization untuk shared hosting Indonesia

Hosting shared Indonesia (Rumahweb, Niagahoster, IDCloudHost) umumnya pakai LiteSpeed atau Apache. Optimasi bisa signifikan via .htaccess tanpa butuh server-level access.

.htaccess snippet untuk Core Web Vitals
# Enable DEFLATE compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
    AddOutputFilterByType DEFLATE image/svg+xml font/woff font/woff2
</IfModule>

# Browser caching headers
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/html "access plus 1 hour"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

# LiteSpeed cache (kalau pakai LiteSpeed)
<IfModule LiteSpeed>
    CacheEnable public /
    CacheLookup on
</IfModule>

HTML pattern untuk Core Web Vitals

Image dengan explicit dimension + lazy loading
<!-- Good: explicit dimensions + lazy loading untuk below-fold -->
<img
  src="hero.webp"
  width="960"
  height="540"
  alt="Deskripsi image"
  loading="lazy"
  decoding="async"
>

<!-- Preload untuk LCP image above-fold -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- Font preload -->
<link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Konteks hosting shared Indonesia

Hibranwar.com di-host di Rumahweb shared hosting dengan LiteSpeed. Semua tiga Core Web Vitals "good" untuk p75. Ini membuktikan hosting shared cukup untuk 95% use case website konten.

Kunci optimasi: LiteSpeed cache aktif (disable kalau butuh PHP dynamic), image webp dengan lazy loading, zero JavaScript library eksternal (vanilla only), font loading strategy yang benar, CSS minification via DEFLATE. Tidak perlu dedicated server atau VPS untuk achieve good Core Web Vitals selama traffic tidak melebihi 100k visitor/bulan.

Kapan perlu upgrade hosting

Upgrade ke VPS atau cloud managed hanya ketika: (1) traffic konsisten di atas 100k visitor/bulan, (2) butuh server-level configuration yang shared tidak support, (3) butuh database read/write intensif, (4) butuh geographic distribution via multiple data center. Untuk content site biasa, shared hosting LiteSpeed cukup dan cost-effective.

Pertanyaan Umum Core Web Vitals

Apa itu Core Web Vitals dan kenapa matter untuk ranking?

Core Web Vitals adalah 3 metrik yang Google gunakan untuk mengukur pengalaman pengguna di halaman web: LCP (loading speed), CLS (visual stability), INP (interaction responsiveness). Sejak Page Experience Update (Juni 2021), metrik ini menjadi ranking signal. Bukan ranking factor dominan, tapi tiebreaker di hasil dengan konten setara. Gagal di Core Web Vitals mengurangi trust signal.

INP menggantikan FID, apa bedanya?

FID (First Input Delay) hanya mengukur delay interaksi PERTAMA user dengan halaman. INP (Interaction to Next Paint) mengukur SEMUA interaksi sepanjang sesi user. INP lebih realistic karena refleksikan user experience keseluruhan, bukan hanya first impression. Google transisi dari FID ke INP pada Maret 2024. Target INP: di bawah 200ms (good), 200-500ms (needs improvement), 500ms+ (poor).

Apakah hosting shared di Rumahweb bisa achieve good Core Web Vitals?

Ya, dengan optimasi yang tepat. Kami achieve semua tiga metrik "good" di hibranwar.com yang hosting di Rumahweb shared LiteSpeed. Kunci: LiteSpeed cache aktif, image webp dengan lazy loading, minimal JavaScript (vanilla only), font loading strategy yang benar, CSS minification via .htaccess DEFLATE, limit external HTTP requests (CDN CSS hanya untuk fonts/Chart.js). Hosting shared dengan LiteSpeed cukup untuk 95% use case website konten.

Tool apa yang paling reliable untuk testing Core Web Vitals?

Tiga tool dengan fungsi berbeda. PageSpeed Insights (PSI) — quick check field data + lab data, best untuk audit awal. Chrome DevTools Lighthouse — deep dive lab testing, best untuk debugging issue spesifik. Chrome User Experience Report (CrUX) — field data agregat 28 hari real user, best untuk validasi improvement. Untuk assessment komprehensif, pakai ketiganya. Field data (CrUX) adalah yang Google pakai untuk ranking, bukan lab data.

Fix apa yang paling high-impact untuk Core Web Vitals?

Tiga fix dengan ROI tertinggi berdasarkan audit kami ke 80+ website Indonesia: (1) Compress dan convert images ke WebP dengan width max 960px — biasanya drop LCP dari 4s ke 2s. (2) Explicit width dan height attribute di semua img dan iframe — eliminate CLS issue terbesar. (3) Defer non-critical JavaScript dan remove render-blocking resources — improve INP drastically. Ketiga fix ini butuh 2-4 jam kerja, no code rewrite.

Audit Core Web Vitals Anda gratis.

Audit Entitas Gratis mencakup assessment LCP, CLS, INP pada 5 halaman utama dan prioritized fix recommendation dengan estimasi effort.

Audit Gratis