{ "title": "Web Sitelerinde Performans Bütçesi Belirleme ve Takip Rehberi: Dijital Stratejinizi Hızlandırın", "slug": "web-sitelerinde-performans-butcesi-belirleme-ve-takip-rehberi", "summary": "Modern web geliştirme süreçlerinde sitenizin hızını ve kullanıcı deneyimini korumak için performans bütçesi (performance budget) oluşturma, izleme ve otomasyon adımlarını keşfedin.", "content": "

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

Modern web ekosisteminde kullanıcı deneyimi, dönüşüm oranları ve arama motoru sıralamaları doğrudan site hızına bağlıdır. Bir web sitesini ilk yayına alırken hızlı tasarlamak görece kolay olsa da, zamanla eklenen yeni özellikler, üçüncü parti izleme kodları ve optimize edilmemiş görsel varlıklar sitenin yavaşlamasına yol açar. İşte bu noktada performans bütçesi (performance budget), teknik ve ürün ekipleri için aşılmaması gereken kesin sınırlar çizen stratejik bir kılavuz görevi görür.

Performans bütçesi; sayfa ağırlığı, istek sayısı, yükleme süreleri veya Core Web Vitals metrikleri üzerine konulan ölçülebilir sınırlardır. Başarılı bir dijital strateji, performans bütçesini yalnızca teknik bir hedef olarak değil, doğrudan iş hedefleri ve müşteri memnuniyetiyle hizalanmış bir standart olarak konumlandırır.

Adım Adım Performans Bütçesi Belirleme Süreci

Bu rehber, siteniz için gerçekçi, sürdürülebilir ve ölçülebilir bir performans bütçesi oluşturmanız için gereken tüm adımları ayrıntılarıyla ele almaktadır.

1. Mevcut Durum Analizi ve Rakip Kıyaslaması (Benchmarking)

Bütçe belirlemenin ilk adımı, mevcut web sitenizin durumunu ve sektördeki doğrudan rakiplerinizi analiz etmektir. Rakiplerinizden en az %20 daha hızlı olmak, kullanıcı tarafından hissedilebilir bir hız avantajı sağlar.

Laboratuvar Verileri: Google Lighthouse, WebPageTest ve PageSpeed Insights gibi araçlarla mevcut değerlerinizi kaydedin.
Saha Verileri (RUM): Chrome User Experience Report (CrUX) veya kendi analitik araçlarınızla gerçek kullanıcıların deneyimlediği yükleme sürelerini belirleyin.
Rakip Analizi: Sektördeki ilk 3 rakibinizin LCP, FID/INP ve sayfa ağırlığı metriklerini belgeleyin.

2. Hangi Metriklerin Bütçeleneceğini Seçme

Performans bütçesi oluştururken üç ana metrik kategorisini harmanlamak en etkili yaklaşımdır:

Miktar Bazlı Metrikler (Milestone Metrics): Toplam JavaScript boyutu (maks. 300 KB gzipped), toplam CSS boyutu (maks. 50 KB), toplam görsel ağırlığı (maks. 800 KB) ve toplam HTTP istek sayısı (maks. 50 istek).
Kullanıcı Odaklı Zamanlama Metrikleri (Core Web Vitals):
- Largest Contentful Paint (LCP): 2.5 saniyenin altında olmalı.
- Interaction to Next Paint (INP): 200 ms'nin altında tutulmalı.
- Cumulative Layout Shift (CLS): 0.1 değerinin altında sabitlenmeli.
- Time to First Byte (TTFB): 800 ms altında hedeflenmeli.
Kural ve Skor Bazlı Metrikler: Lighthouse Performans Skoru (örn. Mobil için minimum 90 puan).

İpucu: Tüm sayfa tipleri aynı bütçeye sahip olamaz. Ana sayfa, ürün detay sayfası (PDP) ve ödeme (checkout) adımları için farklı kritik eşik değerleri belirleyin.

3. Eşik Değerlerinin (Thresholds) Tanımlanması

Bütçenizi tanımlarken mevcut durum ile ideal hedef arasında köprü kurun. Örneğin mevcut JavaScript yükünüz 800 KB ise, bir gecede 200 KB hedefine ulaşmak gerçekçi olmayabilir. Kademeli hedefler koyun ve her sprint döngüsünde bütçeyi optimize edin.

Performans Bütçesini Takip Etme ve Süreçleri Otomize Etme

Belirlenen bütçeler bir dokümanda unutulursa değerini yitirir. Başarının sırrı, bütçe denetimini geliştirme yaşam döngüsüne (CI/CD) entegre etmektir.

CI/CD Pipeline Entegrasyonu

Kod tabanına yapılan her katkıda (pull request) performans bütçesinin aşılıp aşılmadığını otomatik olarak test edebilirsiniz:

bundlesize / size-limit: Webpack veya Vite çıktılarında JavaScript/CSS bundle boyutlarını sınırlandırmak için kullanılır. Belirlenen KB aşıldığında derleme (build) işlemi başarısız olur.
Lighthouse CI (LHCI): PR açıldığında otomatik olarak Lighthouse testlerini çalıştırır ve belirlenen Core Web Vitals veya performans skorları karşılanmadığında merge işlemini engeller.
Performance Budget JSON: WebPageTest üzerinde budget.json dosyası tanımlayarak otomatik test koşumlarında alarm üretebilirsiniz.

Gerçek Kullanıcı İzleme (RUM) ile Canlı Takip

Sentetik testler laboratuvar ortamını simüle eder; ancak gerçek kullanıcıların farklı ağ koşulları ve cihazları vardır. Datadog, New Relic veya Vercel Speed Insights gibi RUM araçlarıyla bütçe sapmalarını anlık olarak izleyin.

Modern Web Trendleri ve Performans Bütçesi

Gelişen web trendleri, performans bütçesi yönetimini geleneksel dosya boyutu kontrolünden çok daha geniş bir kapsama taşımıştır:

Headless & Jamstack Mimarileri: API yanıt süreleri ve hydration maliyetleri için ayrı performans bütçeleri oluşturulmaktadır.
Üçüncü Parti (3rd Party) Script Yönetimi: Pazarlama, analitik ve reklam etiketlerinin sayfa ana iş parçacığını (main thread) kilitlememesi için üçüncü parti kodlara özel CPU çalıştırma süresi bütçeleri (maks. 500 ms) tanımlanmaktadır.
Edge Rendering & Server Components: Sunucu tarafında işlenen bileşenlerle istemciye gönderilen JavaScript yükünün azaltılması, bütçe uyumluluğunu kolaylaştırmaktadır.

Performans Bütçesi Yönetiminde En İyi Uygulamalar (Best Practices)

Bütçe Aşımında Net Protokoller Oluşturun: Bütçe aşıldığında ne yapılacağını önceden belirleyin: Ya yeni eklenen özellik optimize edilmeli ya da aynı ağırlıkta eski bir özellik/kod parçası silinmelidir ("One in, one out" kuralı).
Tüm Ekipleri Dahil Edin: Performans yalnızca yazılım ekibinin sorumluluğu değildir; tasarımcılar (UI/UX), ürün yöneticileri ve pazarlama ekipleri de bütçenin sınırlarını bilmeli ve buna saygı göstermelidir.
Düzenli Denetim (Audit) Takvimi Belirleyin: Ayda bir veya çeyrek dönemlerde performans bütçenizi gözden geçirin ve değişen web standartlarına göre güncelleyin.

", "schema_type": "HowTo", "suggested_tags": [ "performans butcesi", "web performance", "core web vitals", "dijital strateji", "lighthouse ci", "rehber", "site hizi optimizasyonu", "trendler" ] }