Core Web Vitals Rehberi: LCP, INP ve CLS Optimizasyonu (2026)

Google, kullanıcı deneyimini sıralama sinyali olarak kullanmaya 2021''de başladı ve o günden bu yana Core Web Vitals (CWV) metrikleri her teknik SEO uzmanının günlük takip etmesi gereken temel göstergeler haline geldi. 2024 Mart''ında First Input Delay (FID) metriğinin yerini Interaction to Next Paint (INP) aldı ve bu değişiklikle birlikte Google''ın performans beklentileri önemli ölçüde yükseldi. 2026 itibarıyla CWV sadece bir teknik SEO kontrol maddesi değil; organik sıralama, dönüşüm oranı ve kullanıcı memnuniyetinin doğrudan belirleyicisi konumunda.

Bu rehberde üç temel Core Web Vitals metriğini — Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS) — derinlemesine inceleyeceğiz. Her metrik için eşik değerleri, ölçüm yöntemleri, yaygın sorunlar ve somut optimizasyon teknikleri sunacağız.

Core Web Vitals Nedir?

Core Web Vitals, Google''ın web sayfalarındaki kullanıcı deneyimini ölçmek için belirlediği üç temel metriktir. Bu metrikler yükleme performansını, etkileşim duyarlılığını ve görsel kararlılığı değerlendirir:

• LCP (Largest Contentful Paint): Sayfadaki en büyük içerik öğesinin ne kadar sürede görünür hale geldiğini ölçer. Yükleme performansının temel göstergesidir.
• INP (Interaction to Next Paint): Kullanıcının sayfayla etkileşime girdiği andan itibaren tarayıcının görsel yanıt üretmesine kadar geçen süreyi ölçer. Mart 2024''te FID''nin yerini aldı.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken veya kullanıcı etkileşimi sırasında görsel öğelerin ne kadar beklenmedik şekilde yer değiştirdiğini ölçer.

Bu üç metrik birlikte sayfanızın kullanıcıya sunduğu deneyimin kalitesini belirler. Google, Search Console''daki Core Web Vitals raporunda her sayfanızı "iyi", "iyileştirilmesi gerekiyor" veya "kötü" olarak sınıflandırır.

Core Web Vitals Neden SEO İçin Kritik?

Google, 2021''den itibaren Core Web Vitals''ı sayfa deneyimi sinyallerinin bir parçası olarak sıralama algoritmasına dahil etti. Tek başına CWV mükemmel sıralama garanti etmez — içerik kalitesi ve alaka düzeyi hâlâ en önemli faktörlerdir. Ancak rakiplerinizle benzer içerik kalitesine sahip olduğunuzda, CWV performansı sıralama farkını yaratan belirleyici etken olabilir.

CWV''nin SEO üzerindeki somut etkileri:

• Sıralama sinyali: Google, CWV metriklerini doğrudan sıralama faktörü olarak kullanır
• Crawl bütçesi: Yavaş sayfalar Googlebot''un crawl bütçesini verimsiz kullanır ve dizinleme hızını düşürür
• Dönüşüm oranı: Google''ın kendi araştırmalarına göre LCP her 100 ms iyileştiğinde dönüşüm oranı %1,7''ye kadar artabiliyor
• Hemen çıkma oranı: 3 saniyeden uzun yüklenen sayfalarda hemen çıkma oranı %53''e kadar çıkıyor
• Mobil öncelik: Mobile-first indexing ile mobil CWV performansı masaüstünden daha kritik

Core Web Vitals optimizasyonu genel sayfa hızı optimizasyonuyla doğrudan ilişkilidir. Kapsamlı bir sayfa hızı stratejisi için sayfa hızı optimizasyonu rehberimize göz atabilirsiniz.

LCP — Largest Contentful Paint

LCP Nedir?

LCP, kullanıcının sayfaya eriştiği andan itibaren görüntü alanındaki (viewport) en büyük içerik öğesinin tamamen render edilmesine kadar geçen süreyi ölçer. "En büyük içerik öğesi" genellikle şunlardan biridir:

• Büyük bir etiketi
• posterı
• CSS background-image ile yüklenen görsel
• Büyük bir metin bloğu (başlık veya paragraf)

LCP Eşik Değerleri (2026)

LCP''yi Etkileyen Faktörler

LCP performansını dört ana faktör belirler:

1. Sunucu yanıt süresi (TTFB): Sunucunun ilk baytı gönderme süresi LCP''nin temelini oluşturur
2. Render engelleyen kaynaklar: CSS ve JavaScript dosyaları sayfanın render edilmesini geciktirebilir
3. Kaynak yükleme süresi: LCP öğesinin (genellikle bir görsel) indirilme süresi
4. İstemci taraflı render: JavaScript ile oluşturulan içerik ek gecikmeye neden olur

LCP Optimizasyon Teknikleri

Sunucu yanıt süresini düşürün (TTFB optimizasyonu):

• CDN kullanarak içeriği kullanıcıya yakın sunuculardan sunun
• Sunucu taraflı önbellekleme uygulayın (Redis, Varnish)
• HTTP/2 veya HTTP/3 protokolünü aktifleştirin
• Veritabanı sorgularını optimize edin

LCP görselini öncelikli yükleyin:

```html

```

Render engelleyen kaynakları ortadan kaldırın:

```html

```

Modern görsel formatları kullanın:

```html

```

Yazı tipi optimizasyonu:

```css

@font-face {

font-family: ''CustomFont'';

src: url(''/fonts/custom.woff2'') format(''woff2'');

font-display: swap; / Metin hemen görünür, font yüklenince değişir /

}

```

INP — Interaction to Next Paint

INP Nedir?

INP, Mart 2024''te First Input Delay (FID) metriğinin yerini alan yeni etkileşim metriğidir. FID yalnızca ilk etkileşimin giriş gecikmesini ölçerken, INP sayfadaki tüm etkileşimleri (tıklama, dokunma, klavye girişi) takip eder ve en kötü gecikmeyi raporlar. Bu sayede sayfanın genel etkileşim duyarlılığını çok daha doğru şekilde yansıtır.

INP üç aşamayı ölçer:

1. Giriş gecikmesi (Input Delay): Kullanıcının etkileşiminden event handler''ın çalışmaya başlamasına kadar geçen süre
2. İşleme süresi (Processing Time): Event handler kodunun çalışma süresi
3. Sunum gecikmesi (Presentation Delay): Tarayıcının sonraki kareyi boyamasına kadar geçen süre

INP Eşik Değerleri (2026)

INP''yi Etkileyen Faktörler

• Uzun görevler (Long Tasks): 50 ms''den uzun süren JavaScript görevleri ana iş parçacığını bloke eder
• Büyük DOM ağacı: Çok sayıda DOM düğümü etkileşim yanıt süresini artırır
• Üçüncü taraf scriptler: Analitik, reklam ve sosyal medya scriptleri ana iş parçacığını meşgul eder
• Gereksiz yeniden render: React gibi framework''lerde gereksiz bileşen yeniden render''ları

INP Optimizasyon Teknikleri

Uzun görevleri parçalayın:

```javascript

// KÖTÜ: Tek uzun görev ana iş parçacığını bloke eder

function processAllItems(items) {

items.forEach(item => heavyComputation(item));

}

// İYİ: Görevleri scheduler API ile parçalayın

async function processAllItems(items) {

for (const item of items) {

heavyComputation(item);

// Tarayıcıya nefes alma alanı verin

await scheduler.yield();

}

}

```

Gereksiz JavaScript''i erteleyin:

```html

```

React/Next.js''de gereksiz yeniden render''ları önleyin:

```typescript

// React.memo ile gereksiz render''ları önleyin

const ExpensiveList = React.memo(({ items }: { items: Item[] }) => {

return items.map(item => );

});

// useMemo ile pahalı hesaplamaları önbelleğe alın

const sortedItems = useMemo(

() => items.sort((a, b) => a.score - b.score),

[items]

);

```

DOM boyutunu küçültün:

Büyük DOM ağaçları (1500+ düğüm) etkileşim yanıt süresini ciddi şekilde etkiler. Görünür olmayan içerikleri lazy load edin, sanal kaydırma (virtual scrolling) kullanın ve gereksiz wrapper elemanlarından kaçının.

CLS — Cumulative Layout Shift

CLS Nedir?

CLS, sayfa yaşam döngüsü boyunca meydana gelen beklenmedik düzen kaymalarının toplam skorunu ölçer. Kullanıcı bir bağlantıya tıklamak üzereyken içeriğin kayması ve yanlış yere tıklamasına neden olması CLS''nin önlemeye çalıştığı temel sorundur.

CLS skoru, etkilenen alanın viewport yüzdesini (impact fraction) ve hareket mesafesini (distance fraction) çarparak hesaplanır. Kullanıcı etkileşimi (tıklama, dokunma) sonucu gerçekleşen kaymalar CLS''ye dahil edilmez.

CLS Eşik Değerleri (2026)

CLS''yi Etkileyen Yaygın Sorunlar

1. Boyutsuz görseller ve videolar: Genişlik/yükseklik belirtilmemiş medya öğeleri yüklendiğinde çevresindeki içeriği iter
2. Geç yüklenen reklamlar: Reklam alanları içerik yüklendikten sonra enjekte edilir ve layout kaymasına neden olur
3. Dinamik enjekte edilen içerik: JavaScript ile DOM''a eklenen içerikler mevcut öğeleri aşağı iter
4. Web yazı tipleri: Sistem yazı tipi ile özel yazı tipi arasındaki boyut farkı metin kaydırmasına neden olur (FOUT)
5. Geç yüklenen üçüncü taraf widget''ları: Cookie banner''ları, canlı sohbet balonları ve sosyal medya eklentileri

CLS Optimizasyon Teknikleri

Görsellere her zaman boyut belirtin:

```html

```

Reklam ve dinamik içerik için alan ayırın:

```css

/ Reklam alanı için minimum yükseklik belirleyin /

.ad-container {

min-height: 250px; / Ortak reklam boyutu /

width: 300px;

background-color: #f5f5f5;

}

```

Font yükleme stratejisi:

```css

/ font-display: swap FOUT''a neden olabilir /

/ font-display: optional performans için en iyi seçenek /

@font-face {

font-family: ''BrandFont'';

src: url(''/fonts/brand.woff2'') format(''woff2'');

font-display: optional; / Font zamanında yüklenmezse sistem fontu kullanılır /

}

```

Animasyonlarda transform kullanın:

```css

/ KÖTÜ: top/left değişikliği layout kaymasına neden olur /

.animate-bad {

position: relative;

top: 0;

transition: top 0.3s;

}

.animate-bad:hover { top: -10px; }

/ İYİ: transform layout''ı etkilemez /

.animate-good {

transition: transform 0.3s;

}

.animate-good:hover { transform: translateY(-10px); }

```

Core Web Vitals Nasıl Ölçülür?

Saha Verisi (Field Data) ve Laboratuvar Verisi (Lab Data)

CWV ölçümlerinde iki temel veri türü vardır:

Saha Verisi (Field Data / RUM): Gerçek kullanıcılardan toplanan verilerdir. Chrome User Experience Report (CrUX) verileri bu kategoridedir. Google sıralama için saha verisini kullanır çünkü gerçek kullanıcı deneyimini yansıtır. 28 günlük kayan ortalama (p75) üzerinden değerlendirilir.

Laboratuvar Verisi (Lab Data): Kontrollü ortamda simüle edilen test sonuçlarıdır. Lighthouse, WebPageTest gibi araçlar laboratuvar verisi üretir. Hata ayıklama ve optimizasyon sırasında kullanışlıdır ancak sıralama sinyali olarak kullanılmaz.

Önemli fark: Laboratuvar verisinde INP ölçülemez çünkü gerçek kullanıcı etkileşimi gerektirir.

Ölçüm Araçları

Google PageSpeed Insights: Hem saha hem laboratuvar verisi sunar. URL''nizi girerek anında CWV raporu alabilirsiniz. CrUX verileri varsa saha verisini, yoksa sadece laboratuvar verisini gösterir.

Google Search Console: Core Web Vitals raporu ile sitenizin tüm sayfalarını toplu olarak izleyebilirsiniz. Sayfaları "iyi", "iyileştirilmesi gerekiyor" ve "kötü" olarak gruplar. Mobil ve masaüstü için ayrı raporlar sunar. Detaylı Search Console kullanım rehberi için Google Search Console rehberimize bakabilirsiniz.

Chrome DevTools: Performance sekmesinde sayfa yükleme ve etkileşim performansını detaylı şekilde analiz edebilirsiniz. Web Vitals uzantısı ile gerçek zamanlı CWV değerlerini görebilirsiniz.

Lighthouse: Chrome DevTools içinde veya CLI aracı olarak çalıştırılabilir. LCP ve CLS için laboratuvar verisi üretir. INP için saha verisi gerektiğinden Lighthouse ile doğrudan ölçülemez.

Web Vitals JavaScript kütüphanesi:

```javascript

import { onLCP, onINP, onCLS } from ''web-vitals'';

onLCP(metric => {

console.log(''LCP:'', metric.value, ''ms'');

// Analitik sistemine gönder

sendToAnalytics({ name: ''LCP'', value: metric.value });

});

onINP(metric => {

console.log(''INP:'', metric.value, ''ms'');

sendToAnalytics({ name: ''INP'', value: metric.value });

});

onCLS(metric => {

console.log(''CLS:'', metric.value);

sendToAnalytics({ name: ''CLS'', value: metric.value });

});

```

SEOctopus Lighthouse entegrasyonu ile CWV metriklerinizi düzenli olarak izleyebilir, tarihsel verileri karşılaştırabilir ve sorunları erken tespit edebilirsiniz. SEOctopus, her sayfa için LCP, INP ve CLS skorlarını otomatik olarak raporlar ve eşik değerlerin altına düşen sayfaları uyarı olarak işaretler.

Mobil ve Masaüstü CWV Farkları

Google, mobile-first indexing uyguladığı için mobil CWV performansı sıralama açısından masaüstünden daha belirleyicidir. Mobil cihazlarda CWV genellikle daha düşük performans gösterir çünkü:

• Düşük işlemci gücü: Mobil cihazların CPU''su masaüstüne göre 3-5 kat daha yavaş olabilir, bu da INP''yi doğrudan etkiler
• Yavaş ağ bağlantısı: 4G/3G bağlantıları LCP süresini önemli ölçüde uzatır
• Küçük ekran: Küçük viewport''ta düzen kaymaları orantılı olarak daha büyük CLS skoruna neden olur
• Dokunmatik etkileşim: Dokunma olayları tıklama olaylarından farklı gecikme profillerine sahiptir

Mobil performans optimizasyonu hakkında daha fazla bilgi için mobil SEO rehberimize bakabilirsiniz.

Gerçek Dünyadan CWV Optimizasyon Örnekleri

E-ticaret Sitesi — LCP İyileştirmesi

Bir e-ticaret sitesinin ürün sayfalarında LCP 4,2 saniyeydi. Yapılan optimizasyonlar:

1. Hero görseli WebP formatına dönüştürüldü (boyut %60 azaldı)
2. ile hero görseli öncelikli yüklendi
3. Kritik CSS inline eklendi, geri kalan CSS asenkron yüklendi
4. CDN aktifleştirildi

Sonuç: LCP 4,2 saniyeden 1,8 saniyeye düştü (%57 iyileşme).

Haber Sitesi — CLS Düzeltmesi

Bir haber sitesinde CLS skoru 0,38''di. Temel sorunlar:

1. Görsellerde width/height belirtilmemişti → tüm görsellere boyut eklendi
2. Reklam alanları dinamik yükleniyordu → min-height ile alan ayrıldı
3. Web font yüklemesi FOUT''a neden oluyordu → font-display: optional uygulandı

Sonuç: CLS 0,38''den 0,06''ya düştü.

SaaS Uygulaması — INP İyileştirmesi

Bir SaaS dashboard''unda INP 620 ms''ydi. Çözümler:

1. React bileşenlerinde gereksiz yeniden render''lar React.memo ile engellendi
2. Büyük liste render''ları sanal kaydırmaya (react-window) geçirildi
3. Üçüncü taraf scriptler web worker''lara taşındı
4. Event handler''lardaki ağır hesaplamalar requestIdleCallback ile ertelendi

Sonuç: INP 620 ms''den 180 ms''ye düştü.

Core Web Vitals Optimizasyon Kontrol Listesi

LCP Kontrol Listesi

• [ ] TTFB 800 ms''nin altında mı?
• [ ] LCP öğesi fetchpriority="high" ile işaretli mi?
• [ ] LCP görseli için var mı?
• [ ] LCP görselinde loading="lazy" KULLANILMIYOR mu?
• [ ] Görseller WebP veya AVIF formatında mı?
• [ ] Kritik CSS inline mi, geri kalan asenkron mu yükleniyor?
• [ ] CDN aktif mi?

INP Kontrol Listesi

• [ ] 50 ms''den uzun süren Long Task var mı? (Chrome DevTools Performance sekmesi)
• [ ] Üçüncü taraf scriptler defer/async ile mi yükleniyor?
• [ ] DOM düğüm sayısı 1500''ün altında mı?
• [ ] React/framework bileşenlerinde gereksiz yeniden render var mı?
• [ ] Ağır hesaplamalar web worker veya scheduler.yield() ile mi parçalanıyor?

CLS Kontrol Listesi

• [ ] Tüm görsellerde width ve height belirtilmiş mi?
• [ ] Reklam ve dinamik içerik alanları için minimum boyut ayrılmış mı?
• [ ] Font yükleme stratejisi (font-display) doğru mu?
• [ ] Animasyonlar transform ile mi yapılıyor?
• [ ] Sayfa üstüne geç yüklenen banner veya bar var mı?

Genel Kontrol Listesi

• [ ] PageSpeed Insights ile hem mobil hem masaüstü test edildi mi?
• [ ] Search Console Core Web Vitals raporu düzenli takip ediliyor mu?
• [ ] Saha verisi (CrUX) ile laboratuvar verisi karşılaştırıldı mı?
• [ ] Mobil performans ayrı olarak optimize edildi mi?

Sonuç

Core Web Vitals, 2026''da teknik SEO''nun en önemli bileşenlerinden biridir. LCP ile hızlı yükleme, INP ile anlık etkileşim yanıtı ve CLS ile görsel kararlılık sağlayarak hem kullanıcı deneyimini hem de organik sıralama performansınızı iyileştirebilirsiniz.

Başarılı bir CWV stratejisi üç temel adımdan oluşur: önce ölçün (PageSpeed Insights, Search Console, SEOctopus), sonra en büyük etkiye sahip sorunları önceliklendirin ve sistematik şekilde optimize edin. CWV bir kerelik bir düzeltme değil, sürekli izleme ve iyileştirme gerektiren bir süreçtir.

Teknik SEO''nun tüm boyutlarını kapsayan bir denetim yapmak için SEO audit rehberimize göz atabilirsiniz. Sayfa içi optimizasyonun tüm unsurlarını kontrol etmek için ise on-page SEO kontrol listemiz idealdir.

İlgili Yazılar

• Sayfa Hızı Optimizasyonu Rehberi 2026
• Teknik SEO Rehberi
• Mobil SEO Rehberi: Mobile-First Optimizasyon 2026
• SEO Audit Rehberi
• On-Page SEO Kontrol Listesi 2026
• Google Search Console Rehberi 2026