Web Sitesi Nasıl Hızlandırılır? Görsel, Önbellek, Sıkıştırma ve Sunucu Optimizasyonu

Yavaş açılan bir site, ziyaretçiyi kaybeder, dönüşümü düşürür ve arama motorlarında dezavantaj yaratır. İyi haber şu ki sitelerin yavaşlığının nedenleri çoğunlukla birkaç ortak kalemden gelir ve sıralı bir yöntemle çözülebilir. Bu rehber, en çok kazanç sağlayan adımları öncelik sırasıyla verir.

1. Önce ölç, sonra düzelt

Tahmin etmek yerine ölçün. PageSpeed Insights hem gerçek kullanıcı verisini (varsa) hem de laboratuvar ölçümünü gösterir; Lighthouse (Chrome DevTools içinde) ayrıntılı tanılama sunar; tarayıcının Network sekmesi hangi dosyanın ne kadar sürede geldiğini gösterir. Ölçümü önce ve sonra tekrarlayıp iyileşmeyi doğrulayın. Metriklerin anlamı için Core Web Vitals rehberimize bakın.

2. Görselleri optimize edin

Sayfa ağırlığının çoğu çoğunlukla görsellerden gelir:

• Doğru boyut: 4000 piksellik bir fotoğrafı 600 piksellik alanda göstermek, gereksiz veri demektir. Görseli gösterildiği boyuta yakın yükleyin.
• Modern biçimler: WebP ve AVIF, aynı kalitede JPEG ve PNG'ye göre genellikle daha küçük dosyalar üretir. Eski tarayıcılar için <picture> ile yedek sunabilirsiniz.
• Duyarlı görseller: srcset ve sizes ile cihaza uygun boyutu servis edin.
• Tembel yükleme: Ekranın altında kalan görsellere loading="lazy" ekleyin. Ancak sayfanın en üstündeki ana görseli (LCP öğesi) tembel yüklemeyin.
• Boyut nitelikleri: width ve height belirterek yüklenirken düzen kaymasını önleyin.

3. Sıkıştırma

Metin tabanlı dosyalar (HTML, CSS, JavaScript, JSON, SVG) sunucu tarafında sıkıştırılarak çok küçülür. gzip yaygındır; Brotli metin dosyalarında genellikle daha iyi sıkıştırma sağlar. Çoğu hosting ve CDN bunu tek ayarla açar. Apache'de örnek:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
</IfModule>

JPEG, PNG, WebP ve video gibi zaten sıkıştırılmış dosyaları ayrıca sıkıştırmaya çalışmayın; kazanç sağlamaz.

4. Tarayıcı önbellekleme

Ziyaretçi sitenize ikinci kez geldiğinde değişmeyen dosyaları yeniden indirmemelidir. Bunu Cache-Control (ve ETag) başlıklarıyla yönetirsiniz. Sürüm bilgisi içeren dosya adları (stil.8f3a2c.css) kullanıyorsanız çok uzun süre (örneğin bir yıl) önbellekleyebilirsiniz; dosya değişince adı da değişir. Sürümsüz dosyalarda daha kısa süreler seçin. Apache'de örnek:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/png  "access plus 1 year"
  ExpiresByType text/css   "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

Dikkat: uzun süre belirlediğiniz dosyaları sürüm adı olmadan değiştirirseniz, ziyaretçiler eski sürümü görmeye devam eder.

5. CSS ve JavaScript

• Kullanılmayanı kaldırın: Sayfada kullanılmayan kütüphaneler ve eklentiler, hem indirme hem çalıştırma maliyeti yaratır.
• Küçültme (minify): Boşlukları ve yorumları temizleyin.
• Ertelemek: Kritik olmayan betiklere defer veya async ekleyin; böylece sayfa çizimini engellemezler.
• Üçüncü taraf betikler: Reklam, analitik, sohbet, sosyal medya gömüleri çoğunlukla en büyük yavaşlatıcılardır. Her birinin gerçekten değer katıp katmadığını sorgulayın.
• Kritik CSS: Sayfanın ilk görünen kısmı için gerekli stilleri satır içine alıp geri kalanı geciktirmek, algılanan hızı artırabilir (dikkatle uygulanmalı).

6. Web yazı tipleri

• Gerekli ağırlık ve karakter kümelerini yükleyin; kullanmadığınız ağırlıkları kaldırın.
• font-display: swap ile font gelene kadar metnin yedek fontla görünmesini sağlayın.
• Yazı tiplerini kendi sunucunuzdan servis etmek ve gerekirse preload kullanmak, üçüncü taraf bağlantı gecikmesini azaltır.

7. Sunucu tarafı

• Güncel PHP sürümü: PHP uygulamalarında desteklenen güncel sürüme geçmek hem güvenlik hem hız getirir.
• OPcache: PHP kodunun derlenmiş halini bellekte tutar; çoğu sunucuda etkinleştirilebilir.
• Sayfa önbellekleme: CMS'lerde (WordPress vb.) her istekte sayfayı baştan üretmek yerine hazır HTML sunan önbellek eklentileri veya sunucu düzeyinde önbellek büyük fark yaratır.
• Veritabanı: Yavaş sorguları bulun, sık sorgulanan sütunlara indeks ekleyin, gereksiz sorguları azaltın. Eklentilerin çok sayıda sorgu ürettiği sitelerde bu belirleyicidir.
• HTTP/2 ve HTTP/3: Çok sayıda dosyanın paralel taşınmasını sağlar; çoğu hosting ve CDN'de HTTPS ile birlikte gelir (HTTPS rehberi).
• Yönlendirme zincirlerini kısaltın: Her yönlendirme ek gecikmedir (yönlendirmeler).
• CDN: Coğrafi gecikmeyi azaltır (CDN rehberi). Sunucu kalitesi için de bkz. hosting seçimi.

8. WordPress için özel notlar

• Kullanmadığınız eklentileri ve temaları silin; her eklenti ek yük demektir.
• Hafif bir tema seçin; çok işlevli ve ağır temalar sıklıkla yavaş olur.
• Bir önbellek eklentisi ve görsel optimizasyon çözümü kullanın.
• Veritabanını (eski revizyonlar, spam yorumlar) düzenli temizleyin.

Öncelik sırası

1. Ölçüm yap ve en büyük sorunu bul.
2. Görselleri küçült ve doğru biçime çevir.
3. Sıkıştırma ve tarayıcı önbelleklemeyi aç.
4. Gereksiz betik ve eklentileri kaldır.
5. Sunucu kalitesini ve önbelleklemeyi iyileştir.
6. CDN ekle.
7. Tekrar ölç ve karşılaştır.

Kaynaklar ve ileri okuma

• web.dev: Performans öğren
• web.dev: LCP'yi optimize etme
• MDN: HTTP önbellekleme
• Apache: mod_deflate

Sık Sorulan Sorular

Bir sitenin açılma süresi ne kadar olmalı?

Evrensel tek bir süre yoktur. Google'ın Core Web Vitals eşikleri iyi bir referanstır: ana içeriğin yaklaşık 2,5 saniye içinde görünmesi hedeflenir. Asıl hedef, kullanıcının beklemeden içeriğe ulaşmasıdır.

Hız eklentisi kurmak yeterli mi?

Eklentiler önbellekleme, sıkıştırma ve görsel optimizasyonunda yardımcı olur, ancak ağır tema, çok sayıda üçüncü taraf betik ve yetersiz hosting gibi temel sorunları tek başına çözmez.

Hızlandırmak için nereden başlamalıyım?

PageSpeed Insights'ın "Fırsatlar" ve "Tanılama" bölümlerini inceleyin; çoğu sitede görsel boyutları, kullanılmayan JavaScript ve önbellek ayarları en büyük kazancı sağlar.