Optimasi Performa Web: Tips dari Pengalaman Nyata
Ketika pertama kali bergabung di PT. Trawlbens, salah satu tantangan terbesar yang saya hadapi adalah website yang lambat. Skor Lighthouse di bawah 50, First Contentful Paint di atas 4 detik, dan pengguna yang sering mengeluh. Ini adalah cerita bagaimana kami membalikkan keadaan.
Audit Dulu, Optimasi Kemudian
Kesalahan umum adalah langsung "optimasi" tanpa tahu apa yang sebenarnya lambat. Gunakan tab Performance di Chrome DevTools dan Lighthouse untuk mengidentifikasi hambatan yang sesungguhnya.
Dalam kasus kami, masalah terbesarnya adalah:
- Gambar yang tidak dioptimasi (ada yang 3MB per gambar!)
- JavaScript bundle yang terlalu besar
- Tidak ada strategi caching
- Resource yang menghambat render
Optimasi Gambar: Kemenangan Cepat Terbesar
Mengompresi dan mengkonversi gambar ke format WebP adalah hal pertama yang kami lakukan. Hasilnya luar biasa — ukuran halaman turun dari 8MB menjadi 1.2MB hanya dari langkah ini saja.
Tips praktis:
- Gunakan
loading="lazy"untuk gambar di bawah area awal layar - Selalu atur dimensi width/height untuk menghindari pergeseran layout
- Gunakan srcset untuk gambar responsif
Pemisahan Kode dan Lazy Loading
Dengan Next.js/Nuxt.js, dynamic import membuat komponen hanya dimuat ketika dibutuhkan. Komponen modal, chart, dan fitur yang tidak kritis kami pindah ke lazy load. Ini mengurangi ukuran bundle awal hingga 40%.
Strategi Caching
Kami mengimplementasikan strategi caching berlapis:
- Cache browser: Asset statis (JS, CSS, font) dengan cache header panjang
- Cache CDN: Untuk asset statis dan respons API yang jarang berubah
- Service Worker: Untuk kemampuan offline dan kunjungan ulang yang lebih cepat
Hasilnya
Setelah 2 minggu kerja keras, skor Lighthouse naik dari 45 ke 92. First Contentful Paint turun dari 4.2s ke 0.8s. Dan yang paling penting — tidak ada lagi keluhan dari pengguna tentang website yang lambat.
Pelajarannya: optimasi performa bukan tentang melakukan semua teknik sekaligus, tapi tentang mengidentifikasi masalah terbesar dan menyelesaikannya satu per satu.