Performance Optimization

Frontend

Bundle Size

• Gunakan dynamic imports untuk code splitting:

const Chart = dynamic(() => import("./Chart"), {
  loading: () => <Skeleton />,
});

• Analisis bundle dengan pnpm exec vite-bundle-visualizer.
• Tree-shake dependencies yang tidak perlu.

Images

• Gunakan <Image> component (Next.js / Astro):

<Image src={photo} width={800} height={600} format="webp" quality={80} />

• Serve WebP/AVIF dengan fallback.
• Lazy load images di bawah fold.

Fonts

• Gunakan font-display: swap untuk prevent FOIT.
• Subset font hanya karakter yang digunakan.
• Preload critical fonts:

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

CSS

• Purge unused Tailwind classes di production.
• Minimize CSS dengan build tool.
• Hindari layout thrashing (batch DOM reads/writes).

Backend

Database

• Index kolom yang sering di-WHERE, JOIN, ORDER BY.
• Use EXPLAIN ANALYZE sebelum deploy query baru.
• Batch insert/update untuk bulk operations:

// Go: batch insert
db.CreateInBatches(users, 100)

API Response

• Pagination untuk list endpoints.
• Field selection ( GraphQL-style atau query param ?fields=id,name ).
• Compression: enable gzip/brotli di web server.

Connection Pooling

Metrics

Track Core Web Vitals:

Monitoring

Gunakan tools untuk monitoring di production:

• Frontend: Vercel Analytics, Google Analytics 4
• Backend: Prometheus + Grafana (Go), APM tools
• Database: pg_stat_statements, slow query log