Performans neden önemli?

Hızlı yüklenen bir web uygulaması daha iyi kullanıcı deneyimi, daha yüksek dönüşüm oranı ve daha iyi arama motoru görünürlüğü sağlar. Modern uygulamalarda hem ön yüz (front-end) hem de sunucu tarafındaki iyileştirmeler toplam yükleme süresini ve etkileşim gecikmesini azaltır. Bir dizi uygulama rehberi ve teknik kaynak, görsellerin optimize edilmesi, sıkıştırma ve önbellekleme gibi adımların doğrudan sayfa yükleme süresini kısalttığını belirtir — örneğin Mehmet Oya ve Sitevera’nın rehberleri bu konularda pratik öneriler içerir (Mehmet Oya, Sitevera).

10 uygulanabilir teknik

1. Kritik kaynakları küçültme: minifikasyon, tree-shaking ve kod bölme

JS ve CSS dosyalarını minify ederek ve gereksiz kodu kaldırarak transfer boyutunu azaltın. Modern paketleyiciler (ör. webpack, Rollup, esbuild) ile tree-shaking ve kod bölme (code-splitting) uygulayabilirsiniz. Ancak HTTP/2/3 kullanıyorsanız küçük, ihtiyaca göre yüklenen dosyalar tercih edilebilir.

Uygulama adımları

• Üretim derlemesi için minifikasyon ve ağaç sarsma (tree-shaking) etkinleştirin.
• Dinamik import ile sayfa bazlı kod bölme uygulayın.
• Tekrar kullanılmayan kütüphaneleri kaldırın veya daha küçük alternatiflere geçin.

Kontrol listesi

• Üretim paketinde .map dosyalarını kontrol edin.
• Ana bundle boyutunu takip edin.

2. Asenkron yükleme ve lazy loading

Render-blocking kaynakları asenkron veya ertelenmiş şekilde yüklemek ilk boyayı hızlandırır. JS için defer veya dinamik import; resimler için native loading="lazy" ya da IntersectionObserver kullanın. Bu yaklaşımlar, başlangıçta yalnızca gösterilen içeriği yükleyerek etkileşim süresini iyileştirir — ilgili rehberlerde asenkron yükleme ve lazy loading'in etkileri detaylandırılmıştır (Mehmet Oya, Sitevera).

Uygulama adımları

• Script etiketlerinde defer veya async kullanmayı değerlendirin.
• Görsellerde native lazy loading veya IntersectionObserver ile yükleme yapın.
• Sık kullanılan kritik kaynakları preload ile önceliklendirip geri kalanları lazy yükleyin.

3. Görselleri modern formatlarda sunma ve doğru boyutta kullanma

Görseller genellikle sayfa ağırlığının büyük kısmını oluşturur. WebP ve AVIF gibi modern formatlar, benzer kalite için daha küçük dosya boyutları sağlar. Ayrıca srcset ve sizes kullanarak cihaz çözünürlüğüne uygun resim sunmak önemli bir optimizasyondur (Sitevera).

Uygulama adımları

• Görselleri mümkün olduğunda WebP/AVIF formatına dönüştürün ve alternatif olarak JPEG/PNG sunun.
• Responsive resimler için srcset ve sizes kullanın.
• Görsel CDN veya otomatik dönüşüm sağlayan servisler kullanın.

4. CDN ve önbellekleme stratejileri

Statik içerik için CDN kullanmak ve uygun cache-control başlıklarıyla tarayıcı önbelleklemesini yapılandırmak, yanıt süresini ve genel performansı iyileştirir. Service Worker ile daha gelişmiş önbellekleme senaryoları (PWA kullanımı) uygulanabilir (Mehmet Oya).

Uygulama adımları

• Statik varlıkları global CDN’e taşıyın.
• Cache-Control ve immutable başlıklarını uygun şekilde ayarlayın.
• Service Worker kullanan uygulamalarda kabaca hangi içeriklerin offline tutulacağını planlayın.

5. Sıkıştırma: GZIP ve Brotli

Metin temelli varlıklar için sunucu tarafı sıkıştırma (GZIP veya Brotli) veri transferini küçültür. Brotli genellikle metin sıkıştırmasında daha yüksek kazanç sağlar; ancak sunucu ve CDN desteğini kontrol etmek gerekir (Mehmet Oya).

Uygulama adımları

• Sunucu veya CDN üzerinde Brotli ve/veya GZIP aktif edin.
• Resimler gibi zaten sıkıştırılmış içerikleri yeniden sıkıştırmayın.
• Doğru MIME türleri için sıkıştırma uygulandığından emin olun.

6. Sunucu tarafı optimizasyonlar ve veri tabanı sorgu iyileştirmeleri

Sunucu yanıt süreleri (TTFB) ve veritabanı performansı uygulama hızını doğrudan etkiler. Sorgu optimizasyonu, indeksleme ve gereksiz veritabanı çağrılarının azaltılması genelde büyük kazanç sağlar. Ayrıca modern protokoller sunucu yanıtlarını iyileştirebilir (Sitevera).

Uygulama adımları

• Yavaş sorguları profilleyin ve indeksleme/yeniden yazımla iyileştirin.
• Cache katmanları (Redis vb.) ile sık kullanılan veriyi saklayın.
• Uygulama sunucusu konfigürasyonlarını (keep-alive, thread pool) gözden geçirin.

7. Kaynak önceliklendirme: preload, preconnect ve font optimizasyonu

Özellikle fontlar ve kritik CSS, render sürecini etkileyebilir. preload ve preconnect ile kritik kaynakların erken yüklenmesini sağlayın; fontlar için font-display kullanarak görünürlük davranışını kontrol edin.

Uygulama adımları

• Kritik CSS’yi inline veya kritik stil olarak sunun.
• Önemli font ve API host’ları için preconnect ve dns-prefetch ekleyin.

8. Modern protokoller: HTTP/2 ve HTTP/3

HTTP/2 ve HTTP/3, bağlantı multiplexing ve daha iyi gecikme yönetimi gibi avantajlar sağlar; bu da özellikle birden fazla küçük isteğin olduğu durumlarda performansı iyileştirir. Yeni protokollerin etkinleştirilmesi sunucu ve CDN ayarlarıyla mümkündür (Sitevera).

Uygulama adımları

• Sunucu/CDN üzerinden HTTP/2 ve mümkünse HTTP/3 desteğini etkinleştirin.
• TLS yapılandırmanızı (ör. TLS 1.3) güncelleyin.

9. Ölçüm ve Lighthouse iyileştirmeleri

Laboratuvar ve gerçek kullanıcı verileriyle performansı ölçün. Lighthouse, sayfa boyutu, render-blocking kaynaklar ve diğer optimizasyonlar için somut öneriler verir; bu önerimleri uygulayarak skor iyileştirmeleri hedefleyin. Performans metriklerini düzenli olarak izlemek optimizasyonların etkisini gösterir.

Uygulama adımları

• Lighthouse veya benzeri araçlarla düzenli denetimler yapın.
• Core Web Vitals (ör. LCP, CLS, INP) ve TTFB gibi metrikleri takip edin.
• CI sürecine performans kontrolleri ekleyin (örn. performans bütçeleri).

10. Sürekli izleme ve performans bütçeleri

Bir kez yapılan optimizasyonlar zamanla gerileyebilir; bu yüzden RUM (Real User Monitoring) ve sentetik testleri birleştirerek sürekli ölçüm yapın. Performans bütçeleri belirleyip ekip süreçlerine entegre etmek, yeni özelliklerin yükü artırmasını engeller.

Uygulama adımları

• RUM ve sentetik testleri kurun ve uzun dönem trendleri izleyin.
• Performans bütçeleri belirleyin ve PR/CI süreçlerine bağlayın.
• Yeni deploy öncesi hız testleri yapmayı zorunlu kılın.

Uygulama için kısa yol haritası (ilk 30 gün)

Önceliklendirme yaparak kısa vadede görülebilir kazançlar elde edebilirsiniz:

1. İlk hafta: Lighthouse denetimi, büyük varlıkların tespiti ve görsel optimizasyonu.
2. 2–3. hafta: CDN, sıkıştırma ve temel önbellekleme kurulumları.
3. 3–4. hafta: Kod bölme, asenkron yükleme ve temel sunucu optimizasyonları.
4. Sürekli: RUM entegrasyonu ve performans bütçeleri.

Kısa kontrol listesi (10 adımda)

• Görseller WebP/AVIF'e dönüştürüldü mü?
• GZIP/Brotli aktif ve doğru yapılandırıldı mı?
• CDN üzerinden statik varlıklar sunuluyor mu?
• Kritik kaynaklar preload/preconnect ile önceliklendirildi mi?
• Scriptler defer/async veya dinamik import ile asenkron mu?
• CSS ve JS minify edilmiş ve gereksiz kod temizlenmiş mi?
• HTTP/2 veya HTTP/3 etkin mi?
• Veritabanı ve sunucu yavaş sorgular için profilleme yapıldı mı?
• Lighthouse ile düzenli denetimler planlandı mı?
• RUM ve performans bütçeleri kuruldu mu?

Kaynaklar ve daha fazla okuma

• Mehmet Oya — Performans Optimizasyonu rehberi
• Sitevera — Web Performans Optimizasyonu
• EG678 Software — Modern Web Uygulamalarında Performans
• Hız Hosting — ASP.NET Core Performans Önerileri

Sıkça Sorulan Sorular

Hangi optimizasyon ilk yapılmalı?

Önce en büyük dosya kaynaklarını (görseller ve büyük JS bundle’ları) tespit edip onları optimize edin. Genelde en hızlı geri dönüş görsellerin küçültülmesi ve sıkıştırma ile elde edilir (Sitevera).

HTTP/2 varken bundle yapmak gerekli mi?

HTTP/2/3 bağlantı multiplexing sunduğundan küçük dosyalara bölünme daha avantajlı olabilir; ancak spesifik proje yapısına göre tek bir küçük bundle veya bazı durumlarda birleştirme hâlâ mantıklı olabilir. Test ederek karar verin (Sitevera).

WebP veya AVIF her zaman tercih edilmeli mi?

Modern formatlar daha iyi sıkıştırma sağlar, fakat tarayıcı desteğini ve dönüşüm maliyetini göz önünde bulundurun. CDN veya dönüşüm servisi kullanarak sunucu tarafında uygun formatı otomatik sunmak en pratik yaklaşımlardandır (Sitevera).

Lighthouse skorunu sürekli artırmak için pratik adım nedir?

Lighthouse önerilerini bir CI iş akışına bağlayarak her deploy’da otomatik denetim çalıştırın; ayrıca gerçek kullanıcı verilerini izleyerek laboratuvar sonuçlarını doğrulayın. Performans bütçeleri, yeni eklenen kodların yükü artırmasını engellemeye yardımcı olur.