Web Sitesi Hız Optimizasyonu: Kapsamlı Performans Rehberi

Q: Hangi hız skoru iyi kabul edilir?

PageSpeed Insights'ta 90+ yeşil alan iyi kabul edilir. Ancak önemli olan Core Web Vitals'ın "good" kategorisinde olması. LCP < 2.5s, INP < 200ms, CLS < 0.1 hedefleyin. Mobil skorları genelde desktop'tan düşük olur.

Q: WordPress sitesini nasıl hızlandırırım?

Kaliteli caching plugin'i kullanın (WP Rocket, LiteSpeed Cache). Görsel optimizasyonu için Imagify veya ShortPixel. Gereksiz plugin'leri kaldırın. CDN entegrasyonu yapın. Hızlı hosting seçin (VPS veya managed WordPress).

Q: CDN gerçekten gerekli mi?

Türkiye hedefli siteler için CDN'in etkisi sınırlı olabilir. Ancak global trafik, yüksek görsel kullanımı veya trafik dalgalanmaları varsa CDN önerilir. Cloudflare ücretsiz planı bile faydalı olabilir.

Q: Lazy loading SEO'yu etkiler mi?

Modern lazy loading (native veya Intersection Observer) SEO dostu. Google JavaScript'i render edebiliyor. Ancak above-the-fold içeriği lazy loading yapmayın. Critical içerik hemen yüklenmeli.

Q: Site hızı ne sıklıkla ölçülmeli?

Haftalık PageSpeed kontrolü önerilir. Büyük değişikliklerden sonra mutlaka ölçün. Google Search Console'da Core Web Vitals raporunu düzenli takip edin. Real User Monitoring (RUM) ile sürekli izleme ideal.

Web sitesi hızı, kullanıcı deneyimi ve SEO için kritik bir faktördür. 1 saniyelik gecikme, dönüşüm oranlarında %7 düşüşe neden olabilir. Google'ın Core Web Vitals güncellemesiyle birlikte, site hızı artık doğrudan sıralama faktörü olarak değerlendiriliyor.

Hız Neden Önemli?

Site hızı, iş sonuçlarını doğrudan etkiler.

İstatistikler

Gecikme	Etki
1 saniye	%7 dönüşüm kaybı
2 saniye	%25 terk oranı artışı
3 saniye	%40 ziyaretçi kaybı
5+ saniye	%90 terk oranı

Google'ın Beklentileri

Core Web Vitals Hedefleri:

LCP (Largest Contentful Paint): < 2.5 saniye
INP (Interaction to Next Paint): < 200ms
CLS (Cumulative Layout Shift): < 0.1

Hızın Etkileri

Kullanıcı Deneyimi:

Memnuniyet
Güven
Tekrar ziyaret
Önerme

İş Sonuçları:

Dönüşüm oranı
Satış
SEO sıralaması
Reklam maliyeti (Quality Score)

SEO:

Sıralama faktörü
Crawl budget
Mobile-first indexing
User signals

Hız Ölçüm Araçları

Doğru ölçüm, doğru optimizasyonun temelidir.

Ücretsiz Araçlar

Google PageSpeed Insights:

https://pagespeed.web.dev/

Sağladıkları:
├── Core Web Vitals skorları
├── Field data (gerçek kullanıcı)
├── Lab data (simülasyon)
├── Spesifik öneriler
└── Diagnostics detayları

Google Lighthouse:

Chrome DevTools'ta yerleşik
Performance, Accessibility, SEO, Best Practices
Detaylı analiz raporu
Network throttling simülasyonu

GTmetrix:

Waterfall analizi
Video playback
Coğrafi konum seçimi
Tarihsel karşılaştırma

WebPageTest:

Çoklu konum testi
Farklı bağlantı hızları
İlk/tekrar ziyaret karşılaştırması
Filmstrip görünümü

Ölçüm Metrikleri

Kritik Metrikler:

Yükleme Metrikleri:
├── TTFB (Time to First Byte): < 200ms
├── FCP (First Contentful Paint): < 1.8s
├── LCP (Largest Contentful Paint): < 2.5s
├── TTI (Time to Interactive): < 3.8s
└── Speed Index: < 3.4s

Etkileşim Metrikleri:
├── INP (Interaction to Next Paint): < 200ms
├── TBT (Total Blocking Time): < 200ms
└── FID (First Input Delay): < 100ms

Görsel Stabilite:
└── CLS (Cumulative Layout Shift): < 0.1

Görsel Optimizasyonu

Görseller, sayfa boyutunun %50-70'ini oluşturur.

Format Seçimi

Modern Formatlar:

Format Karşılaştırması:
├── WebP: %25-34 daha küçük (JPEG'den)
├── AVIF: %50 daha küçük (JPEG'den)
├── PNG: Şeffaflık için
├── SVG: İkonlar, logolar, vektör grafikler
└── GIF: Basit animasyonlar (tercih: video)

HTML Picture Element:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Açıklama"
       width="800" height="600"
       loading="lazy" decoding="async">
</picture>

Boyutlandırma

Responsive Images:

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w,
             image-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1200px"
     alt="Açıklama"
     width="1200" height="800"
     loading="lazy">

Boyut Önerileri:

Thumbnail: 150-300px
Blog görsel: 800-1200px
Full-width: max 1920px
Hero: 1920x1080 (optimize edilmiş)

Sıkıştırma

Araçlar:

Squoosh (Google) - ücretsiz, online
TinyPNG - PNG/JPEG
ImageOptim (Mac)
Sharp (Node.js library)

Kalite Ayarları:

JPEG/WebP: %75-85 kalite (optimal denge)
PNG: Lossy compression uygulanabilir
AVIF: %60-70 kalite yeterli

Lazy Loading

Native Lazy Loading:

<img src="image.jpg" loading="lazy" alt="...">
<iframe src="video.html" loading="lazy"></iframe>

JavaScript Alternatifi:

Intersection Observer API
lozad.js, lazysizes gibi kütüphaneler
Above-the-fold içerik için kullanmayın

Kod Optimizasyonu

Frontend kodu da optimize edilmelidir.

CSS Optimizasyonu

Critical CSS:

<head>
  <!-- Critical CSS inline -->
  <style>
    /* Above-the-fold için gerekli stiller */
    .hero { ... }
    .header { ... }
  </style>

  <!-- Diğer CSS async yükle -->
  <link rel="preload" href="styles.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
</head>

CSS Best Practices:

Kullanılmayan CSS'i kaldır (PurgeCSS)
CSS minify (cssnano)
Selector karmaşıklığını azalt
@import yerine <link> kullan
Preload critical styles

JavaScript Optimizasyonu

Async/Defer:

<!-- Blocking (kaçının) -->
<script src="script.js"></script>

<!-- Async: indirilince çalışır -->
<script src="analytics.js" async></script>

<!-- Defer: HTML parse'dan sonra, sırayla -->
<script src="main.js" defer></script>

Code Splitting:

// Lazy loading component
const Modal = lazy(() => import('./Modal'))

// Route-based splitting
const About = lazy(() => import('./pages/About'))

Bundle Optimizasyonu:

Tree shaking
Minification (Terser)
Compression (Gzip/Brotli)
Vendor chunking

Font Optimizasyonu

Font Loading:

/* Font display ayarı */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* veya optional */
}

Preload Fonts:

<link rel="preload" href="font.woff2" as="font"
      type="font/woff2" crossorigin>

Font Best Practices:

WOFF2 formatı kullan
Sadece gerekli karakter setlerini dahil et
Variable fonts değerlendir
Sistem fontlarını fallback olarak kullan
Font sayısını minimize et

Sunucu Optimizasyonu

Backend performansı da kritiktir.

TTFB İyileştirme

Hedef: < 200ms

İyileştirmeler:

TTFB Optimizasyonu:
├── Hızlı hosting seçimi
├── PHP/Node.js optimizasyonu
├── Database indexleme
├── Query optimizasyonu
├── Opcode caching (PHP)
├── Keep-alive connections
└── HTTP/2 veya HTTP/3

Database Optimizasyonu

SQL Optimizasyonu:

Index kullanımı
Query cache
Connection pooling
Read replica (yüksek trafik)
Slow query loglama

NoSQL Değerlendirmesi:

Basit veri yapıları için
Yüksek okuma trafiği
Horizontal scaling ihtiyacı

HTTP/2 ve HTTP/3

HTTP/2 Avantajları:

Multiplexing (paralel istekler)
Header compression
Server push
Binary protocol

HTTP/3 (QUIC):

UDP tabanlı
Daha hızlı bağlantı
Daha iyi mobile performans
Packet loss tolerance

Caching Stratejileri

Doğru caching, hızın temelidir.

Browser Caching

Cache-Control Header:

# Static assets (uzun cache)
Cache-Control: public, max-age=31536000, immutable

# HTML (kısa cache veya no-cache)
Cache-Control: no-cache, must-revalidate

# API responses
Cache-Control: private, max-age=3600

Cache Türleri:

Cache Katmanları:
├── Browser cache
├── CDN edge cache
├── Reverse proxy (Varnish/Nginx)
├── Application cache (Redis)
└── Database cache

Service Worker Caching

Cache Stratejileri:

Stratejiler:
├── Cache-First: Statik assets için
├── Network-First: Dinamik içerik için
├── Stale-While-Revalidate: Güncel içerik gerektiğinde
└── Cache-Only: Çevrimdışı fallback

Server-Side Caching

Uygulama Cache:

Redis/Memcached
Object caching
Page caching
Fragment caching

WordPress için:

WP Rocket
W3 Total Cache
LiteSpeed Cache
Redis Object Cache

CDN Kullanımı

CDN, global performans için gereklidir.

CDN Seçenekleri

Popüler CDN'ler:

CDN Karşılaştırması:
├── Cloudflare: Ücretsiz plan, güçlü
├── BunnyCDN: Uygun fiyat, hızlı
├── AWS CloudFront: AWS entegrasyonu
├── Fastly: Edge computing
└── KeyCDN: Basit, güvenilir

CDN Avantajları

Performans:

Fiziksel yakınlık
Edge caching
Paralel bağlantılar
Optimize edilmiş routing

Güvenlik:

DDoS koruması
WAF (Web Application Firewall)
SSL/TLS termination
Bot protection

CDN Konfigürasyonu

Best Practices:

Statik assets için CDN
Aggressive caching
Gzip/Brotli compression
HTTP/2 push
Image optimization (varsa)

Mobile Optimizasyon

Mobil kullanıcılar farklı ihtiyaçlara sahiptir.

Mobil Öncelikler

Mobile-First:

Mobil Optimizasyon:
├── Küçük dosya boyutları
├── Critical CSS inline
├── Above-the-fold önceliği
├── Touch-friendly UI
├── Lazy loading
└── Reduced motion (tercih)

Network Durumları

Connection-Aware Loading:

// Network durumunu kontrol et
if (navigator.connection) {
  const { effectiveType, saveData } = navigator.connection

  if (effectiveType === '2g' || saveData) {
    // Düşük kaliteli görseller
    // Videoları yükleme
    // Minimal JS
  }
}

AMP Değerlendirmesi

AMP Artıları:

Anında yükleme
Google önbelleği
Arama sonuçlarında öne çıkma

AMP Eksileri:

Sınırlı JavaScript
Ayrı sayfa yönetimi
Analytics kısıtlamaları
Google bağımlılığı

Uygulama Öncelikleri

Hangi optimizasyonlara öncelik vermelisiniz?

Yüksek Etki

En Önemli İyileştirmeler:

LCP öğesini optimize et (genelde hero image)
Render-blocking kaynakları ertele
Görsel formatlarını modernize et (WebP/AVIF)
Lazy loading uygula
CDN kullan

Orta Etki

İkincil İyileştirmeler:

Font optimizasyonu
Code splitting
Critical CSS inline
Preload/prefetch
HTTP/2 geçişi

Düşük Etki (ama yapılmalı)

Temel İyileştirmeler:

Minification
Gzip/Brotli
Cache headers
DNS prefetch
Kullanılmayan kod temizliği

Ölçüm ve İzleme

Sürekli İzleme:

Monitoring Araçları:
├── Google Search Console (Core Web Vitals)
├── Real User Monitoring (RUM)
├── Synthetic monitoring
├── Error tracking
└── Performance budgets

Sıkça Sorulan Sorular

Hangi hız skoru iyi kabul edilir?