Performans Bütçesi (Performance Budget) Nedir?

Performans bütçesi, web projesinin aşmaması gereken teknik sınırları belirleyen kural setidir. Sayfa ağırlığı, istek sayısı veya metrik bazlı eşikler (LCP, INP, CLS) bu kapsama girer. Tasarımcılar, geliştiriciler ve paydaşlar için net limitler çizer; regülasyon dışına çıkılmasını engeller.

Performans bütçesi olmayan projeler zamanla kaçınılmaz olarak şişer (code bloat). Modern web standartlarında hız, sonradan eklenen bir özellik değil, tasarım aşamasında korunan bir kısıttır.

1. Adım: Bütçe Metriklerini Belirleme

Bir performans bütçesi oluştururken üç ana metrik kategorisi kullanılır:

Boyut/Miktar Tabanlı Metrikler: Toplam JavaScript boyutu (< 150 KB gzip), CSS boyutu (< 50 KB), görsel varlıklar (< 500 KB), toplam HTTP istek sayısı (< 30).
Zaman / Kullanıcı Deneyimi Metrikleri (Core Web Vitals): Largest Contentful Paint (LCP < 2.5s), Interaction to Next Paint (INP < 200ms), Cumulative Layout Shift (CLS < 0.1), Time to First Byte (TTFB < 800ms).
Kural Tabanlı Skorlar: Lighthouse Performans Skoru (> 90).

2. Adım: Baseline Analizi ve Hedef Belirleme

Sıfırdan bütçe oluşturmak yerine mevcut durum ve rakipler baz alınır:

Mevcut Durumu Ölçün: Chrome UX Report (CrUX) veya PageSpeed Insights ile sitenizin gerçek kullanıcı verilerini (RUM) çıkarın.
Rakip Analizi Yapın: Sektördeki en hızlı 3 rakibin metriklerini analiz edin. Rekabet avantajı için hedefinizi rakiplerden en az %20 daha hızlı olacak şekilde tanımlayın.
Bütçeyi Netleştirin: Mobil 4G/3G ağlarını ve orta segment mobil cihazları baz alarak sınırları belirleyin.

3. Adım: Bütçeyi Yapılandırma Dosyalarıyla Tanımlama

Modern web araçlarıyla bütçeleri otomatik kontrol etmek için proje kök dizinine yapılandırma dosyaları ekleyin.

Lighthouse CI Bütçe Dosyası (budget.json)

[
  {
    "resourceSizes": [
      {
        "resourceType": "script",
        "budget": 150
      },
      {
        "resourceType": "image",
        "budget": 300
      },
      {
        "resourceType": "total",
        "budget": 600
      }
    ],
    "resourceCounts": [
      {
        "resourceType": "third-party",
        "budget": 10
      }
    ]
  }
]

Bundlesize Paketi ile Paket Boyutu Takibi

package.json içerisine bundle boyut sınırlarını ekleyin:

"bundlesize": [
  {
    "path": "./dist/assets/*.js",
    "maxSize": "150 kB"
  },
  {
    "path": "./dist/assets/*.css",
    "maxSize": "30 kB"
  }
]

4. Adım: CI/CD Süreçlerine Entegrasyon

Bütçe aşımlarını engellemenin en kesin yolu, bütçe kontrollerini dağıtım hattına (CI/CD) bağlamaktır. Sınır aşıldığında derleme işlemi başarısız olur ve sorunlu kod canlıya alınmaz.

GitHub Actions ile Bütçe Kontrolü

name: Performance CI
on: [pull_request]
jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - name: Run Bundlesize Check
        run: npx bundlesize

5. Adım: Dijital Ajans ve Takım İçi Takip Trendleri

Bir dijital ajans veya ürün ekibi için performans bütçesi yönetimi kültürel bir süreçtir:

Yeni Kütüphane Ekleme Protokolü: Ekibe yeni bir npm paketi eklenmeden önce bundlephobia üzerinden paket maliyetinin kontrol edilmesini şart koşun.
Tasarım-Yazılım Hizalanması: Özel web fontlarının sayısı (maksimum 2 varyasyon) ve video/görsel formatları (WebP/AVIF) tasarım aşamasında sınırlandırılmalıdır.
Sürekli Gözlem: Canlıya çıkan kodların takibi için SpeedCurve, Calibre veya Datadog gibi RUM (Real User Monitoring) araçlarıyla performans sapmalarında anlık uyarı sistemleri kurun.