Giriş
Web sitesi performansında en büyük yük genellikle görsellerdir. Çoğu site yavaş çünkü:
- Görseller büyük
- Optimize edilmemiş
- Yanlış formatta
- Yanlış şekilde sunuluyor
Ama kritik bir gerçek var:
Görsel optimizasyonu sadece frontend veya eklenti işi değildir.
Sunucu katmanı burada çok büyük fark yaratır.
Bu yazıda:
- Sunucu tarafında görsel optimizasyonu nasıl yapılır?
- Hosting bu konuda ne sağlar?
- Hangi teknolojiler gerçekten fark yaratır?
- Performans metriklerine etkisi nedir?
- Ne zaman gerekli, ne yapmalısınız?
tam teknik olarak anlatacağız.
1. Temel Problem: Büyük Dosyalar
Bir sayfa:
| İçerik | Ortalama Boyut |
|---|---|
| HTML | 50 KB |
| CSS | 150 KB |
| JS | 300 KB |
| Görseller | 2–5 MB |
Görseller genelde:
Toplam sayfa boyutunun %70–90’ını oluşturur
Bu yüzden:
Görseller optimize edilmeden site hızlı olamaz
2. Sunucu Taraflı Görsel Optimizasyonu Nedir?
Tarayıcıya gitmeden önce görsellerin:
- Sıkıştırılması
- Yeniden boyutlandırılması
- Formatının değiştirilmesi
- Cache’lenmesi
işlemlerinin sunucu tarafından yapılmasıdır.
Yani:
Orijinal görsel → Sunucu optimize eder → Kullanıcıya hafif versiyon gider
3. Görsel Format Dönüşümü (EN KRİTİK)
En büyük kazanç burada:
| Format | Boyut | Kalite |
|---|---|---|
| JPEG | Orta | İyi |
| PNG | Büyük | Çok iyi |
| WebP | Küçük | Çok iyi |
| AVIF | Çok küçük | Çok iyi |
Sunucu tarafında yapılabilecek:
JPEG/PNG → WebP veya AVIF
Kazanç:
| Format | Boyut Azalması |
|---|---|
| WebP | %25–50 |
| AVIF | %40–70 |
4. On-the-Fly Image Optimization
En güçlü tekniklerden biri:
On-the-fly optimization
Yani:
- Görsel ilk istek geldiğinde optimize edilir
- Cache’lenir
- Sonraki kullanıcıya direkt verilir
Avantaj:
- Manuel işlem gerekmez
- Tüm görseller otomatik optimize edilir
5. Image Resizing (Boyutlandırma)
En büyük hatalardan biri:
2000px görsel → 400px alanda göstermek
Sunucu tarafında yapılabilecek:
Responsive image generation
Örnek boyutlar:
- 320px (mobil)
- 768px (tablet)
- 1200px (desktop)
Sunucu doğru boyutu gönderir.
Bu:
- Bandwidth düşürür
- LCP hızlanır
6. Lazy Load + LQIP
Sunucu:
- Placeholder üretir
- LQIP (Low Quality Image Placeholder) üretir
Bu sayede:
- İlk render hızlanır
- CLS düşer
- Algılanan hız artar
7. CDN Üzerinden Görsel Optimizasyonu
CDN’ler bu işi çok iyi yapar:
| Özellik | CDN |
|---|---|
| Format dönüşümü | ✅ |
| Resize | ✅ |
| Compression | ✅ |
| Edge cache | ✅ |
En önemli avantaj:
Kullanıcıya en yakın noktadan optimize edilmiş görsel gider
8. Compression (Sıkıştırma)
Sunucu tarafında:
- Lossy compression
- Lossless compression
Doğru ayar:
Kalite %70–85 → En iyi kalite/boyut dengesi
9. Cache Stratejisi
Görseller için cache çok kritiktir:
Cache-Control: public, max-age=31536000
Bu sayede:
- Aynı görsel tekrar yüklenmez
- Sunucu yükü azalır
- Site hızlanır
10. Core Web Vitals Etkisi
| Metrik | Görsel Etkisi |
|---|---|
| LCP | Çok yüksek |
| CLS | Orta |
| INP | Düşük |
| TTFB | Dolaylı |
Özellikle:
LCP'nin %70'i genelde hero görseldir
Bu yüzden görsel optimizasyonu = SEO performansı.
11. Hosting Tarafında Hangi Teknolojiler Olmalı?
Hosting seçerken şunlara bakın:
| Özellik | Neden |
|---|---|
| WebP/AVIF desteği | Boyut düşürür |
| Image optimization engine | Otomasyon |
| CDN entegrasyonu | Global hız |
| Cache sistemi | Tekrar yükleme yok |
| HTTP/3 | Hızlı transfer |
| LiteSpeed Image Optimization | Otomatik optimizasyon |
12. Gerçek Dünya Performans Farkı
| Durum | Sayfa Boyutu | LCP |
|---|---|---|
| Optimize yok | 4 MB | 3.5 sn |
| WebP | 2.5 MB | 2.5 sn |
| WebP + Resize | 1.5 MB | 1.9 sn |
| CDN + Full optimization | 900 KB | 1.4 sn |
13. En İyi Mimari
Upload → Sunucu optimize eder → CDN cache → Kullanıcıya en yakın noktadan hızlı servis
Teknik stack:
Image Optimization + Resize + WebP/AVIF + CDN + Cache + HTTP/3
14. Hosting Sağlayıcınıza Sorulacak Sorular (ÖNEMLİ)
Hosting seçerken şunları sorun:
- WebP/AVIF otomatik dönüşüm var mı?
- On-the-fly image optimization var mı?
- Image resizing var mı?
- CDN dahil mi?
- Edge cache var mı?
- HTTP/3 destekleniyor mu?
- Cache header’larını siz mi yönetiyorsunuz?
- LiteSpeed Image Optimization var mı?
Eğer çoğu yoksa, siteyi hızlandırmak çok zor olur.
15. Teknik Kontrol Checklist
| Kontrol | Hedef |
|---|---|
| Görseller WebP mi? | Evet |
| AVIF aktif mi? | Tercihen |
| Responsive image var mı? | Evet |
| Lazy load var mı? | Evet |
| CDN var mı? | Evet |
| Cache header doğru mu? | Evet |
| LCP görsel optimize mi? | Evet |
| Görseller CDN’den mi geliyor? | Evet |
16. Test Araçları
| Araç | Ne Ölçer |
|---|---|
| PageSpeed | LCP |
| GTmetrix | Waterfall |
| WebPageTest | Görsel yükleme |
| Chrome DevTools | Boyut |
Özellikle bakılacak metrik:
Largest Contentful Paint (LCP)
17. En Yaygın Hatalar
| Hata | Sonuç |
|---|---|
| Orijinal büyük görseller | Yavaş site |
| PNG kullanımı | Gereksiz büyük dosya |
| Resize yok | Bandwidth israfı |
| Cache yok | Tekrar yükleme |
| CDN yok | Yüksek latency |
| WebP yok | Büyük dosya |
| Hero görsel optimize değil | LCP kötü |
18. Özet
| Teknik | Etki |
|---|---|
| WebP/AVIF | Çok yüksek |
| Resize | Çok yüksek |
| Compression | Yüksek |
| CDN | Çok yüksek |
| Cache | Yüksek |
| HTTP/3 | Orta |