Core Web Vitals 2026: LCP, FID/INP, CLS Optimizasyonu Rehberi

Core Web Vitals 2026: LCP, INP, CLS Pratik Optimizasyon Rehberi

Google 2024 Mart'ta sayfa deneyimi metriklerinin Interaction to Next Paint (INP) ile yenilendiğini, eski FID metriğinin emekli olduğunu duyurdu. 2026 itibarıyla artık üç çekirdek metrik var: LCP, INP, CLS. Bu üç değerin "iyi" eşiğini geçen siteler arama sonuçlarında görece avantajlı sıralanıyor; geçemeyenler ise rakipleriyle aynı içerik kalitesinde olsa bile geride kalıyor. Bu rehberde Buyukweb hosting altyapısı perspektifinden CWV'i pratik adımlarla optimize etmeyi anlatıyoruz — abartı yok, gerçek araç komutları ve kod örneği var.

Buyukweb perspektifi: CWV'in TTFB (Time to First Byte) bileşeni doğrudan hosting altyapısıyla ilgilidir. Buyukweb cPanel paketlerinde LiteSpeed Web Server + LSCache + Brotli + HTTP/3 standart kuruludur; bu bileşenler TTFB'yi 50-150 ms aralığına indirir. Site kodu, resim ve JavaScript optimizasyonu kullanıcının kendi sorumluluğu, ama sunucu tarafı temelini biz hazır veriyoruz. Tercih etmeyin: "CWV için ek sunucu paketi alma" pazarlamalarını — hız bonus paket gerektirmez, doğru hosting + doğru tema + doğru eklenti yapılandırmasıyla halledilir.

CWV Üç Metrik: 2026 Eşik Değerleri

Metrik	Ne ölçer?	İyi (yeşil)	İyileştir (sarı)	Kötü (kırmızı)	Etkileyen
LCP (Largest Contentful Paint)	Görünür alandaki en büyük öğenin render olma süresi	≤ 2.5 sn	2.5-4.0 sn	> 4.0 sn	TTFB, resim, font, CSS render-blocking
INP (Interaction to Next Paint)	Kullanıcı tıklaması sonrası tarayıcının yanıt verme süresi (sayfanın tüm yaşamı boyunca en kötü etkileşim)	≤ 200 ms	200-500 ms	> 500 ms	JavaScript main thread, third-party script
CLS (Cumulative Layout Shift)	Sayfa yüklenirken öğelerin ne kadar kaydığı	≤ 0.1	0.1-0.25	> 0.25	Boyutsuz resim, geç eklenen reklam, font swap

Eski FID metriği "ilk etkileşim gecikmesi"ne bakıyordu. INP ise sayfanın 75. yüzdelik en kötü etkileşim süresine bakar; çok daha katı. Bu yüzden 2024 öncesi "FID'im yeşildi" diyen sitelerin çoğu INP'de sarıya/kırmızıya düştü.

LCP Optimizasyonu: Sunucu, Sonra Resim

LCP'yi etkileyen 4 ana zincir halkası: TTFB → resource load → render delay → resource render. Hosting tarafı TTFB'yi belirler; geri kalanı kod tarafı.

1. TTFB'yi Düşürmek (Hosting Katmanı)

Hedef TTFB:
  - Mobil:    < 200 ms (yeşil), < 500 ms (sarı)
  - Masaüstü: < 100 ms (yeşil), < 300 ms (sarı)

TTFB'yi düşürmenin yolları:

• LiteSpeed + LSCache — Buyukweb cPanel'de standart. WordPress için statik HTML cache; Apache + PHP-FPM kombosuna göre 3-8x hızlı TTFB
• HTTP/3 (QUIC) — UDP üzerinden 0-RTT bağlantı kurma, paket kaybı altında daha iyi davranış. LiteSpeed'de standart aktif
• Türkiye sunucusu — Türkiye ziyaretçisi için Bursa Tier 3 datacenter'a 10-30 ms; ABD sunucusu kullanıyorsanız 120-180 ms ekleyin
• NVMe disk — datacenter NVMe zaten Buyukweb tüm paketlerde standart
• CDN (yurt dışı ziyaretçi varsa) — CloudFlare ücretsiz, LiteSpeed Cache ile tam entegre

2. LCP Resmini Tespit Etme

Chrome DevTools > Lighthouse > Performance raporu → "Largest Contentful Paint element" bölümünde tam HTML elementini gösterir. Veya:

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lcpEntry = entries[entries.length - 1];
  console.log('LCP:', lcpEntry.startTime, 'element:', lcpEntry.element);
}).observe({type: 'largest-contentful-paint', buffered: true});

3. LCP Resmini Hızlandırmak

<!-- 1. Preload + fetchpriority="high" -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- 2. img tag'inde fetchpriority -->
<img src="/hero.webp" alt="Hero başlık" width="1200" height="630"
     fetchpriority="high" loading="eager">

<!-- 3. Lazy loading'i LCP'ye ASLA UYGULAMA -->
<!-- ❌ YANLIŞ: <img src="/hero.webp" loading="lazy"> -->
<!-- ✅ DOĞRU: loading="eager" veya hiç ekleme (default eager) -->

<!-- 4. WebP veya AVIF formatı kullan -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero">
</picture>

<!-- 5. Responsive image (srcset) -->
<img src="/hero-1200.webp"
     srcset="/hero-600.webp 600w, /hero-1200.webp 1200w, /hero-2400.webp 2400w"
     sizes="(max-width: 768px) 100vw, 1200px"
     alt="Hero" width="1200" height="630">

4. Render-Blocking CSS/JS

<!-- ❌ render-blocking CSS -->
<link rel="stylesheet" href="/styles/all.css">

<!-- ✅ kritik CSS inline + geri kalanı async -->
<style>/* critical above-the-fold CSS */</style>
<link rel="stylesheet" href="/styles/all.css" media="print" onload="this.media='all'">

<!-- ❌ render-blocking script -->
<script src="/app.js"></script>

<!-- ✅ defer ile DOM'dan sonra yükle -->
<script src="/app.js" defer></script>

<!-- ✅ async ile bağımsız yükle -->
<script src="/analytics.js" async></script>

5. Font Optimization

<!-- Self-host edilmiş font preload -->
<link rel="preload" as="font" type="font/woff2"
      href="/fonts/inter-v12-latin-regular.woff2" crossorigin>

<style>
  @font-face {
    font-family: 'Inter';
    font-display: swap;       /* ✅ font yükleninceye kadar fallback göster */
    src: url('/fonts/inter-v12-latin-regular.woff2') format('woff2');
  }
</style>

INP Optimizasyonu: JavaScript'i Disipline Et

INP, sayfanın tüm yaşamı boyunca kullanıcı etkileşimlerine ne kadar geç yanıt verdiğini ölçer. Tek kötü etkileşim raporu kötüleştirir. Ana neden: ana iş parçacığını (main thread) bloke eden JavaScript.

1. Long Task'ları Tespit Et

// PerformanceObserver ile 50ms+ bloklayan task'ları yakala
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task:', entry.duration, 'ms', entry.name);
    }
  }
}).observe({type: 'longtask', buffered: true});

Chrome DevTools > Performance > Record → kullanıcı etkileşimi yap → kayıtta sarı/kırmızı bloklar long task.

2. Büyük Fonksiyonu Bölme (yieldToMain)

// ❌ tek-blok büyük iş, INP yıkar
function processItems(items) {
  for (const item of items) heavyWork(item);  // 800 ms
}

// ✅ bölüp ana iş parçacığına yer aç
async function processItems(items) {
  for (const item of items) {
    heavyWork(item);
    await new Promise(r => setTimeout(r, 0));  // veya scheduler.yield()
  }
}

// ✅ scheduler.yield() (Chromium 129+, daha akıllı)
async function processItems(items) {
  for (const item of items) {
    heavyWork(item);
    if ('scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield();
    }
  }
}

3. Web Worker'a Taşıma

// main.js
const worker = new Worker('/heavy-worker.js');
worker.postMessage({task: 'process', data});
worker.onmessage = (e) => updateUI(e.data);

// heavy-worker.js
self.onmessage = (e) => {
  const result = expensiveCalculation(e.data.data);
  self.postMessage(result);
};

4. Üçüncü-Taraf Script'leri Geciktirme

Analytics, chat widget, ısı haritası, A/B test gibi script'ler INP'in en sık öldürücüsü.

// requestIdleCallback ile boş zamanda yükle
function loadThirdParty(src) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      const s = document.createElement('script');
      s.src = src;
      s.async = true;
      document.head.appendChild(s);
    });
  } else {
    setTimeout(() => loadThirdParty(src), 2000);
  }
}

// Etkileşimden sonra yükle (Tawk.to, Intercom vs.)
let chatLoaded = false;
['mousemove', 'scroll', 'touchstart'].forEach(ev =>
  window.addEventListener(ev, function load() {
    if (chatLoaded) return;
    chatLoaded = true;
    loadThirdParty('https://embed.tawk.to/.../widget.js');
  }, {once: true, passive: true})
);

5. Event Handler Optimizasyonu

// ❌ scroll'da her seferinde ağır iş
window.addEventListener('scroll', () => {
  recalculateLayout();    // 80 ms
});

// ✅ throttle / debounce
let scrollTimer;
window.addEventListener('scroll', () => {
  cancelAnimationFrame(scrollTimer);
  scrollTimer = requestAnimationFrame(recalculateLayout);
}, {passive: true});

// ✅ passive listener — tarayıcı scroll'u beklemez
element.addEventListener('touchstart', handler, {passive: true});

CLS Optimizasyonu: Layout Shift Yok Et

CLS olur çünkü sayfa yüklenirken bir öğe eklenir/değişir ve etrafındakileri iter.

1. Resim ve Video Boyut Belirt

<!-- ❌ tarayıcı boyut bilmez, render sonrası kayar -->
<img src="/banner.jpg" alt="Banner">

<!-- ✅ width/height attribute -->
<img src="/banner.jpg" alt="Banner" width="800" height="400">

<!-- ✅ CSS aspect-ratio (responsive) -->
<style>
.banner {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}
</style>

2. Reklam ve Embed Yer Tutucu

.ad-slot {
  min-height: 250px;        /* AdSense slot rezerv */
  background: #f5f5f5;
}

.youtube-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

3. Font Swap'ı Kontrol Altına Al

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;          /* CLS'e yol açabilir ama FOIT'tan iyi */
}

/* size-adjust ile fallback ve gerçek font hizalama (CLS azalt) */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.4%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

Not: size-adjust değerlerini bulmak için fontkit-fallback-tool veya fontfaceobserver kullanabilirsiniz; manuel deneme-yanılma da çalışır.

4. Animasyonda transform Kullan

/* ❌ layout tetikler, CLS yapar */
.menu-item:hover { top: -2px; }

/* ✅ compositor seviyesi, CLS sıfır */
.menu-item:hover { transform: translateY(-2px); }

5. Geç Eklenen İçerik

// ❌ tıklamadan sonra DOM'a yeni öğe ekleyince üst öğeleri iter
button.onclick = () => {
  const div = document.createElement('div');
  div.textContent = 'Yeni içerik';
  document.body.prepend(div);  // CLS!
};

// ✅ önceden gizli yer ayır
.hidden-content {
  min-height: 200px;
  visibility: hidden;
}
button.onclick = () => {
  document.querySelector('.hidden-content').style.visibility = 'visible';
};

CWV Ölçüm Araçları

1. PageSpeed Insights (Google)

https://pagespeed.web.dev/ — URL gir, Lab + Field veriyi gör. Field veri Chrome User Experience Report (CrUX) gerçek kullanıcı sayılarına dayanır.

2. Search Console > Core Web Vitals

Search Console > Sayfa deneyimi > Core Web Vitals. URL gruplarını ("kötü", "iyileştir", "iyi") gösterir; düzeltme sonrası "Validation Fix" ile yeniden ölçtür.

3. Chrome DevTools

F12 > Lighthouse sekmesi > Mobile + Performance > Generate report
F12 > Performance sekmesi > Record + reload + interaction
F12 > Performance Insights > Live metrics overlay

4. web-vitals.js Kütüphanesi (RUM ölçüm)

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

onLCP((metric) => sendToAnalytics('LCP', metric));
onINP((metric) => sendToAnalytics('INP', metric));
onCLS((metric) => sendToAnalytics('CLS', metric));

function sendToAnalytics(name, metric) {
  // Google Analytics 4
  gtag('event', name, {
    value: Math.round(name === 'CLS' ? metric.value * 1000 : metric.value),
    metric_id: metric.id,
    metric_value: metric.value,
    metric_rating: metric.rating  // 'good' | 'needs-improvement' | 'poor'
  });
}

5. CrUX BigQuery / API

Sektörünüzdeki rakiplerin gerçek CWV verisini görmek için:

https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=API_KEY

WordPress için CWV Toplu Ayar

Buyukweb cPanel'de WordPress kurarken hızlı kazanım listesi:

1. LiteSpeed Cache eklentisi (Buyukweb'de aktif)
   - Cache > Settings > "Cache" sayfa cache aç
   - Image > "WebP Replacement" aç
   - CSS/JS > "CSS Minify", "Combine CSS", "JS Defer"
   - Database > "Schedule Cleaner" haftalık aç

2. Tema: GeneratePress, Astra, Kadence, Blocksy gibi hafif tema
   - "Page Builder" şişmiş temalar (Avada, Divi, BetterStudio) CWV düşmanı

3. Resim eklentisi: ShortPixel veya Imagify
   - Otomatik WebP/AVIF dönüşüm
   - Lazy load

4. Font: Google Fonts'u self-host et
   - "OMGF | Host Google Fonts Locally" eklentisi

5. Üçüncü-taraf script:
   - Tawk.to / Intercom — etkileşim sonrası yükle
   - Hotjar / Microsoft Clarity — sample rate düşür
   - GA4 — minimal config

CWV ve TTFB: Sunucu Tarafının Sorumluluğu

CWV'in en sık atlanan parçası sunucu hızı. LCP'in %30-50'si TTFB'dir; INP'in iyi-INP-için-200ms hedefini sunucu yavaşsa tutturamazsınız.

Buyukweb'in TTFB ölçümü: Bursa Tier 3 datacenter'a Türkiye'den 10-30 ms ping; LiteSpeed + LSCache ile WordPress TTFB tipik 50-150 ms. Aynı site shared hosting'de Apache + cache eklentisi kombosuyla 300-700 ms TTFB veriyor. Ham donanım fark etmeyebilir; yazılım kombosu (sunucu + cache) farkı yaratıyor.

CWV iyileştirme projesinde başlangıç adımı: hosting'i ölç. WebPageTest.org'dan Türkiye lokasyonu seçip TTFB değerine bakın; 200 ms üstündeyse hosting taşıma planına dahil edin.

Sık Sorulan Sorular

Buyukweb cPanel'de LiteSpeed Cache zaten aktif mi?

Evet. LSWS (LiteSpeed Web Server) sunucu seviyesinde aktif; LSCache eklentisini WordPress'e kurmanız gerekir (cPanel'in "WP-Toolkit" veya "Softaculous" üzerinden tek-tıkla yükleme). Eklenti aktif olunca sunucu cache devreye girer.

CWV'i iyileştirmek SEO'mu hemen yükseltir mi?

Hayır. CWV "tiebreaker" sinyaldir; yani aynı içerik kalitesinde iki rakip varsa CWV iyi olan üstte. Tek başına CWV iyileşmesi düşük-içerikli siteyi 1. sayfaya çıkarmaz. Asıl sıralama içerik + backlink + kullanıcı sinyalleri.

"Mobil" ve "masaüstü" CWV ayrı mı sayılıyor?

Evet. Search Console iki ayrı raporu gösterir; Google sıralama da ayrı değerlendirir. Çoğu trafik mobilden geldiği için mobil CWV önceliklidir.

INP rakam alamıyorum, neden?

INP, kullanıcı sayfa ile etkileştikten sonra ölçülür. CrUX'ta görünmesi için 28 günlük yeterli trafik gerekir. Eski sitelerde veri var; yeni site için 1-3 ay beklenebilir. Lab veride INP yerine TBT (Total Blocking Time) Lighthouse skoru kullanılır (proxy metrik).

LiteSpeed Cache mi WP Rocket mi daha iyi?

LiteSpeed sunucusunda LiteSpeed Cache kesinlikle daha hızlı (sunucu seviyesi cache). Apache + Nginx sunucusunda WP Rocket veya W3 Total Cache. Buyukweb LiteSpeed kullandığı için müşterilerimize LSCache standart öneririz; ücretsiz, daha entegre.

TTFB iyi ama LCP yüksek, neden?

LCP = TTFB + resource fetch + render. TTFB'iniz 100 ms ise sorun resimde veya CSS render-blocking'de. LCP elementini DevTools'la bulun, preload + fetchpriority="high" + WebP/AVIF uygulayın.

CLS'im iyi, kötü olmasını engellemek için ne yapmalıyım?

Geliştirme sırasında CLS Devtools panelini açık tutun. Yeni öğe eklerken (banner, popup) önceden min-height ile yer rezerv edin. Yeni eklediğiniz reklam, modal, A/B test koduyla CLS hızla bozulur.

Animasyonlar CWV'i bozar mı?

top, left, width, height değişimleri layout'u tetikler ve CLS'i bozar. transform ve opacity ile animasyonlar compositor seviyesinde olur, CLS sıfırdır. CSS animasyon yazarken will-change: transform ipucu da yardımcıdır.

Üçüncü-taraf script'lerimi kestim ama dashboard çalışıyor — INP nasıl iyileşir?

Tarayıcıdan göremediğiniz daha sıkı kanıt için web-vitals.js'i kullanıp gerçek kullanıcı verisini GA4'e gönderin. 7-14 günde gerçek-dünya INP'inizi göreceksiniz. Kullanıcı etkileşimini en çok ne yavaşlatıyor? Slow event listener, büyük React re-render, üçüncü-taraf widget — DevTools Performance Insights gösterir.

Sonuç

Core Web Vitals 2026'da hâlâ önemli ama tek başına sıralama değiştirici değil. Buyukweb'in LiteSpeed + LSCache + Brotli + HTTP/3 + NVMe + Bursa Tier 3 kombosu sunucu tarafı temelini hazır verir; geri kalanı (resim, font, JavaScript, üçüncü-taraf script disiplini) site sahibinin görevi. INP yeni metrik olarak FID'den çok daha katı; üçüncü-taraf script'lere dikkat edin. CLS için her resim/iframe/embed'e boyut belirtin. Düzenli ölçün; Search Console + PageSpeed Insights + GA4'te web-vitals.js kombinasyonu yeterlidir.

Soru ve teknik destek için: 0850 302 60 70.

---

İlgili Büyükweb Hizmetleri

CWV iyileştirme için altyapı paketleri:

• cPanel Web Hosting — LiteSpeed + LSCache + NVMe standart
• WordPress Hosting — WP optimize altyapı
• VDS Sunucu — root yetki, kendi cache stack'iniz
• Türkiye VDS — düşük ping, yerel TTFB
• Tüm Paketler — Karşılaştırma

Sorularınız için 0850 302 60 70 numaralı destek hattımıza veya iletişim sayfamıza yazabilirsiniz.