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

Google Core Web Vitals, kullanıcı deneyimini ölçen ve sıralamayı etkileyen kritik metriklerdir. 2026 yılında FID'in yerini INP (Interaction to Next Paint) aldı. Bu rehberde 2026 itibarıyla geçerli olan üç metriği detaylıca inceliyoruz.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın sayfa deneyimi sinyallerinin bir parçasıdır:

Metrik	Açıklama	İyi Eşik	Geliştirilmeli	Kötü
LCP	Largest Contentful Paint	≤ 2.5s	2.5–4.0s	> 4.0s
INP	Interaction to Next Paint	≤ 200ms	200–500ms	> 500ms
CLS	Cumulative Layout Shift	≤ 0.1	0.1–0.25	> 0.25

LCP (Largest Contentful Paint) Optimizasyonu

LCP, görünür alandaki en büyük içerik öğesinin yüklenme süresini ölçer.

LCP Öğeleri

• Hero görseller
• Büyük metin blokları
• Video thumbnail'lar
• <img>, <image>, CSS background-image

LCP İyileştirme Adımları

<!-- 1. LCP görseline preload ekle -->
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">

<!-- 2. fetchpriority="high" kullan -->
<img src="/hero.webp" fetchpriority="high" alt="Hero" width="1200" height="600">

<!-- 3. Lazy loading'i LCP öğesine EKLEME -->
<!-- YANLIŞ: -->
<img src="/hero.webp" loading="lazy">
<!-- DOĞRU: -->
<img src="/hero.webp" loading="eager">

# Sunucuda HTTP/2 Push veya Early Hints
location / {
    add_header Link "</hero.webp>; rel=preload; as=image";
}

Sunucu Yanıt Süresi (TTFB)

# TTFB ölçümü
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s
" https://siteniz.com

# LiteSpeed Cache ile TTFB düşürme
# WordPress'te LSCache eklentisi aktif edilmeli

INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcı etkileşimi (tıklama, klavye girişi, dokunma) sonrasında tarayıcının yanıt vermesi için geçen süreyi ölçer.

INP Neden Önemli?

FID yalnızca ilk etkileşimi ölçerken, INP tüm sayfa ömrü boyunca gerçekleşen etkileşimlerin en kötüsünü baz alır.

INP Kötü Nedenler

1. Uzun JavaScript görevleri (Long Tasks > 50ms)
2. Gereksiz event listener'lar
3. Senkron DOM güncellemeleri
4. Ağır third-party script'ler

// YANLIŞ: Ana thread'i bloklayan ağır hesaplama
button.addEventListener('click', () => {
  const result = heavyCalculation(); // 200ms sürebilir
  updateUI(result);
});

// DOĞRU: Web Worker ile offload
const worker = new Worker('calc-worker.js');
button.addEventListener('click', () => {
  worker.postMessage({ data: inputData });
});
worker.onmessage = (e) => {
  updateUI(e.data.result);
};

// DOĞRU: scheduler.postTask ile önceliklendirme
button.addEventListener('click', async () => {
  // Kullanıcıya hızlı görsel yanıt ver
  showLoadingSpinner();

  // Ağır işi background'a ertele
  await scheduler.postTask(() => heavyWork(), { priority: 'background' });

  hideLoadingSpinner();
  showResult();
});

Third-Party Script Optimizasyonu

<!-- Kritik olmayan scriptleri defer et -->
<script src="analytics.js" defer></script>

<!-- Facade pattern: Tıklanana kadar yükleme -->
<div id="chat-facade" onclick="loadLiveChat()">
  <img src="/chat-icon.svg" alt="Canlı Destek">
</div>
<script>
function loadLiveChat() {
  const script = document.createElement('script');
  script.src = 'https://chat-widget.com/widget.js';
  document.head.appendChild(script);
}
</script>

CLS (Cumulative Layout Shift) Optimizasyonu

CLS, sayfa yüklenirken öğelerin ne kadar kaydığını ölçer.

CLS Sorunlarının Kaynakları

1. Boyutsuz görseller
2. Dinamik eklenen içerik (reklamlar, banner'lar)
3. Web font geç yükleme (FOUT/FOIT)
4. Animasyonlar

<!-- YANLIŞ: Boyut belirtilmemiş -->
<img src="/banner.jpg" alt="Banner">

<!-- DOĞRU: width/height her zaman belirtin -->
<img src="/banner.jpg" alt="Banner" width="800" height="400">

<!-- CSS aspect-ratio ile -->
<style>
.banner-img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
</style>

/* Font yükleme sırasında layout shift önleme */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: swap; /* FOUT: flash of unstyled text */
  /* veya optional: layout shift olmaz ama font görünmeyebilir */
}

/* size-adjust ile fallback font hizalama */
@font-face {
  font-family: 'CustomFont-Fallback';
  src: local('Arial');
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: normal;
  line-gap-override: normal;
}

/* Reklam alanı için yer ayır */
.ad-container {
  min-height: 250px; /* Reklam yüklenmeden önce alan rezerv et */
  background: #f0f0f0;
}

/* Animasyonlarda transform kullan, top/left değil */
/* YANLIŞ: Layout tetikler */
.element { transition: top 0.3s, left 0.3s; }

/* DOĞRU: Compositor'da çalışır, layout shift olmaz */
.element { transition: transform 0.3s; }

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

# PageSpeed Insights API
curl "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://siteniz.com&key=API_KEY"

# Lighthouse CLI
npx lighthouse https://siteniz.com --output=json --only-categories=performance

Google Search Console

Search Console > Core Web Vitals raporunda:

• URL gruplarını incele
• "Kötü" durumundaki URL'leri düzelt
• Düzeltme sonrası "Düzeltildi olarak işaretle"

Chrome DevTools

1. Performance paneli: LCP, INP, CLS olaylarını kayıt altına alır
2. Lighthouse: Sayfa puanı ve öneriler
3. Performance Insights: Gerçek kullanıcı verisi

WordPress İçin Core Web Vitals

// functions.php - LCP görseli preload
function add_lcp_preload() {
    if (is_front_page()) {
        echo '<link rel="preload" as="image" href="' . get_template_directory_uri() . '/images/hero.webp" fetchpriority="high">';
    }
}
add_action('wp_head', 'add_lcp_preload', 1);

Önerilen Eklentiler:

• LiteSpeed Cache (Buyukweb hosting ile tam uyumlu)
• Perfmatters (Script yönetimi)
• Flying Images (Akıllı lazy loading)
• Font Optimization (Google Fonts optimize)

Sonuç

Core Web Vitals doğrudan Google sıralamasını etkilemektedir. LCP için sunucu hızı ve görsel optimizasyonu, INP için JavaScript optimizasyonu, CLS için ise boyut rezervasyonu kritiktir. Buyukweb'in LiteSpeed tabanlı hosting altyapısı, TTFB değerlerini düşük tutarak LCP skorunuzu doğal olarak iyileştirir.

---

Ilgili Buyukweb Hizmetleri:

• E-ticaret VDS ile online satisinizi guclendirin
• Hizli hosting ile SEO performansinizi arttirin
• Tum hosting ve sunucu paketlerimiz

---

Teknik SEO Kontrol Listesi

Sayfa Hizi

Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1. TTFB 200ms alti. LiteSpeed hosting avantaj saglar. WebP/AVIF resimler, lazy loading, CSS/JS minify.

Mobil Uyumluluk

Google mobile-first indexing kullaniyor. Responsive tasarim, dokunma hedefleri ve mobil hiz kritik.

Yapisal Veri

JSON-LD ile Product, FAQ, HowTo, Article schemalari. CTR %20-30 artis. Rich Results Test ile dogrulayin.

Icerik Stratejisi

Long-tail anahtar kelimelere odaklanin. Derinlemesine icerik olusturun. Duzenli guncelleyin. E-A-T ilkelerine uyun.

Backlink

Misafir yazilar ve teknik iceriklerle dogal profil. Spam linklerden kacinin. Rakip analizi yapin.

Lokal SEO

Google Business Profile olusturun. Yerel anahtar kelimeleri hedefleyin. Musteri yorumlari toplayin. NAP tutarliligi saglayin.

Sik Sorulan Sorular

Hosting SEO etkiler mi?

Evet. Hiz, uptime, SSL ve lokasyon dogrudan etkiler. LiteSpeed + NVMe ideal.

Core Web Vitals nasil iyilestirilir?

LCP: resim optimize, lazy load. INP: JS azalt. CLS: boyut belirt, font-display swap.

Sonuc

SEO teknik altyapi ve icerik kalitesinin birlesimdir. Hosting ile SEO stratejisini entegre ederek ust siralara yukselin.

SEO Arac Kutusu

Ucretsiz SEO Araclari

• Google Search Console: Indeksleme, arama performansi, teknik sorunlar
• Google Analytics 4: Trafik, kullanici davranisi, donusum
• PageSpeed Insights: Core Web Vitals ve performans
• Rich Results Test: Yapisal veri dogrulama
• Screaming Frog (500 URL): Teknik SEO analizi

Ucretli SEO Araclari

• Ahrefs: Backlink ve anahtar kelime analizi
• SEMrush: Kapsamli SEO ve PPC
• Surfer SEO: Icerik optimizasyonu

Icerik Pazarlama Stratejisi

Blog Yazisi Yapisi

1. Dikkat cekici baslik (H1) - anahtar kelime icermeli
2. Giris paragrafi - sorunu tanimla
3. Alt basliklar ile mantiksal bolumler
4. Gorseller ve infografikler
5. Dahili linkler
6. CTA (Call to Action)
7. SSS bolumu (FAQ schema)

Icerik Takvimi

Haftada 2-3 yazi yayinlayin. Mevsimsel trendleri takip edin. Evergreen ve trending icerik dengesi kurun.

Neden Buyukweb?

Buyukweb, 2009 yilindan bu yana Turkiye'nin guvenilir hosting firmasidir. Bursa Pendc Tier 3 veri merkezinde profesyonel barindirma hizmetleri sunmaktadir.

Teknik Altyapi Avantajlari

• NVMe SSD Diskler: Geleneksel disklere gore 10x daha hizli okuma/yazma
• LiteSpeed Web Server: Apache'ye kiyasla 10x performans artisi
• CloudLinux Izolasyonu: Her hesap icin ayri kaynak limiti
• Imunify360 Guvenlik: Otomatik malware tarama ve engelleme
• DDoS Korumasi: L3, L4, L7 katmanlarinda kapsamli koruma

Musteri Memnuniyeti

5.200'den fazla aktif musteri ile %99.8 uptime garantisi sunuyoruz. 7/24 Turkce teknik destek ekibimiz tum sorulariniza hizla yanit verir. Ucretsiz site tasima hizmeti ile mevcut hosting saglayicinizdan kolayca gecis yapabilirsiniz.

Fiyat-Performans Dengesi

Rekabetci fiyatlarla profesyonel hosting altyapisi sunuyoruz. Yillik odemede ek indirimler, ucretsiz SSL sertifikasi ve gunluk otomatik yedekleme tum paketlerde standarttir.

Kolay Yonetim

cPanel ve Plesk kontrol panelleri ile web sitenizi, e-postalarinizi ve veritabaninizi tek panelden kolayca yonetin. Softaculous ile 400'den fazla uygulamayi tek tikla kurun.