Web Performans Optimizasyonu Rehberi
Web sayfalarında en büyük boyuta sahip kaynaklar çoğu zaman görsellerdir. Sayfa ağırlığının %50–70'ini görseller oluşturabilir. Bu rehberde görsel merkezli performans optimizasyonunu ele alıyoruz: sıkıştırma, format seçimi, lazy loading ve CDN stratejileri.
Görseller Gerçekten Darboğaz mı?
Chrome DevTools Network sekmesinde sayfa yüklenirken hangi kaynakların en çok bant genişliği kullandığını görebilirsiniz. Genelde img etiketleri ve arka plan görselleri listenin başında yer alır. Görsel yoğun sitelerde (blog, e-ticaret, portfolyo) optimizasyon etkisi çok büyüktür.
Sıkıştırma Stratejisi
İlk adım görselleri sıkıştırmaktır. Kalite ayarını doğru seçerek görsel olarak fark edilmeyen kayıplarla %30–60 boyut düşüşü elde edebilirsiniz. Online sıkıştırma aracımız dosyaları sunucuya göndermeden tarayıcıda işler; gizlilik ve hız sağlar.
Format Seçimi: WebP ve AVIF
JPEG ve PNG yerine WebP kullanmak ortalama %25–35 tasarruf sağlar. WebP nedir? rehberimizde formatın özelliklerini anlattık. AVIF daha yeni ve daha iyi sıkıştırma sunar; <picture> ile fallback sunarak ikisini birlikte kullanabilirsiniz.
Lazy Loading
Ekranın altındaki görseller sayfa açılışında yüklenmeyebilir. loading="lazy" ile tarayıcı kullanıcı aşağı kaydırdıkça görselleri indirir. Bu sayede ilk yükleme süresi kısalır. Lazy load notları sayfamızda pratik bilgiler var.
CDN ve Önbellek
Görselleri statik bir CDN üzerinden sunmak coğrafi gecikmeyi azaltır. Cache-Control header'ları ile tarayıcıda uzun süre tutulabilir. Görsel optimizasyonu yaptıktan sonra CDN etkisi katlanır.
Özet: Performans Kontrol Listesi
- Görselleri sıkıştırın (kalite kaybı minimal)
- WebP veya AVIF formatına geçin
- Below-the-fold görsellere lazy loading ekleyin
- srcset/sizes ile responsive görseller sunun
- Mümkünse CDN kullanın
Görsellerinizi hemen optimize edin.
Sıkıştırma Aracına Git →