Performans Bütçesi Nedir ve Neden Gereklidir?

Performans bütçesi (Performance Budget), web projesinin aşmaması gereken teknik sınırları tanımlar. Sayfa ağırlığı, istek sayısı, yükleme süresi ve Core Web Vitals metriklerine üst limit koyar. Geliştirme sürecinde performans regresyonlarını önler. Dijital ajans ekipleri ve geliştiriciler için net hedef sağlar.

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

Üç temel kategoride metrik seçilir:

Miktar Bazlı (Quantity): Toplam JavaScript boyutu (gzip/brotli), CSS boyutu, görsel ağırlığı, font sayısı, toplam HTTP isteği.
Zaman / Kilometre Taşı Bazlı (Milestone): TTFB (Time to First Byte), FCP (First Contentful Paint), LCP (Largest Contentful Paint).
Kullanıcı Deneyimi / Kural Bazlı (Rule-based): CLS (Cumulative Layout Shift), INP (Interaction to Next Paint), Lighthouse Performance skoru.

2. Adım: Eşik Değerleri Tanımlama

Modern web standartlarına uygun gerçekçi başlangıç eşikleri:

Kritik JS Boyutu: Maksimum 150 KB (gzipped).
Kritik CSS Boyutu: Maksimum 50 KB (gzipped).
LCP: 2.5 saniye altı.
INP: 200 ms altı.
CLS: 0.1 altı.
Lighthouse Performans Skoru: Minimum 90.

Kural: Rakip analizinde fark yaratmak için mevcut en hızlı rakipten en az %20 daha agresif bütçe hedefi koyun.

3. Adım: Bundle Seviyesinde Bütçe Kontrolü

Paketleme aşamasında boyutu sınırlandırmak için size-limit veya paketleyici ayarları kullanılır.

package.json yapılandırma örneği:

{
  "size-limit": [
    {
      "path": "dist/assets/*.js",
      "limit": "150 kb"
    },
    {
      "path": "dist/assets/*.css",
      "limit": "50 kb"
    }
  ]
}

4. Adım: Lighthouse CI ile Otomasyon Kurma

CI/CD pipeline üzerinde her pull request için bütçe denetimi çalıştırılır. Limit aşılırsa build durdurulur.

Proje kök dizinine lighthouserc.json dosyası ekleyin:

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

5. Adım: Canlı Ortamda (RUM) Bütçe Takibi

Laboratuvar verisi tek başına yetersizdir. Canlı kullanıcı izleme (RUM) verileri toplanmalıdır:

web-vitals kütüphanesini projeye ekleyin.
Metrikleri analitik servisine (Google Analytics, Datadog vb.) gönderin.
Aylık trendler incelenerek bütçe sapmalarında kod temizliği yapın.

Dijital Ajans Ekipleri İçin Uygulama Tavsiyeleri

Tasarım aşamasında font ve medya sınırlarını netleştirin.
Yeni kütüphane ekleme taleplerinde bütçe maliyetini zorunlu parametre yapın.
Üçüncü parti takip scriptlerine (GTM, Pixel) ayrı bütçe limiti koyun.