Performance Budget — Performance

Performance Budget Performance budget adalah batasan yang kita tetapkan untuk metrik performance website. Tanpa budget, performance cenderung memburuk seiring…

Performance budget adalah batas maksimum yang kamu tetapkan sendiri untuk performance halaman, dan gak boleh dilampaui: misalnya "total JavaScript maksimal 300 KB" atau "LCP maksimal 2,5 detik". Mirip uang jajan bulanan. Kalau jatahnya Rp500.000 sebulan, tiap mau beli sesuatu kamu cek dulu masih cukup atau gak. Tanpa batas itu, jajan kecil-kecil menumpuk dan akhir bulan uangnya tiba-tiba habis. Halaman web juga begitu: tiap fitur menambah sedikit, lama-lama halamannya berat.

🧪 Tebakan cepat: budget JavaScript 300 KB, dan batas satu file juga 300 KB. Halamanmu punya app.js 200 KB dan vendor.js 250 KB. Dua-duanya di bawah 300 KB. Lolos atau gak? Jawabannya ada di bagian "Cek budget pakai kode".

Jenis budget

Budget ukuran paling gampang dicek, karena ukuran tiap file langsung kelihatan setiap kali proyeknya di-build. Build adalah proses mengubah kode sumbermu jadi file siap kirim (bundle).

Menentukan angkanya

Kenapa JavaScript dijaga ketat? JavaScript gak cuma di-download. Browser masih harus membaca (parse), meng-compile, lalu menjalankannya, dan di HP murah semua itu lambat. Gambar 200 KB dan JavaScript 200 KB sama besarnya, tapi JavaScript jauh lebih mahal.

Cek budget pakai kode

Budget di latihan, semuanya dalam KB:

const budget = { maxTotalJS: 300, maxTotalCSS: 100, maxTotalImage: 500, maxSingleAsset: 300 };
const assets = [
  { name: "app.js", sizeKB: 200, type: "js" },
  { name: "vendor.js", sizeKB: 250, type: "js" },
  { name: "style.css", sizeKB: 50, type: "css" },
];

Ada dua jenis cek: total per jenis file, dan batas untuk satu file (maxSingleAsset). Tiap pelanggaran jadi satu kalimat, dan kalau gak ada pelanggaran sama sekali, budget-nya lolos:

function checkBudget(assets, budget) {
  const violations = [];
  const totals = { js: 0, css: 0, image: 0 };

  for (const asset of assets) {
    if (asset.type in totals) totals[asset.type] += asset.sizeKB; // font gak punya batas total
  }

  if (totals.js > budget.maxTotalJS) {
    violations.push(`JS total ${totals.js}KB exceeds ${budget.maxTotalJS}KB limit`);
  }
  if (totals.css > budget.maxTotalCSS) {
    violations.push(`CSS total ${totals.css}KB exceeds ${budget.maxTotalCSS}KB limit`);
  }
  if (totals.image > budget.maxTotalImage) {
    violations.push(`Image total ${totals.image}KB exceeds ${budget.maxTotalImage}KB limit`);
  }

  for (const asset of assets) {
    if (asset.sizeKB > budget.maxSingleAsset) {
      violations.push(`${asset.name} (${asset.sizeKB}KB) exceeds ${budget.maxSingleAsset}KB single asset limit`);
    }
  }

  return { passed: violations.length === 0, violations };
}

console.log(checkBudget(assets, budget));
// { passed: false, violations: ["JS total 450KB exceeds 300KB limit"] }
Cek Hitungan Hasil
Total JS 200 + 250 = 450, lebih dari 300 melanggar
Total CSS 50, gak lebih dari 100 aman
Total gambar 0, gak lebih dari 500 aman
Tiap file, lebih dari 300? 200, 250, 50 aman

Itu jawaban tebakannya: gak lolos. Tiap file memang di bawah 300 KB, tapi total JavaScript-nya 450 KB.

Pasang di build

Budget cuma berguna kalau dicek otomatis. Caranya, jalankan cek seperti di atas setiap kali proyek di-build, misalnya di CI (continuous integration, server yang menjalankan build dan tes untuk tiap perubahan). Kalau budget-nya jebol, build dibuat gagal:

const hasil = checkBudget(assets, budget);
if (!hasil.passed) {
  console.error(hasil.violations.join("\n"));
  process.exit(1); // kode keluar selain 0: CI menganggap build-nya gagal
}

Perubahan yang bikin halaman lebih berat langsung ketahuan sebelum sampai ke pengguna. Alat seperti Lighthouse CI dan size-limit melakukan hal yang sama tanpa kamu tulis sendiri.

⚠️ Jebakan yang sering ketemu

TL;DR: Performance budget adalah batas maksimum ukuran file, waktu, atau skor yang gak boleh dilampaui, supaya halaman gak melambat pelan-pelan. Patokan awal yang sering dipakai untuk JavaScript: sekitar 200 KB setelah gzip. Cek dua hal: total per type (JS, CSS, gambar) dan ukuran tiap file, pakai >. Tulis pelanggarannya persis, total dulu baru per file: "JS total 450KB exceeds 300KB limit" dan "chart.js (350KB) exceeds 300KB single asset limit", lalu passed bernilai true kalau violations kosong. Jalankan ceknya di build, supaya budget yang jebol bikin build gagal.

Yang akan kamu pelajari