Core Web Vitals 2026 Nasıl Optimize Edilir? LCP, INP ve CLS Rehberi

Core Web Vitals 2026: Neler değişti?

Google, 2021'de Core Web Vitals'ı resmi sıralama sinyali olarak açıkladığında web performans optimizasyonu yeni bir boyut kazandı. 2026'ya gelindiğinde bu metrikler daha da belirleyici hale geldi. Özellikle INP (Interaction to Next Paint) metriğinin FID'in yerini almasıyla birlikte etkileşim kalitesi ölçümü çok daha hassaslaştı.

Üç metriği anlamak

LCP (Largest Contentful Paint) sayfanın ana görsel veya metin bloğunun yüklenme süresini ölçer. Kullanıcının "sayfa yüklendi" hissi bu metrikle doğrudan ilişkilidir. INP (Interaction to Next Paint) kullanıcının tıklama veya klavye girişine sayfanın tepki süresini ölçer; FID'den farklı olarak tüm etkileşimleri değerlendiriyor. CLS (Cumulative Layout Shift) ise sayfa yüklenirken öğelerin ne kadar sıçrama yaptığını ölçer.

LCP optimizasyonu: 2.5 saniyenin altına inmek

LCP değerini iyileştirmenin en etkili yolu, sayfanın en büyük öğesinin — genellikle bir hero görsel ya da büyük metin bloğu — tarayıcıya olabildiğince erken teslim edilmesini sağlamaktır.

Kritik kaynakları preload edin

Tarayıcı LCP öğesini HTML'i ayrıştırırken keşfediyorsa geç kalıyor. <link rel="preload"> etiketi ile bu kaynağı öne çekebilirsiniz:

<!-- Hero görsel için preload -->
<link rel="preload" as="image"
      href="/hero.webp"
      fetchpriority="high">

<!-- Kritik font için preload -->
<link rel="preload" as="font"
      href="/fonts/brand.woff2"
      type="font/woff2" crossorigin>

Görsel formatı ve sıkıştırma

JPEG ve PNG yerine WebP veya AVIF formatı kullanın; dosya boyutunu %30-50 oranında küçültür. Hero görselinize fetchpriority="high" ekleyin ve diğer görsellere loading="lazy" uygulayın. Görsellerin width ve height attribute'larını mutlaka belirtin, aksi hâlde CLS sorununa da yol açar.

Sunucu yanıt süresini azaltın (TTFB)

LCP'nin büyük bölümü sunucudan ilk byte'ın gelmesiyle (Time to First Byte) başlar. CDN kullanın, statik sayfaları edge'de önbelleğe alın ve veritabanı sorgularını optimize edin. Hedef TTFB değeri 800ms altında olmalıdır.

• Cloudflare veya benzer CDN ile edge caching aktif edin
• Statik asset'leri uzun süreli Cache-Control header'larıyla sunun
• HTML sayfalarını tarayıcı önbelleğine alın (stale-while-revalidate)
• Image CDN ile görselleri otomatik optimize edin

INP optimizasyonu: etkileşim gecikmesini azaltmak

INP, sayfadaki tüm etkileşimlerin en kötü yüzdeliğini ölçüyor. Tek bir yavaş tıklama yanıtı bile skoru ciddi biçimde düşürebilir. Hedef: 200ms altında INP.

Ana thread'i boşaltın

Uzun JavaScript görevleri (50ms üzeri) ana thread'i bloke eder ve tıklamalara geç yanıt verilmesine neden olur. Büyük JS paketlerini code splitting ile küçük parçalara bölün, kritik olmayan işlemleri setTimeout veya requestIdleCallback ile erteleyin.

// Ağır işlemi idle zamana ertele
requestIdleCallback(() => {
  initAnalytics();
  loadChatWidget();
});

Üçüncü taraf scriptleri kontrol edin

Analytics, reklam, chat ve sosyal medya widgetları INP'nin en büyük düşmanıdır. Her üçüncü taraf scripti Chrome DevTools Performance sekmesiyle ölçün. Gerekli olmayanları kaldırın; gerekli olanları async veya defer attribute'larıyla geç yükleyin.

React ve framework optimizasyonları

React kullanan siteler için useTransition hook'u ile acil olmayan state güncellemelerini erteleyin. Next.js'de dynamic() ile ağır bileşenleri lazy load edin. Her render döngüsünde yeniden oluşturulan bileşenleri React.memo ile sarın.

CLS optimizasyonu: layout shift'i sıfıra yaklaştırmak

Layout shift, kullanıcıların bir butona tıklamak üzereyken o butonun yerinin değişmesiyle ortaya çıkar. Hem kullanıcı deneyimini hem sıralamayı olumsuz etkiler.

Boyut attribute'larını her zaman belirtin

Görsel ve video öğelerinin genişlik ve yüksekliğini HTML'de açıkça tanımlayın. Tarayıcı bu bilgi olmadan önce yer bırakamaz ve öğe yüklenince diğer içerikler kayar:

<!-- Doğru: boyutlar belirtilmiş -->
<img src="logo.webp" width="200" height="60" alt="Marka logosu">

<!-- Yanlış: boyut yok, CLS'e neden olur -->
<img src="logo.webp" alt="Marka logosu">

Font yüklenme stratejisi

font-display: swap kullanıldığında sistem fontu önce gösterilir, ardından özel font yüklenince metin yeniden çizilir ve CLS artar. Bunun yerine font-display: optional veya self-hosted fontlarla preload kombinasyonunu tercih edin.

Dinamik içerik rezervasyonu

Banner, reklam veya geç yüklenen bileşenler için CSS ile yer rezervasyonu yapın:

/* Reklam alanı için yer rezervasyonu */
.ad-container {
  min-height: 250px;
  width: 100%;
}

Lighthouse 100/100 yol haritası

Lighthouse skoru, Core Web Vitals'ın yanı sıra erişilebilirlik, SEO ve en iyi uygulamaları da değerlendiriyor. 100/100 hedefi için kapsamlı bir kontrol listesi gerekiyor.

Performans kategorisi için öncelikler

• Kullanılmayan CSS ve JavaScript'i kaldırın (Coverage sekmesini kullanın)
• Critical CSS'i inline olarak sayfa başına ekleyin
• Her görsele WebP/AVIF formatı ve lazy loading uygulayın
• render-blocking kaynakları preload veya defer ile yönetin
• HTTP/2 veya HTTP/3 aktif edin