Performans Bütçesi Nedir ve Neden Gereklidir?

Performans bütçesi, web sayfası geliştirilirken aşılmaması gereken teknik sınırları tanımlayan kurallar bütünüdür. Sayfa ağırlığı, istek sayısı ya da Core Web Vitals eşikleri bu sınırlara dahildir. Modern web standartlarında, tasarım ve geliştirme aşamasında performans kayıplarını engeller. Her dijital ajans ve yazılım ekibi, proje büyümesiyle artan kaynak yükünü bu yöntemle kontrol altında tutar.

Performans bütçesi olmayan projeler zamanla kaçınılmaz şekilde yavaşlar. Bütçe, teknik borcu büyümeden önler.

Adım 1: Bütçe Türlerini Belirleyin

Performans takibinde üç temel metrik kategorisi kullanılır:

Boyut ve Sayı Bütçeleri: Toplam JavaScript, CSS, görsel ağırlığı ve HTTP istek adedi sınırları. Örnek: Maksimum 150 KB sıkıştırılmış JavaScript, 500 KB toplam sayfa yükü.
Zaman Tabanlı Metrikler: Sayfa yükleme süreçleri. Örnek: Time to Interactive (TTI), First Contentful Paint (FCP).
Kullanıcı Deneyimi Metrikleri (Core Web Vitals): Google sıralama faktörleri ve gerçek kullanıcı deneyimi. Örnek: LCP < 2.5s, INP < 200ms, CLS < 0.1.

Adım 2: Mevcut Durumu ve Rakipleri Analiz Edin

Bütçe oluşturmadan önce baz değer (baseline) çıkarın. Sektördeki trendler ve rakip performansları incelenmelidir:

WebPageTest veya Lighthouse ile mevcut sitenizin ve en hızlı 3 rakibinizin raporunu alın.
%20 Kuralı: Kullanıcıların fark edebileceği hız artışı için mevcut değerlerden en az %20 daha iyi hedefler koyun.

Adım 3: Bütçe Değerlerini Netleştirin

Örnek modern web bütçe tablosu:

Total JS: ≤ 170 KB (Gzip/Brotli)
Total CSS: ≤ 40 KB (Gzip/Brotli)
Fontlar: ≤ 80 KB (WOFF2 formatı)
LCP: ≤ 2.0 saniye (Mobil 4G)
CLS: ≤ 0.05

Adım 4: Takip Sürecini Otomatize Edin (CI/CD)

Manuel testler bütçenin aşılmasını engelleyemez. Otomasyon kurun:

1. Bundlesize / Size Limit ile Bundle Kontrolü

Paket büyüklüğünü pull request aşamasında test edin. package.json içine limit ekleyin:

Pull request açıldığında belirlenen KB aşıldığında build pipeline'ı kırın.

2. Lighthouse CI Entegrasyonu

GitHub Actions veya GitLab CI üzerinde lighthouserc.json dosyasıyla otomatik denetim başlatın:

Lighthouse assertion kurallarıyla LCP, CLS ve performans skoru eşik altına düştüğünde PR onayını engelleyin.

Adım 5: Dijital Ajans ve Ekipler İçin Kültür Oluşturma

Performans bütçesi sadece yazılımcıların değil, tasarımcıların ve içerik yöneticilerinin de sorumluluğundadır:

Görsel Optimizasyonu: AVIF/WebP kullanımı, CDN üzerinden dinamik boyutlandırma.
Üçüncü Parti Kod Kontrolü: Analitik ve reklam script'lerini GTM üzerinde sıkı denetime tabi tutma.
Periyodik İnceleme: Her çeyrekte metrikleri güncel web trendleri ışığında revize etme.