Sayfa Hızı SEO'yu Nasıl Etkiler? (Core Web Vitals Rehberi)

Sayfa Hızı Neden Bu Kadar Önemli?

Google, 2021'den bu yana Core Web Vitals metriklerini doğrudan sıralama faktörü olarak kullanıyor. Yani yavaş bir site, içerik kalitesi ne kadar iyi olursa olsun, rakiplerine karşı dezavantajlı konumda başlıyor. Bu metrikleri ayrıntılı ele aldığımız Core Web Vitals nedir rehberimize de göz atabilirsiniz.

Ama SEO'nun ötesinde, hız kullanıcı deneyimini doğrudan belirler:

• Sayfa yüklenme süresi 3 saniyeyi aşarsa ziyaretçilerin %53'ü sayfayı terk eder (Google araştırması)
• 1 saniyelik gecikme dönüşüm oranını %7 düşürür
• Hızlı siteler daha fazla sayfa görüntülenmesi, daha az hemen çıkma oranı demektir

Core Web Vitals: 3 Temel Metrik

1. LCP — Largest Contentful Paint

Sayfanın en büyük görsel öğesinin ne kadar sürede yüklendiğini ölçer. Bu genellikle hero image, büyük bir başlık metni veya video thumbnail olur.

LCP'yi iyileştirme yolları:

• Hero görselini WebP/AVIF formatına dönüştürün
• <link rel="preload"> ile kritik görseli önceden yükleyin
• CDN kullanarak sunucu yanıt süresini kısaltın
• Render-blocking JavaScript ve CSS'i azaltın

2. CLS — Cumulative Layout Shift

Sayfa yüklenirken öğelerin ne kadar sıçrayıp kaydığını ölçer. Bir butona tıklamak üzereydiyseniz ama reklam aşağı itti — bu CLS'tir.

CLS'i iyileştirme yolları:

• Görsellere her zaman width ve height attribute'u ekleyin
• Dinamik reklam alanları için yer tutucu boyutu belirleyin
• Web fontları için font-display: swap kullanın
• Animasyonlarda transform ve opacity tercih edin, top/left/width değil

3. INP — Interaction to Next Paint

Kullanıcı tıkladığında veya etkileşime girdiğinde tarayıcının ne kadar hızlı tepki verdiğini ölçer. 2024'te FID'in (First Input Delay) yerini aldı.

INP'yi iyileştirme yolları:

• Uzun JavaScript görevlerini parçalara bölün
• Ağır hesaplamaları Web Workers'a taşıyın
• Event listener sayısını minimize edin
• React/Vue gibi frameworklerde gereksiz re-render'ları önleyin

Sayfa Hızı Nasıl Ölçülür?

Google PageSpeed Insights (Ücretsiz)

En doğrudan yöntem. URL'nizi girin, hem mobil hem masaüstü skorunuzu ve her Core Web Vital değerini görün. Ayrıca neyi düzeltmeniz gerektiğini açıklar.

URL: pagespeed.web.dev

Google Search Console — Core Web Vitals Raporu

Sitenizin gerçek kullanıcı verilerine (field data) dayalı raporunu gösterir. Lab verisinden farklı olarak gerçek koşulları yansıtır.

Lighthouse (Chrome DevTools)

F12 → Lighthouse sekmesi. Lokal test için idealdir, deploy öncesi kontrol edebilirsiniz.

WebPageTest.org

Farklı konumlardan ve cihazlardan test edebilir, ayrıntılı waterfall şeması görebilirsiniz.

En Yaygın Yavaşlık Nedenleri ve Çözümleri

1. Optimize Edilmemiş Görseller

Görseller, sayfa boyutunun genellikle %50-80'ini oluşturur. Görselleri arama ve performans için optimize etmenin tüm yollarını görsel SEO (image SEO) rehberimizde topladık.

Çözüm:

- JPEG yerine WebP kullan (ortalama %30 daha küçük)
- WebP yerine AVIF dene (ortalama %50 daha küçük)
- Lazy loading ekle: <img loading="lazy" ...>
- srcset ile responsive görsel sun
- Sıkıştırma: Squoosh.app (ücretsiz, tarayıcı tabanlı)

2. Render-Blocking Kaynaklar

CSS ve JavaScript, tarayıcının sayfayı oluşturmasını geciktirebilir.

Çözüm:

<!-- CSS: Kritik olmayan stylesheet'leri ertele -->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

<!-- JS: defer veya async kullan -->
<script defer src="app.js"></script>
<script async src="analytics.js"></script>

3. Yavaş Sunucu Yanıt Süresi (TTFB)

Time to First Byte (TTFB) 800ms'yi geçiyorsa sunucu tarafı sorun var demektir.

Çözüm:

• Kaliteli hosting seçin (paylaşımlı hosting yerine VPS)
• Sunucu tarafı önbellekleme (Redis, Varnish)
• Veritabanı sorgularını optimize edin
• CDN kullanın (Cloudflare ücretsiz plan bile büyük fark yaratır)

4. Fazla JavaScript

Modern web uygulamaları çok büyük JS bundle'ları gönderebilir.

Çözüm:

• Code splitting: Sadece ihtiyaç duyulan kodu yükleyin
• Tree shaking: Kullanılmayan kodu bundle'dan çıkarın
• Gereksiz kütüphaneleri kaldırın (Lodash yerine native JS)
• JavaScript'i minify edin

5. CSS Dosyası Büyüklüğü

Kullanılmayan CSS sınıfları dosyayı şişirir.

Çözüm:

• PurgeCSS ile kullanılmayan stilleri temizleyin
• Tailwind CSS v4 otomatik olarak sadece kullanılan stilleri içerir
• Critical CSS'i inline olarak sayfaya ekleyin

Mobil Performans Özellikle Önemli

Google, Mobile-First Indexing kullandığı için mobil performans masaüstünden daha kritiktir. PageSpeed Insights'ta her zaman mobil skoru da kontrol edin. Mobil tarafı uçtan uca iyileştirmek için mobil SEO optimizasyonu rehberimizi inceleyin.

Mobil performansı iyileştirme için ek ipuçları:

• Görüntü boyutlarını viewport'a göre ayarlayın
• Dokunmatik hedefler en az 48×48 piksel olsun
• Fontlar mobilde okunabilir boyutta olsun (16px minimum)
• Gereksiz popup ve modal'lardan kaçının

Önbellek (Cache) Stratejisi

Doğru önbellekleme, tekrar ziyaretçiler için yükleme süresini dramatik ölçüde azaltır.

Tarayıcı Önbelleği

# Nginx örneği
location ~* \.(js|css|png|jpg|gif|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Service Worker

Progressive Web App yaklaşımıyla, kritik kaynakları offline da erişilebilir şekilde önbelleğe alabilirsiniz.

PageSpeed Skoru Hedefleri

Mobilde 90+ skor elde etmek zordur; 75+ iyi sayılır. Masaüstünde 90+ hedefleyin.

Sonuç

Sayfa hızı artık bir "nice to have" değil, SEO için zorunluluktur. Core Web Vitals metriklerinizi düzenli ölçün, en büyük darboğazı bulup önce onu çözün.

Sitenizin mevcut hız durumunu öğrenmek için ücretsiz SEO analiz aracımızı kullanabilirsiniz — PageSpeed skorunuzu ve iyileştirme önerilerini anında görün.

İlgili içerikler: Site Hızı Nasıl Artırılır? • Core Web Vitals Nedir? • Teknik SEO Kontrol Listesi