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

Performans bütçesi, web projesinin aşmaması gereken teknik limitler bütünüdür. Sayfa ağırlığı, istek sayısı, yükleme süresi ve Core Web Vitals metrikleri için üst sınırlar koyar. Tasarım, geliştirme ve yayın aşamalarında hız kaybını engeller.

Neden Performans Bütçesi Belirlenmeli?

Geliştirme sürecinde kütüphaneler, yazı tipleri ve büyük medya dosyaları kontrolsüzce eklenir. Bir dijital ajans veya yazılım ekibi için performans bütçesi koymak teknik borcu baştan önler. Modern web standartlarında arama motoru sıralaması ve dönüşüm oranları doğrudan hız ile bağlantılıdır.

Temel Metrik Türleri

1. Boyut ve Kaynak Bütçeleri

Toplam Sayfa Boyutu: İlk yüklemede maksimum 1 MB - 1.5 MB hedefi.
JavaScript Boyutu: Gzip/Brotli sonrası sıkıştırılmış maksimum 150 KB - 200 KB.
CSS Boyutu: Maksimum 50 KB - 70 KB.
Görseller ve Fontlar: WebP/AVIF formatında görseller, WOFF2 formatında optimize fontlar (maksimum 100 KB).
HTTP İstek Sayısı: İlk yüklemede 50 isteğin altı.

2. Kullanıcı Deneyimi ve Zamanlama Metrikleri (Core Web Vitals)

LCP (Largest Contentful Paint): 2.5 saniyenin altında.
INP (Interaction to Next Paint): 200 milisaniyenin altında.
CLS (Cumulative Layout Shift): 0.1 değerinin altında.
TTFB (Time to First Byte): 800 milisaniyenin altında.

Adım Adım Performans Bütçesi Belirleme

Adım 1: Mevcut Durumu ve Rakipleri Analiz Edin

Google PageSpeed Insights, Chrome DevTools ve WebPageTest kullanarak mevcut sitenizi ve sektördeki rakipleri ölçün. En hızlı rakibin %20 önünde olmayı hedefleyin.

Adım 2: Kritik Sayfa Tiplerini Sınıflandırın

Her sayfanın gereksinimi farklıdır. Bütçeyi şablon bazlı ayırın:

Açılış Sayfası (Landing Page): Maksimum 1 MB, 1.8s LCP.
E-Ticaret Ürün Detay: Maksimum 1.5 MB, 2.0s LCP.
Kullanıcı Paneli (Dashboard): Zengin JS etkileşimi, maksimum 300 KB JS.

Adım 3: Bütçeyi Tanımlayın ve Dokümante Edin

Tasarımcılar, içerik yöneticileri ve yazılımcıların erişebileceği ortak bir bütçe tablosu oluşturun. Tasarımda özel font sayısını sınırlandırın, içerik girişlerinde görsel optimizasyon kurallarını belirleyin.

Bütçe Takibi ve CI/CD Entegrasyonu

Bütçeyi manuel takip etmek sürdürülebilir değildir. Otomasyon araçları ile geliştirme sürecine entegre edin:

1. Lighthouse CI (LHCI)

GitHub Actions veya GitLab CI süreçlerinde her Pull Request için test çalıştırın. Bütçe aşıldığında build işlemini durdurun:

// lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "first-contentful-paint": ["error", {"maxNumericValue": 2000}],
        "interactive": ["error", {"maxNumericValue": 3500}],
        "resource-summary:script:size": ["error", {"maxNumericValue": 170000}]
      }
    }
  }
}

2. bundlesize ve Size Limit

Paket boyutunu kontrol etmek için JavaScript derleme aşamasına ekleyin:

// package.json
"size-limit": [
  {
    "path": "dist/assets/*.js",
    "limit": "150 KB"
  }
]

Bütçe Aşıldığında Uygulanacak Aksiyonlar

Kural basittir: Yeni bir özellik eklendiğinde bütçe aşılıyorsa, ya mevcut bir kod optimize edilir ya da gereksiz bir özellik sistemden çıkarılır.

Kullanılmayan CSS ve JS kodlarını (Tree Shaking) temizleyin.
Büyük kütüphaneler yerine yerel (native) tarayıcı API'larını veya hafif alternatifleri tercih edin (ör. Moment.js yerine date-fns/native Intl).
Lazy loading mekanizmasını görsel, iframe ve bileşen bazında aktif edin.
Font yükleme stratejilerini güncelleyin (font-display: swap, subsetting).

Performans Yönetiminde Öne Çıkan Trendler

Modern web mimarisinde performans statik bir kontrol listesi değil, canlı bir metriktir. Öne çıkan trendler:

Real User Monitoring (RUM): Yalnızca laboratuvar verilerine değil, gerçek kullanıcı deneyimi verilerine göre anlık bütçe alarmları kurma.
Edge Computing & Server Components: İstemciye giden JavaScript yükünü azaltmak için sunucu tarafı rendering ve edge fonksiyon kullanımı.
Görsel Formatlarında AVIF Standardı: WebP'ye kıyasla %20-30 daha yüksek sıkıştırma verimi ile görsel bütçelerini genişletme.