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

Performans bütçesi, web sayfası geliştirilirken aşılmaması gereken teknik sınırları (dosya boyutu, istek sayısı, yükleme süresi, Core Web Vitals skorları) tanımlayan kurallar bütünüdür. Modern web ekosisteminde gereksiz JavaScript yükleri, devasa medya dosyaları ve kontrolsüz üçüncü parti kütüphaneler siteleri yavaşlatır. Performans bütçesi, tasarım ve geliştirme süreçlerinde ekibe kesin sınırlar çizerek bu bozulmayı önler.

1. Adım: Bütçelenecek Metrik Türlerini Belirleyin

Başarılı bir rehber stratejisi için üç temel metrik grubunu bütçelemek gerekir:

Miktar Bazlı Metrikler (Milestone / Quantity): Toplam JavaScript boyutu (maks. 150-200 KB gzipped), toplam CSS boyutu (maks. 50 KB), görsel ağırlığı ve toplam HTTP istek sayısı.
Kullanıcı Odaklı Zamanlama Metrikleri (Core Web Vitals): Largest Contentful Paint (LCP < 2.5s), Interaction to Next Paint (INP < 200ms), Cumulative Layout Shift (CLS < 0.1) ve First Contentful Paint (FCP < 1.8s).
Kural Bazlı Skorlar: Lighthouse Performans skoru (> 90) veya PageSpeed puan hedefleri.

2. Adım: Gerçekçi Bütçe Değerleri Hesaplayın

Bütçe değerlerini belirlerken sektör trendleri ve rakip analizi temel alınmalıdır:

%20 Kuralı: İnsan beyni, hız farkını en az %20 değişim olduğunda algılar. Rakiplerinizden hissedilir derecede hızlı olmak için sayfa metriklerinizi en az %20 daha agresif planlayın.
Hedef Kitle ve Cihaz Profili: Mobil kullanıcı oranı yüksek projelerde 3G/4G yavaş bağlantı ve orta segment mobil CPU profili üzerinden bütçe oluşturun.

3. Adım: Geliştirme Araçlarında Bütçe Tanımlama

Performans bütçesini kodlama aşamasında takip etmek için kullanılan temel yöntemler:

Webpack / Vite Performans Sınırları

Paketleyici seviyesinde sınır aşımında derlemeyi uyaran veya durduran konfigürasyon:

module.exports = {
  performance: {
    maxAssetSize: 200000,
    maxEntrypointSize: 400000,
    hints: 'error'
  }
};

Lighthouse Budget (budget.json)

Lighthouse CI ile otomatik test edilen bütçe şablonu:

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

4. Adım: CI/CD Pipeline Entegrasyonu ve Otomasyon

Bütçenin delinmemesi için pull request (PR) aşamasında otomatik kontroller çalıştırılmalıdır:

Lighthouse CI (LHCI): Her commit için headless tarayıcıda performans bütçesini doğrular, bütçe aşılırsa PR birleştirmesini engeller.
Bundlesize / Size Limit: Üretilen derleme çıktılarının byte bazında bütçeyi aşıp aşmadığını PR üzerinde raporlar.
RUM (Real User Monitoring) Entegrasyonu: Canlı ortamda gerçek kullanıcı verilerini toplayarak bütçe sapmalarında bildirim üretir.

Dijital Ajans ve Geliştirme Ekipleri İçin En İyi Pratikler

Bir dijital ajans veya yazılım ekibinde performans bütçesinin sürdürülebilir olması için iş akışı kuralları:

Bütçe Takası (Budget Trade-off): Sayfaya yeni bir JS kütüphanesi veya analitik aracı eklenecekse, aynı boyutta eski bir bağımlılık silinmeli veya optimize edilmelidir.
Tasarım Aşamasında Bütçe: Özel web fontları, video arka planlar ve animasyonlar tasarlanırken bütçe limitleri gözetilmelidir.
Üçüncü Parti Kısıtlamaları: Pazarlama scriptleri için harici tag yöneticisi bütçesi (maksimum yükleme ve CPU bloklama süresi) zorunlu tutulmalıdır.