Cara Bikin Website Cepat untuk User Indonesia

Realita pasar Indonesia#

• 80%+ traffic dari mobile (data Indonesia Internet Service Provider Association)
• Koneksi 4G dominan (~30 Mbps rata-rata, tapi spike turun di luar Jabodetabek)
• Pengguna sensitif terhadap kuota — tiap MB extra image = bounce rate naik
• Latency ke server luar Indonesia 30-100 ms tergantung lokasi

Stack rekomendasi untuk speed#

1. CDN dengan PoP Indonesia#

Cloudflare punya PoP di Jakarta (CGK) — minimal latency. Alternative: Akamai, Bunny.net (PoP Jakarta), Vercel Edge Network.

Setup: domain pointing ke Cloudflare, enable proxy (orange cloud).

2. Image optimization aggressive#

• Format: AVIF > WebP > JPEG. Astro/Next.js auto-convert.
• Responsive sizes: kirim 320w untuk HP, 1280w untuk desktop. srcset + sizes.
• Lazy load semua image below-the-fold.
• Compress quality 75-80 — tidak terlihat beda mata, ukuran turun 40%+.

---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="..." widths={[320, 640, 1280]}
       sizes="(max-width: 768px) 100vw, 50vw" format="avif" />

3. Self-host fonts atau pakai font-display: swap#

Google Fonts punya CDN bagus, tapi tetap external request → blocking. Self-host font dengan font-display: swap lebih cepat:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
}

4. Edge caching untuk halaman static#

Astro static site → semua HTML cached di CDN edge. Dengan Cloudflare:

Cache-Control: public, max-age=300, s-maxage=86400

max-age=300 (5 menit) untuk browser, s-maxage=86400 (24 jam) untuk CDN. Update via cache purge saat deploy.

5. Minimize JavaScript#

JavaScript = main culprit untuk lambat di mobile low-end. Strategy:

• Astro islands — JS hanya untuk komponen interaktif spesifik.
• No React untuk static page kalau tidak perlu — pakai vanilla atau Astro.
• Tree shake dengan modern bundler (Vite, Bun).
• Preload critical (<link rel="preload">), defer rest.

Target metrics#

Untuk audience Indonesia di 4G:

• LCP: < 2.5 detik (Google good)
• INP: < 200 ms
• CLS: < 0.1
• Bundle JS: < 100 KB gzipped untuk landing page
• Total page weight: < 1 MB untuk first load

Tools untuk test#

• PageSpeed Insights — Google’s tool, dapat real-user data via Chrome UX Report
• WebPageTest — set location ke Singapore (closest to Indonesia)
• Lighthouse di Chrome DevTools — local test

Jangan hanya test dari kantor (fiber 100 Mbps). Throttle ke 4G di DevTools.

Common mistakes#

1. Hosting di US/EU saja — latency 200+ ms ke Indonesia. Add CDN minimum.
2. Image PNG raksasa untuk hero — convert ke AVIF/WebP, target < 100 KB.
3. Library berat untuk fitur kecil (Moment.js untuk format date — pakai date-fns atau Intl).
4. Auto-play video — bandwidth + bandwidth + bandwidth.
5. Pop-up & cookie banner yang block render.

Audit performance gratis — kasih URL Anda, kami balas dengan report.