Web Sitelerinde Performans Bütçesi Belirleme ve Takip Rehberi
Modern web projelerinde hız ve kullanıcı deneyimini korumak için performans bütçesi belirleme, metrik seçimi ve otomatik takip adımları.
Sistem Yöneticisi
Kıdemli Yazılım Mimarı
Performans Bütçesi Nedir?
Performans bütçesi, web sayfası geliştirme sürecinde aşılmaması gereken teknik sınırları belirler. Sayfa boyutu, istek sayısı ve Core Web Vitals skorları bu sınırlar içine girer. Modern web dünyasında dijital ajans ekipleri ve geliştiriciler için projenin yavaşlamasını engelleyen teknik bir sözleşmedir.
Adım 1: Bütçe Metriklerini Seçme
Bütçe oluştururken üç ana metrik kategorisi kullanılır:
- Miktar Metrikleri: Toplam JavaScript boyutu (örn: gzip sonrası maksimum 170 KB), toplam CSS boyutu (maksimum 50 KB), görsel ağırlığı ve toplam HTTP istek sayısı.
- Zamanlama / Dönüm Noktası Metrikleri: DOMContentLoaded, Time to First Byte (TTFB).
- Kullanıcı Odaklı Metrikler (Core Web Vitals): Largest Contentful Paint (LCP ≤ 2.5s), Interaction to Next Paint (INP ≤ 200ms), Cumulative Layout Shift (CLS ≤ 0.1).
Adım 2: Mevcut Durumu ve Rakipleri Analiz Etme
Limitleri belirlemeden önce mevcut durum test edilmelidir:
- WebPageTest veya Lighthouse ile mevcut sayfa ağırlıklarını ölçün.
- Sektördeki en hızlı 3 rakibin metriklerini çıkarın. Trendler gereği rekabet avantajı için bütçeyi en hızlı rakibin %20 altında belirleyin.
Adım 3: Bütçe Limitlerini Kod Tabanına Tanımlama
Bütçe manuel takip edilmez; otomatikleştirilir. bundlesize veya size-limit gibi araçlarla package.json içine limit ekleyin:
"size-limit": [ { "path": "dist/assets/*.js", "limit": "150 KB" } ]
Adım 4: Lighthouse CI ile Otomasyon
Modern web projelerinde PR (Pull Request) aşamasında derlemeyi durduran lighthouserc.json konfigürasyonu uygulayın:
- CI/CD pipeline (GitHub Actions, GitLab CI) içine Lighthouse CI entegre edin.
- Belirlenen assertion limitleri aşılırsa build işlemini hata verdirerek durdurun.
Adım 5: RUM (Real User Monitoring) ile Canlı Takip
Laboratuvar verileri sahadaki kullanıcı deneyimini birebir yansıtmaz. Canlı ortamı izlemek için:
- Chrome User Experience Report (CrUX) API verilerini periyodik kontrol edin.
- Performans regresyonu oluştuğunda anlık uyarı veren izleme araçları kurun.
Dijital Ajanslar İçin En İyi Pratikler
Bu rehber kapsamında ajansların müşteri teslim süreçlerinde performans bütçesini sözleşmeye ve 'Definition of Done' kriterlerine dahil etmesi önerilir. Yeni özellik eklenirken mevcut bütçe aşılıyorsa optimizasyon yapılmadan dağıtım gerçekleştirilmemelidir.