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.

Sunucu tarafı: ilk bayt zamanı (TTFB)

Tarayıcı tarafındaki tüm optimizasyonlar, sunucunuz yanıtı geç üretiyorsa boşa gider. İlk bayt zamanını (TTFB) düşürmenin üç pratik yolu:

• Yanıtı önbelleğe alın. Her istek için veritabanına gitmeyin; sık istenen ve nadir değişen çıktıları (ana sayfa, listeler) sunucu bellekte 30-120 saniye tutmak bile yükü dramatik azaltır.
• CDN kullanın. Cloudflare gibi bir CDN, statik dosyalarınızı ziyaretçiye en yakın noktadan sunar ve sunucunuza ulaşan istek sayısını azaltır. Kendi sitemde Cloudflare'i devreye aldığımda statik kaynakların önemli kısmı origin sunucuya hiç uğramadan dönmeye başladı; fark, özellikle yurt dışı ziyaretçilerde belirgindi.
• Veritabanı sorgularını ölçün. Sayfa başına kaç sorgu çalışıyor? N+1 sorgu deseni (listede her satır için ayrı sorgu) en yaygın sessiz katildir; tek bir JOIN ile çözülür.

Kaynak ipuçları: preconnect ve preload

Tarayıcıya "birazdan şunlar lazım olacak" demek, bağlantı kurma ve indirme sürelerini gizler:

<!-- Üçüncü taraf alana erken bağlan (DNS + TLS önceden) -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Kritik fontu hemen indirmeye başla -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

preconnect, font veya analitik gibi başka alan adlarından gelen kaynaklarda 100-300 ms'lik bağlantı maliyetini öne çeker. preload ise tarayıcının CSS'i ayrıştırmadan keşfedemeyeceği kritik kaynakları (fontlar, hero görseli) kuyruğun başına alır. Ama dikkat: her şeyi preload yaparsanız hiçbir şey öncelikli olmaz; yalnızca ilk ekranda gerçekten gereken bir-iki kaynakla sınırlayın.

Performans bütçesi koyun

Optimizasyon tek seferlik bir iş değildir; site geliştikçe yeni eklenen her özellik biraz ağırlık getirir. Bunu kontrol altında tutmanın yolu kendinize somut bir bütçe koymaktır: örneğin "ana sayfa 300 KB'ı, LCP 2,5 saniyeyi geçmeyecek". Her önemli değişiklikten sonra Lighthouse'u çalıştırıp bütçeyle karşılaştırın. Bütçeyi aşan değişiklik ya optimize edilir ya da gerekçesiyle kabul edilir — ama asla fark edilmeden sızmaz.

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.