Web Performance
Teknik dan metrik untuk mempercepat loading dan interaksi halaman web
Web performance adalah seberapa cepat halaman web dimuat, di-render, dan merespons interaksi pengguna.
Core Web Vitals
Tiga metrik utama yang diukur Google:
| Metrik | Target | Definisi |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | Waktu elemen terbesar di viewport selesai di-render |
| INP (Interaction to Next Paint) | < 200ms | Latensi respons interaksi pengguna |
| CLS (Cumulative Layout Shift) | < 0.1 | Total pergeseran layout tak terduga |
Optimasi Gambar
- Gunakan format modern: WebP, AVIF
- Sediakan
srcsetuntuk responsive images - Lazy load gambar di bawah fold:
<img loading="lazy"> - Preload hero image:
<link rel="preload" as="image">
Code Splitting
Kirim hanya kode yang diperlukan untuk halaman tersebut.
const ChartComponent = lazy(() => import("./Chart"));Caching Strategi
Cache-Control: public, max-age=31536000, immutable // assets versioned
Cache-Control: no-cache // HTML dinamisCritical Rendering Path
Urutan browser merender halaman:
- Parse HTML → DOM
- Parse CSS → CSSOM
- JavaScript → blocking jika tidak async/defer
- Merge DOM + CSSOM → Render Tree
- Layout → Paint → Composite
Tips Praktis
- Minify dan compress (gzip/brotli) semua static asset
- Gunakan font-display: swap untuk custom fonts
- Defer non-critical CSS:
<link rel="preload" as="style" onload="this.rel='stylesheet'"> - Hindari layout thrashing: batch DOM read/write