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 — beserta teknik konkret yang bisa langsung Anda terapkan.
Kenapa Performa Itu Penting
Performa bukan sekadar angka di Lighthouse. Studi Google menunjukkan bahwa peluang pengunjung meninggalkan halaman naik 32% ketika waktu muat bertambah dari 1 ke 3 detik. Core Web Vitals juga menjadi sinyal peringkat di pencarian Google. Artinya, website yang lambat merugikan dua kali: kehilangan pengguna dan kehilangan peringkat.
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 modern seperti WebP atau AVIF 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 (CLS)
- Gunakan atribut
srcsetuntuk gambar responsif - Tandai gambar LCP dengan
fetchpriority="high"agar diprioritaskan browser
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%.
Prinsip yang sama berlaku di sisi server: jangan kirim data yang tidak perlu. Ini terhubung erat dengan cara Anda merancang API — sesuatu yang saya bahas di artikel membangun REST API dengan Laravel.
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
Kurangi Render-Blocking Resource
CSS dan JavaScript yang menghambat render adalah pembunuh senyap performa. Beberapa langkah yang membantu: inline CSS kritis, tunda script non-esensial dengan defer, dan preload font utama. Bahkan website ini pun meng-inline CSS-nya langsung ke dalam respons HTML untuk menghilangkan satu perjalanan bolak-balik jaringan.
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. Ukur, perbaiki, ukur lagi.
