1. Performans Bütçesi Nedir?

Performans bütçesi, web sayfası geliştirme sürecinde aşılmaması gereken teknik limitler bütünüdür. Sayfa ağırlığı, istek sayısı, Core Web Vitals eşikleri bu bütçeyi tanımlar. Modern web ekosisteminde kod tabanının kontrolsüz büyümesini engeller.

Performans özelliği sonradan eklenen bir yama değil, baştan konulan bir kısıtlamadır.

2. Bütçe Türleri ve Temel Metrikler

Boyut Bütçeleri: Toplam JavaScript (örn. < 150 KB gzip), CSS (< 50 KB gzip), web fontları ve optimize görseller.
Zamanlama Metrikleri (Core Web Vitals): LCP < 2.5s, INP < 200ms, CLS < 0.1, TTFB < 800ms.
Kural Bütçeleri: Lighthouse Performance Skoru > 90.

3. Adım Adım Bütçe Belirleme

Adım 1: Mevcut Durumu ve Rakipleri Ölçün

PageSpeed Insights, Chrome User Experience Report (CrUX) veya WebPageTest kullanarak mevcut durumu çıkarın. Rakip siteleri kıyaslayın. Kullanıcının fark edeceği hız artışı için metrikleri en az %20 daha iyi hedefleyin.

Adım 2: Dijital Ajans ve Takım İçi Limitleri Netleştirin

Tasarımcı, frontend ve backend ekipleriyle ortak limitler belirleyin. Yeni kütüphane ekleme kararlarını bütçe durumuna bağlayın.

Adım 3: Kritik Render Yolunu Sınırlandırın

İlk yüklemede bloklayıcı CSS ve JS kaynaklarını minimize edin. Kritik olmayan varlıkları lazy-load modeline geçirin.

4. Otomatik Takip ve CI/CD Entegrasyonu

Bütçeleri manuel denetlemek sürdürülemez. Bütçe aşımını derleme anında veya PR kontrollerinde yakalayın.

bundlesize ile JS Paket Takibi

package.json içine limit tanımlayın:

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

Lighthouse CI (LHCI) Yapılandırması

Kök dizine .lighthouserc.json ekleyin:

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "largest-contentful-paint": ["error", {"maxNumericValue": 2500}],
        "cumulative-layout-shift": ["error", {"maxNumericValue": 0.1}]
      }
    }
  }
}

5. Bütçe Aşıldığında Uygulanacak Adımlar

Tree Shaking ve Code Splitting: Kullanılmayan JS kodlarını atın, rotaya göre bölümlendirin.
Modern Formatlar: Resimleri WebP/AVIF formatına, fontları WOFF2 formatına çevirin.
Bağımlılık İncelemesi: bundle-analyzer çalıştırın, ağır kütüphaneleri daha hafif alternatiflerle değiştirin (örn: Moment.js yerine date-fns/Day.js).