İyi bir web sayfa hızı artık lüks değil, temel bir gereklilik. Kullanıcılar bir sayfanın saniyeler içinde açılmasını bekliyor; üç saniyeyi geçen her gecikme ziyaretçilerin önemli bir kısmını kaybetmenize yol açıyor. Google da hızı bir sıralama sinyali olarak kullanıyor. İyi haber şu: sayfanızı hızlandırmak çoğu zaman pahalı sunuculardan değil, doğru tekniklerin sırayla uygulanmasından geçiyor. Bu rehberde lazy load, minify ve caching üçlüsüyle yükleme süresini nasıl ciddi biçimde kısaltacağınızı somut örneklerle anlatıyorum.
Önce ölçün: neyi optimize ettiğinizi bilin
Tahminle optimizasyon yapmak vakit kaybıdır. İşe ölçerek başlayın. Tarayıcının yerleşik DevTools aracında Lighthouse sekmesi, sayfanızın performansını puanlar ve en büyük darboğazları sıralar. Daha gerçekçi veri için Google'ın PageSpeed Insights aracı hem laboratuvar hem de saha (gerçek kullanıcı) verisini gösterir.
Odaklanmanız gereken üç Core Web Vitals metriği var:
- LCP (Largest Contentful Paint): en büyük içerik öğesinin ekrana gelme süresi; 2,5 saniyenin altı iyidir.
- INP (Interaction to Next Paint): kullanıcı etkileşimine yanıt süresi; 200 ms altı hedeflenir.
- CLS (Cumulative Layout Shift): görsel kaymanın miktarı; 0,1 altı iyidir.
Bu metrikleri her değişiklikten sonra yeniden ölçün ki neyin gerçekten işe yaradığını görebilesiniz.
Lazy load: yalnızca görüneni yükleyin
Sayfanın ilk açılışında ekranın dışında kalan görselleri, iframe'leri ve videoları hemen indirmek gereksizdir. Lazy loading, bu kaynakların yüklenmesini kullanıcı o bölgeye kaydırana kadar erteler. Modern tarayıcılarda bu tek satırlık bir niteliktir:
<img src="urun.jpg" alt="Ürün görseli" loading="lazy" width="800" height="600">
<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>width ve height değerlerini her zaman belirtin; bu, tarayıcının yer ayırmasını sağlayarak CLS'i önler. Ekranın üst kısmındaki (above the fold) ilk görsele ise loading="lazy" vermeyin — onu mümkün olduğunca erken yükletmek LCP'yi iyileştirir.
JavaScript ile gelen ağır bileşenleri de geciktirebilirsiniz. Örneğin bir modülü yalnızca gerektiğinde içe aktarmak:
button.addEventListener('click', async () => {
const { acGrafik } = await import('./grafik.js');
acGrafik();
});Bu "code splitting" yaklaşımı, başlangıç paketini küçültür ve sayfanın etkileşime hazır olma süresini kısaltır.
Minify ve sıkıştırma: baytları azaltın
Geliştirme sırasında okunaklı olsun diye yazdığımız boşluklar, yorumlar ve uzun değişken adları tarayıcı için gereksiz yüktür. Minify, CSS ve JavaScript dosyalarından bu fazlalıkları temizleyerek dosya boyutunu küçültür. Çoğu derleme aracı (Vite, esbuild, webpack) üretim derlemesinde bunu otomatik yapar:
npm run build # Vite varsayılan olarak minify + tree-shaking uygularMinify'in üzerine bir de sunucu tarafında sıkıştırma ekleyin. Gzip yaygın desteklenir, ama Brotli metin tabanlı dosyalarda genellikle daha iyi oran verir. Nginx'te etkinleştirmek:
gzip on;
gzip_types text/css application/javascript image/svg+xml;
# Brotli modülü kuruluysa:
brotli on;
brotli_types text/css application/javascript image/svg+xml;Görsellerde de format seçimi büyük fark yaratır. Klasik JPEG/PNG yerine WebP veya AVIF kullanmak dosya boyutunu çoğu zaman %30–70 düşürür. Farklı ekran genişlikleri için srcset ile uygun boyutu sunun, böylece mobil kullanıcı masaüstü görseli indirmek zorunda kalmasın.
Caching: aynı şeyi iki kez indirmeyin
Bir kullanıcı sitenize ikinci kez geldiğinde değişmeyen dosyaları yeniden indirmesi anlamsızdır. Tarayıcı önbelleği, statik kaynakları Cache-Control başlığıyla kullanıcının cihazında saklar:
location ~* \.(css|js|woff2|webp|avif)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}Bir yıllık uzun süreli önbellek güvenlidir, çünkü dosya içeriği değiştiğinde dosya adına bir hash eklersiniz (ör. app.4f8a2c.js). İçerik değişince ad da değişir, tarayıcı yeni dosyayı çeker — buna cache busting denir.
Bir CDN (Cloudflare, Fastly, BunnyCDN gibi) bu önbelleği kullanıcıya coğrafi olarak yakın sunuculara taşır; böylece içerik fiziksel mesafeden bağımsız hızlı ulaşır. Sunucu tarafında ise tekrar eden hesaplamaları veya veritabanı sorgularını önbelleğe alabilirsiniz. Laravel'de bu son derece basittir:
$projeler = Cache::remember('anasayfa.projeler', 3600, function () {
return Project::orderBy('sort')->get();
});Burada sonuç bir saat boyunca saklanır ve veritabanı her istekte yorulmaz.
Kritik yolu kısaltın: render'i engelleyenleri çözün
Tarayıcı, <head> içindeki CSS ve senkron JavaScript'i indirip işlemeden sayfayı çizemez; bunlara render-blocking kaynaklar denir. Birkaç pratik önlem:
- Sayfanın ilk görünümü için gereken kritik CSS'i satır içine (
<style>) koyup geri kalanını ertelemek. - Acil olmayan scriptlere
defer(veya bağımsızsaasync) eklemek:<script src="app.js" defer></script> - Önemli kaynakları erken haber vermek:
<link rel="preload" as="font" href="font.woff2" crossorigin> - Web fontlarına
font-display: swap;vererek metnin font yüklenirken görünür kalmasını sağlamak. - Üçüncü taraf scriptleri (analytics, sohbet widget'ları) gözden geçirmek; her biri performansa ciddi yük bindirebilir.
Sık Sorulan Sorular
İyi bir sayfa yükleme süresi kaç saniyedir?
Genel kural olarak ilk anlamlı içerik 2,5 saniyenin altında görünmeli (LCP hedefi). Tam etkileşime hazır olma süresi de mümkün olduğunca düşük olmalı. Önemli olan tek bir sihirli rakam değil, Core Web Vitals eşiklerini "iyi" aralıkta tutmaktır.
Lazy load SEO'ya zarar verir mi?
Doğru uygulandığında hayır. Yerel loading="lazy" niteliği arama motorları tarafından iyi anlaşılır. Ancak sayfanın üst kısmındaki ana görseli geciktirmeyin ve içeriği gerçekten gerekene kadar tamamen JS'e bağlamayın; aksi halde tarayanlar içeriği bulmakta zorlanabilir.
Önce hangisini yapmalıyım: minify mi caching mi?
İkisi birbirini tamamlar, ama en hızlı kazanç genelde ölçümle başlamaktır. Ardından görsel optimizasyonu ve lazy load çoğu sitede en büyük etkiyi verir; minify ve caching ise kalıcı, düşük maliyetli iyileştirmelerdir. Hepsini birlikte uygulamak idealdir.
Sitenizin hızı, kullanıcıların ilk izlenimidir. Ölçerek başlayıp lazy load, minify ve caching'i adım adım uygularsanız hem ziyaretçi deneyimi hem de arama sıralamanız belirgin biçimde iyileşir. Sitenizi birlikte hızlandırmamı ister misiniz? Benimle iletişime geçin ve performans denetiminizi planlayalım.