Web Sitesi İhtiyaç Analizi: Performans Bütçesi Tanımlama
Performans bütçesi, bir web sitesinin hız, tepkisellik ve görsel stabilite hedeflerini; kod, medya ve üçüncü taraf bağımlılıkları üzerinde sayısal sınırlara çeviren stratejik bir yönetim aracıdır. Basitçe “sayfa küçük olsun” demek değildir; performans bütçesi, iş hedefi → deneyim hedefi → metrik hedefi → kaynak sınırı çizgisinde ilerleyen bir karar mimarisidir. İhtiyaç analizi aşamasında performans bütçesi tanımlamak; mimari (SSR/SSG/ISR/CSR), görsel/video boru hattı, CMS ve içerik operasyonu, analitik ve A/B test araçları, güvenlik ve rıza yönetimi, hatta pazarlama taktikleri üzerinde bağlayıcı kabul kriterleri oluşturur. Böylece “kampanya günü yavaşladı”, “üçüncü taraflar şişirdi”, “yeni tasarım ağır geldi” gibi krizler, önceden görünür olur ve önlenir.
1) Mandat: Performans Bütçesi Neden İhtiyaç Analizinin Bir Parçası?
Performans, yalnız teknik bir kalite niteliği değil, iş sonucu üreten bir kaldıraçtır.
-
Dönüşüm ve gelir: Hızlı ilk boyama ve akıcı etkileşim; güvencenin ve CTA’ların daha erken görünmesini sağlar.
-
SEO ve görünürlük: Core Web Vitals hedefleriyle ilişkili hız kazanımları, organik trafiği etkiler.
-
Operasyon ve risk: Trafik piklerinde ölçek ve maliyet kontrolü sağlar; “şişmiş” sayfaların kriz yaratmasını önler.
İhtiyaç analizi çıktısı: “Performans” başlığını iş hedeflerine bağlı KPI’larla yazın; örneğin “Mobil P75 LCP ≤ 2,5 sn; INP ≤ 200 ms; CLS ≤ 0,1; kritik sayfa JS bütçesi ≤ 180 KB sıkıştırılmış.”
2) Hedef Hiyerarşisi: İş → Deneyim → Metrik → Sınır
Performans bütçesi, hedefleri hiyerarşik olarak bağlar:
-
İş hedefi: “Fiyat → demo akışında tamamlama +%15.”
-
Deneyim hedefi: “Fiyat sayfası 2 sn içinde anlamlı içerik; form etkileşimleri akıcı.”
-
Metrik hedefi: “LCP ≤ 2,2 sn, INP ≤ 180 ms, CLS ≤ 0,08.”
-
Kaynak sınırı: “Toplam JS ≤ 180 KB; kritik CSS ≤ 35 KB; LCP görseli ≤ 90 KB; üçüncü taraf ≤ 2 snippet.”
Uygulama notu: Hedefler rota/sayfa tipi bazında farklılaşır; “blog rehber” ile “checkout”un sınırları aynı olamaz.
3) Kapsam: Hangi Sayfa Tiplerine Bütçe Yazılır?
İhtiyaç analizinde sayfa tiplerini çıkarın ve her biri için performans önceliği belirleyin:
-
Kritik iş akışı: Ana sayfa, kategori/hizmet, ürün, fiyat/plan, teklif/demo, sepet/checkout.
-
Destekleyici içerik: Blog/rehber, vaka, SSS, hakkında, hukuk metinleri.
Örnek olay: B2B SaaS’ta “Fiyat” ve “Demo” sayfaları için agresif sınırlar kondu; “Blog”da daha esnek ama istikrarlı sınırlar belirlendi. Kriz günlerinde “kritik akışlar” bozulmadı.
4) Metrik Seçimi: Sadece CWV mi? Daha Fazlası
-
Zorunlu: LCP, INP, CLS hedefleri (mobil ağırlıklı).
-
Destekleyici: Time to First Byte, First Contentful Paint, JavaScript Toplam Süre (main thread), Boş/Çevrimdışı dayanımı (PWA ölçütleri).
-
Algılanan hız: Skeleton/placeholder görülme süresi; ilk etkileşim mümkünlüğü.
Uygulama: Metrik setini fazla kalabalıklaştırmayın; “üç zorunlu + üç destekleyici” esastır. Aksi hâlde takip ve yönetim zorlaşır.
5) Bütçe Türleri: Kaynak Tabanlı vs. Sonuç Tabanlı
-
Kaynak tabanlı sınırlar: Sıkıştırılmış JS/CSS boyutu, LCP görsel boyutu, toplam resim/pixel bütçesi, üçüncü taraf sayısı, kritik istek adedi.
-
Sonuç tabanlı sınırlar: LCP/INP/CLS, TTFB, 95. yüzdelik yanıt süreleri.
Prensip: Sonuç hedefleri asıl amaç; kaynak sınırları bu hedeflere ulaşmayı garantileyen pratik çıpalardır.
6) Temel Senaryo ve Aygıt Boşluğu: Kime Göre Hız?
Bütçeyi gerçek kullanıcı profiline göre yazın.
-
Cihaz profili: P75 cihaz segmenti (orta seviye Android), düşük CPU/GPU senaryosu.
-
Ağ profili: 3G/4G dalgalı bağlam; zayıf ağda “metin-önce” ilkesi.
-
Çoğrafya: Ana pazar PoP’ları; CDN stratejisi; dil/ülke varyantları.
Örnek olay: Güneydoğu Asya mobil trafiği ağırdı; LCP ve görsel bütçeleri o pazar için daha sıkı yazıldı; CDN ısıtma ile hedeflere ulaşıldı.
7) LCP Bütçesi: Kahraman İçeriği Sayılara Dökmek
-
LCP adayı sabitleyin: Sayfa tipine göre tek kahraman.
-
Boyut sınırı: LCP görseli için bağlama göre 60–120 KB aralığı; poster video için 80–150 KB.
-
Önceliklendirme: Preload, kritik CSS, font-display stratejisi.
Uygulamalı reçete: “Fiyat” sayfasında hero görsel yerine tipografik giriş; LCP görsel bütçesi 0 KB’a indi, LCP 0,7 sn iyileşti.
8) INP Bütçesi: JS Diyeti ve Etkileşim Sınırları
-
JS toplam sınırı: Kritik rotalarda 150–200 KB aralığı (sıkıştırılmış).
-
Main-thread süresi: P75 etkileşim blokajı 100 ms altı.
-
Kütüphane politikası: Her yeni paket için “puan kartı”; sebep olmadan devasa UI çerçeveleri yok.
Örnek olay: Zengin editör yalnız gerekli ekranda yüklendi; INP P75 < 180 ms oldu, toplam paket 120 KB düştü.
9) CLS Bütçesi: Yer Ayır, Zıplamayı Bitir
-
Görsellere oran/boyut: Her görselde boyut veya
aspect-ratio. -
Yer tutucu: Geç gelen bileşenlere sabit alan; reklam/benzer ürünler bloklarına rezerv.
-
Font değişimi: Fallback zinciri ve
font-display: swap/optional.
Uygulama: “Benzer ürünler” için 400–600 px sabit alan; CLS P75 0,2’den 0,04’e düştü.
10) Üçüncü Taraf Bütçesi: “İzin Yoksa Yük Yok”
-
Snippet sayısı: Kritik sayfalarda maksimum 2–3.
-
Yükleme kuralı: Rıza yoksa pazarlama/deney hiç yüklenmez.
-
Etki raporu: Her snippet için boyut, istek, gecikme ölçüleri; aylık temizlik ritmi.
Örnek olay: Bir A/B aracı yalnız hedef sayfalarda ve rıza varsa yüklendi; LCP -0,6 sn; INP iyileşti.
11) Görsel/Video Boru Hattı: Piksel ve Bit Bütçeleri
-
Format ve kalite: AVIF/WebP profilleri; kalite bağlamlı ayar.
-
Çoklu varyant:
<picture>vesrcset; LCP görseli için preloading. -
Video: Otomatik oynatma yok; poster hafif; altyazı/transkript zorunlu.
Uygulama: Kategori görselleri 3 varyantla servis edildi; toplam aktarım %40 azaldı.
12) CSS Stratejisi: Kritik Alan Küçük, Geri Kalan Ertelensin
-
Kritik CSS: İlk görünür alan ≤ 35 KB.
-
Bölme ve erteleme: Sayfa/rota bazlı CSS; büyük çerçeveler yerine hafif yardımcı sınıflar.
-
İkon seti: SVG sprite; ikon fontu devre dışı.
Örnek olay: Stiller sadeleştirildi; CLS riski düştü; LCP ve INP birlikte iyileşti.
13) Render Mimarisi Bütçesi: SSR/SSG/ISR/CSR Hibriti
-
Pazarlama sayfaları: ISR ve kenarda önbellek; build süreleri kontrol altında.
-
Dinamik etkileşim: SSR + kısa süreli cache; CSR yalnız panel/uygulama içi.
-
Bütçe bağlantısı: Render stratejisi değişirse sayfa tipi bütçesi otomatik güncellenir.
Örnek olay: Rehberler ISR’ye alındı; LCP hedefleri rahat korundu.
14) Mobil Öncelikli Sınırlar: Başparmak ve Zayıf Ağ
-
Mobil öncelik: JS bütçesi mobil için daha sıkı; görsel piksel bütçesi küçültülmüş.
-
Zayıf ağ modu: Düşük bant genişliği sinyali varsa kalite düşürme; metin-önce.
-
Cüzdanlar: Apple/Google Pay ile INP düşük tutulur.
Uygulama: “Zayıf ağ”da görsel kalite düşürüldü; kullanıcı “Detaylı gör” ile yüksek kaliteye geçebildi.
15) İçerik Operasyonu ve CMS: Bütçeyi Bozmadan Yayın
-
Bileşen kütüphanesi: Performans onaylı bloklar; editörler yalnız bu blokları kullanır.
-
Medya kuralları: Otomatik dönüştürme ve boyutlandırma; büyük dosya uyarıları.
-
Önizleme: “Bütçe ihlali” uyarısı; yayın bloklanabilir.
Örnek olay: Pazarlama görselleri yükleme sırasında otomatik webp/avif’e dönüştü; LCP kontrol altında kaldı.
16) Ölçüm Şeması: CI/CD, Lab ve Field Telemetri
-
CI bütçe kapıları: Her PR’da Lighthouse/Pagespeed; sınırı aşan birleşmez.
-
RUM: Gerçek kullanıcı P75 değerleri; cihaz/ağ/ülke kırılımı.
-
İş metrikleri bağlamı: CTA, form tamamlama, terk; performansla birlikte raporlanır.
Uygulama: “Hız kliniği” haftalık toplantı; son 7 gün CWV ve bütçe ihlalleri incelenir.
17) A/B Test ve Kişiselleştirme: Edge ve Hafiflik İlkesi
-
Edge test: Varyasyon kenarda seçilir; JS yükü eklenmez.
-
Rıza ve hedef: Deney araçları yalnız rıza varsa; hedef sayfalarda.
-
Rapor: Deney sonuçlarına CWV farkları eklenir.
Örnek olay: Fiyat CTA varyasyonu edge’de testlendi; LCP/INP değişmeden tıklama arttı.
18) Güvenlik ve Gizlilikle Uyum: CMP’nin Bütçedeki Rolü
-
CMP hafif sürüm: Rıza penceresi erişilebilir ve küçük JS izi.
-
Sıra: Rıza gelmeden pazarlama/deney yüklenmez; “izin yoksa yük yok.”
-
CSP/SRI: Güvenlik başlıkları performans dostu kurgulanır.
Uygulama: Hafif CMP ve server-side tagging ile paket azalttı; INP iyileşti.
19) Boş/Hata/Çevrimdışı Durumları: Algılanan Hız Bütçesi
-
Skeleton ve mikro metin: İlk saniyelerde algılanan hız.
-
Çevrimdışı barı: PWA ile pessimistic UI; kullanıcıya dürüst geri bildirim.
-
Hata mesajları: CLS yapmayacak sabit alanlar.
Örnek olay: Skeleton sayesinde zayıf ağda terk azaldı; kullanıcı sabırlı kaldı.
20) CDN/Edge Politikaları: Sınırı Kenara Taşımak
-
Önbellek kuralları: LCP görseli ve kritik CSS/JS için öncelik.
-
İçerik ısıtma: Kampanya öncesi kenar ısıtılır; coğrafi öncelik.
-
Değişim stratejisi: ISR ile artımlı yenileme; invalidation disiplini.
Uygulama: Global lansmanda PoP’lar ısıtıldı; LCP hedefleri korundu.
21) Yönetişim: Sahiplik, Karar Log’u, Eğitim
-
Sahiplik: Performans sorumlusu, görsel/video pipeline sahibi, etiket yöneticisi denetimi.
-
Karar log’u: “Neden preload eklendi/silindi?” “Neden kütüphane değişti?”
-
Eğitim: Geliştirici-tasarımcı-içerik ekiplerine kısa modüller.
Örnek olay: “Üçüncü taraf temizlik günü” aylık ritme alındı; ortalama 150–300 KB tasarruf kalıcılaştı.
22) RFP/Sözleşme: Tedarikçiden Performans Beklentisi
-
Kabul kriteri: Bileşen seti CWV dostu; demo ve rapor şartı.
-
SLA: Aşımda düzeltme penceresi; ağır bağımlılıklar için yaptırım.
-
Çıkış: Vendor lock-in riskine karşı veri/konfig taşınabilirliği.
Uygulama: Harici widget sağlayıcısına “P75 INP etkisi ≤ 40 ms” gibi sınırlar yazıldı.
23) Riskler ve Anti-Pattern’ler: “Görsel Şov, Yavaş Deneyim”
-
Ağır animasyon ve parallax: CPU’yu yakar; INP’yi bozar.
-
Script enflasyonu: A/B, heatmap, reklam, sosyal piksel… sınır koyulmazsa taşar.
-
Gereksiz kahraman görselleri: Anlam üretmeden LCP’yi boğar.
Karşı reçete: “Anlam–hız–dönüşüm” üçlüsüne göre varlıkları meşrulaştırın.
24) Vaka: B2B SaaS—Fiyat → Demo Akışında Bütçe Disiplini
Sorun: Fiyat sayfası LCP zayıf, paket şişmiş.
Müdahale: Tipografik hero, preload kritik CSS, rıza öncesi üçüncü taraf yok, yapışkan CTA hafif.
Sonuç: LCP 3,1 → 2,0 sn; INP < 180 ms; demo tıklaması +%19; form tamamlama +%11.
25) Vaka: E-ticaret—Kategori ve Checkout’ta Sınırlar
Sorun: Kategori resimleri büyük, checkout’ta CLS.
Müdahale: <picture> varyantları, kalite profili; benzer ürünlere alan rezervi; hosted payment.
Sonuç: LCP 2,9 → 1,9 sn; CLS 0,2 → 0,04; ödeme tamamlama %47→%57.
26) Vaka: Kamu/Üniversite—Randevu Akışında Zayıf Cihaz Senaryosu
Sorun: Düşük donanımlı cihazlarda INP ve LCP kötü.
Müdahale: Metin-önce, skeleton, düşük kalite görsel, CAPTCHAsız varsayılan (yalnız şüphelide).
Sonuç: Tamamlama %58→%81; çağrı merkezi yükü -%22.
27) Süreklilik: Bütçe Ne Zaman Güncellenir?
-
Trafik ve pazar değişimi: Yeni ülke/lokasyon, yeni cihaz dağılımı.
-
Mimari değişiklik: SSR→ISR geçişi, CDN kuralı güncellemesi.
-
İçerik stratejisi: Video/görsel ağırlığı artışı.
Pratik: Her çeyrek “bütçe revizyon” oturumu; kararlar log’lanır.
28) Deney ve Standardizasyon: Kazanan Desenleri Kalıcılaştırmak
-
Hipotezler: “Görsel kalite ↓, tıklama ↑ ve LCP ↓”; “Edge deney, INP etkisiz”.
-
Standardizasyon: Kazananlar bileşen kütüphanesine ve CMS şablonlarına işlenir.
-
Şeffaflık: Ekip panolarında bütçe ihlalleri ve düzeltici aksiyonlar görünür.
Örnek olay: Rehber sayfalarında hero kaldırma deneyi kalıcılaştı; içerik üretimi buna göre standardize edildi.
Sonuç
Performans bütçesi, “yavaşladı, hadi optimize edelim” refleksinin panzehiridir. İhtiyaç analizi aşamasında; iş hedeflerini deneyim hedeflerine, metrik hedeflerini kaynak sınırlarına çevirip, bu sınırları mimari, içerik ve operasyon kararlarına kabul kriteri olarak yazdığınızda hız; tesadüf değil, tasarım sonucu olur.
Bu yaklaşımın getirileri açıktır:
-
Daha hızlı algılanan sayfalar: LCP hedefleri güvence altına alınır; değer teklifi ve güvence metinleri daha erken görünür.
-
Daha akıcı etkileşim: JS diyeti, ana iş parçacığı disiplini ve üçüncü taraf yönetimiyle INP düşük kalır; “tıklıyorum ama olmuyor” hissi kaybolur.
-
Daha kararlı düzen: Görsel ve bileşen yer rezervleriyle CLS dibe iner; form ve checkout akışları güven verir.
-
Daha düşük maliyet: Piksel/bit/byte israfı bittiğinde CDN ve altyapı maliyetleri düşer; pik günlerinde panik yerine öngörülebilir hız kalır.
-
Daha yüksek dönüşüm ve SEO: Hız, güvenin dilidir. Performans bütçesiyle hizalanmış siteler, arama görünürlüğünde ve dönüşüm hunisinde tutarlı kazanç sağlar.
-
Sürdürülebilirlik: CI/CD kapıları, “üçüncü taraf temizlik günü”, karar log’u ve çeyreklik revizyonlarla performans kültürü kurumsallaşır.
Özetle, performans bütçesi; hızın soyut bir temenni değil, ölçülebilir ve yönetilebilir bir vaat olarak yaşamasıdır. Bugün bütçenizi yazın; her PR’da otomatik kontrol edin; haftalık hız kliniğinde sonuçları tartışın; kazanan desenleri standardize edin. O zaman web siteniz yalnız hızlı görünmez, hızlı davranır—ve kullanıcılarınız bunu ilk dokunuşta hisseder.
Bill Gates Web: Profesyonel Çözümler Sunan Güvenilir Partneriniz
Bill Gates Web, dijital dünyada varlık gösteren herkes için kapsamlı çözümler sunan öncü bir platformdur. Web tasarım, yazılım geliştirme, uygulama ve programlama gibi birçok alanda uzmanlaşmış olan ekibimiz, sizin işinizi büyütmeniz için gereken her şeyi sunmak için burada. Sektördeki en son teknolojilere hakim olan ekibimiz, projenizin başarılı bir şekilde hayata geçirilmesini sağlamak için elinden gelenin en iyisini yapar.
Dijital Varlığınızı Güçlendirecek Profesyonel Dokunuşlar
Bill Gates Web olarak, işinizi bir adım öteye taşıyacak benzersiz çözümler sunuyoruz. İhtiyaçlarınıza özel olarak tasarlanmış web siteleri, kullanıcı dostu arayüzler, özelleştirilmiş yazılımlar ve mobil uygulamalarla dijital varlığınızı güçlendiriyoruz. Ayrıca, itibar danışmanlığı hizmetimizle markanızın çevrimiçi itibarını korumak ve geliştirmek için size rehberlik ediyoruz.
İlerlemenin Anahtarını Bugün Yakalayın
Siz de işinizi dijital dünyada büyütmek ve ilerlemek istiyorsanız, Bill Gates Web sizin için doğru adres. Profesyonel ekibimizle çalışarak, rekabetin önüne geçecek çözümlerle tanışabilir, başarıya giden yolda adımlarınızı sağlam atabilirsiniz. Hemen bizimle iletişime geçin ve dijital dünyadaki potansiyelinizi keşfedin!
