Core Web Vitals Nasıl İyileştirilir 2026 - Adım Adım

TL;DR: Core Web Vitals 3 metrik: LCP (hız), INP (etkileşim), CLS (yerinden oynama). Hepsi yeşil olmalı. WebP görsel, preload, font-display:swap, JS defer, image dimensions - temel adımlar.

LCP < 2.5s (Largest Contentful Paint)

Adım 1: Hero görsel optimizasyonu

• WebP format kullan (JPG yerine, %30 küçük)
• Boyut 1600px geniş yetiyor - daha büyük = boşa byte
• loading="eager" + fetchpriority="high"
• <link rel="preload" as="image" href="hero.webp">

Adım 2: Sunucu yanıt süresi (TTFB)

• CDN kullan (Cloudflare ücretsiz tier)
• Türkiye edge server
• Cache plugin: WP Rocket, Laravel Octane
• Database query optimization

Adım 3: Render-blocking kaynakları kaldır

• CSS minify + critical CSS inline
• JS defer / async (mümkünse modulepreload)
• Third-party script (analytics, chat) async + delayed

INP < 200ms (Interaction to Next Paint)

Adım 1: JavaScript optimizasyonu

• Long task'leri parçala (>50ms olanlar sorun)
• requestIdleCallback / setTimeout chunk'ları
• Web Workers (heavy computation için)

Adım 2: Üçüncü taraf script'leri minimize et

• Google Tag Manager: aşamalı yükle
• Chat widget'lar: kullanıcı etkileşim sonrası yükle (lazy)
• Sosyal medya embed'leri: sadece görünür alanda

Adım 3: Event handler optimizasyonu

• Debounce / throttle (scroll, input)
• Passive event listener (touchstart, wheel)
• Event delegation

CLS < 0.1 (Cumulative Layout Shift)

Adım 1: Image dimensions ekle

<img src="..." width="800" height="600" alt="...">

Adım 2: Font loading stratejisi

@font-face {
  font-family: 'Outfit';
  src: url('...');
  font-display: swap; /* veya optional */
}

Google Fonts için: &display=swap parametresi.

Adım 3: Reklam/iframe yer ayır

Dinamik içerik (banner, embed) için minimum boyut CSS ile sabit tutun.

Adım 4: CSS aspect-ratio kullan

.video-wrap { aspect-ratio: 16/9; }
.card-img { aspect-ratio: 4/3; }

Ölçüm Araçları

• PageSpeed Insights - pagespeed.web.dev
• Web Vitals Chrome Extension
• GSC > Core Web Vitals raporu
• Lighthouse (Chrome DevTools)

Hedef Skor

Mobil 85+, Desktop 90+. Düzgün optimize edilmiş sitede mümkün. 70'in altı sıralamayı düşürür.

İlgili

• SEO Komple Rehber 2026
• WordPress vs Laravel

Core Web Vitals 2026 - INP, LCP, CLS pratik optimizasyon

Mart 2024'ten itibaren Core Web Vitals'ın "responsiveness" metriği FID (First Input Delay) yerine INP (Interaction to Next Paint) oldu. Bu değişim daha kapsamlı bir kullanıcı deneyimi ölçümü demek - tek bir tıklamanın değil, sayfada yaptığınız tüm etkileşimlerin yanıt süresi.

INP (Interaction to Next Paint) - yeni metrik

Hedef: 200ms altı "iyi", 500ms üstü "kötü". INP, kullanıcının sayfayla yaptığı tüm etkileşimlerin (tıklama, klavye girişi, tap) yanıt süresinin ağırlıklı ortalaması.

Pratik iyileştirme:

• JavaScript bundle boyutunu küçültün; gereksiz library'leri kaldırın
• Long task'leri parçalayın (Task Scheduler API, setTimeout)
• requestIdleCallback ile non-critical iş'leri ertelenmiş zamana atın
• Event handler'larda heavy computation yapmayın; web worker'a delege edin
• React/Vue gibi framework'lerde React.memo, useMemo, useCallback ile re-render'ları azaltın

LCP (Largest Contentful Paint) - yükleme hızı

Hedef: 2.5 saniye altı "iyi", 4 saniye üstü "kötü".

Pratik iyileştirme:

• Hero görseli için preload + fetchpriority="high"
• Web font'lar için font-display: swap
• CSS critical path inline edilmeli (above-the-fold)
• CDN kullanın (Cloudflare ücretsiz tier yeterli çoğu KOBİ için)
• Görselleri WebP veya AVIF formatına çevirin
• Server response time (TTFB) 600ms altında olmalı

CLS (Cumulative Layout Shift) - görsel stabilite

Hedef: 0.1 altı "iyi", 0.25 üstü "kötü".

Pratik iyileştirme:

• Her img tag'inde width ve height attribute'ları
• Reklam, embed iframe'leri için reserved space
• Font loading sırasında FOIT/FOUT minimize için font-display:optional
• Dinamik içerik (banner, popup) sayfa load'undan sonra layout shift yapmamalı
• Iframe ve video'lar için CSS aspect-ratio property

Real User Monitoring (RUM) - laboratuvar değil saha verisi

Lighthouse skor laboratuvar koşullarında ölçülüyor; gerçek kullanıcı deneyimi farklı. Saha verisi için araçlar:

• Google Search Console - Core Web Vitals report. Gerçek Chrome kullanıcı verisi. 28 günlük rolling window.
• PageSpeed Insights API. Belirli URL'ler için CrUX verisi + Lighthouse lab verisi.
• web-vitals library. JavaScript ile kendi sitenizde RUM datası toplama. Google Analytics 4'e custom event olarak gönderme.
• SpeedCurve, Calibre, Treo. Premium RUM monitoring araçları.

Sıkça yapılan hatalar

1. Sadece Lighthouse skoruna güvenme. Lighthouse lab; gerçek kullanıcı verisi farklı olabiliyor.
2. Mobile öncelik atlama. Çoğu trafik mobil; CWV mobile-first ölçülmeli.
3. Üçüncü taraf script'leri kontrol etmeme. Analytics, chat widget, reklam pixelleri major INP/LCP kaybı yaratıyor.
4. Image optimizasyonu manuel yapma. Otomatik image transformasyon (Cloudinary, Vercel Image, Laravel intervention) zaman tasarrufu.
5. Test verisinde ölçme. Sadece development ortamında test etmek; production altyapısı farklı.

Core Web Vitals Nedir?

• LCP (Largest Contentful Paint): Sayfadaki en büyük görsel öğenin yüklenme süresi.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken öğelerin ne kadar kaydığı.
• INP (Interaction to Next Paint): Kullanıcı etkileşimine yanıt hızı. 2024'te FID'in yerini aldı.

Veriler gerçek kullanıcı ziyaretlerinden toplanan CrUX (Chrome User Experience Report) üzerinden gelir. Resmi kaynak: web.dev/vitals

Neden Önemli?

• İyi CWV skoruna sahip siteler %24 daha az terk ediliyor.
• LCP 2.5s altındaki siteler dönüşüm oranında %8 avantaj sağlıyor.
• E-ticaret sitelerinde her 100ms hız kaybı %1 satış kaybı.
• Google iki eşit kalitede içerik arasında CWV'si iyi olanı öne çıkarıyor.

LCP İyileştirme: 7 Pratik Teknik

1. Hero Görseli Preload Edin

<link rel="preload" as="image"
      href="/img/hero.webp"
      fetchpriority="high">

2. WebP / AVIF Formatları Kullanın

JPEG yerine WebP %30, AVIF %50 daha küçük dosya boyutu:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Hero" width="1280" height="720">
</picture>

3. Lazy Loading (Fold Altı İçin)

<img src="/img/below-fold.webp"
     loading="lazy"
     decoding="async"
     width="800" height="600"
     alt="Hizmet görseli">

4. fetchpriority Attribute

<img src="/img/hero.webp" fetchpriority="high">

5. Critical CSS Inline

<style>
  body{font-family:system-ui}
  .hero{min-height:100vh;background:#0A0C1E}
</style>
<link rel="preload" href="/css/main.css" as="style"
     >

6. Font Optimizasyonu

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit.woff2') format('woff2');
  font-display: swap;
}

7. CDN ve SSR

Cloudflare, BunnyCDN gibi CDN ile TTFB'yi düşürün. Laravel tarafında SSR + Cache:

Route::get('/', function () {
    return Cache::remember('home', 3600, fn() => view('home')->render());
});

CLS Önleme: 5 Teknik

1. Görsellere width/height Verin

<img src="/img/kart.webp" width="400" height="300" alt="...">

2. aspect-ratio CSS

.card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

3. font-display: swap

@font-face {
  font-family: 'Outfit';
  font-display: swap;
  size-adjust: 100%;
}

4. Reklam Alanlarına Yer Ayırın

.ad-slot { min-height: 250px; }

5. Consent Banner Yerleşimi

Cookie banner'ı fixed position ile yerleştirin, içerik aşağı itmesin.

Test Araçları

• PageSpeed Insights: pagespeed.web.dev
• Google Search Console: Tüm sitenin CWV problemleri
• Lighthouse: Chrome DevTools
• WebPageTest: webpagetest.org
• CrUX Dashboard: Gerçek kullanıcı tarihsel grafiği

Gerçek Vaka: 50 Skordan 95 Skora

Uyguladığımız: Hero görseli AVIF + preload, Cloudflare CDN, critical CSS inline, font-display swap, aspect-ratio, JS bundle 3 chunk, Laravel response cache, image lazy loading.

Vaka çalışmaları