Core Web Vitals Checklist untuk Situs Korporat
LCP, INP, CLS: target aktual per jenis halaman korporat, quick-win optimization, dan monitoring pipeline yang tidak pakai tool berbayar.
Core Web Vitals mempengaruhi ranking sejak 2021 dan relevansi-nya bertambah di 2026 setelah INP menggantikan FID. Tapi target 'bagus' tidak sama per jenis halaman. Halaman produk B2B tidak harus seperti news site. Checklist ini disesuaikan untuk korporat.
Target per jenis halaman
| Halaman | LCP target | INP target | CLS target |
|---|---|---|---|
| Homepage | < 2.0s | < 150ms | < 0.05 |
| Product / service landing | < 2.5s | < 200ms | < 0.1 |
| Blog / article | < 2.0s | < 200ms | < 0.1 |
| Case study / portfolio | < 2.5s | < 200ms | < 0.1 |
| Contact / form page | < 2.0s | < 150ms | < 0.05 |
| Catalog / listing | < 3.0s | < 250ms | < 0.1 |
Quick-win LCP optimization
- Preload hero image.
<link rel="preload" as="image" href="/hero.webp">. Yang paling impactful. - Hero image webp, compressed, sesuai display ratio.Kroping di server, bukan resize via CSS.
- Inline critical CSS di <head>.CSS yang render above-fold. Minify.
- Defer non-critical JS.Google Tag Manager, analytics, chat widget = defer.
- Font preload + font-display: swap.Mencegah invisible text period.
- CDN untuk static asset.Rumahweb LiteSpeed punya built-in. Aktifkan.
- HTTP/2 atau HTTP/3.Cek via curl -I -v. Must be HTTP/2 at minimum.
- Gzip atau Brotli compression aktif.Cek via GTMetrix atau Chrome DevTools Network tab.
INP (Interaction to Next Paint)
INP menggantikan FID di Maret 2024. Lebih strict. Mengukur responsiveness selama lifecycle halaman, bukan hanya first interaction.
- Debounce input event (search box, form field).Setidaknya 100ms debounce.
- Virtual scroll untuk list panjang.100+ items di DOM = performa buruk.
- Hindari main thread block > 50ms.Chrome DevTools Performance panel identify.
- Heavy computation di Web Worker.Canvas animation, data processing.
- Minimize JavaScript bundle size.Target < 300KB minified gzipped untuk halaman utama.
CLS (Cumulative Layout Shift)
- Width + height di setiap img dan iframe.Reserves space, mencegah reflow.
- Aspect-ratio CSS di element yang dynamic.
aspect-ratio: 16/10; - Font fallback dengan size-adjust.
@font-face { size-adjust: 105%; }mencegah FOIT/FOUT shift. - Hindari ad/embed tanpa fixed size.Third-party iframe paling sering causeCLS.
- Skeleton loader untuk async content.Space placeholder saat data loading.
Monitoring tanpa tool berbayar
- Chrome DevTools Lighthouse — baseline per halaman.
- PageSpeed Insights — lab + field data.
- Google Search Console > Core Web Vitals — 28-hari aggregate per URL group.
- web-vitals.js — self-hosted real user monitoring, kirim ke analytics own domain.
Rumahweb LiteSpeed
LiteSpeed Cache plugin (atau .htaccess config) menangani 70% quick win automatic: gzip, HTTP/2, browser cache. Pastikan plugin aktif dan konfigurasi default-nya tuned.
