Sayfa Hızı ve SEO: Core Web Vitals'ın Sıralama Etkisi

Sayfa Hızı ve SEO: Core Web Vitals'ın Sıralama Etkisi

Google, 2021'den itibaren sayfa deneyimini (page experience) bir sıralama faktörü olarak kullanmaktadır. Core Web Vitals metrikleri — LCP, INP ve CLS — kullanıcı deneyimini ölçen ve SEO sıralamanızı doğrudan etkileyen kritik göstergelerdir. Bu rehberde sayfa hızının SEO üzerindeki etkisini, Core Web Vitals optimizasyonunu ve ölçüm stratejilerini detaylı olarak ele alacağız.

1. Google'ın Sayfa Deneyimi Sinyalleri

Google, sıralama algoritmasında sayfa deneyimini birden fazla sinyal ile değerlendirir:

• Core Web Vitals: LCP, INP, CLS
• HTTPS: Güvenli bağlantı
• Mobile-friendly: Mobil uyumluluk
• No intrusive interstitials: Rahatsız edici pop-up'ların olmaması

2. Core Web Vitals Detaylı

LCP — Largest Contentful Paint

Kullanıcının sayfada en büyük içerik elementini (genellikle hero resim veya başlık bloğu) görebildiği anı ölçer.

<!-- LCP Optimizasyonu -->

<!-- 1. LCP kaynağını preload edin -->
<link rel="preload" as="image" href="/hero-image.webp"
      fetchpriority="high">

<!-- 2. LCP resmine fetchpriority ekleyin -->
<img src="/hero-image.webp" alt="Hero" width="1200" height="600"
     fetchpriority="high" loading="eager">

<!-- 3. Kritik CSS'i inline yapın -->
<style>
  /* Above-the-fold kritik CSS */
  .hero { width: 100%; height: auto; }
</style>

<!-- 4. Render-blocking kaynakları geciktirin -->
<link rel="stylesheet" href="/non-critical.css" media="print"
     >

INP — Interaction to Next Paint

Kullanıcının tıklama, dokunma veya tuş basma gibi etkileşimlerinden sonra sayfanın ne kadar sürede yanıt verdiğini ölçer. FID'ın yerini almıştır.

// INP Optimizasyonu

// 1. Uzun görevleri (long tasks) parçalayın
// KÖTÜ — 200ms+ main thread bloklama
function processLargeList(items) {
  items.forEach(item => heavyComputation(item));
}

// İYİ — görevleri yield ile parçalayın
async function processLargeList(items) {
  for (const item of items) {
    heavyComputation(item);
    // Her 5ms'de main thread'e kontrol ver
    if (performance.now() % 5 < 1) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

// 2. Event handler'larda ağır işlemleri erteleme
button.addEventListener('click', () => {
  // Hemen görsel geri bildirim ver
  button.classList.add('active');

  // Ağır işlemi erteleme
  requestAnimationFrame(() => {
    setTimeout(() => {
      performHeavyOperation();
    }, 0);
  });
});

CLS — Cumulative Layout Shift

Sayfa yüklenirken elementlerin beklenmedik şekilde kaymasını ölçer.

<!-- CLS Optimizasyonu -->

<!-- 1. Resim ve video boyutlarını belirtin -->
<img src="photo.jpg" width="800" height="600" alt="Fotoğraf">
<video width="1280" height="720" poster="poster.jpg"></video>

<!-- 2. aspect-ratio ile yer ayırın -->
<style>
  .video-container { aspect-ratio: 16 / 9; background: #f0f0f0; }
  .ad-slot { min-height: 250px; background: #f0f0f0; }
</style>

<!-- 3. Font FOUT/FOIT engelleyin -->
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('/font.woff2') format('woff2');
    font-display: swap; /* veya optional */
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 20%;
  }
</style>

<!-- 4. Dinamik içerik için yer ayırın -->
<div class="ad-slot" style="min-height: 250px;">
  <!-- Reklam buraya yüklenir -->
</div>

3. Sayfa Hızının SEO Etkisi

Google'ın resmi verilerine göre sayfa hızı ile kullanıcı davranışları arasında doğrudan bir ilişki vardır:

• Sayfa yükleme süresi 1s'den 3s'ye çıkınca, bounce rate %32 artar
• 1s'den 5s'ye çıkınca bounce rate %90 artar
• 1s'den 10s'ye çıkınca bounce rate %123 artar
• Mobilde 1 saniye iyileşme, dönüşümleri %27 artırabilir

4. Google Search Console ile İzleme

# Google Search Console → Core Web Vitals raporu
# - URL'ler "İyi", "İyileştirilmesi gerekiyor", "Kötü" olarak sınıflandırılır
# - Mobil ve masaüstü ayrı raporlanır
# - CrUX (Chrome User Experience Report) verilerine dayanır

# PageSpeed Insights API ile programatik kontrol
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com&strategy=mobile&key=API_KEY"

5. Teknik SEO Performans Checklist

<!-- Head bölümü optimizasyonu -->
<head>
  <!-- Kritik kaynakları preconnect -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.example.com" crossorigin>

  <!-- DNS prefetch -->
  <link rel="dns-prefetch" href="https://analytics.example.com">

  <!-- LCP resmi preload -->
  <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

  <!-- Kritik CSS inline -->
  <style>/* kritik css */</style>

  <!-- Non-kritik CSS defer -->
  <link rel="preload" href="/styles.css" as="style"
       >

  <!-- Script'ler -->
  <script src="/app.js" defer></script>
</head>

6. Sunucu Tarafı Optimizasyonlar

# TTFB optimizasyonu (< 200ms hedefi)

# 1. CDN kullanımı
# CloudFlare, Fastly, AWS CloudFront

# 2. Sıkıştırma
# Nginx Brotli yapılandırması
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml;

# 3. Cache headers
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

# 4. HTTP/2 veya HTTP/3
listen 443 ssl http2;
listen 443 quic;

7. JavaScript ve SEO

// Google JavaScript render süreci
// 1. Googlebot HTML'i indirir
// 2. CSS ve JavaScript'i indirir
// 3. WRS (Web Rendering Service) JavaScript'i çalıştırır
// 4. Render edilen HTML indekslenir

// SSR/SSG tercih edin — Google'ın JS render etmesini beklemeyin
// Next.js örneği
export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: { posts },
    revalidate: 3600, // ISR — 1 saat
  };
}

// Client-side rendering ile SEO sorunları:
// - Render gecikmesi (ikinci dalga indeksleme)
// - JavaScript hatalarında içerik görünmez
// - Crawl budget israfı

8. Ölçüm Araçları

• Google PageSpeed Insights: Lab + field verileri, öneri listesi
• Google Search Console: Gerçek kullanıcı verileri, URL bazlı rapor
• Chrome DevTools: Performance paneli, Lighthouse
• WebPageTest: Detaylı waterfall analizi, karşılaştırma
• CrUX Dashboard: Chrome User Experience Report verileri
• web-vitals kütüphanesi: Gerçek kullanıcı metrikleri toplama

// web-vitals ile ölçüm
import { onLCP, onINP, onCLS } from 'web-vitals';

function reportMetric({ name, value, rating }) {
  console.log(`${name}: ${value} (${rating})`);
  // Analytics'e gönder
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_category: 'Web Vitals',
    event_label: rating, // good, needs-improvement, poor
    non_interaction: true,
  });
}

onLCP(reportMetric);
onINP(reportMetric);
onCLS(reportMetric);

Sonuç

Sayfa hızı ve Core Web Vitals, modern SEO stratejisinin vazgeçilmez bir parçasıdır. LCP, INP ve CLS metriklerini optimize ederek hem kullanıcı deneyimini hem de arama motoru sıralamanızı iyileştirebilirsiniz. Sunucu tarafı rendering, kaynak optimizasyonu, uygun cache stratejileri ve JavaScript yönetimi kritik faktörlerdir. Google Search Console ve web-vitals kütüphanesi ile metriklerinizi sürekli izleyin ve performans bütçesi ile regresyonları engelleyin. Unutmayın: hızlı bir site sadece SEO için değil, kullanıcılarınız için de daha iyi bir deneyim sunar.

Kaynaklar

• web.dev — Core Web Vitals
• Google — Page Experience Dokümantasyonu
• PageSpeed Insights
• Google Search Console — Core Web Vitals Raporu
• web.dev — Rendering on the Web