Performans Bütçesi Nedir ve Neden Hayatidir?

Performans bütçesi, web sitesinin sayfa boyutu, yükleme süresi ve kaynak tüketimi için belirlenen katı sınırlardır. Kullanıcı deneyimi, arama motoru sıralaması ve dönüşüm oranları doğrudan hızla bağlantılıdır. Sürdürülebilir bir dijital strateji için performans bütçesi, kod yazımından yayına kadar tüm geliştirme döngüsünü denetler.

Adım 1: Önemli Metrikleri ve Trendleri Belirleme

Performans bütçesi oluştururken hem ham kaynak metrikleri hem de kullanıcı odaklı Core Web Vitals hedefleri seçilir. Güncel web trendler doğrultusunda şu metrik grupları temel alınır:

Kaynak Bütçeleri: Toplam JavaScript boyutu (< 150KB gzipped), CSS boyutu (< 50KB), toplam sayfa ağırlığı (< 1MB).
Milisaniye Bazlı Metrikler: LCP (Largest Contentful Paint < 2.5s), INP (Interaction to Next Paint < 200ms), CLS (Cumulative Layout Shift < 0.1).
Ağ İstekleri: Toplam HTTP istek sayısı (< 40 istek).

Adım 2: Benchmark ve Rakip Analizi Yapma

Mevcut durumu ve sektör standardını görmek için WebPageTest veya Chrome UX Report (CrUX) verileri incelenir:

Sektördeki en hızlı 3 rakibin verileri taranır.
Kendi mevcut LCP, INP, sayfa boyutu değerleri çıkarılır.
Rakip ortalamasının %20 daha altında agresif sınırlar tanımlanır (20% Kuralı: İnsan beyninin hız farkını hissedebilme eşiği).

Adım 3: Lighthouse CI ile Bütçeyi Otomatikleştirme

CI/CD pipeline içine performans kontrolleri eklenir. Sınır aşıldığında derleme işlemi (build) hata verir.

Proje kök dizinine lighthouserc.json dosyası ekleme adımı:

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", {"minScore": 0.9}],
        "first-contentful-paint": ["error", {"maxNumericValue": 1800}],
        "interactive": ["error", {"maxNumericValue": 3500}],
        "resource-summary:script:size": ["error", {"maxNumericValue": 153600}]
      }
    }
  }
}

Adım 4: Paket Boyutu Takibi (Bundlesize Entegrasyonu)

Derleme esnasında bundle boyutlarını kısıtlamak için package.json içine hedef limitler tanımlanır:

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

Adım 5: Sürekli İzleme ve RUM (Real User Monitoring)

Sentetik testler tek başına yetersiz kalır. Gerçek kullanıcı verileri (RUM) izlenmelidir:

Canlı ortamda web-vitals JavaScript kütüphanesi ile kullanıcı metrikleri toplanır.
Analytics veya APM araçlarına (Grafana, Sentry, Datadog) metrikler aktarılır.
Bütçe ihlallerinde takıma anlık Slack/E-posta uyarıları gönderilir.

Kritik Kural: Yeni özellik ekleneceğinde performans bütçesi aşılamaz. Bütçe aşılıyorsa mevcut kod optimize edilir veya kullanılmayan bir kütüphane silinir.