Google Core Web Vitals: SEO için Kapsamlı Optimizasyon Rehberi

Core Web Vitals Nedir?

Google Core Web Vitals, kullanıcı deneyimini ölçen ve SEO sıralamasını doğrudan etkileyen üç temel metrikten oluşur. 2021 yılından itibaren Google'ın sıralama faktörü olarak kullandığı bu metrikler, web sitenizin performansını ve kullanıcı deneyimini değerlendirmek için kritik öneme sahiptir.

"Core Web Vitals, gerçek kullanıcı deneyimini ölçen ve web'in geleceğini şekillendiren metriklerdir." - Google

1. Largest Contentful Paint (LCP)

LCP, sayfanın ana içeriğinin ne kadar hızlı yüklendiğini ölçer. Viewport'ta görünen en büyük içerik öğesinin render edilme süresini ifade eder.

LCP Değerlendirme Kriterleri

İyi
≤ 2.5 saniye

Geliştirilmeli
2.5 - 4.0 saniye

Kötü
> 4.0 saniye

LCP Optimizasyon Teknikleri

Sunucu Yanıt Süresini İyileştirin: TTFB (Time to First Byte) süresini azaltın
Render-Blocking Kaynaklarını Kaldırın: CSS ve JavaScript optimizasyonu
Kaynak Yükleme Süresini Azaltın: Görsel optimizasyonu ve CDN kullanımı
Client-Side Rendering'i Azaltın: SSR veya SSG kullanın

2. First Input Delay (FID)

FID, kullanıcının sayfayla ilk etkileşiminden (tıklama, dokunma, tuş basma) tarayıcının bu etkileşime yanıt vermeye başlamasına kadar geçen süreyi ölçer.

FID Değerlendirme Kriterleri

İyi
≤ 100 ms

Geliştirilmeli
100 - 300 ms

Kötü
> 300 ms

FID Optimizasyon Teknikleri

JavaScript Execution Time'ı Azaltın: Uzun görevleri bölerek main thread'i bloke etmeyin
Kullanılmayan JavaScript'i Kaldırın: Code splitting ve tree shaking
Third-party Script'leri Optimize Edin: Async/defer kullanın
Web Workers Kullanın: Ağır hesaplamaları background thread'de yapın

// Uzun görevleri bölerek main thread'i serbest bırakın
function processLargeArray(array) {
  return new Promise((resolve) => {
    const batchSize = 1000;
    let index = 0;
    const result = [];
    
    function processBatch() {
      const endIndex = Math.min(index + batchSize, array.length);
      
      for (let i = index; i < endIndex; i++) {
        result.push(expensiveOperation(array[i]));
      }
      
      index = endIndex;
      
      if (index < array.length) {
        // Bir sonraki batch'i scheduler ile çalıştır
        scheduler.postTask(processBatch, { priority: 'user-blocking' });
      } else {
        resolve(result);
      }
    }
    
    processBatch();
  });
}

// Event handler'ları optimize edin
const button = document.getElementById('submit-btn');
button.addEventListener('click', async (event) => {
  // Hemen UI feedback verin
  button.disabled = true;
  button.textContent = 'İşleniyor...';
  
  // Ağır işlemi async olarak yapın
  try {
    await processFormData(event.target.form);
    showSuccessMessage();
  } catch (error) {
    showErrorMessage(error);
  } finally {
    button.disabled = false;
    button.textContent = 'Gönder';
  }
});

3. Cumulative Layout Shift (CLS)

CLS, sayfa yüklenirken beklenmedik layout değişikliklerini ölçer. Görsel kararlılığı değerlendiren bu metrik, kullanıcı deneyimi için kritik öneme sahiptir.

CLS Değerlendirme Kriterleri

İyi
≤ 0.1

Geliştirilmeli
0.1 - 0.25

Kötü
> 0.25

CLS Optimizasyon Teknikleri

Görsel Boyutlarını Belirtin: Width ve height attribute'larını kullanın
Font Loading'i Optimize Edin: Font-display: swap kullanın
Dinamik İçerik için Yer Ayırın: Skeleton loading kullanın
Reklam ve Embed'ler için Alan Rezerve Edin: Sabit boyutlar belirleyin

/* Font loading optimizasyonu */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* FOIT yerine FOUT kullan */
}

/* Görsel container'ları için aspect-ratio */
.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: #f0f0f0;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

4. Core Web Vitals Ölçüm Araçları

Google PageSpeed Insights

Hem lab hem de field data sağlayan ücretsiz araç. Real User Monitoring (RUM) verileri ile gerçek kullanıcı deneyimini gösterir.

Google Search Console

Core Web Vitals raporları ile sitenizin genel performansını izleyin. Sorunlu sayfaları tespit edin ve iyileştirme önerilerini takip edin.

Chrome DevTools

Lighthouse ve Performance paneli ile detaylı analiz yapın:

// Web Vitals kütüphanesi ile ölçüm
import {getCLS, getFID, getFCP, getLCP, getTTFB} from 'web-vitals';

function sendToAnalytics(metric) {
  // Analytics servisinize gönderin
  gtag('event', metric.name, {
    event_category: 'Web Vitals',
    event_label: metric.id,
    value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value),
    non_interaction: true,
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

5. Teknik SEO Optimizasyonları

Critical Resource Hints

Service Worker ile Caching

// sw.js
const CACHE_NAME = 'core-web-vitals-v1';
const urlsToCache = [
  '/',
  '/critical.css',
  '/main.js',
  '/hero-image.webp'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // Cache'den dön veya network'ten getir
        return response || fetch(event.request);
      }
    )
  );
});

6. Monitoring ve Sürekli İyileştirme

Real User Monitoring (RUM)

Gerçek kullanıcı verilerini toplayarak sürekli optimizasyon yapın:

// Performance Observer ile detaylı ölçüm
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === 'largest-contentful-paint') {
      console.log('LCP:', entry.startTime);
      sendMetric('LCP', entry.startTime);
    }
    
    if (entry.entryType === 'first-input') {
      console.log('FID:', entry.processingStart - entry.startTime);
      sendMetric('FID', entry.processingStart - entry.startTime);
    }
    
    if (entry.entryType === 'layout-shift' && !entry.hadRecentInput) {
      console.log('CLS:', entry.value);
      sendMetric('CLS', entry.value);
    }
  }
});

observer.observe({entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift']});

A/B Testing

Farklı optimizasyon tekniklerini test ederek en etkili yöntemleri belirleyin.

7. Mobil Optimizasyon

Core Web Vitals özellikle mobil cihazlarda kritik öneme sahiptir:

Responsive Design: Tüm cihazlarda tutarlı deneyim
Touch-friendly Interface: Minimum 44px touch target
Viewport Meta Tag: Doğru viewport ayarları
AMP (Accelerated Mobile Pages): Kritik sayfalar için

Sonuç ve Eylem Planı

Core Web Vitals optimizasyonu, SEO başarısı için artık zorunlu hale gelmiştir. Bu rehberde ele aldığımız teknikleri uygulayarak:

Mevcut durumu ölçün: PageSpeed Insights ve Search Console kullanın
Öncelikleri belirleyin: En kritik sorunları tespit edin
Teknik optimizasyonları uygulayın: LCP, FID, CLS için özel çözümler
Sürekli izleyin: RUM ile gerçek kullanıcı verilerini takip edin
İteratif iyileştirme yapın: Düzenli olarak test edin ve optimize edin

Unutmayın ki Core Web Vitals optimizasyonu bir kerelik iş değil, sürekli bir süreçtir. Kullanıcı deneyimini ön planda tutarak, hem SEO hem de conversion oranlarınızda önemli iyileştirmeler elde edebilirsiniz.