Web Development 05 July 2024 3,244 views

Kenapa Website-mu Lambat dan Cara Fixnya: Panduan Web Performance 2024

Loading 5 detik itu sudah terlalu lama. Ini audit lengkap penyebab website lambat dan langkah konkret untuk bikin lebih cepat — dengan tools gratis.

Google sudah lama bilang bahwa setiap penambahan 1 detik loading time meningkatkan bounce rate secara signifikan. Tapi mengetahui website kita lambat dan tahu cara fixnya adalah dua hal yang berbeda.

Diagnosa Dulu — Jangan Langsung Fix

Sebelum optimasi apapun, jalankan audit dengan tools ini:

Lighthouse — built-in di Chrome DevTools (F12 → Lighthouse → Analyze)
PageSpeed Insights — pagespeed.web.dev, test dari perspektif Google
WebPageTest — webpagetest.org, lebih detail dengan waterfall chart

Masalah 1: Gambar Tidak Dioptimasi (Paling Umum)

Ini penyebab nomor satu website lambat. Checklist gambar:

Pakai format WebP (50-80% lebih kecil dari JPEG/PNG)
Resize gambar sesuai ukuran tampil — jangan upload 4000px untuk ditampilkan 400px
Tambahkan lazy loading: <img loading="lazy">
Tambahkan dimensi eksplisit untuk hindari layout shift

<!-- Buruk -->
<img src="foto-besar.jpg">

<!-- Bagus -->
<img 
  src="foto.webp" 
  width="800" 
  height="600" 
  loading="lazy"
  alt="Deskripsi gambar"
>

Masalah 2: JavaScript Terlalu Besar

Buka Network tab di DevTools, filter JS. Kalau total JS bundle lebih dari 300KB, ada masalah.

Solusi:

Code splitting — jangan load semua JS di halaman awal
Tree shaking — pastikan build tool buang kode yang tidak dipakai
Audit dependencies: npm install -g source-map-explorer untuk visualisasi bundle
Ganti library besar dengan alternatif lebih kecil (misal: day.js vs moment.js)

Masalah 3: Render-Blocking Resources

CSS dan JS yang di-load di <head> tanpa atribut yang tepat akan block rendering halaman.

<!-- CSS kritis: inline di head -->
<style>/* CSS above-the-fold */</style>

<!-- CSS non-kritis: load async -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

<!-- JS: defer atau async -->
<script src="app.js" defer></script>

Masalah 4: Tidak Ada Caching

Set cache headers yang tepat di server atau CDN. Static assets (gambar, CSS, JS yang tidak berubah) bisa di-cache 1 tahun:

Cache-Control: public, max-age=31536000, immutable

Masalah 5: Server Response Lambat (TTFB)

Kalau Time to First Byte di atas 600ms, masalahnya ada di server/database:

Cek query database — tambahkan index yang kurang
Implementasi caching di level aplikasi (Redis)
Gunakan CDN untuk distribusi konten global
Upgrade hosting kalau memang sudah maximal dioptimasi

Quick Win yang Bisa Dilakukan Hari Ini

Jalankan Lighthouse, catat skor awal
Convert semua gambar ke WebP, tambah lazy loading
Tambah defer ke semua tag script
Jalankan Lighthouse lagi, bandingkan

Kebanyakan website bisa naik 20-40 poin Lighthouse hanya dari dua langkah pertama.