Günümüz dijital dünyasında hız, yalnızca teknik bir parametre değil; dönüşüm oranlarını, arama motoru sıralamalarını ve marka algısını doğrudan etkileyen kritik bir dijital strateji bileşenidir. Web siteniz zaman içinde yeni özellikler, üçüncü taraf scriptler, yüksek çözünürlüklü görseller ve karmaşık kütüphanelerle şişme eğilimi gösterir. Bu kontrolsüz büyümeyi engellemenin ve hız standartlarını korumanın en etkili yolu Performans Bütçesi (Performance Budget) uygulamaktır.

Bu rehber içeriğimizde, modern web geliştirme süreçlerinin vazgeçilmezi haline gelen performans bütçesinin ne olduğunu, nasıl belirleneceğini, CI/CD hatlarına nasıl entegre edileceğini ve güncel trendler ışığında nasıl takip edileceğini adım adım inceleyeceğiz.

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

Performans bütçesi; tasarım, ürün ve yazılım ekiplerinin web sitesini geliştirirken aşmaması gereken önceden tanımlanmış teknik ve kullanıcı deneyimi sınırlarıdır. Tıpkı bir finansal bütçe gibi çalışır: Yeni bir özellik veya üçüncü taraf analitik aracı eklemek istiyorsanız, ya bütçe limitleri içinde kalmalı ya da mevcut başka bir yükten feragat ederek yer açmalısınız.

Önemli Kural: Bir performans bütçesi belirlenmediğinde, 'performans regresyonu' (kod tabanının zamanla yavaşlaması) kaçınılmaz hale gelir. Bütçe, performansı reaktif bir sorun çözme sürecinden proaktif bir tasarım ve geliştirme prensibine dönüştürür.

Performans Bütçesi Türleri

Etkili bir bütçe oluşturmak için tek bir metriğe bağlı kalmak yerine çok katmanlı bir yaklaşım benimsemek gerekir. Bütçeler temel olarak üç ana kategoriye ayrılır:

Kaynak Boyutu ve Sayısı Bazlı Bütçeler: Toplam sayfa ağırlığı, sıkıştırılmış JavaScript dosya boyutu (ör. < 170 KB gzipped), CSS boyutu (< 50 KB), görsel toplamı (< 800 KB) ve HTTP istek sayısı gibi ham dosya sınırları.
Zaman / Kullanıcı Deneyimi Metrikleri (Core Web Vitals): Largest Contentful Paint (LCP < 2.5s), Interaction to Next Paint (INP < 200ms) ve Cumulative Layout Shift (CLS < 0.1) gibi Google kullanıcı deneyimi metrikleri.
Kural Tabanlı / Skor Metrikleri: Google Lighthouse Performans Skoru (≥ 90), Speed Index (< 3.0s) ve Time to First Byte (TTFB < 0.8s) gibi sentetik test skorları.

Adım Adım Performans Bütçesi Nasıl Belirlenir?

Adım 1: Mevcut Durumu ve Rakipleri Analiz Edin

Bütçe belirlerken ilk adım, sitenizin mevcut metriklerini ve sektördeki en hızlı rakiplerinizi ölçmektir. WebPageTest, PageSpeed Insights veya Chrome UX Report (CrUX) kullanarak rakiplerinizin LCP, sayfa boyutu ve JS ağırlıklarını listeleyin.

Hedefiniz, kullanıcı deneyiminde rekabette en az %20 daha hızlı hissedilen bir deneyim sunmak olmalıdır. Psikofizik araştırmalara göre kullanıcılar aradaki hız farkını ancak %20 veya daha büyük bir değişim olduğunda bilinçli olarak fark edebilir.

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

Tüm sayfalar aynı işlevselliğe ve içeriğe sahip değildir. Bu nedenle tek bir genel bütçe yerine sayfa şablonu bazında sınırlar belirleyin:

Ana Sayfa: Görsel odaklı, LCP < 2.0s, Toplam JS < 150 KB.
Ürün / Detay Sayfası: İnteraktif elementler ve e-ticaret scriptleri, INP < 150ms, Toplam Sayfa Ağırlığı < 1.2 MB.
Kayıt / Ödeme (Checkout) Sayfaları: Yüksek dönüşüm kritikliği, Minimum 3. parti script, TTFB < 400ms.

Adım 3: Sınırları ve Eşik Değerleri Belirleyin

Aşağıdaki örnek tablo, orta ölçekli bir e-ticaret veya kurumsal web sitesi için başlangıç performans bütçesi standardını göstermektedir:

LCP (Largest Contentful Paint): Maksimum 2.2 saniye (Mobil 4G)
INP (Interaction to Next Paint): Maksimum 150 ms
CLS (Cumulative Layout Shift): Maksimum 0.05
Toplam İlk Yükleme JavaScript (gzipped): Maksimum 180 KB
CSS Dosya Boyutu: Maksimum 45 KB
Üçüncü Taraf (3rd Party) Script Sayısı: Maksimum 6 adet

Performans Bütçesini Takip Etmek ve Otomatikleştirmek

Belirlenen bir bütçe, geliştirme sürecine entegre edilmediği sürece sadece dökümanda kalır. Takibi otomatikleştirmek için aşağıdaki araçlar ve yöntemler kullanılmalıdır:

1. Lighthouse CI ile Pull Request (PR) Kontrolü

Lighthouse CI, her kod birleştirme (merge) isteğinde sitenizi derleyip sentetik testler çalıştırır. Bütçe aşıldığında PR'ı otomatik olarak bloke edebilir. Projenizin kök dizinine bir lighthouserc.json dosyası ekleyerek kuralları tanımlayabilirsiniz:

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

2. Paket (Bundle) Boyutu Takibi: size-limit veya bundlesize

Modern frontend framework'lerinde (React, Vue, Next.js vb.) yeni bir npm paketi eklendiğinde JavaScript boyutunun aniden fırlamasını engellemek için size-limit gibi araçlar kullanılır. package.json dosyanıza limitler tanımlayarak build aşamasında kontrol sağlayabilirsiniz.

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

Performans Bütçesi Aşıldığında Uygulanacak Eylem Planı

Geliştirme sürecinde bütçe sınırlarına takıldığınızda panik yapmak yerine şu optimizasyon adımlarını devreye sokun:

Ağır Kütüphaneleri İnceleyin: Moment.js yerine Day.js, Lodash yerine natif ES6 metodları veya modüler importlar tercih edin.
Code Splitting (Kod Bölümleme): Kullanıcının ilk anda ihtiyaç duymadığı modal, form veya alt panel scriptlerini dinamik import (import()) ile erteleyin.
Yeni Nesil Görsel Formatları: JPEG/PNG yerine WebP ve AVIF formatlarına geçin, responsive <picture> etiketlerini kullanın.
Üçüncü Taraf Scriptleri Sorgulayın: Pazarlama ekibiyle görüşerek kullanılmayan veya artık veri toplamayan etiket yöneticisi (GTM) scriptlerini temizleyin.

Web Performansında Yeni Trendler ve Dijital Strateji

Web ekosistemindeki son trendler, performans bütçelerinin sadece sayfa açılış hızından ibaret olmadığını; kullanıcı etkileşimi ve çalışma zamanı (runtime) verimliliğine odaklandığını gösteriyor. Özellikle 2024 itibarıyla FID'in yerini alan INP (Interaction to Next Paint) metriği, ana thread (main-thread) bloklanmalarını bütçelendirmenin ne kadar hayati olduğunu ortaya koydu.

Kurumsal seviyede başarılı bir dijital strateji, performans bütçesini mühendislik ekibinden ürün yöneticilerine, UI/UX tasarımcılarından pazarlama ekiplerine kadar herkesin benimsediği bir şirket kültürü haline getirmeyi gerektirir.

Özet

Performans bütçesi belirlemek tek seferlik bir proje değil, yaşayan bir optimizasyon döngüsüdür. Bu rehber ile temelini attığınız sınırları periyodik olarak gözden geçirin, CI/CD süreçlerinizle otomatikleştirin ve kullanıcılarınıza her zaman ışık hızında bir deneyim sunun.