Web Sitesi Hız Optimizasyonu: Temel Rehber

Web sitesi hızı, hem kullanıcı deneyimi hem de SEO açısından kritik bir faktördür. Google, sayfa hızını doğrudan bir sıralama sinyali olarak kullanır ve yavaş siteler hem arama sonuçlarında gerilere düşer hem de ziyaretçi kaybeder. Araştırmalar, yükleme süresinin 3 saniyeyi aşması durumunda ziyaretçilerin %53'ünün siteyi terk ettiğini göstermektedir.

Core Web Vitals: Google'ın Performans Metrikleri

Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metrik şunlardır:

LCP (Largest Contentful Paint): Sayfadaki en büyük içerik öğesinin görünür hale gelme süresi. İdeal: 2,5 saniyenin altında.
INP (Interaction to Next Paint): Kullanıcı etkileşimlerinin yanıt süresi. İdeal: 200 milisaniyenin altında.
CLS (Cumulative Layout Shift): Sayfa yüklenirken oluşan beklenmedik düzen kaymaları. İdeal: 0,1'in altında.

Bu metrikler Google Search Console ve PageSpeed Insights üzerinden takip edilebilir.

Görsel Optimizasyonu

Görseller genellikle bir web sayfasının toplam boyutunun %50'sinden fazlasını oluşturur. Doğru optimizasyon büyük fark yaratır:

Modern formatlar kullanın: WebP, JPEG'e göre %25-35 daha küçük dosya boyutu sunar. AVIF ise daha da iyi sıkıştırma sağlar.
Doğru boyutlandırma: 1920px genişliğindeki bir görseli 400px genişliğinde göstermek gereksiz bant genişliği harcar. Görselleri gösterilecekleri boyutta sunun.
Sıkıştırma: Kalite kaybı minimum düzeyde tutularak dosya boyutları önemli ölçüde küçültülebilir.
srcset kullanımı: Farklı ekran boyutları için farklı görsel boyutları sunun.

<img
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  src="image-800.webp"
  alt="Açıklayıcı metin"
  loading="lazy"
  width="800"
  height="600"
>

CSS ve JavaScript Minification

Minification, koddan gereksiz boşlukları, yorumları ve satır sonlarını kaldırarak dosya boyutunu küçültme işlemidir:

CSS minification: Ortalama %15-25 dosya boyutu azalması sağlar
JavaScript minification: Değişken adlarını kısaltma dahil daha agresif optimizasyonlar yapılabilir
HTML minification: Gereksiz boşlukları ve yorumları kaldırır

Gzip veya Brotli sıkıştırma ile birlikte kullanıldığında minification'ın etkisi daha da artar. Brotli, Gzip'e göre yaklaşık %15-20 daha iyi sıkıştırma sağlar.

Tarayıcı Önbellekleme (Browser Caching)

Doğru önbellek başlıkları ile statik dosyalar tarayıcıda saklanır ve tekrar ziyaretlerde sunucudan tekrar indirilmez:

# .htaccess veya sunucu konfigürasyonu
Cache-Control: public, max-age=31536000, immutable

# Sık değişen dosyalar için
Cache-Control: public, max-age=3600, must-revalidate

CSS, JavaScript ve görsel dosyaları için uzun süreli önbellek (1 yıl) kullanın. Dosya adlarına hash ekleyerek (ör. style.abc123.css) önbellek temizleme sorunlarını ortadan kaldırın.

Lazy Loading: Tembel Yükleme

Kullanıcının henüz göremediği içeriklerin yüklenmesini ertelemek, ilk yükleme süresini önemli ölçüde iyileştirir:

<!-- Görseller için native lazy loading -->
<img src="foto.webp" loading="lazy" alt="Açıklama">

<!-- iframe'ler için -->
<iframe src="video.html" loading="lazy"></iframe>

Sayfanın üst kısmındaki (above-the-fold) görsellere loading="lazy" eklemeyin — bu, LCP skorunuzu olumsuz etkileyebilir. Yalnızca sayfa aşağısındaki içeriklere uygulayın.

CDN (Content Delivery Network)

CDN, statik dosyalarınızı dünya genelindeki sunuculara dağıtarak kullanıcılara en yakın sunucudan içerik sunar. Bu, özellikle uluslararası ziyaretçiler için büyük hız artışı sağlar:

Cloudflare, Bunny CDN ve AWS CloudFront popüler CDN seçenekleridir
Görseller, CSS, JavaScript ve font dosyaları CDN üzerinden sunulmalıdır
CDN'ler aynı zamanda DDoS koruması ve otomatik sıkıştırma gibi ek avantajlar sunar

Kritik Render Yolu Optimizasyonu

CSS dosyalarını <head> bölümüne yerleştirin
JavaScript dosyalarını defer veya async öznitelikleriyle yükleyin
Kritik CSS'i inline olarak ekleyin, geri kalanını asenkron yükleyin
Font dosyaları için font-display: swap kullanın
Üçüncü parti scriptleri minimumda tutun

Performans Araçları

Sitenizin hızını analiz etmek için Sayfa Hızı Testi aracımızı kullanabilirsiniz. Ayrıca CSS dosyalarınızı küçültmek için CSS Minifier aracımız da mevcuttur. Düzenli performans testleri yaparak sitenizin hızını sürekli izleyin ve iyileştirin.

Bu konuyla ilgili araçlarımızı da deneyin: Page Speed Analiz, Web Vitals Analiz, Görsel Sıkıştırma