Studi Kasus: Optimasi JavaScript di Website High Traffic

Studi Kasus: Optimasi JavaScript di Website High Traffic

Website dengan traffic tinggi menghadapi tantangan yang lebih kompleks dibanding website biasa. JavaScript yang tidak dioptimasi dapat menimbulkan:

  • Initial load lambat → bounce rate meningkat
  • Memory leak → SPA crash atau lag
  • FCP/LCP buruk → SEO turun, pengalaman pengguna terganggu

Artikel ini membahas studi kasus nyata optimasi JS pada website e-commerce high traffic, mulai dari masalah awal, analisis teknis, strategi optimasi, benchmark, hingga dampak bisnis.

1. Profil Website & Arsitektur Sebelum Optimasi

  • Tipe: E-commerce high traffic
  • Traffic: ±1 juta visitor/bulan
  • Stack: React SPA + Node.js API + CDN untuk asset statis
  • Halaman Penting: Homepage, Category Page, Product Detail, Checkout
  • Masalah Awal:
    • Bundle JS besar = 1.5 MB
    • Serial API request → kategori produk lambat dimuat
    • Event listener tidak dibersihkan → memory leak
    • Animasi scroll & filter janky → FPS drop
    • Bounce rate homepage = 35%

Analisis Profil Teknis Awal:

HalamanBundle JSFCP (desktop)FCP (mobile)Memory Usage SPABounce Rate
Homepage1.5 MB2.8 s4.5 s500 MB35%
Category1.2 MB3 s4.8 s450 MB30%
Product Detail800 KB2 s3.5 s300 MB25%

2. Analisis Masalah JavaScript Nyata

2.1 Bundle Size Terlalu Besar

  • Semua library dimasukkan: jQuery, Lodash, Chart.js, moment.js
  • Tidak ada tree-shaking → banyak kode tidak digunakan tetap dibundel
  • Akibat: blocking render, initial load lambat, FCP tinggi

Benchmark Profil Webpack:

  • Entry chunk = 1.5 MB
  • Vendor chunk = 900 KB
  • Source map aktif → tambahan 1 MB

2.2 DOM Manipulation Berulang

  • Render list produk satu per satu → reflow & repaint berulang
  • Event listener filter & sort tidak dibersihkan → memory leak
  • Profiling Chrome DevTools → heap meningkat > 500 MB setelah 2 jam SPA

Contoh Kode Buruk:

products.forEach(p => {
  const div = document.createElement('div');
  div.textContent = p.name;
  document.body.appendChild(div); // render satu-satu
});

2.3 Serial API Request

  • Fetch kategori produk satu per satu
  • Akibat: LCP lambat → page interaktivitas tertunda
for (let c of categories) {
  const res = await fetch(`/api/products/${c}`);
  render(res);
}

2.4 Animasi Scroll Tidak Optimal

  • Animasi scroll mengubah style.top langsung → CPU intensive
  • FPS drop → janky scroll, terutama di mobile

3. Strategi Optimasi Mendetail

3.1 Bundle Optimization & Code Splitting

  • Tree-shaking: hapus kode tidak terpakai dari Lodash, moment.js → ganti day.js
  • Dynamic import / lazy loading modul besar
button.addEventListener('click', async () => {
  const module = await import('./heavyModule.js');
  module.init();
});
  • Split bundle: homepage, category, product detail, checkout → load sesuai route

3.2 DOM & Virtual DOM Optimization

  • Gunakan DocumentFragment → batch DOM update
const fragment = document.createDocumentFragment();
products.forEach(p => {
  const div = document.createElement('div');
  div.textContent = p.name;
  fragment.appendChild(div);
});
document.getElementById('product-list').appendChild(fragment);
  • React → gunakan key untuk meminimalkan re-render
  • Batched updates → use ReactDOM.unstable_batchedUpdates di edge case

3.3 Event Listener Management

  • Gunakan event delegation:
document.getElementById('filters').addEventListener('click', e => {
  if(e.target.dataset.filter){
    applyFilter(e.target.dataset.filter);
  }
});
  • Remove listener saat komponen unmount → mencegah memory leak
  • Gunakan WeakMap untuk menyimpan state temporary

3.4 API Request Optimization

  • Parallel fetch → Promise.all
const results = await Promise.all(categories.map(c => fetch(`/api/products/${c}`).then(r => r.json())));
  • Cache hasil fetch kategori populer → SSR/SSG + CDN
  • Debounce/throttle untuk search & filter

3.5 Animasi & Rendering Optimization

  • Gunakan requestAnimationFrame untuk scroll & animation
function animate(){
  element.style.transform = `translateY(${scrollTop}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
  • Gunakan GPU accelerated properties: transform, opacity
  • Hindari animasi style/layout yang memicu reflow

3.6 Memory Management & Profiling

  • Clear intervals / timeout
  • Hapus event listener saat komponen di-unmount
  • Gunakan Chrome DevTools → heap snapshot, identify detached DOM nodes
  • Profiling SPA: monitor memory usage, FPS, CPU

3.7 Caching & CDN

  • Cache halaman SSR & SSG → category page
  • CDN untuk JS, CSS, images → reduce server load
  • Cache API responses di browser → interaktivitas cepat

4. Benchmark Sebelum & Sesudah Optimasi

MetricSebelumSesudah
JS Bundle Size1.5 MB650 KB
FCP Desktop2.8 s0.9 s
FCP Mobile4.5 s1.2 s
LCP4.7 s1.5 s
Bounce Rate Homepage35%22%
SPA Memory Usage500MB120MB
FPS Scroll30 FPS60 FPS

Analisis:

  • Bundle JS lebih kecil → render-blocking berkurang
  • DOM manipulation batch → memory leak hilang
  • Parallel fetch → LCP lebih cepat
  • GPU animation → UX smooth

5. Studi Kasus Lanjutan

5.1 Infinite Scroll & Virtualization

  • Sebelumnya: render 10.000 produk → memory spike → FPS drop
  • Optimasi: virtual scroll + DocumentFragment → render 50 item di viewport
  • Hasil: memory stabil, FPS 60

5.2 SSR + CSR Hybrid

  • Halaman landing → SSR → HTML siap render
  • Interaktivitas filter → CSR + hydration
  • FCP cepat, SEO optimal

6. Best Practice Optimasi JavaScript High Traffic

  1. Minimize JS Bundle → tree-shaking, code splitting, lazy loading
  2. DOM Optimization → DocumentFragment, virtual DOM, batch updates
  3. Event Listener Management → delegation, cleanup, WeakMap
  4. API Optimization → parallel fetch, caching, debounce/throttle
  5. Animation Optimization → requestAnimationFrame, GPU properties
  6. Memory & Profiling → clear intervals, heap snapshot monitoring
  7. Caching & CDN → SSR/SSG pages, static assets
  8. Monitoring & Alerting → Lighthouse CI, WebPageTest, New Relic

7. Dampak Bisnis Setelah Optimasi

KPISebelumSesudah
Bounce Rate35%22%
Conversion Rate2.5%3.2%
Server Load95% peak70% peak
Mobile User Experience3/55/5
SEO RankingHomepage 5thHomepage 2nd
  • FCP & LCP lebih cepat → pengalaman pengguna meningkat
  • Bounce rate turun → engagement & conversion naik
  • Memory & FPS stabil → SPA berjalan lama tanpa crash

8. Diagram Workflow Optimasi (Konseptual)

Alur Render & Optimasi JS:

  1. Initial HTML → SSR / SSG → FCP cepat
  2. JS bundle → code splitting → lazy load modul interaktif
  3. API requests → parallel + cache → LCP rendah
  4. DOM updates → batch → reflow minim
  5. Event listeners → delegation + cleanup
  6. Animasi → requestAnimationFrame + GPU → smooth UX
  7. Memory & performance monitoring → profil secara rutin

Kesimpulan

Optimasi JavaScript untuk website high traffic bukan sekadar mengurangi bundle, tapi perlu strategi menyeluruh:

  • Bundle & lazy loading → render-blocking minimal
  • DOM & event optimization → memory leak hilang, UX smooth
  • API & caching → interaktivitas cepat, server load berkurang
  • Animation GPU & virtual scroll → FPS stabil
  • Monitoring & profiling → mencegah regresi performa

Hasil nyata: FCP desktop 0.9 s, mobile 1.2 s, bounce rate turun 13%, memory SPA stabil, sehingga website high traffic tetap fast, responsive, dan SEO-friendly.

Related Posts