SEO 2025: Core Web Vitals ve Kullanıcı Deneyimi Rehberi.

Core Web Vitals, Google'un kullanıcı deneyimini ölçmek için kullandığı temel metriklerdir. 2021'den bu yana sıralama faktörüdür. LCP (Largest Contentful Paint), INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift) - bu üç metrik sayfanızın hızını, etkileşim yanıtlılığını ve görsel kararlılığını ölçer.

Kötü Core Web Vitals skorları hem sıralamayı olumsuz etkiler hem de kullanıcı deneyimini bozar - dönüşüm oranlarını düşürür. Amazon'un verilerine göre, her 100ms gecikme satışları %1 azaltıyor. Bu rehberde, Core Web Vitals'i anlama, ölçme ve optimize etme stratejilerini öğreneceksiniz.

LCP (Largest Contentful Paint) Optimizasyonu

LCP nedir? Sayfadaki en büyük görünür elementin (genellikle hero görsel veya başlık) yüklenme süresi. İyi: <2.5 saniye, Orta: 2.5-4 saniye, Kötü: >4 saniye. Mobil cihazlarda özellikle kritik - yavaş ağlar ve düşük güçlü cihazlar.

LCP optimizasyon teknikleri: Server response time (TTFB) azaltın - CDN kullanın, hosting kalitesini artırın. Render-blocking kaynakları ortadan kaldırın - critical CSS inline, JS defer/async. Görsel optimizasyonu - modern formatlar (WebP, AVIF), lazy loading (LCP elemanı hariç), srcset ile responsive images.

LCP elemanını önceliklendirme: LCP görseline fetchpriority='high' ekleyin. Preload ile önceden yükleyin. LCP elemanına lazy loading uygulamayın. Font'ları preload edin - FOIT/FOUT engelleyin.

INP (Interaction to Next Paint) Optimizasyonu

INP nedir? Kullanıcı etkileşimlerine (tıklama, dokunma, tuş basma) yanıt süresi. 2024'te FID'in (First Input Delay) yerini aldı - tüm etkileşimleri ölçer, sadece ilkini değil. İyi: <200ms, Orta: 200-500ms, Kötü: >500ms.

INP optimizasyon teknikleri: Long tasks (50ms+) bölün - setTimeout, requestIdleCallback, web workers. JavaScript bundle boyutunu azaltın - code splitting, tree shaking. Third-party script'leri optimize edin - async/defer, lazy load. Event handler'ları hızlı tutun - ağır işlemleri deferle.

CLS (Cumulative Layout Shift) Optimizasyonu

CLS nedir? Sayfa yüklenirken elementlerin beklenmedik şekilde kayması. İyi: <0.1, Orta: 0.1-0.25, Kötü: >0.25. Kullanıcı frustration'u yaratır - yanlış yere tıklama, okurken kaybetme. Özellikle reklamlar ve dinamik içerikle sorunlu.

CLS optimizasyon teknikleri: Görsel ve videolara width/height attribute ekleyin (aspect-ratio reserve). Font'lara font-display: swap + preload. Reklamlar/iframeler için alan ayırın. Dinamik içeriği viewport dışına ekleyin veya alanı önceden reserve edin. Animation/transition smooth olmalı - transform kullanın, layout property değiştirmeyin.

Ölçüm Araçları

Lab data vs Field data: Lab (PageSpeed Insights, Lighthouse) - kontrollü ortam, debug için iyi. Field (CrUX, Search Console) - gerçek kullanıcı verisi, sıralama için önemli. Her ikisini de kullanın - lab ile debug, field ile izleme.

Araçlar: Google PageSpeed Insights (lab + field), Search Console Core Web Vitals raporu, Chrome DevTools Performance panel, Lighthouse CI (CI/CD entegrasyonu), web-vitals JavaScript library (RUM). Threshold'ları izleyin ve regressions'ları yakalayın.

Framework Özel İpuçları

Next.js: next/image kullanın (otomatik optimizasyon), next/font (font optimizasyonu), SSG/ISR tercih edin, next/script priority. React: Code splitting (React.lazy), Suspense, useDeferredValue, useTransition. Vue/Nuxt: Lazy loading components, Nuxt Image modulu.

WordPress: Caching plugin (WP Rocket, W3 Total Cache), image optimization plugin (ShortPixel, Imagify), lazy loading, CDN entegrasyonu. Kritik CSS inline, gereksiz plugin'leri kaldırın, tema performansına dikkat edin.

Core Web Vitals, kullanıcı deneyimini ölçen ve SEO'yu etkileyen kritik metriklerdir. LCP, INP ve CLS'i optimize ederek hem sıralamanızı hem de dönüşüm oranlarınızı artırabilirsiniz. Düzenli ölçüm ve sürekli optimizasyon başarının anahtarıdır.