Web Sitesi Performansını Artırmanın Yolları

Bir web sayfasının ilk üç saniyede açılmaması, ziyaretçilerin önemli bir kısmının sekmeyi kapatması demektir. Performans yalnızca bir konfor meselesi değil; dönüşüm oranını, arama motoru sıralamasını ve kullanıcı memnuniyetini doğrudan etkileyen ölçülebilir bir faktördür. İyi haber şu: hızın büyük kısmı birkaç hedefli müdahaleyle gelir. Bu yazıda en yüksek getirili optimizasyonları sıralıyoruz.

Önce ölçün, sonra optimize edin

Tahminle optimizasyon yapmak vakit kaybıdır. Tarayıcının yerleşik DevTools > Lighthouse sekmesi veya PageSpeed Insights size somut bir rapor verir: sayfa ne zaman görünür hâle geliyor, en büyük öğe ne zaman yükleniyor, düzen ne kadar kayıyor.

Üç temel ölçüt (Core Web Vitals) şunlardır:

• LCP (Largest Contentful Paint): En büyük içeriğin görünme süresi. İdeali 2.5 saniyenin altı.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken öğelerin ne kadar zıpladığı.
• INP (Interaction to Next Paint): Kullanıcı etkileşimine yanıt hızı.

Aşağıdaki gibi basit bir öncesi/sonrası karşılaştırması bile yaptığınız işin değerini gösterir:

En büyük kazanç: görseller

Çoğu sitede sayfa ağırlığının yarısından fazlası görsellerdir. Buradaki iyileştirmeler genellikle en hızlı sonucu verir.

• Doğru format: Fotoğraflar için JPEG yerine WebP veya AVIF kullanın; aynı kalitede çok daha küçük dosya elde edersiniz.
• Doğru boyut: 400 piksel genişliğinde gösterilen bir görseli 3000 piksel olarak yüklemeyin. Sunucuda yeniden boyutlandırın.
• srcset ile uyarlanabilirlik: Telefona küçük, masaüstüne büyük sürümü gönderin:

<img src="kapak-800.webp"
     srcset="kapak-400.webp 400w, kapak-800.webp 800w, kapak-1600.webp 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Ürün kapağı">

• Tembel yükleme (lazy loading): Ekranda henüz görünmeyen görselleri sonraya bırakın:

<img src="urun.webp" loading="lazy" alt="Ürün">

Daha az ve daha akıllı istek

Tarayıcı her dosya için ayrı bir istek yapar. İstek sayısını ve boyutunu azaltmak doğrudan hıza yansır.

• Sıkıştırma: Sunucuda Gzip veya Brotli'yi açın; HTML, CSS ve JS dosyaları çoğu zaman %70'e varan oranda küçülür.
• Küçültme (minify): Üretim sürümünde CSS ve JS'den boşlukları, yorumları temizleyin.
• Birleştirme yerine HTTP/2: Modern sunucular birden çok dosyayı tek bağlantıda paralel gönderebildiği için eski "her şeyi tek dosyada topla" tavsiyesi artık geçerliliğini yitirdi; bunun yerine HTTP/2 veya HTTP/3 kullandığınızdan emin olun.

Önbellek (cache) ile tekrar ziyaretleri ücretsiz yapın

Bir kullanıcının ikinci ziyaretinde aynı dosyaları yeniden indirmesine gerek yok. Statik dosyalara uzun ömürlü önbellek başlığı verin:

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

Dosya değiştiğinde adına bir sürüm parçası ekleyin (style.a3f9.css gibi) ki tarayıcı yeni sürümü alsın. Böylece değişmeyen dosyalar aylarca tarayıcıda kalır, değişenler ise anında güncellenir.

JavaScript'i yolun dışında tutun

JavaScript, sayfanın çizilmesini engelleyebilen en pahalı kaynaktır.

• Script'leri defer ile yükleyin; böylece HTML ayrıştırması beklemez:

<script src="uygulama.js" defer></script>

• Kullanıcının hemen ihtiyaç duymadığı kodu böl ve ertele (code splitting). Bir grafik kütüphanesini, ancak grafik görünen sayfada yükleyin.
• Üçüncü taraf script'leri (analitik, sohbet widget'ları) gözden geçirin; çoğu zaman performans bütçesinin sessiz katilleri bunlardır.

Düzen kaymasını (CLS) önleyin

Sayfa yüklenirken bir reklam veya görsel sonradan gelip içeriği aşağı itince kullanıcı yanlış yere tıklar. Bunu önlemek için görsellere ve gömülü içeriklere en/boy oranını baştan bildirin:

<img src="foto.webp" width="800" height="450" alt="...">

Tarayıcı yeri önceden ayırır, içerik geldiğinde hiçbir şey zıplamaz.

Kritik CSS ve fontlar

İlk görünen içeriğin (above the fold) ihtiyaç duyduğu CSS'i sayfaya gömün, gerisini sonra yükleyin. Fontlar içinse font-display: swap kullanın; böylece metin, özel font yüklenene kadar görünmez kalmaz:

@font-face {
  font-family: "Inter";
  src: url("inter.woff2") format("woff2");
  font-display: swap;
}

Sonuç

Web performansı tek bir sihirli ayar değil, küçük kazançların toplamıdır: görselleri küçültmek, gereksiz istekleri kesmek, önbelleği doğru kurmak, JavaScript'i ertelemek ve düzen kaymasını önlemek. Önce ölçer, en ağır kaynaktan başlar ve değişikliği yine ölçerek doğrularsanız, çoğu sitenin yükleme süresini birkaç saatlik çalışmayla yarıya indirebilirsiniz. Kullanıcılarınız bunu fark etmeyebilir ama davranışlarıyla size teşekkür eder.