Site Hızı Nasıl Artırılır? Sayfa Hızı Optimizasyonu Rehberi (2026)

Google, 2021'den itibaren Core Web Vitals'ı resmi sıralama faktörü olarak kabul etti. Yavaş bir site hem kullanıcı kaybettirir hem de sıralamayı düşürür. Her 100ms gecikme, dönüşüm oranını %7 azaltır (Amazon araştırması). Bu rehberde site hızını artırmanın somut yollarını anlatıyoruz.

Core Web Vitals Nedir?

Google'ın kullanıcı deneyimini ölçtüğü üç temel metrik:

Bu üç metriğin yanında First Contentful Paint (FCP) ve Time to First Byte (TTFB) de önemlidir.

Site Hızını Ölçme Araçları

Optimizasyona başlamadan önce mevcut durumu ölçün:

Google PageSpeed Insights

pagespeed.web.dev — Google'ın resmi aracı. Hem lab (simüle) hem alan (gerçek kullanıcı) verisi gösterir. Core Web Vitals skorları ve somut iyileştirme önerileri sunar.

Google Search Console

Deneyim > Core Web Vitals bölümü, sitenizin tüm URL'lerini "İyi", "İyileştirme gerektirir", "Zayıf" olarak sınıflandırır. Gerçek Chrome kullanıcı verisi (CrUX) kullanır.

WebPageTest

webpagetest.org — Gelişmiş waterfall analizi. Her kaynağın yüklenme sırasını ve süresini gösterir.

Chrome DevTools

F12 → Lighthouse sekmesi → "Analyze page load" — Yerel test için. Incognito modda çalıştırın (uzantılar skoru etkiler).

1. Görsel Optimizasyonu

Sayfaların %60-70'ini oluşturan görsel boyutu en kolay kazanım alanıdır.

Modern Formatlar Kullanın

<!-- Eski yöntem -->
<img src="resim.jpg" alt="...">

<!-- Modern yöntem: WebP + fallback -->
<picture>
  <source srcset="resim.webp" type="image/webp">
  <source srcset="resim.avif" type="image/avif">
  <img src="resim.jpg" alt="...">
</picture>

Format karşılaştırması:

• JPEG → WebP: ortalama %25-35 küçülme
• PNG → WebP: ortalama %26 küçülme
• WebP → AVIF: ortalama %20 ek küçülme

Lazy Loading

Ekran dışındaki görselleri geciktirerek yükleyin:

<!-- İlk ekranda görünen: loading="eager" (varsayılan) -->
<img src="hero.webp" alt="..." loading="eager">

<!-- Ekran dışındaki: loading="lazy" -->
<img src="galeri.webp" alt="..." loading="lazy">

Önemli: Hero görseline loading="lazy" eklemeyin — LCP metriğini kötüleştirir.

Boyutları Belirtin

Tarayıcı görselin boyutunu bilmeden layout hesaplayamaz → CLS (düzen kayması) artar:

<img src="resim.webp" alt="..." width="800" height="600">

Görsel Boyutu

Gerçek kullanım boyutundan büyük görsel yüklemeyin:

❌ 4000×3000 piksel fotoğrafı thumbnail olarak kullanmak
✅ Kullanım boyutunda export: 400×300 piksel thumbnail için 400×300 görsel

Araçlar: sharp (Node.js), Squoosh.app, ImageOptim (Mac).

2. JavaScript Optimizasyonu

JavaScript hem indirme hem parse hem execute maliyeti getirir — performanstaki en ağır yük.

Kullanılmayan Kodu Temizleyin

Chrome DevTools → Coverage (Ctrl+Shift+P → "Coverage") hangi JS/CSS satırlarının çalıştırıldığını gösterir. Kullanılmayan kodu tree shaking ile eleyin.

Kritik Olmayan JS'i Geciktirin

<!-- Hemen çalışması gerekmeyen scriptler -->
<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>

• defer: DOM hazır olduktan sonra çalışır, sıralı
• async: İndirilir inmez çalışır, sırasız

Code Splitting

Büyük JavaScript bundle'ı sayfa başına bölerek yükleyin. Modern framework'ler (Next.js, Nuxt.js) otomatik yapar, ama manual lazy import da gerekebilir:

// Nuxt.js'de dinamik import
const HeavyComponent = defineAsyncComponent(() => 
  import('./HeavyComponent.vue')
)

Third-Party Script Denetimi

Google Tag Manager, Facebook Pixel, canlı sohbet widget'ları yüzlerce KB ekleyebilir. Her third-party script'in ağırlığını ölçün:

Chrome DevTools → Network → "third-party" filtreleme

Gereksiz scriptleri kaldırın. Kritik olanları defer ile yükleyin.

3. CSS Optimizasyonu

Kullanılmayan CSS'i Kaldırın

PurgeCSS veya Tailwind CSS'in built-in purge özelliği, kullanılmayan CSS sınıflarını build aşamasında siler.

CSS'i Kritik ve Kritik Olmayan Olarak Bölün

<!-- Critical CSS: inline, hızlı -->
<style>
  /* Yalnızca ilk ekranın stilleri */
  body { font-family: sans-serif; }
  .hero { ... }
</style>

<!-- Non-critical: gecikmeli -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

CSS Dosyasını Minify Edin

Build araçları (Vite, Webpack) production'da otomatik minify yapar. Manuel yapıyorsanız cssnano kullanın.

4. Sunucu Optimizasyonu

TTFB (Time to First Byte)

Sunucunun ilk byte'ı göndermesi 800ms'nin altında olmalıdır. Yavaş TTFB nedenleri:

• Yavaş hosting/sunucu
• Veritabanı sorguları optimize edilmemiş
• Önbellekleme yok

Önbellekleme (Caching)

# Apache: Statik dosyalar için uzun cache
<FilesMatch "\.(js|css|png|jpg|webp|woff2)$">
  Header set Cache-Control "max-age=31536000, immutable"
</FilesMatch>

# HTML: Kısa veya no-cache
<FilesMatch "\.html$">
  Header set Cache-Control "no-cache, must-revalidate"
</FilesMatch>

CDN Kullanımı

Content Delivery Network, statik dosyaları kullanıcıya yakın sunuculardan dağıtır. Türkiye'deki kullanıcı için İstanbul CDN node'u, Almanya'daki için Frankfurt node'u kullanır.

Önerilen CDN'ler: Cloudflare (ücretsiz plan güçlü), BunnyCDN, Fastly.

HTTP/2 veya HTTP/3

Modern hosting'ler HTTP/2'yi varsayılan açar. HTTP/2 çoklu istek paralelleştirmesi yapar (multiplexing), HTTP/1.1'e göre çok daha hızlıdır.

Kontrol: Chrome DevTools → Network → Protocol sütunu. h2 görünüyorsa HTTP/2 aktif.

Gzip / Brotli Sıkıştırma

Text tabanlı dosyaları (HTML, CSS, JS) sunucuda sıkıştırın:

# Nginx: Brotli + Gzip
brotli on;
brotli_types text/plain text/css application/javascript;

gzip on;
gzip_types text/plain text/css application/javascript;

Brotli, Gzip'ten ~%15-20 daha iyi sıkıştırır.

5. LCP Optimizasyonu

LCP genellikle hero görseli veya büyük bir başlık bloğudur.

Preload Hero Görseli

<head>
  <link rel="preload" as="image" href="hero.webp" fetchpriority="high">
</head>

Bu, tarayıcının hero görselini diğer kaynaklardan önce indirmesini sağlar.

fetchpriority Attribute

<!-- Hero görsel: yüksek öncelik -->
<img src="hero.webp" fetchpriority="high" alt="...">

<!-- Galeri: düşük öncelik -->
<img src="galeri.webp" fetchpriority="low" loading="lazy" alt="...">

Sunucu Tarafı Render (SSR)

Client-side render (CSR) uygulamalarında LCP, JavaScript çalıştıktan sonra gerçekleşir — bu yavaştır. SSR veya Static Site Generation (SSG) ile HTML sunucudan hazır gelir → LCP hızlanır.

6. CLS Optimizasyonu

Düzen kaymalarının başlıca nedenleri:

Görsel Boyutu Belirtmemek

❌ <img src="banner.jpg" alt="...">
✅ <img src="banner.jpg" alt="..." width="1200" height="400">

Web Font Yüklemesi

Font yüklenene kadar tarayıcı fallback font kullanır, font gelince layout kayar.

/* font-display: swap yerine optional kullanın */
@font-face {
  font-family: 'CustomFont';
  font-display: optional; /* Yoksa sistem fontunu kullan, kayma olmaz */
}

/* Veya swap ile preload kombinasyonu */
@font-face {
  font-display: swap;
}

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

Dinamik İçerik

Reklam alanları, banner'lar için önceden yer ayırın:

.ad-container {
  min-height: 250px; /* Reklam gelene kadar alan ayrılmış */
}

7. Font Optimizasyonu

Sistem Fontlarını Tercih Edin

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

0 KB font yüklemesi → en hızlı seçenek.

Sadece Gerekli Karakter Kümelerini Yükleyin

Latin ve Türkçe için subset:

@font-face {
  font-family: 'OpenSans';
  src: url('opensans-latin-ext.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+011E, U+011F, U+0130, U+0131, U+015E, U+015F;
}

WOFF2 Formatı

WOFF2, WOFF'dan ~%30 daha küçük. Modern tarayıcıların tamamı destekler.

Hız Optimizasyonu Öncelik Sırası

1. Görsel boyutlarını belirtin → CLS düzeltmesi (hızlı)
2. Hero görselini preload yapın → LCP iyileştirmesi (hızlı)
3. Görselleri WebP/AVIF'e dönüştürün → Boyut azaltma (orta)
4. Lazy loading → Ekran dışı yük azaltma (hızlı)
5. Third-party script'leri defer/async → JavaScript yükünü azaltma (orta)
6. CDN ekleyin → TTFB azaltma (orta-zor)
7. Önbellekleme konfigürasyonu → Tekrar ziyareti hızlandırma (orta)

Sık Sorulan Sorular

PageSpeed skoru 90+ olmazsa Google sıralamam düşer mi?
PageSpeed lab skoru değil, gerçek kullanıcı deneyimi (Core Web Vitals — CrUX) sıralamayı etkiler. Yüksek lab skoru genellikle iyi alan verisiyle korelasyon gösterir, ama birebir değildir. CWV'de "İyi" kategorisine girmek hedef olmalıdır.

Mobil mü masaüstü mü optimize etmeliyim?
Google, mobil-öncelikli indeksleme kullandığından mobil hız önceliklidir. Ancak mobili optimize etmek genellikle masaüstünü de iyileştirir.

Hız iyileştirmeleri ne zaman etkisini gösterir?
GSC Core Web Vitals raporunun güncellemesi 28 gün penceresiyle çalışır. İyileştirme yaptıktan sonra 4-6 hafta bekleyin.

Sitenizin Performansını Ölçün

Ücretsiz SEO analiz aracımız Core Web Vitals skorlarını, PageSpeed verilerini ve performans sorunlarını otomatik olarak raporlar.

İlgili içerikler: Core Web Vitals Nedir? • Google Search Console Kurulumu • Sitemap XML Nedir?