Core Web Vitals Optimizasyonu: 2026 Kapsamlı Rehberi

Hızlı Cevap Core Web Vitals, Google'ın sayfa deneyimini ölçtüğü üç metrikten oluşur: LCP (en büyük içerik yüklenme süresi, hedef < 2,5s), INP (etkileşime hazır olma süresi, hedef < 200ms) ve CLS (görsel kararlılık, hedef < 0,1). Bu üç metrik hem sıralama hem dönüşüm oranını doğrudan etkiler. Ücretsiz Hız Denetimi Alın →

750'den fazla web projesi yönettiğimizde şunu öğrendik: çoğu site, içerik kalitesinden değil yavaş yükleme süresinden trafik kaybeder. Bir e-ticaret sitesinin LCP süresini 4,8 saniyeden 1,9 saniyeye indirdiğimizde organik trafik 6 haftada yüzde 34 arttı. Sayfa hızı artık "iyi olsa güzel" kategorisinde değil — Google için zorunlu sıralama sinyali, kullanıcı için ise ayrılma kararının tetikleyicisi.

Bu rehber, hız optimizasyonu hizmetimizde uyguladığımız yöntemi açık kaynaklı paylaşıyor. Teori değil, pratikte işe yarayan adımlar.

Core Web Vitals Nedir? {#cwv-nedir}

Google, Core Web Vitals'ı 2021'de resmi sıralama sinyali olarak tanıttı. 2024'te FID'i kaldırıp INP'yi getirerek metrikleri güncelledi. 2026 itibarıyla üç temel metrik şunlardır:

LCP — Largest Contentful Paint (En Büyük İçerik Boyama)

Sayfadaki en büyük görsel veya metin bloğunun yüklenme süresidir. Kullanıcı "sayfa yüklendi" hissini buradan alır.

Skor	Değer	Kullanıcı Deneyimi
İyi	< 2,5 saniye	Hızlı, tatmin edici
İyileştirme Gerekli	2,5s – 4,0s	Fark edilir gecikme
Kötü	> 4,0 saniye	Terk oranı yükseliyor

INP — Interaction to Next Paint (Etkileşime Yanıt Süresi)

2024'te FID'in yerini aldı. Kullanıcı bir butona tıkladığında ya da form doldurmaya başladığında sayfanın tepki verme hızını ölçer. Mobil cihazlarda kritik önem taşır.

Skor	Değer
İyi	< 200ms
İyileştirme Gerekli	200ms – 500ms
Kötü	> 500ms

CLS — Cumulative Layout Shift (Birikimli Düzen Kayması)

Sayfa yüklenirken öğelerin yerinden oynamasını ölçer. Okurken metin kayması, tıklamak isterken başka butona basma — hepsinin sebebi yüksek CLS skoru.

Skor	Değer
İyi	< 0,1
İyileştirme Gerekli	0,1 – 0,25
Kötü	> 0,25

Google Sıralamaya Etkisi {#siralama-etkisi}

Google, Core Web Vitals'ı Page Experience sinyalinin bir parçası olarak sıralamada kullanıyor. Rakibinizle içerik kalitesi eşit olduğunda, hızlı olan kazanır.

Daha somut etki ise dönüşüm oranında görünüyor:

LCP 1 saniye gecikince dönüşüm oranı ortalama yüzde 7 düşüyor (Google/Deloitte araştırması)
Mobil LCP 2,5s altında olan siteler, 4s üstündekilere kıyasla yüzde 15 daha fazla organik tıklama alıyor
CLS skoru 0,1'in altına inen bir perakende sitesinde form tamamlama oranı yüzde 23 arttı

SEO dostu web tasarım rehberimizde de vurguladığımız gibi: teknik performans ve SEO birbirinden ayrılamaz.

LCP Optimizasyonu {#lcp-optimizasyonu}

En Yaygın LCP Sorunları

Projelerimizin büyük çoğunluğunda LCP sorununu yaratan dört neden var:

1. Hero görseli optimize edilmemiş — 2MB'lık JPEG, WebP/AVIF'e dönüştürülmemiş 2. Render-blocking kaynaklar — <head> içindeki CSS veya JS dosyaları sayfayı bloke ediyor 3. Yavaş sunucu yanıt süresi (TTFB) — Hosting kalitesi veya CDN eksikliği 4. Lazy-load yanlış uygulanmış — Hero görseline loading="lazy" eklenmesi LCP'yi direkt kötüleştirir

LCP'yi İyileştirme Adımları

Adım 1: Hero görselini preload edin

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

Adım 2: Görselleri WebP/AVIF formatına dönüştürün

Ortalama yüzde 30–50 boyut tasarrufu sağlar. Next.js projelerinde Image component bunu otomatik yapar.

Adım 3: TTFB'yi 200ms altına indirin

Türkiye'deki kullanıcılar için Türkiye veya Almanya datacenter'ı seçin
Cloudflare veya Fastly CDN ekleyin
Statik sayfalar için SSG/ISR kullanın (Next.js'de varsayılan)

Adım 4: Critical CSS'i inline yapın

İlk ekranda görünen stilleri <head> içine inline ekleyerek render-blocking CSS'i ortadan kaldırın.

INP Optimizasyonu {#inp-optimizasyonu}

FID'den INP'ye Geçiş

Mart 2024'te Google, First Input Delay'i (FID) kaldırıp Interaction to Next Paint'i (INP) getirdi. Fark büyük: FID yalnızca ilk tıklamayı ölçerken INP, kullanıcının oturum boyunca yaptığı tüm etkileşimlerin en yavaşını alır.

Pratik sonucu şu: iyi bir FID skoruna sahip birçok site, INP'ye geçişle birlikte "İyileştirme Gerekli" kategorisine düştü.

JavaScript Darboğazlarını Tespit Etme

Chrome DevTools → Performance sekmesinde "Long Tasks" (50ms üzeri görevler) kırmızıyla işaretlenir. Bunları tespit etmenin en hızlı yolu:

1. Chrome DevTools → Performance → Record 2. Sayfada birkaç tıklama yapın 3. Kırmızı uzun görevleri bulun 4. Call stack'te hangi JS kodunun sorumlu olduğunu görün

Yaygın INP sorunları:

Büyük event listener'lar (scroll, resize, input olaylarında ağır hesaplama)
Senkron localStorage veya sessionStorage okuma/yazma
Render-blocking third-party scriptler (chat widget'ları, analytics)
React/Vue'da aşırı re-render

Çözüm: Ağır işlemleri requestIdleCallback veya Web Worker'a taşıyın. Third-party script'leri defer veya async ile yükleyin.

CLS Optimizasyonu {#cls-optimizasyonu}

Layout Shift Neden Olur?

CLS sorunlarının yüzde 80'i üç kaynaktan geliyor:

1. Boyutsuz görseller — width ve height attribute'u olmayan <img> etiketleri 2. Geç yüklenen reklamlar ve iframeler — İçerik yüklendikten sonra yer açan bloklar 3. Web fontları — Sistem fontu görüntülenirken web fontu yüklenince metin kayıyor (FOIT/FOUT)

Pratik CLS Çözümleri

Görseller için aspect-ratio rezervasyonu:

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

Font için font-display: optional kullanımı:

``css @font-face { font-family: 'Inter'; font-display: optional; src: url('/fonts/inter.woff2') format('woff2'); } ``

Dinamik içerik için alan rezervasyonu:

Reklam veya geç yüklenen widget'lar için min-height tanımlayın; içerik gelmeden önce alan tutun.

Ölçüm Araçları {#olcum-araclari}

Google Search Console — Alan Veri Raporu

GSC → Core Web Vitals raporu, gerçek kullanıcı verisi (CrUX) gösterir. Google Search Console'u doğru kurmak için rehberimize bakabilirsiniz.

Lab verisi ile alan verisi arasındaki fark kritik: PageSpeed Insights'ta 95 alan bile GSC'de "İyileştirme Gerekli" görünebilir. Sebebi CrUX'un gerçek cihaz ve bağlantı çeşitliliğini yansıtmasıdır.

PageSpeed Insights

Google'ın ücretsiz aracı. URL girip hem lab hem alan verisi alıyorsunuz. Mobil ve masaüstü skorlarını ayrı ayrı kontrol edin — çoğu site masaüstünde iyi, mobildes kötüdür.

Lighthouse CI

Geliştirme sürecine entegre edilebilen komut satırı aracı. Her deploy öncesi skorları otomatik kontrol eder ve belirli eşiğin altına düşünce build'i durdurur.

``bash npx lhci autorun --collect.url=https://siteniz.com ``

Web Vitals JavaScript Kütüphanesi

Google'ın resmi kütüphanesiyle gerçek kullanıcı verisi toplayabilirsiniz:

``javascript import { onLCP, onINP, onCLS } from 'web-vitals'; onLCP(console.log); onINP(console.log); onCLS(console.log); ``

97 Lighthouse Skoru: Vaka Çalışması {#97-skor}

Bir hukuk bürosunun web sitesini sıfırdan geliştirdiğimizde başlangıç skorları şöyleydi:

Metrik	Öncesi	Sonrası
Lighthouse (Mobil)	43	97
LCP	5,8s	1,6s
INP	480ms	85ms
CLS	0,38	0,02
Organik trafik (3 ay)	—	+41%

Ne yaptık:

1. Görsellerin tamamını WebP'ye çevirdik, hero görselini preload ettik 2. Next.js App Router + SSG ile sunucu tarafı rendering geçiş yaptık 3. Third-party scriptleri (chat, analytics) defer ile geciktirdik 4. Google Fonts yerine self-hosted font + font-display: swap uyguladık 5. Cloudflare ile CDN katmanı ekledik

Bu optimizasyonların tamamı hız optimizasyonu paketimizin standart kapsamında yer alıyor.

Sık Yapılan Hatalar {#hatalar}

Hata 1: Yalnızca masaüstü skoruna bakmak

Google, Page Experience sinyalini mobil üzerinden değerlendiriyor. Masaüstünde 98 alan ama mobilded 52 olan bir site sıralamada mobilden ceza yiyor.

Hata 2: Hero görselini lazy-load yapmak

loading="lazy" hero görseline eklenmemeli. Bu attribute görünüm alanı dışındaki görseller içindir.

Hata 3: "Bir kere optimize ettik, tamam" düşüncesi

Her yeni eklenen script, font veya görsel skoru etkileyebilir. Aylık Lighthouse CI kontrolü şart.

Hata 4: Sadece lab verisi takip etmek

PageSpeed Insights lab skoru yüksek olsa bile GSC alan verisi kötü olabilir. Alan verisi gerçek kullanıcı deneyimini gösterir, lab verisi yapay koşullardaki sonucu.

Hata 5: CLS'i görmezden gelmek

LCP ve INP'e odaklanırken CLS'i unutmak yaygın. Özellikle reklam veya pop-up içeren sitelerde CLS hızla 0,25'in üzerine çıkabiliyor.

20 Maddelik Hız Denetim Listesi {#denetim-listesi}

Görseller

[ ] Hero görseli WebP veya AVIF formatında
[ ] Hero görseli preload edilmiş, fetchpriority="high" eklenmiş
[ ] Görünüm dışı görsellere loading="lazy" uygulanmış
[ ] Tüm <img> etiketlerinde width ve height attribute'u var
[ ] Görsel boyutları 100KB altında (hero hariç 200KB altında)

Fontlar

[ ] Web fontları self-hosted veya font-display: swap/optional ile yükleniyor
[ ] Kullanılan font varyantları minimumda tutulmuş (italic, bold vb.)
[ ] Kritik font preload edilmiş

JavaScript

[ ] Third-party scriptler defer veya async ile yükleniyor
[ ] Long Tasks (50ms+) Chrome DevTools ile tespit edilmiş ve giderilmiş
[ ] Kullanılmayan JavaScript bundle'dan kaldırılmış (Tree shaking)
[ ] INP < 200ms (mobil cihazda test edilmiş)

CSS & Render

[ ] Critical CSS inline edilmiş
[ ] Render-blocking CSS kaldırılmış
[ ] CLS < 0,1 (tüm sayfalarda)
[ ] Dinamik içerik için alan rezervasyonu yapılmış

Sunucu & CDN

[ ] TTFB < 200ms
[ ] CDN kullanılıyor (Cloudflare veya benzeri)
[ ] HTTP/2 veya HTTP/3 aktif
[ ] Gzip veya Brotli sıkıştırma etkin

Sıkça Sorulan Sorular {#sss}

Core Web Vitals skorları sıralamayı ne kadar etkiler?

Google, CWV'yi "Page Experience" sinyalinin bir parçası olarak kullanıyor. Özellikle içerik kalitesi benzer iki site arasındaki farkı belirlemede etkili. Google'ın kendi açıklamalarına göre içerik kalitesi her zaman önce geliyor; CWV bağ durumlarında belirleyici oluyor.

PageSpeed Insights ile GSC raporu neden farklı gösteriyor?

PageSpeed Insights, belirli bir anda yapılan lab testi sonucunu gösterir. GSC Core Web Vitals raporu ise son 28 günün gerçek kullanıcı verilerini (Chrome User Experience Report — CrUX) yansıtır. Gerçek ağ koşulları ve cihaz çeşitliliği nedeniyle GSC genellikle daha düşük çıkar.

LCP'yi en hızlı nasıl iyileştirebilirim?

İlk yapılacak şey hero görselini optimize etmek: WebP formatına çevirin, boyutunu 100–150KB altına indirin ve <link rel="preload"> ile önceden yükleyin. Bu tek adım çoğu sitede LCP'yi 1–2 saniye iyileştirir.

INP neden FID'den daha sıkı bir metrik?

FID sadece ilk tıklamanın tepki süresini ölçüyordu. INP, kullanıcının sayfada yaptığı tüm etkileşimlerin en yavaşını alır. Bu nedenle INP, sayfanın genel etkileşim kalitesini çok daha iyi yansıtıyor.

CLS skorum GSC'de neden dalgalanıyor?

CLS skoru, sayfaya sonradan eklenen reklamlar, A/B test araçları veya chat widget'ları nedeniyle dalgalanabilir. Bu araçların yüklenmesi layout shift yaratıyor olabilir. Aylık GSC takibi yapılmasının sebebi de bu.

Shared hosting'de iyi CWV skoru mümkün mü?

TTFB konusunda ciddi sınırlamalarla karşılaşırsınız. Ortak barındırma genellikle yüksek TTFB'ye yol açar ve LCP'yi direkt etkiler. Mümkünse VPS veya CDN destekli cloud hosting'e geçin.

WordPress sitesinde CWV nasıl iyileştirilir?

WP Rocket veya LiteSpeed Cache gibi önbellek eklentisi, WebP dönüşümü için Imagify veya ShortPixel, ve Cloudflare CDN kombinasyonu çoğu WordPress sitesini "İyi" aralığına taşır. Ayrıca kullanılmayan eklentileri kaldırın — her eklenti ek JS/CSS yükü getirir.

Core Web Vitals ile e-ticaret dönüşüm oranı arasındaki ilişki nedir?

Google ve Deloitte'un araştırması, mobil yükleme süresinin 0,1 saniye azalmasının perakende dönüşüm oranını yüzde 8, seyahat sitelerinde yüzde 10 artırdığını gösteriyor. E-ticaret paketimizde bu optimizasyonlar standart olarak yer alıyor.

Sonuç {#sonuc}

Core Web Vitals optimizasyonu bir kere yapıp unutulan bir iş değil. Her güncelleme, yeni eklenti veya üçüncü taraf script skoru etkileyebilir. 750'den fazla projedeki deneyimimizden çıkan sonuç şu: aylık takip olmadan 6 ay içinde kazanımların büyük bölümü geri gidiyor.

Başlangıç noktanız: 1. PageSpeed Insights'ta mobil skorunuzu ölçün 2. GSC Core Web Vitals raporunu açın, "İyileştirme Gerekli" sayfalarını listeleyin 3. Yukarıdaki 20 maddelik listeyi sırayla uygulayın

Zaman ayıramazsanız veya teknik uygulama konusunda destek istiyorsanız ücretsiz hız denetimi için iletişime geçin. Sitenizi inceleyip nereden başlamanız gerektiğini somut olarak gösterelim.

--- Yazar: İsmail Günaydın

Core Web Vitals Optimizasyonu: 2026 Kapsamlı Rehberi