Langsung ke konten
Kembali ke artikel

Web Development

Kenapa Website Kamu Lemot? Hampir Selalu Gara-gara 3 Hal Ini

Tenang, kamu nggak perlu nulis ulang semuanya. Website lemot biasanya karena tiga hal yang itu-itu aja: gambar kegedean, font yang bikin teks telat muncul, dan JavaScript yang kebanyakan. Ini cara aku beresinnya.

1 menit baca

Bikin website ngebut sering dikira ribet banget, padahal website lemot itu biasanya gara-gara hal yang sama: gambar kegedean, font yang bikin teks telat muncul, dan JavaScript yang lebih banyak dari yang dibutuhkan. Beresin tiga hal ini aja, hasilnya udah kerasa banget.

Gambar itu penyumbang terbesar, jadi urus dulu

Gambar biasanya bagian paling berat di sebuah halaman, dan sering jadi elemen Largest Contentful Paint.

  • Pakai format modern kayak WebP atau AVIF, dengan ukuran yang pas sama tampilannya.

  • Selalu isi width dan height biar browser udah nyiapin ruangnya dan layout nggak loncat-loncat.

  • Pakai lazy load (loading="lazy") buat gambar di bawah layar, tapi jangan buat hero image.

  • Kasih hero image fetch priority tinggi biar dimuat paling awal.

Meme: gambar hero yang ringan dan tajam vs PNG 5,2 MB yang cuma tampil di 400px

Load font tanpa bikin halaman macet

Custom font bikin brand kelihatan pas, tapi bisa bikin teks telat muncul.

  • Self-host font dan subset, cukup karakter yang dipakai aja.

  • Pakai font-display: swap biar teks langsung tampil pakai font cadangan dulu.

  • Batasi jumlah weight. Tiap weight itu file tambahan, lho.

Kirim JavaScript seperlunya aja

JavaScript itu mahal, karena harus di-download, di-parse, dan dijalankan dulu sebelum halaman bisa merespons.

  • Render konten jadi HTML di server kalau bisa.

  • Muat fitur berat kayak scene 3D, chart, atau editor cuma pas dibutuhkan.

  • Cek ukuran bundle tiap habis nambah dependency. Fitur kecil jangan sampai bikin payload jadi dua kali lipat.

Meme: landing page isi tiga paragraf dan satu tombol, di sebelahnya bundle JavaScript yang raksasa

JavaScript tercepat adalah JavaScript yang nggak pernah dikirim.

Ukur yang bener

Core Web Vitals kasih target yang gampang dipegang:

  • LCP: seberapa cepat konten utama muncul.

  • CLS: seberapa stabil layout selagi halaman dimuat.

  • INP: seberapa cepat halaman merespons klik atau ketikan.

Tool lab kayak Lighthouse enak buat nangkep regresi pas lagi development. Sedangkan data pengguna asli dari Google Search Console nunjukin apa yang beneran dialami pengunjung.

Jadikan kebiasaan, bukan proyek dadakan

Performa jarang rusak gara-gara satu keputusan besar. Dia terkikis pelan-pelan oleh banyak keputusan kecil. Biasain ngecek ukuran gambar, cara load font, dan ukuran bundle di setiap fitur, jadi website tetap ngebut tanpa perlu proyek penyelamatan.

Artikel terkait