Web sitesi hızı, kullanıcı deneyiminin ve SEO'nun temel taşlarından biri. Araştırmalar, 3 saniyeden uzun yüklenen sitelerin ziyaretçilerin %53'ünü kaybettiğini gösteriyor. E-ticarette ise her saniye gecikme, dönüşüm oranını %7 düşürüyor. Bu rehberde hem teknik hem de pratik optimizasyon adımlarını adım adım açıklıyoruz.

Önce Ölçün, Sonra Optimize Edin

Nereden başlayacağınızı bilmeden optimizasyon yapamazsınız. Kullanmanız gereken araçlar:

  • Google PageSpeed Insights: Core Web Vitals puanı ve somut öneriler.
  • Google Search Console: Core Web Vitals raporu ile sorunlu URL'leri toplu görun.
  • WebPageTest.org: Waterfall analizi ile neyin ne kadar sürdüğünü görün.
  • Chrome DevTools → Network sekmesi: Gerçek zamanlı yükleme analizi.

1. Görsel Optimizasyonu

Görseller çoğu sitede sayfa ağırlığının %50-70'ini oluşturuyor. Optimizasyon adımları:

Format Seçimi

  • WebP: JPEG'e göre %25-34 daha küçük dosya boyutu, tüm modern tarayıcılar destekliyor.
  • AVIF: WebP'ye göre %20 daha küçük ama işleme süresi daha uzun. Kritik görseller için ideal değil.
  • SVG: Logo, ikon ve illüstrasyonlar için kullanın — sonsuz ölçekleniyor.

Boyut Optimizasyonu

  • Görseli kullanıldığı maksimum boyuttan %20 büyük hazırlayın, daha büyük değil.
  • Responsive images için srcset kullanın: farklı ekran boyutlarına farklı görseller.
  • Sıkıştırma: Fotoğraflar için %80-85 kalite genellikle görsel fark yaratmıyor.

Lazy Loading

Ekranın görünür alanı dışındaki görselleri gerektiğinde yükleyin:

<img src="gorsel.webp" loading="lazy" alt="Açıklama" />

LCP görseline (ekranda ilk görünen büyük görsel) lazy loading uygulamayın — loading="eager" veya priority flag kullanın.

2. JavaScript Optimizasyonu

Aşırı JavaScript, hem yükleme süresini hem INP metriğini etkiliyor:

Code Splitting

Tüm JavaScript'i tek dosyada göndermek yerine sayfaya özel bundle'lar oluşturun. Next.js ve Vite otomatik yapıyor, diğer araçlarda manuel yapılandırma gerekebilir.

Üçüncü Taraf Script'leri Temizleyin

Analytics, chat widget, sosyal medya butonları, reklam tag'leri — her biri yükleme süresine saniyeler ekliyor. Denetim yapın:

  • Aktif kullanmadığınız script'leri kaldırın.
  • Kritik olmayan script'leri defer veya async ile yükleyin.
  • Google Tag Manager kullanıyorsanız gereksiz tag'leri düzenli temizleyin.

Tree Shaking

Kullanmadığınız kütüphane fonksiyonlarının bundle'a girmesini önleyin. Lodash gibi büyük kütüphaneler yerine sadece ihtiyacınız olan fonksiyonları import edin.

3. CSS Optimizasyonu

  • Critical CSS: Above-the-fold içeriği için gereken CSS'i inline olarak <head>'e yerleştirin, geri kalanını asenkron yükleyin.
  • Unused CSS temizleme: PurgeCSS veya framework'ün yerleşik araçlarıyla kullanılmayan CSS kurallarını kaldırın. Tailwind CSS varsayılan olarak bunu yapıyor.
  • CSS dosyalarını küçültün (minify): Build araçları genellikle otomatik yapıyor, kontrol edin.

4. Sunucu ve Altyapı Optimizasyonu

CDN Kullanımı

İçerik Dağıtım Ağı (CDN), statik dosyalarınızı kullanıcıya en yakın sunucudan sunar. İstanbul'daki bir kullanıcı için New York'taki sunucuya gitmek yerine Frankfurt'taki CDN noktasından yanıt alır.

  • Vercel, Netlify: Yerleşik CDN.
  • Cloudflare: Herhangi bir host için ücretsiz CDN ve güvenlik katmanı.

Cache Yönetimi

Statik dosyaları (görseller, CSS, JS) uzun süreli cache ile sunun:

Cache-Control: public, max-age=31536000, immutable

Değişen dosyalar için dosya adına hash ekleyin (bundle.a1b2c3.js) — cache bozulmadan güncelleme yapabilirsiniz.

Sıkıştırma (Compression)

Sunucunuzda Gzip veya Brotli sıkıştırma etkin mi kontrol edin. Brotli, Gzip'e göre %15-20 daha iyi sıkıştırıyor ve tüm modern tarayıcılar destekliyor.

5. Font Optimizasyonu

  • Web fontlarını WOFF2 formatında sunun.
  • font-display: swap kullanın — font yüklenene kadar sistem fontuyla gösterim yapılsın.
  • Sadece kullandığınız karakter setlerini ve font ağırlıklarını yükleyin.
  • Google Fonts yerine fontları kendi sunucunuzdan servis edin — ekstra DNS lookup ortadan kalkar.

6. Veritabanı ve API Optimizasyonu

Sayfa yavaşlığı her zaman frontend kaynaklı değil. Backend kontrolleri:

  • N+1 sorgu sorununu tespit edin ve düzeltin.
  • Sık kullanılan veriler için Redis veya benzeri bir cache katmanı ekleyin.
  • API yanıtlarını sayfalandırın — tek seferde binlerce kayıt çekmeyin.

Öncelik Sıralaması

Her şeyi aynı anda yapmak mümkün değil. Bu sırayla başlayın:

  1. Görsel sıkıştırma ve WebP dönüşümü (en kolay, en etkili)
  2. LCP görselini optimize edin
  3. Kullanılmayan JavaScript ve CSS temizliği
  4. CDN kurulumu
  5. Font optimizasyonu
  6. Kritik CSS inline hale getirme

Sonuç

Site hızı optimizasyonu tek seferlik değil, sürekli bir süreç. Her deployment sonrası PageSpeed skoru kontrol edin, Core Web Vitals'ı Search Console'dan izleyin. Küçük iyileştirmelerin birikimi, hem kullanıcı deneyimini hem de arama sıralamalarını anlamlı biçimde etkiliyor.