Core Web Vitals Optimizasyon Rehberi: LCP, INP ve CLS İyileştirme

Özet: Core Web Vitals, Google'ın sayfa deneyimini ölçmek için kullandığı üç temel metriktir: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift). Bu metriklerin optimize edilmesi hem kullanıcı deneyimini iyileştirir hem de arama sıralamalarınızı doğrudan etkiler. VixSEO ile Core Web Vitals skorlarınızı izleyerek performansınızı sürekli takip edebilirsiniz.

Web sitenizin hızı ve kullanıcı deneyimi, 2026 itibarıyla SEO'nun en kritik bileşenlerinden biri haline gelmiştir. Google, Core Web Vitals metriklerini resmi sıralama sinyali olarak kullanmaya devam etmektedir ve bu metriklerdeki küçük iyileştirmeler bile organik trafik üzerinde önemli etkiler yaratabilir. Kullanıcılar yavaş yüklenen veya görsel olarak dengesiz sayfalardan hızla ayrılır — bu da hem dönüşüm oranlarınızı hem de arama sıralamalarınızı olumsuz etkiler.

Bu rehberde, her bir Core Web Vitals metriğini derinlemesine inceliyoruz; ölçüm yöntemlerini, yaygın sorunları ve kanıtlanmış optimizasyon tekniklerini adım adım ele alıyoruz.

Core Web Vitals Nedir ve Neden Önemlidir?

Core Web Vitals, Google'ın kullanıcı deneyimini sayısal olarak ölçmek için geliştirdiği üç temel metriktir. Bu metrikler, sayfanızın gerçek kullanıcılar tarafından nasıl deneyimlendiğini yansıtır ve Chrome kullanıcı deneyimi raporları (CrUX) üzerinden toplanır.

• LCP (Largest Contentful Paint): Sayfadaki en büyük içerik öğesinin ne kadar sürede yüklendiğini ölçer. Hedef: 2.5 saniyenin altı.
• INP (Interaction to Next Paint): Kullanıcı etkileşimlerine (tıklama, dokunma, tuş basma) verilen yanıt süresini ölçer. Hedef: 200 milisaniyenin altı.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken meydana gelen beklenmeyen düzen kaymalarını ölçer. Hedef: 0.1'in altı.

Bu üç metrik birlikte değerlendirildiğinde, sitenizin yükleme hızını, etkileşim yanıt süresini ve görsel kararlılığını kapsamlı biçimde ortaya koyar.

LCP (Largest Contentful Paint) Optimizasyonu

LCP, sayfanızdaki en büyük görsel veya metin bloğunun ekrana çizilme süresini ölçer. Genellikle hero görseli, büyük başlık metni veya ana içerik bloğu bu öğedir. LCP skorunuz 2.5 saniyenin üzerindeyse Google bunu kötü performans olarak değerlendirir.

LCP Sorunlarının Yaygın Nedenleri

• Yavaş sunucu yanıt süresi (TTFB): Sunucunuzun ilk baytı gönderme süresi yüksekse LCP doğrudan etkilenir.
• Render engelleyen kaynaklar: Kritik yolda yer alan CSS ve JavaScript dosyaları sayfanın çizilmesini geciktirir.
• Optimize edilmemiş görseller: Büyük boyutlu, sıkıştırılmamış veya modern formatta olmayan görseller LCP'yi yavaşlatır.
• İstemci taraflı render: JavaScript ile içerik oluşturma, sunucu taraflı render'a göre daha yavaştır.

LCP İyileştirme Teknikleri

• Sunucu yanıt süresini azaltın: CDN kullanımı, veritabanı sorgularını optimize etme ve sunucu taraflı önbellekleme ile TTFB'yi düşürün.
• Kritik CSS'i satır içi yapın: İlk görünür alanın (above the fold) ihtiyaç duyduğu CSS'i doğrudan HTML içine gömün.
• Görselleri optimize edin: WebP veya AVIF formatlarını kullanın, responsive srcset tanımlayın ve LCP görseline fetchpriority="high" ekleyin.
• Preconnect ve preload kullanın: Kritik kaynaklar için <link rel="preload"> ve üçüncü parti alan adları için <link rel="preconnect"> ekleyin.

INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcının sayfanızla etkileşime geçtiği andan itibaren tarayıcının bir sonraki kareyi ekrana çizmesine kadar geçen süreyi ölçer. Bu metrik, FID'nin (First Input Delay) yerini almıştır ve çok daha kapsamlıdır çünkü sadece ilk etkileşimi değil, tüm etkileşimleri değerlendirir.

INP Sorunlarının Yaygın Nedenleri

• Uzun JavaScript görevleri: Ana iş parçacığını 50 milisaniyeden uzun süre meşgul eden görevler etkileşim yanıtını geciktirir.
• Aşırı DOM boyutu: Çok fazla DOM elemanı, olay dinleyicileri ve stil hesaplamalarını yavaşlatır.
• Üçüncü parti betikler: Reklam, analitik ve sosyal medya betikleri ana iş parçacığını bloke edebilir.

INP İyileştirme Teknikleri

• Uzun görevleri bölün: requestIdleCallback veya scheduler.yield() kullanarak uzun JavaScript görevlerini küçük parçalara ayırın.
• Olay dinleyicilerini optimize edin: Gereksiz olay dinleyicilerini kaldırın, olay delegasyonu kullanın ve pasif dinleyicileri tercih edin.
• DOM boyutunu küçültün: Sayfanızdaki toplam eleman sayısını azaltın, gereksiz iç içe yapılardan kaçının.
• Üçüncü parti betikleri geciktirin: Kritik olmayan betikleri async veya defer ile yükleyin.

CLS (Cumulative Layout Shift) Optimizasyonu

CLS, sayfa yüklenirken öğelerin beklenmedik şekilde yer değiştirmesini ölçer. Bir kullanıcı bir bağlantıya tıklamak üzereyken sayfanın kayması ve yanlış yere tıklaması, CLS'nin ölçtüğü tam olarak bu tür olumsuz deneyimlerdir.

CLS Sorunlarının Yaygın Nedenleri

• Boyutsuz görseller ve videolar: Genişlik ve yükseklik belirtilmeyen medya öğeleri yüklendiğinde düzen kaymasına neden olur.
• Dinamik olarak eklenen içerik: Reklam alanları, bildirim çubukları veya çerez onay pencereleri üst içeriği aşağı itebilir.
• Web fontları: FOIT (Flash of Invisible Text) veya FOUT (Flash of Unstyled Text) düzen kaymalarına yol açabilir.

CLS İyileştirme Teknikleri

• Görsellere boyut verin: Tüm <img> ve <video> etiketlerine width ve height nitelikleri ekleyin veya CSS aspect-ratio kullanın.
• Reklam alanlarını önceden ayırın: Reklam slotları için sabit boyutlu konteynerler oluşturun.
• Font yükleme stratejisi belirleyin: font-display: swap kullanın ve kritik fontları önceden yükleyin.
• İçeriği üstten eklemeyin: Dinamik içerikleri mevcut içeriğin altına ekleyin, kullanıcının görüntülediği alanın üstüne değil.

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

Metrikleri doğru ölçmek, optimizasyonun ilk adımıdır. İki tür veri kaynağı mevcuttur: laboratuvar verileri (simüle) ve alan verileri (gerçek kullanıcı).

• Google PageSpeed Insights: Hem laboratuvar hem alan verilerini gösterir. Belirli URL veya kaynak düzeyinde analiz sunar.
• Google Search Console — Core Web Vitals raporu: Sitenizin tamamı için alan verilerini toplu olarak görüntüler.
• Chrome DevTools — Performance paneli: Laboratuvar ortamında detaylı profilleme yapmanızı sağlar.
• Web Vitals Chrome uzantısı: Gerçek zamanlı olarak Core Web Vitals metriklerini görüntüler.
• VixSEO: Google Search Console verilerini çekerek Core Web Vitals performansınızı sürekli izlemenize olanak tanır.

Sıkça Sorulan Sorular

Core Web Vitals doğrudan sıralama faktörü mü?

Evet, Google Core Web Vitals'ı sayfa deneyimi sinyallerinin bir parçası olarak resmi sıralama faktörü ilan etmiştir. Ancak içerik kalitesi ve bağlantı otoritesi gibi diğer faktörler hâlâ daha ağırlıklıdır.

Mobil ve masaüstü Core Web Vitals ayrı mı değerlendiriliyor?

Evet, Google mobil ve masaüstü verilerini ayrı ayrı değerlendirir. Mobil öncelikli indeksleme nedeniyle önceliğiniz mobil performans olmalıdır.

Ne sıklıkla kontrol etmeliyim?

CrUX verileri 28 günlük kayan pencere ile güncellenir. VixSEO ile haftalık takip yaparak trendleri erken yakalayabilirsiniz.

Sonuç

Core Web Vitals optimizasyonu, teknik SEO'nun ayrılmaz bir parçasıdır. LCP için sunucu ve görsel optimizasyonu, INP için JavaScript yönetimi ve CLS için düzen kararlılığı sağlayarak hem kullanıcı deneyimini hem de arama sıralamalarınızı iyileştirebilirsiniz. VixSEO paneli üzerinden performans verilerinizi düzenli olarak takip edin ve iyileştirme fırsatlarını kaçırmayın.