Web Sitesi Hız Optimizasyonu: Sayfa Hızını 3 Saniyenin Altına İndirme Rehberi
Web siteniz 3 saniyeden uzun yükleniyorsa, ziyaretçilerinizin %53'ü sayfayı terk ediyor. Mobil kullanıcılarda bu oran %70'e çıkıyor. Daha da kötüsü: Google, yavaş siteleri arama sonuçlarında aşağı itiyor.
Sayfa hızı artık sadece teknik bir detay değil — doğrudan SEO sıralamanızı, dönüşüm oranınızı ve kullanıcı deneyiminizi etkileyen kritik bir büyüme faktörü. Amazon'un araştırmasına göre, sayfa yükleme süresindeki her 100ms gecikme, satışları %1 düşürüyor.
Bu yazıda, web sitenizin hızını ölçmekten Core Web Vitals optimizasyonuna, görsel sıkıştırmadan CDN kullanımına kadar sayfa hızınızı 3 saniyenin altına indirecek kapsamlı rehberi bulacaksınız.
Sayfa Hızı Neden Bu Kadar Önemli?
%53
Mobil kullanıcılar 3 saniyeden uzun yüklenen siteyi terk ediyor
%7
Her 1 saniyelik gecikme dönüşüm oranını bu kadar düşürüyor
2x
Hızlı siteler yavaş sitelere göre 2 kat daha fazla dönüşüm sağlıyor
Sayfa Hızının 3 Temel Etkisi:
SEO Sıralaması
Google, 2021'den itibaren Core Web Vitals'ı resmi sıralama faktörü olarak kullandığını açıkladı. Yavaş siteler, rakiplerine kıyasla arama sonuçlarında geride kalıyor.
Dönüşüm Oranı
Walmart, sayfa hızını 1 saniye iyileştirerek dönüşüm oranını %2 artırdı. Mobil e-ticarette bu etki çok daha büyük — her saniye doğrudan gelir kaybı demek.
Kullanıcı Deneyimi
Hızlı yüklenen siteler daha düşük bounce rate, daha uzun oturum süresi ve daha yüksek sayfa görüntüleme sayısı sağlıyor. Kullanıcılar hızlı sitelere geri dönüyor.
Gerçek Örnek: Pinterest, sayfa yükleme süresini %40 azaltarak organik trafiğini %15 ve kayıt dönüşümlerini %15 artırdı. Tek bir teknik iyileştirme, büyük büyüme farkı yarattı.
Core Web Vitals: Google'ın Hız Ölçütleri
Google, sayfa deneyimini ölçmek için 3 temel metrik kullanıyor. Bu metriklerde iyi puan almak hem SEO hem de kullanıcı deneyimi için kritik.
Largest Contentful Paint (LCP)
Sayfanın en büyük içerik öğesinin (görsel veya metin bloğu) yüklenme süresi
İyileştirme Yöntemleri:
- • Hero görselini WebP formatına dönüştürün ve sıkıştırın
- • Kritik CSS'i inline olarak yükleyin
- • Sunucu yanıt süresini (TTFB) optimize edin
- • CDN kullanarak içeriği kullanıcıya yakın sunun
Interaction to Next Paint (INP)
Kullanıcı etkileşimine (tıklama, dokunma) sayfanın tepki verme süresi — 2024'te FID'in yerini aldı
İyileştirme Yöntemleri:
- • JavaScript'i küçültün ve gereksiz kütüphaneleri kaldırın
- • Uzun görevleri (Long Tasks) parçalara bölün
- • Üçüncü taraf scriptleri async/defer ile yükleyin
- • React/Vue gibi framework'lerde gereksiz re-render'ları önleyin
Cumulative Layout Shift (CLS)
Sayfa yüklenirken elementlerin beklenmedik şekilde kayma miktarı — görsel kararlılık ölçütü
İyileştirme Yöntemleri:
- • Tüm görsellere width ve height attribute ekleyin
- • Reklam ve embed alanları için yer tutucu (placeholder) kullanın
- • Web fontlarını önceden yükleyin (font-display: swap)
- • Dinamik içerikleri sayfanın altına yerleştirin
Nasıl Ölçersiniz? Google PageSpeed Insights (pagespeed.web.dev), Google Search Console > Core Web Vitals raporu ve Chrome DevTools > Lighthouse ile ücretsiz ölçüm yapabilirsiniz.
Görsel Optimizasyonu: En Büyük Hız Kazanımı
Ortalama bir web sayfasının %60-70'i görsellerden oluşuyor. Görsel optimizasyonu, sayfa hızını iyileştirmenin en kolay ve en etkili yolu.
Doğru Format Seçimi
Modern görsel formatları, JPEG ve PNG'ye kıyasla çok daha küçük dosya boyutu sunar.
| Format | Boyut Tasarrufu | Kullanım Alanı | Tarayıcı Desteği |
|---|---|---|---|
| WebP | %25-35 (JPEG'e göre) | Fotoğraflar, ürün görselleri | %95+ (tüm modern tarayıcılar) |
| AVIF | %50 (JPEG'e göre) | Yüksek kalite fotoğraflar | %85+ (Chrome, Firefox, Safari) |
| SVG | Çok küçük dosya | Logo, ikon, illüstrasyon | %100 |
| JPEG | Referans | Fallback olarak kullanın | %100 |
Lazy Loading (Tembel Yükleme)
Lazy loading, kullanıcının görüş alanına giren görselleri yükler. Sayfa açılışında tüm görselleri yüklemek yerine, sadece görünen kısmı yükler.
HTML ile Lazy Loading:
<img src="gorsel.webp" loading="lazy" alt="Açıklama" />- ✓İlk sayfa yükleme süresini %20-30 azaltır
- ✓Bant genişliği tasarrufu sağlar
- ✗Hero görsellerine lazy loading uygulamayın — LCP'yi kötüleştirir
Responsive Görseller (srcset)
Farklı ekran boyutları için farklı görsel boyutları sunun. Mobil kullanıcıya 1200px genişliğinde görsel göndermek gereksiz bant genişliği tüketir.
Öneri: Görselleri 3 boyutta hazırlayın: 400px (mobil), 800px (tablet), 1200px (masaüstü). srcset ile tarayıcının doğru boyutu seçmesine izin verin.
Görsel Sıkıştırma Araçları
Kalite kaybı olmadan görsel boyutunu %50-80 azaltabilirsiniz.
Ücretsiz Araçlar
- • Squoosh.app (Google)
- • TinyPNG / TinyJPG
- • ImageOptim (Mac)
Ücretli / Otomatik
- • Cloudinary (CDN + optimizasyon)
- • Imgix
- • ShortPixel (WordPress)
JavaScript ve CSS Optimizasyonu
Şişirilmiş JavaScript ve CSS dosyaları, sayfa yükleme süresini ciddi ölçüde artırır. Render-blocking kaynaklar, tarayıcının sayfayı göstermesini geciktirir.
5 Kritik JavaScript/CSS Optimizasyonu:
Minification (Küçültme)
Boşlukları, yorumları ve gereksiz karakterleri kaldırın. JS dosyaları %20-40, CSS dosyaları %10-30 küçülür. Webpack, Vite ve Parcel otomatik yapar.
Code Splitting (Kod Bölme)
Tüm JavaScript'i tek dosyada göndermek yerine, sayfaya özel parçalara bölün. Kullanıcı sadece ihtiyaç duyduğu kodu indirir. React'ta lazy() ve Suspense ile kolayca yapılır.
Tree Shaking (Kullanılmayan Kodu Temizleme)
Kullanılmayan JavaScript kodunu bundle'dan çıkarın. Lodash gibi büyük kütüphanelerin sadece kullandığınız fonksiyonlarını import edin.
Async/Defer ile Script Yükleme
Kritik olmayan scriptleri async veya defer ile yükleyin. Bu, tarayıcının HTML'yi parse etmeye devam etmesini sağlar ve render-blocking'i önler.
Critical CSS Inline Yükleme
İlk ekranda görünen elementlerin CSS'ini <head> içinde inline olarak yükleyin. Geri kalan CSS'i asenkron yükleyin. LCP'yi önemli ölçüde iyileştirir.
Üçüncü Taraf Scriptler: Google Analytics, Facebook Pixel, chat widget'ları gibi üçüncü taraf scriptler sayfa hızını ciddi ölçüde yavaşlatabilir. Her birinin etkisini Google PageSpeed Insights ile ölçün ve gereksiz olanları kaldırın.
CDN ve Sunucu Optimizasyonu
Sunucu yanıt süresi (TTFB — Time to First Byte), sayfa hızının temel belirleyicilerinden biri. İdeal TTFB 200ms'nin altında olmalı.
CDN (Content Delivery Network) Nedir?
CDN, içeriğinizi dünya genelindeki sunuculara dağıtır. Kullanıcı, en yakın sunucudan içeriği alır. İstanbul'daki bir kullanıcı, ABD'deki sunucu yerine Almanya veya Türkiye'deki CDN sunucusundan içeriği alır.
CDN Faydaları:
- ✓ Yükleme süresini %40-70 azaltır
- ✓ Sunucu yükünü dağıtır
- ✓ DDoS saldırılarına karşı koruma
- ✓ Yüksek trafik dönemlerinde stabilite
Popüler CDN Sağlayıcıları:
- • Cloudflare (ücretsiz plan mevcut)
- • AWS CloudFront
- • Fastly
- • BunnyCDN (uygun fiyatlı)
Browser Caching (Tarayıcı Önbelleği)
Statik dosyaları (CSS, JS, görseller) tarayıcıda önbelleğe alın. Tekrar ziyaret eden kullanıcılar bu dosyaları sunucudan indirmek yerine önbellekten yükler.
Önerilen Cache Süreleri:
- • Görseller: 1 yıl (365 gün)
- • CSS/JS (versiyonlanmış): 1 yıl
- • HTML: 1 saat veya no-cache
- • API yanıtları: İçeriğe göre değişir
Gzip / Brotli Sıkıştırma
Sunucudan gönderilen dosyaları sıkıştırın. Brotli, Gzip'e göre %15-20 daha iyi sıkıştırma sağlar. HTML, CSS ve JS dosyaları %60-80 küçülür.
Kontrol Yöntemi: Chrome DevTools > Network sekmesinde bir dosyaya tıklayın. Response Headers'da "Content-Encoding: gzip" veya "Content-Encoding: br" görüyorsanız sıkıştırma aktif.
Web Font Optimizasyonu
Web fontları, özellikle Google Fonts, sayfa hızını olumsuz etkileyebilir. Doğru yapılandırılmadığında hem CLS hem de LCP'yi kötüleştirir.
font-display: swap Kullanın
Font yüklenene kadar sistem fontunu gösterin. Kullanıcı boş ekran yerine içeriği görür. CLS'yi azaltır.
Fontları Self-Host Edin
Google Fonts yerine fontları kendi sunucunuzda barındırın. Harici DNS sorgusu ortadan kalkar, yükleme hızlanır. Google Fonts Helper aracını kullanın.
Sadece Gerekli Font Ağırlıklarını Yükleyin
400 (regular) ve 700 (bold) genellikle yeterli. Her ek font ağırlığı ekstra HTTP isteği ve bant genişliği demek.
WOFF2 Formatını Kullanın
WOFF2, en iyi sıkıştırmayı sunan modern font formatı. TTF ve OTF'ye kıyasla %30 daha küçük dosya boyutu.
Hız Ölçüm Araçları ve Yorumlama
| Araç | Ne Ölçer? | Fiyat | Kullanım Amacı |
|---|---|---|---|
| Google PageSpeed Insights | Core Web Vitals, performans skoru | Ücretsiz | Temel analiz ve öneriler |
| GTmetrix | Waterfall analizi, detaylı raporlar | Ücretsiz (sınırlı) | Detaylı sorun tespiti |
| WebPageTest | Farklı lokasyon ve cihazdan test | Ücretsiz | Gerçek dünya performansı |
| Chrome Lighthouse | Performans, SEO, erişilebilirlik | Ücretsiz | Geliştirici ortamı testi |
| Google Search Console | Gerçek kullanıcı Core Web Vitals | Ücretsiz | Gerçek kullanıcı verisi |
Önemli Not: PageSpeed Insights iki farklı veri gösterir: "Lab Data" (simüle edilmiş) ve "Field Data" (gerçek kullanıcı). SEO için önemli olan "Field Data" — Google bu veriyi sıralama için kullanır.
Web Sitesi Hız Optimizasyonu Kontrol Listesi
Web Sitenizin Hızını Birlikte Optimize Edelim
Ücretsiz hız analizi ile sitenizin nerede yavaşladığını tespit edin. Somut aksiyon planı ile hızınızı artırın.
İlgili Yazılar
Yazar
Uğur Alican
Dijital Büyüme Danışmanı
KOBİ'ler ve büyüme odaklı işletmeler için stratejik dijital pazarlama danışmanlığı sunuyor. SEO, performans reklamları ve dönüşüm optimizasyonu konularında 10+ yıl deneyim.
LinkedIn Profili