Core Web Vitals: Performans ve SEO Etkisi

Google sıralama algoritması kullanıcı deneyimini doğrudan ölçer. Core Web Vitals üç temel metriğe odaklanır: Yükleme performansı (LCP), etkileşim gecikmesi (INP) ve görsel kararlılık (CLS). Zayıf skorlar arama görünürlüğünü düşürür, dönüşüm oranını keser.

Hızlı sayfa daha çok indeks, daha düşük hemen çıkma oranı ve yüksek ciro demektir. Performans teknik bir lüks değil, temel dijital strateji unsurudur.

Adım 1: Largest Contentful Paint (LCP) İyileştirme

LCP, ana içeriğin ekranda belirme süresini ölçer. Hedef: 2.5 saniye altı.

Uygulama Adımları

Hero Görselini Önceliklendir: Ana banner görseline fetchpriority="high" ve loading="eager" ekle. Lazy loading uygulama.
Sunucu Yanıt Süresini (TTFB) Düşür: CDN (Cloudflare, Fastly) kullan. Statik HTML'i Edge üzerinde önbelleğe al. TTFB 800ms altında kalmalı.
Kritik CSS'i Satır İçi (Inline) Yap: Render engelleyen harici CSS dosyalarını kaldır. İlk ekran stilini doğrudan <style> içine göm.
Görselleri AVIF ve WebP Formatına Çevir: JPEG ve PNG yerine modern sıkıştırma formatları kullan. Görsel boyutunu %50-%70 azalt.

Adım 2: Interaction to Next Paint (INP) Optimizasyonu

INP, FID metriğinin yerini aldı. Sayfadaki tıklama ve tuş vuruşlarına verilen genel yanıt süresini ölçer. Hedef: 200 milisaniye altı.

Uygulama Adımları

Uzun JavaScript Görevlerini (Long Tasks) Böl: 50ms üzerindeki JS bloklarını scheduler.yield() veya requestIdleCallback() ile parçala. Main thread kilitlenmesini engelle.
Kullanılmayan JS Kodlarını Temizle: Ağır kütüphaneler yerine native browser API'leri tercih et. Bundle analiz aracıyla gereksiz paketleri sil.
Üçüncü Taraf Scriptleri Ertele: Analytics, tag manager ve chat widget kodlarını defer veya async ile yükle. Etkileşim sonrasına ötele.

Adım 3: Cumulative Layout Shift (CLS) Engelleme

CLS, yükleme sırasında öğelerin beklenmedik şekilde kaymasını ölçer. Hedef: 0.1 altı.

Uygulama Adımları

Boyut Belirt: Tüm <img> ve <iframe> etiketlerine kesin width ve height öznitelikleri ata. CSS'te aspect-ratio tanımla.
Reklam Alanlarına Yer Ayır: Dinamik yüklenen reklam blokları için önceden min-height tanımla. Boş alan kaymasını önle.
Web Fontlarını Optimize Et: FOUT/FOIT kaynaklı kaymaları önlemek için font-display: optional veya swap kullan. size-adjust ile font boyutunu eşitle.

Performans Trendleri ve Dijital Strateji Entegrasyonu

Hız optimizasyonu tek seferlik işlem değildir. Dijital strateji içine entegre edilmelidir.

Speculation Rules API: Kullanıcının tıklayacağı sayfayı arka planda önceden render etme trendi. Anında sayfa geçişi sağlar.
Edge Rendering ve SSR: İstemci tarafında ağır React/Vue render işlemlerini Edge sunuculara kaydırma.
Core Web Vitals Bütçesi (Performance Budget): CI/CD süreçlerine Lighthouse veya PageSpeed kontrolleri koy. Hızı düşüren kod yayına girmesin.

Ölçüm ve Takip

Metrikleri Chrome User Experience Report (CrUX), Google Search Console ve PageSpeed Insights üzerinden düzenli izle. Laboratuvar verisi değil, gerçek kullanıcı verisi (RUM - Real User Monitoring) baz alınmalıdır.