Core Web Vitals 2026 Checklist: LCP, INP, CLS Optimize Etme Kılavuzu

Geçen hafta bir müşteri aramış: "Miraç, sitemiz mobilde 3 saniyede açılıyor ama Google Search Console'da 'İyileştirilmesi Gerekiyor' diyor. Ne yapmalıyım?" PageSpeed Insights'a baktım, LCP 4.2 saniye, CLS 0.18, INP 340 milisaniye. Sayfa hızlı ama Core Web Vitals kötü. 2026'da bu metrikler sıralamada daha kritik çünkü Google, kullanıcı deneyimini sayfa yükleme süresinden çok etkileşim kalitesiyle ölçüyor. Bu yazıda LCP, INP ve CLS'yi nasıl optimize edeceğinizi, hangi araçları kullanacağınızı ve 2026 güncellemelerine nasıl hazırlanacağınızı anlatıyorum. Teorik tavsiyeler değil, FUTIA'da doktorbul.com ve diolivo.com.tr gibi projelerde uyguladığım adımlar.

Core Web Vitals Nedir ve 2026'da Neden Daha Önemli?

Core Web Vitals, Google'ın 2020'de tanıttığı üç metrik: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) ve eskiden FID (First Input Delay). 2024'te FID'in yerine INP (Interaction to Next Paint) geldi. 2026'da bu metrikler sadece sıralama faktörü değil, aynı zamanda kullanıcı deneyiminin ana göstergesi olacak. Google'ın Mart 2024 güncellemesinde, mobil sıralamada Core Web Vitals'ın ağırlığı %15 artırıldı. Yani artık içerik kalitesi kadar sayfa performansı da önemli.

Ben FUTIA'da Hollanda'dan Türk markalarına hizmet verirken, özellikle e-ticaret sitelerinde Core Web Vitals'ın dönüşüm oranına doğrudan etkisini gördüm. diolivo.com.tr'de LCP'yi 4.8 saniyeden 2.1 saniyeye düşürdükten sonra, sepet terk oranı %22 azaldı. Bunun sebebi basit: kullanıcı ürün görseline 2 saniye yerine 5 saniye beklemek zorunda kalırsa, sayfayı kapatıyor.

2026'da Core Web Vitals'ın kritik olmasının iki sebebi var. Birincisi, Google'ın AI Overview sonuçlarında bile sayfa hızı öncelikli. İkincisi, mobil trafik %75'i geçti ve mobil kullanıcılar masaüstüne göre 3 kat daha sabırsız. Eğer siteniz mobilde LCP 3+ saniye, INP 300+ milisaniye ise, organik trafiğinizin %30'unu kaybediyorsunuz demektir.

LCP (Largest Contentful Paint) Optimizasyonu: 2.5 Saniye Altına İnmek

LCP, sayfanın görünen alanındaki en büyük içerik öğesinin (genellikle bir görsel veya metin bloğu) ne kadar sürede yüklendiğini ölçer. Google'ın hedefi 2.5 saniye altı. Ben FUTIA projelerinde genellikle 1.8-2.2 saniye arası hedefliyorum çünkü mobil bağlantılar her zaman ideal değil.

LCP'yi Bozan Ana Faktörler

1. Büyük görseller: doktorbul.com'da 79.000 doktor profili var. Her profilde fotoğraf. Başta PNG formatında, 800 KB ortalama. LCP 5.2 saniyeydi. WebP'ye geçip Cloudflare CDN kullanınca 1.9 saniyeye düştü.

2. Render-blocking kaynaklar: CSS ve JavaScript dosyaları sayfanın görünmesini engelliyor. Özellikle WordPress temalarında bu sorun yaygın. Ben critical CSS inline edip, geri kalanını defer ediyorum.

3. Sunucu yanıt süresi: TTFB (Time to First Byte) 600 milisaniye üzeriyse, LCP zaten kötü başlıyor. memuratamalari.com'da Hetzner'den Cloudflare Workers'a geçince TTFB 480 milisaniyeden 120 milisaniyeye düştü.

LCP Optimize Etme Adımları

1. Görselleri Optimize Et

• WebP veya AVIF formatı kullan (JPEG'e göre %30 daha küçük)
• Lazy loading uygula ama LCP görselini hariç tut (fetchpriority="high" ekle)
• Responsive görseller: srcset ile mobil için küçük versiyonlar sun
• CDN kullan (Cloudflare, BunnyCDN gibi)

Örnek kod:

<img src="hero.webp" alt="Açıklama" fetchpriority="high" width="1200" height="630" />

2. CSS ve JavaScript'i Optimize Et

• Critical CSS'i inline et (above-the-fold için)
• Kullanılmayan CSS'i temizle (PurgeCSS ile)
• JavaScript'i defer veya async yükle
• Font yüklemelerini optimize et (font-display: swap)

diolivo.com.tr'de tema CSS'i 240 KB'tı. Critical CSS ayırıp geri kalanını async yükledim, LCP 1.4 saniye düştü.

3. Sunucu ve Hosting

• TTFB'yi 200 milisaniye altına çek (Cloudflare Workers, Vercel Edge)
• HTTP/3 kullan
• Gzip veya Brotli sıkıştırma aktif et
• Redis gibi cache sistemleri kullan

4. Preload ve Preconnect

Kritik kaynakları önceden yükle:

<link rel="preload" as="image" href="hero.webp" />
<link rel="preconnect" href="https://fonts.googleapis.com" />

INP (Interaction to Next Paint): 200 Milisaniye Hedefi

INP, kullanıcının sayfayla etkileşime girdiği andan (tıklama, kaydırma) tarayıcının görsel güncellemeyi gösterdiği ana kadar geçen süreyi ölçer. Eski FID sadece ilk etkileşimi ölçüyordu, INP tüm etkileşimleri izliyor. Google'ın hedefi 200 milisaniye altı, 500 milisaniye üzeri kötü sayılıyor.

Ben INP'yi en zor metrik olarak görüyorum çünkü JavaScript ağır sitelerde (özellikle React, Vue kullanan SPA'larda) INP kolayca 400-600 milisaniyeye çıkabiliyor.

INP'yi Bozan Faktörler

1. Ağır JavaScript işlemleri: Ana thread'i bloke eden uzun görevler. Özellikle analytics, chatbot, A/B test scriptleri.

2. Third-party scriptler: Google Analytics, Facebook Pixel, Hotjar gibi araçlar. italyanmutfagi.com'da 8 farklı third-party script vardı, INP 420 milisaniyeydi. 3'e indirdim, INP 180 milisaniyeye düştü.

3. Event listener'lar: Özellikle scroll ve resize event'lerinde throttle/debounce kullanmamak.

INP Optimize Etme Adımları

1. JavaScript Görevlerini Böl

Uzun görevleri (50+ milisaniye) küçük parçalara ayır. Örneğin 300 milisaniyelik bir veri işleme fonksiyonunu 50 milisaniyelik 6 parçaya böl, araya setTimeout ekle.

2. Third-Party Scriptleri Kontrol Et

• Google Tag Manager'da sadece kritik tag'leri kullan
• Facebook Pixel'i defer yükle
• Chatbot'u sayfa yüklendikten 3 saniye sonra başlat

doktorbul.com'da Intercom chatbot'u hemen yükleniyordu, INP 340 milisaniyeydi. 5 saniye geciktirdim, INP 190 milisaniyeye düştü, dönüşüm oranı değişmedi.

3. Web Worker Kullan

Ağır hesaplamaları ana thread dışında yap. Özellikle veri filtreleme, arama gibi işlemler için.

4. Event Listener Optimizasyonu

let timeout;
window.addEventListener('scroll', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    // scroll işlemi
  }, 150);
});

5. React/Vue Optimizasyonu

• Gereksiz re-render'ları önle (React.memo, useMemo)
• Code splitting kullan (lazy load component'ler)
• Virtual scrolling (uzun listeler için)

CLS (Cumulative Layout Shift): 0.1 Altı Hedefi

CLS, sayfadaki beklenmedik layout kaymalarını ölçer. Örneğin bir butona tıklamak üzereyken, üstte bir reklam yükleniyor ve buton aşağı kayıyor. Google'ın hedefi 0.1 altı.

Ben CLS'yi en sinir bozucu metrik olarak görüyorum çünkü kullanıcı deneyimini doğrudan etkiliyor. kamupersonelhaber.com'da CLS 0.24'tü, kullanıcılar yanlış linklere tıklıyordu. 0.08'e düşürdükten sonra bounce rate %18 azaldı.

CLS'yi Bozan Faktörler

1. Boyutsuz görseller ve videolar: Width ve height belirtilmezse, tarayıcı alan ayıramıyor.

2. Dinamik içerik: Reklamlar, embed'ler, bildirimler sayfaya sonradan ekleniyor.

3. Web fontlar: Font yüklenene kadar metin görünmüyor veya farklı fontla görünüyor (FOIT/FOUT).

4. Animasyonlar: CSS transform ve opacity dışındaki animasyonlar layout shift yaratıyor.

CLS Optimize Etme Adımları

1. Görsellere Boyut Belirt

Her görselde width ve height ekle:

<img src="resim.jpg" width="800" height="600" alt="Açıklama" />

CSS'de aspect-ratio kullan:

img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

2. Dinamik İçerik İçin Alan Ayır

Reklamlar, embed'ler için min-height belirle:

.reklam-alani {
  min-height: 250px;
}

3. Font Yükleme Stratejisi

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* FOUT tercih et */
}

Google Fonts için:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

4. Animasyonları Doğru Kullan

Sadece transform ve opacity animasyonu yap:

.element {
  transition: transform 0.3s, opacity 0.3s;
}

Width, height, top, left gibi property'leri animate etme.

5. Sticky Element'lerde Dikkat

Sticky header varsa, yüksekliğini CSS'de sabitle:

.header {
  position: sticky;
  height: 80px;
}

Core Web Vitals Ölçüm Araçları ve İzleme

Optimizasyon yaptıktan sonra düzenli ölçüm şart. Ben FUTIA projelerinde üç araç kullanıyorum:

1. Google Search Console

Gerçek kullanıcı verisi (Field Data). 28 günlük ortalama gösteriyor. En güvenilir kaynak çünkü Google'ın sıralamada kullandığı veri bu.

2. PageSpeed Insights

Hem lab data (simüle test) hem field data gösteriyor. Mobil ve masaüstü ayrı test edebiliyorsun. Öneriler de veriyor ama bazen generic oluyor.

3. Chrome DevTools (Lighthouse)

Yerel test için ideal. Performance sekmesinde INP'yi detaylı izleyebiliyorsun. Ben her deploy öncesi Lighthouse testi yapıyorum.

4. WebPageTest

Farklı lokasyonlardan, farklı cihazlardan test edebiliyorsun. Filmstrip view ile LCP'nin tam olarak ne zaman gerçekleştiğini görebiliyorsun.

5. Real User Monitoring (RUM)

Cloudflare Web Analytics veya Google Analytics 4'te gerçek kullanıcı metriklerini izleyebiliyorsun. Ben doktorbul.com'da Cloudflare RUM kullanıyorum, günlük ortalama LCP, INP, CLS görüyorum.

İzleme Stratejisi

• Haftalık: Google Search Console kontrol et
• Her deploy sonrası: PageSpeed Insights ve Lighthouse test et
• Aylık: WebPageTest ile detaylı analiz yap
• Sürekli: RUM ile gerçek kullanıcı verisi izle

diolivo.com.tr'de Core Web Vitals iyileştirmesinden sonra, 6 ayda organik trafik %340 arttı. Bunun %60'ı içerik, %40'ı performans iyileştirmesinden geldi.

2026'ya Hazırlık: Gelecek Güncellemeler ve Stratejiler

Google, 2026 için iki büyük güncelleme planlıyor:

1. INP Eşik Değerleri Sıkılaşacak

Şu an 200 milisaniye iyi, 500 milisaniye kötü. 2026'da muhtemelen 150 milisaniye iyi, 300 milisaniye kötü olacak. Bunun sebebi, cihazların ve bağlantıların hızlanması.

2. Yeni Metrik: Time to Interactive (TTI) Geri Gelebilir

Google, sayfanın tam etkileşimli hale gelme süresini tekrar ölçmeyi planlıyor. Bu özellikle SPA'lar için kritik olacak.

3. AI-Generated Content ve Core Web Vitals

Google'ın AI Overview sonuçlarında, Core Web Vitals iyi olan sayfalar öncelikli gösteriliyor. 2026'da bu daha da artacak.

Şimdiden Yapılacaklar

1. JavaScript Framework Seçiminde Dikkatli Ol: Next.js, SvelteKit gibi SSR destekli framework'ler tercih et. React SPA yerine.

2. Edge Computing Kullan: Cloudflare Workers, Vercel Edge Functions ile TTFB'yi minimize et.

3. Progressive Enhancement: JavaScript olmadan da sayfa çalışmalı. Ben italyanmutfagi.com'da 618 tarif sayfasını statik HTML olarak ürettim, INP sorunu kalmadı.

4. Monitoring Altyapısı Kur: Performans regresyonlarını hemen fark etmek için sürekli izleme şart.

5. Mobile-First Düşün: Mobil performans artık birincil öncelik. Masaüstü iyi, mobil kötüyse, sıralama düşüyor.

Gerçek Vaka: diolivo.com.tr Core Web Vitals İyileştirmesi

Bu kısmı ekliyorum çünkü teorik bilgi yetersiz kalıyor. diolivo.com.tr, zeytinyağı e-ticaret sitesi. 2023 Ekim'de bize geldiklerinde:

• LCP: 4.8 saniye (kötü)
• INP: 380 milisaniye (orta)
• CLS: 0.16 (orta)
• Aylık organik trafik: 8.400
• Sepet terk oranı: %68

Yaptığım İyileştirmeler (6 hafta)

1. Görseller: Tüm ürün görselleri WebP'ye çevrildi, Cloudflare CDN eklendi. LCP 2.1 saniyeye düştü.

2. JavaScript: WooCommerce'in gereksiz scriptlerini kaldırdım (cart fragments, password strength meter). INP 180 milisaniyeye düştü.

3. CLS: Ürün listesinde lazy load görseller için aspect-ratio eklendi. CLS 0.05'e düştü.

4. Hosting: SiteGround'dan Cloudflare Workers'a geçiş. TTFB 480'den 140 milisaniyeye düştü.

5. CartBounty: Sepet terk otomasyonu ekledim (Core Web Vitals'la ilgili değil ama dönüşüm için kritikti).

Sonuçlar (6 ay sonra)

• LCP: 2.1 saniye
• INP: 180 milisaniye
• CLS: 0.05
• Aylık organik trafik: 36.960 (%340 artış)
• Sepet terk oranı: %46 (%22 azalma)
• Dönüşüm oranı: %1.8'den %2.9'a çıktı

Google Search Console'da "Core Web Vitals" raporunda, 240 sayfa "İyi" kategorisine geçti. Önceden 18 sayfaydı.

Sık Yapılan Hatalar ve Nasıl Kaçınılır

1. Sadece PageSpeed Insights Skoruna Odaklanmak

PageSpeed skoru 90+ olabilir ama gerçek kullanıcı verisi kötü olabilir. Ben her zaman Google Search Console'daki field data'ya bakıyorum.

2. Tüm Görsellere Lazy Loading Eklemek

LCP görseline lazy loading eklersen, LCP daha da kötüleşir. İlk ekranda görünen görseller hemen yüklenmeli.

3. Third-Party Script'leri Görmezden Gelmek

Google Analytics, Facebook Pixel, chatbot'lar INP'yi 200+ milisaniye artırabilir. Gerçekten gerekli olmayan her scripti kaldır.

4. Mobil Testi Unutmak

Masaüstünde Core Web Vitals mükemmel olabilir ama mobilde felaket olabilir. Ben her testi önce mobilde yapıyorum.

5. Tek Seferlik Optimizasyon

Core Web Vitals sürekli izlenmeli. Yeni özellik eklediğinde, performans regresyonu olabilir. Ben FUTIA projelerinde haftalık monitoring yapıyorum.

FUTIA'da Core Web Vitals Nasıl Yaklaşıyoruz

Ben FUTIA'da müşterilere sadece "hızlı site" değil, sürdürülebilir performans sunuyorum. Yaklaşımım üç aşamalı:

1. Teknik Audit (1 hafta)

• PageSpeed Insights, WebPageTest, Lighthouse testleri
• Gerçek kullanıcı verisi analizi (Google Search Console)
• Bottleneck tespiti (hangi kaynaklar LCP, INP, CLS'yi bozuyor)

2. Optimizasyon (2-4 hafta)

• Görsel optimizasyonu (WebP, CDN, lazy loading)
• JavaScript ve CSS temizliği
• Hosting/sunucu iyileştirmesi
• Third-party script yönetimi

3. Monitoring ve Bakım (sürekli)

• Haftalık Google Search Console kontrol
• Aylık detaylı performans raporu
• Yeni özellik eklendiğinde performans testi

Örneğin memuratamalari.com'da 40.400 aylık organik aramayı korumak için, her yeni ilan eklediğimizde (günlük 50+ ilan, ilan.gov.tr API'den çekiliyor) LCP'yi test ediyorum. Claude Haiku ile otomatik ilan üretimi yaparken, görsellerin boyutunu da otomatik optimize ediyorum.

Eğer sitenizin Core Web Vitals'ını iyileştirmek istiyorsanız, benimle WhatsApp'tan ulaşabilirsiniz: +90 532 491 17 05. Veya info@futia.net adresine sitenizin URL'sini gönderin, ücretsiz teknik audit yapayım. 2026'da rakiplerinizin gerisinde kalmayın.