Website WordPress biasanya nggak langsung lemot. Ia menggemuk pelan-pelan: satu plugin analytics, satu slider, dua font, tiga script chat, lalu tiba-tiba PageSpeed merah dan klien nanya, “Kok dulu cepat?”
Di sinilah WordPress performance budget jadi pagar pembatas. Bukan buat membatasi kreativitas tim, tetapi buat mencegah bloat sebelum masuk production.
Apa Itu WordPress Performance Budget?
WordPress performance budget adalah daftar batas maksimal untuk aset dan fitur website. Misalnya, berapa KB JavaScript yang boleh masuk, berapa plugin aktif yang masuk akal, atau berapa besar gambar hero sebelum dianggap berbahaya.
Jadi, keputusan performa nggak lagi pakai rasa. Sebaliknya, tim punya angka jelas untuk bilang: “Fitur ini boleh jalan kalau tetap di bawah budget.”
Checklist Budget Cepat: Angka Aman Buat Tim
Pakai angka ini sebagai baseline. Setelah itu, sesuaikan dengan tipe situs, traffic, device pengunjung, dan target bisnis-mu.
1. JavaScript: Maksimal 170 KB Compressed per Halaman
JavaScript sering jadi biang INP buruk karena browser harus download, parse, compile, lalu eksekusi. Karena itu, jaga total JS utama di bawah 170 KB gzip atau brotli untuk halaman penting.
- Matikan script plugin di halaman yang nggak butuh.
- Delay script pihak ketiga seperti chat, heatmap, popup.
- Hindari page builder widget yang memuat JS global.
Kalau kamu ingin masuk lebih dalam soal respons klik, baca juga panduan INP WordPress.
2. CSS: Maksimal 80 KB Compressed
CSS terlihat ringan, tetapi CSS berlebih bisa menghambat render. Selain itu, banyak tema dan builder mengirim style untuk komponen yang nggak muncul di halaman.
- Target CSS utama: di bawah 80 KB compressed.
- Critical CSS hanya untuk above the fold.
- Buang CSS plugin yang nggak dipakai per halaman.
Kalau theme-mu sudah berat dari awal, optimasi belakangan bakal mahal. Sebaiknya cek juga panduan tema WordPress ringan.
3. Font: Maksimal 2 Family, 4 File
Font sering lolos dari review karena “cuma tipografi”. Padahal, font bisa menambah request, memicu layout shift, dan memperlambat teks muncul.
- Pakai maksimal 2 font family.
- Batasi ke 4 file font, misalnya regular dan bold.
- Gunakan
font-display: swap. - Host font secara lokal jika tracking dan latency jadi masalah.
4. Gambar: Hero di Bawah 200 KB, Thumbnail di Bawah 80 KB
Gambar masih jadi penyebab LCP lambat di banyak situs WordPress. Namun, masalahnya bukan cuma ukuran file, melainkan format, dimensi, prioritas loading, dan posisi gambar.
- Hero image: 150 sampai 200 KB.
- Gambar konten: 80 sampai 120 KB.
- Thumbnail: di bawah 80 KB.
- Format utama: WebP atau AVIF.
Selain itu, jangan lazy-load gambar LCP. Untuk detailnya, cek kenapa gambar sudah dikompres tapi web tetap lemot.
5. Plugin: Maksimal 20 Aktif, Tetapi Audit Dampaknya
Ini bagian counter-intuitive: jumlah plugin bukan musuh utama. Satu plugin buruk bisa lebih berat daripada sepuluh plugin kecil yang rapi.
Karena itu, jangan cuma tanya “berapa plugin aktif?” Tanyakan juga, “plugin ini menambah query, script global, cron, autoload option, atau request eksternal?”
- Website company profile: 10 sampai 15 plugin.
- Blog media: 15 sampai 25 plugin.
- WooCommerce: 25 sampai 40 plugin, dengan audit ketat.
Kalau baru mulai, pakai daftar plugin seperlunya dari rekomendasi plugin WordPress gratis, lalu tambah fitur hanya saat memang perlu.
Framework Veteran: Budget per Template, Bukan per Website
Banyak tim membuat satu budget global. Kedengarannya rapi, tetapi sering gagal di lapangan.
Lebih bagus, buat budget per template. Homepage, artikel, landing page, product page, dan checkout punya kebutuhan berbeda. Dengan begitu, tim bisa mengizinkan landing page punya visual lebih berat, sementara artikel tetap super ringan.
- Artikel: fokus teks cepat, gambar ringan, JS minimal.
- Homepage: visual boleh lebih kuat, tetapi LCP tetap ketat.
- Landing page: boleh pakai tracking, namun harus delay script.
- Checkout: prioritaskan INP, TTFB, stabilitas form.
Cara Menegakkan Budget Tanpa Drama Tim
Performance budget baru berguna kalau masuk workflow. Jadi, jangan simpan di dokumen yang cuma dibuka saat audit tahunan.
- Ukur halaman penting dengan PageSpeed Insights.
- Bandingkan data lab dengan Core Web Vitals.
- Audit request berat via Chrome DevTools atau WebPageTest.
- Tambahkan checklist performa ke QA sebelum publish.
- Tolak fitur baru jika melewati budget tanpa trade-off.
Untuk benchmark awal, kamu juga bisa pakai cara cek GTmetrix dan Google PageSpeed Insights.
Template Budget Siap Pakai
| Area | Batas Aman |
| JavaScript | ≤ 170 KB compressed |
| CSS | ≤ 80 KB compressed |
| Font | ≤ 2 family, ≤ 4 file |
| Hero image | ≤ 200 KB |
| Total request | ≤ 60 untuk halaman konten |
| Plugin aktif | Audit dampak, bukan cuma jumlah |
| LCP | < 2,5 detik |
| INP | < 200 ms |
| CLS | < 0,1 |
Kesimpulan: Situs Cepat Butuh Batas, Bukan Tebakan
WordPress performance budget membantu agensi, freelancer, dan product team menjaga website tetap cepat saat fitur terus bertambah. Selain itu, budget membuat diskusi lebih sehat karena semua orang melihat angka yang sama.
Mulai dari batas JS, CSS, font, gambar, dan plugin. Setelah itu, ukur rutin, revisi budget, lalu jadikan performa sebagai bagian dari proses, bukan kerja beres-beres setelah situs terlanjur bengkak.
Punya batas performa favorit buat project WordPress-mu? Tinggalkan komentar, biar tim lain bisa nyontek dengan aman.
