Tips Optimasi Performa Website: Dari 40 ke 95+ Lighthouse Score

Pernah bikin website yang keliatan bagus tapi loading-nya lama banget? Gue pernah, dan di sini gue share cara-cara praktis yang bener-bener work untuk boost performa website.

Problem: Website Loading Lama

Dulu website yang gue bikin sering dapat score Lighthouse di range 40-60an. Padahal design udah oke, tapi user experience jelek karena loading lama.

Solution yang Gue Terapin

1. Image Optimization 🖼️

Ini impact-nya GEDE banget!

// Bad ❌
<img src="/foto.jpg" />

// Good ✅
<Image 
  src={foto} 
  alt="Description"
  width={800}
  height={600}
  loading="lazy"
  format="webp"
/>

Tools yang gue pake:

• Next.js Image component (auto optimization)
• Sharp untuk processing
• Convert ke WebP format

2. Code Splitting & Lazy Loading 📦

Jangan load semua code sekaligus!

// Lazy load components
const HeavyComponent = lazy(() => import('./HeavyComponent'));

// Dynamic imports
const module = await import('./module.js');

3. CSS Optimization 🎨

// Inline critical CSS
// Remove unused CSS
// Use CSS-in-JS dengan tree shaking

Gue pake Critters untuk inline critical CSS dan PurgeCSS untuk remove unused styles.

4. JavaScript Minification ⚡

// Terser untuk minify JS
// Drop console.log di production
// Tree shaking unused code

5. Caching Strategy 💾

• Static assets: cache selama 1 tahun
• HTML: cache dengan revalidation
• API responses: cache dengan stale-while-revalidate

6. Font Loading Optimization 📝

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

Gue pake font-display: swap biar text langsung keliatan meski font belum load.

Real Result

Di portfolio ini (yang lagi kalian buka), gue terapin semua teknik di atas:

Before:

• Performance: ~45
• First Contentful Paint: 3.2s

After:

• Performance: 95-100 ✅
• First Contentful Paint: 0.8s ✅

Tools yang Gue Recommend

1. Lighthouse - Audit performa
2. WebPageTest - Detail analysis
3. Chrome DevTools - Debug performance
4. Bundle Analyzer - Lihat ukuran bundle

Kesimpulan

Optimasi performa itu bukan one-time job, tapi continuous process. Yang penting:

1. Measure dulu sebelum optimize
2. Focus di biggest impact dulu (biasanya images)
3. Test di real device, bukan cuma local
4. Monitor terus performa website

Happy optimizing! 🚀