Web Performans Budget: Metrikler, Limitler ve CI/CD Entegrasyonu

Performans Budget Nedir?

Performans budget, web sayfasının performans metrikleri için belirlenen maksimum değerlerdir. Sayfa boyutu, JavaScript bundle size, LCP süresi gibi.

Amaç: Performans regresyonlarını önlemek. Yeni özellik eklerken performans düşüşünü engellemek.

Budget aşımı: Build fail veya warning. CI/CD pipeline'ında performans kontrolü.

Örnek budget'lar: JS bundle < 200KB, CSS < 50KB, LCP < 2.5s, toplam sayfa boyutu < 1MB.

Performans Metrikleri

Bundle size: JavaScript ve CSS dosya boyutları. Webpack bundle analyzer ile analiz.

LCP (Largest Contentful Paint): En büyük içerik öğesinin yüklenme süresi. < 2.5s hedef.

CLS (Cumulative Layout Shift): Sayfa düzenindeki kaymalar. < 0.1 hedef.

INP (Interaction to Next Paint): Kullanıcı etkileşimine yanıt süresi. < 200ms hedef.

TTFB (Time to First Byte): Sunucu yanıt süresi. < 600ms hedef.

Total page weight: Sayfanın toplam boyutu. < 1-2MB hedef (mobil için).

Budget Oluşturma

Mevcut performansı ölçün: Lighthouse, WebPageTest ile baseline oluşturun.

Hedef belirleyin: Rakip analizi ve kullanıcı beklentilerine göre. Mobil için daha sıkı budget.

Budget dosyası: performance-budget.json ile metrikleri ve limitleri tanımlayın.

Kademeli sıkılaştırma: Başlangıçta mevcut performansa yakın budget. Zamanla sıkılaştırın.

Takım buy-in: Tüm ekip performans budget'ını benimsemeli. Performans, herkesin sorumluluğu.

CI/CD Entegrasyonu

Lighthouse CI: Her PR'da Lighthouse audit. Performance score threshold kontrolü. Budget aşımında build fail.

WebPageTest: CI/CD pipeline'ına WebPageTest entegrasyonu. Filmstrip ve waterfall karşılaştırması.

Bundle size check: webpack-bundle-analyzer veya bundlesize ile bundle boyutu kontrolü.

GitHub Actions: Lighthouse CI action ile otomatik performans testi. PR comment ile sonuç raporu.

Threshold ayarlama: Warning (uyarı) ve error (hata) seviyeleri. Warning: budget'ın %90'ı. Error: budget'ın %100'ü.

Monitoring ve Raporlama

RUM (Real User Monitoring): Gerçek kullanıcı performans verileri. CrUX, Datadog, New Relic.

Synthetic monitoring: Periyodik performans testleri. WebPageTest, Pingdom, GTmetrix.

Dashboard: Performans trend'lerini görselleştirin. Grafana, Datadog dashboard.

Alerting: Budget aşımında alert. Slack, email notification.

Raporlama: Haftalık/aylık performans raporu. Trend analizi ve iyileştirme önerileri.

Best Practices

Performance champion: Ekipte performans sorumlusu belirleyin. Performans kültürünü yaygınlaştırın.

Budget review: Her sprint sonunda budget'ı gözden geçirin. Yeni özellikler için budget ayarlayın.

Trade-off: Yeni özellik vs performans. Her özellik performans maliyeti getirir. Bilinçli karar verin.

Documentation: Performans budget'ını ve gerekçesini dokümante edin. Ekip onboarding için.

Continuous improvement: Performans budget'ını kademeli olarak sıkılaştırın. %10 iyileştirme hedefi.