PERFORMANCE DOCS

CORE-WEB-VITALS

Largest Contentful Paint (LCP)
Description: Mengukur waktu yang dibutuhkan untuk merender konten terbesar yang terlihat di viewport. Target: < 2.5 detik.
Example: 
Diukur menggunakan PerformanceObserver atau Lighthouse.
Output: Skor LCP dalam milidetik
Interaction to Next Paint (INP)
Description: Mengukur latensi interaksi pengguna (klik, ketukan, keyboard) hingga frame berikutnya dilukis. Target: < 200ms.
Example: 
Menggantikan First Input Delay (FID) pada Maret 2024.
Output: Latensi interaksi terburuk
Cumulative Layout Shift (CLS)
Description: Mengukur stabilitas visual halaman, menghitung pergeseran tata letak yang tidak terduga. Target: < 0.1.
Example: 
Hindari menyisipkan konten dinamis di atas konten yang sudah ada tanpa reservasi ruang.
Output: Skor CLS (skor numerik)
First Contentful Paint (FCP)
Description: Waktu hingga konten pertama (teks/gambar) dirender. Target: < 1.8 detik.
Example: 
Optimalkan critical rendering path.
Output: Waktu FCP dalam milidetik
Time to First Byte (TTFB)
Description: Waktu dari permintaan hingga byte pertama diterima. Target: < 800ms.
Example: 
Gunakan CDN, caching server, dan database yang efisien.
Output: TTFB dalam milidetik

RESOURCE-LOADING

Preload
Description: Memprioritaskan pengambilan sumber daya yang penting untuk halaman saat ini.
Example: 
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Output: Sumber daya diambil lebih awal
Prefetch
Description: Mengambil sumber daya untuk navigasi berikutnya di latar belakang.
Example: 
<link rel="prefetch" href="/next-page.js">
Output: Cache untuk halaman berikutnya
Preconnect
Description: Membangun koneksi ke asal sumber daya (DNS, TCP, TLS) lebih awal.
Example: 
<link rel="preconnect" href="https://api.example.com">
Output: Koneksi awal siap
DNS Prefetch
Description: Menyelesaikan nama domain menjadi alamat IP di latar belakang.
Example: 
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
Output: Resolusi DNS lebih cepat
Priority Hints (fetchpriority)
Description: Memberi petunjuk prioritas pada sumber daya (high, low, auto).
Example: 
<img src="hero.jpg" fetchpriority="high" alt="Hero">
Output: Gambar hero diprioritaskan

CACHING-STRATEGIES

Cache-Control (HTTP Header)
Description: Mengontrol caching browser. max-age untuk durasi, immutable untuk file statis.
Example: 
Cache-Control: public, max-age=31536000, immutable
Output: File di-cache 1 tahun
ETag / Last-Modified
Description: Validasi cache dengan token ETag atau waktu modifikasi terakhir.
Example: 
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Output: 304 Not Modified jika cocok
Service Worker Caching
Description: Menggunakan service worker untuk caching offline-first dan strategi stale-while-revalidate.
Example: 
self.addEventListener('fetch', event => { event.respondWith(caches.match(event.request).then(response => response || fetch(event.request))) })
Output: Cache offline

IMAGE-PERFORMANCE

next/image (Next.js)
Description: Komponen yang secara otomatis mengoptimalkan gambar (resize, format modern, lazy loading).
Example: 
import Image from 'next/image'
<Image src="/hero.jpg" width={800} height={600} alt="Hero" />
Output: Gambar dalam format WebP/AVIF
loading="lazy"
Description: Menunda pemuatan gambar hingga mendekati viewport.
Example: 
<img src="image.jpg" loading="lazy" alt="..." />
Output: Gambar tidak dimuat sekaligus
srcset & sizes
Description: Menyediakan beberapa resolusi gambar untuk layar berbeda.
Example: 
<img srcset="small.jpg 480w, large.jpg 1200w" sizes="(max-width: 600px) 480px, 1200px" src="default.jpg" alt="..." />
Output: Hanya gambar yang sesuai yang diunduh
WebP / AVIF
Description: Format gambar modern dengan kompresi lebih baik dari JPEG/PNG.
Example: 
<picture><source srcset="img.avif" type="image/avif"><img src="img.jpg" alt="..."></picture>
Output: Ukuran file lebih kecil

FONT-OPTIMIZATION

font-display: swap
Description: Menampilkan teks dengan font fallback sampai font kustom siap.
Example: 
@font-face { font-family: 'MyFont'; src: url(...); font-display: swap; }
Output: Teks terlihat lebih cepat
Preload Font
Description: Mengambil font lebih awal agar siap saat dibutuhkan.
Example: 
<link rel="preload" href="font.woff2" as="font" crossorigin>
Output: Font di-cache sebelum render
Subset Font
Description: Mengurangi ukuran font dengan hanya menyertakan karakter yang diperlukan.
Example: 
Gunakan layanan seperti Google Fonts dengan parameter text= atau subset manual.
Output: Font lebih kecil
next/font (Next.js)
Description: Mengoptimalkan dan self-host font secara otomatis.
Example: 
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
Output: Font dimuat optimal

JAVASCRIPT-PERFORMANCE

Code Splitting
Description: Memecah bundel JavaScript menjadi potongan yang lebih kecil sesuai rute.
Example: 
const HeavyComponent = dynamic(() => import('./Heavy'))
Output: Halaman awal lebih ringan
Tree Shaking
Description: Menghapus kode yang tidak digunakan selama build.
Example: 
Gunakan ES module import, pastikan library mendukung tree shaking.
Output: Bundel lebih kecil
Defer / Async Scripts
Description: Mengontrol eksekusi script agar tidak memblokir parsing.
Example: 
<script src="script.js" defer></script>
Output: Script dieksekusi setelah HTML diparse
Memoization
Description: Menggunakan useMemo / useCallback untuk mencegah komputasi berulang.
Example: 
const value = useMemo(() => computeExpensive(a, b), [a, b])
Output: Tidak dihitung ulang jika dependensi sama

PERFORMANCE-API

PerformanceObserver
Description: Mengamati metrik performa (LCP, FCP, CLS, long tasks) secara real-time.
Example: 
const observer = new PerformanceObserver((list) => { ... })
observer.observe({ type: 'largest-contentful-paint', buffered: true })
Output: Data metrik dikirim ke analytics
Navigation Timing API
Description: Memberikan data waktu navigasi halaman (DNS, TLS, request, response).
Example: 
const { domContentLoadedEventEnd, navigationStart } = performance.timing
Output: Durasi tiap fase navigasi
Resource Timing API
Description: Mengukur performa pemuatan setiap sumber daya (gambar, script, CSS).
Example: 
performance.getEntriesByType('resource')
Output: Waktu muat setiap resource
User Timing API
Description: Membuat mark dan measure kustom untuk mengukur operasi spesifik.
Example: 
performance.mark('start-task'); ... ; performance.measure('task-duration', 'start-task');
Output: Durasi tugas kustom
Long Tasks API
Description: Mendeteksi tugas yang memblokir main thread selama >50ms.
Example: 
observer.observe({ type: 'longtask', buffered: true })
Output: Identifikasi penyebab jank

TESTING-MONITORING

Lighthouse / PageSpeed Insights
Description: Alat untuk mengaudit performa, aksesibilitas, SEO, dan best practices.
Example: 
Jalankan dari Chrome DevTools atau https://pagespeed.web.dev
Output: Skor dan rekomendasi
Web Vitals Extension
Description: Ekstensi Chrome yang menampilkan Core Web Vitals secara real-time.
Example: 
Instal ekstensi 'Web Vitals' dari Chrome Web Store.
Output: LCP, CLS, INP langsung terlihat
Sentry / LogRocket
Description: Monitoring performa dan error di produksi.
Example: 
Sentry.init({ dsn: '...', integrations: [new BrowserTracing()] })
Output: Data performa pengguna nyata

BEST-PRACTICES

Minifikasi & Kompresi
Description: Minify HTML, CSS, JS dan gunakan kompresi Brotli/Gzip.
Example: 
Build tools (Webpack, Vite) dan konfigurasi server.
Output: Ukuran transfer lebih kecil
Hindari Flash of Invisible Text (FOIT)
Description: Gunakan font-display: swap atau preload untuk font kustom.
Example: 
@font-face { font-display: swap; }
Output: Teks selalu terlihat
Gunakan HTTP/2 atau HTTP/3
Description: Memungkinkan multiplexing dan header compression untuk loading lebih cepat.
Example: 
Aktifkan di server atau melalui CDN.
Output: Banyak request sekaligus tanpa antrean
Kurangi Waktu Respon Server (TTFB)
Description: Gunakan edge function, CDN, dan database query yang efisien.
Example: 
Next.js ISR, Vercel Edge Functions.
Output: TTFB < 800ms