Core Web Vitals Nedir ve Nasıl İyileştirilir?

2021 yılında Google, "Page Experience" güncellemesiyle Core Web Vitals'ı resmi bir sıralama faktörü olarak duyurdu. O günden bu yana birçok web sitesi sahibi bu kavramı duyuyor ama tam olarak ne anlama geldiğini, neden önemli olduğunu ve nasıl iyileştirilebileceğini bilmiyor.

Bu yazıda üç temel metriği sade bir dille açıklıyor, Türkiye'deki web sitelerinin neden çoğunlukla bu metriklerde düşük puan aldığını inceliyor ve pratik çözüm yollarını paylaşıyoruz.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın bir sayfanın gerçek kullanıcı deneyimini ölçmek için tanımladığı üç metrikten oluşur. Teknik performans puanları değil, ziyaretçinin sayfayı nasıl hissetttiğini sayısal olarak ifade eden göstergelerdir.

1. LCP — Largest Contentful Paint

Ne ölçer: Sayfanın en büyük görsel öğesinin (genellikle hero görseli veya en büyük metin bloğu) ekranda görünmesi için geçen süre.

İyi eşik: 2,5 saniye veya altı İyileştirme gerekiyor: 2,5–4 saniye arası Zayıf: 4 saniyenin üzeri

LCP, ziyaretçinin "sayfa yüklendi" hissini en doğrudan etkileyen metriktir. Ekrana ilk anlamlı içerik gelinceye kadar geçen süreyi ölçtüğü için, kullanıcı deneyimiyle doğrudan örtüşür.

Tipik sebepler:

• Sıkıştırılmamış ve yeniden boyutlandırılmamış görseller
• Render'ı engelleyen JavaScript ve CSS
• Yavaş sunucu yanıt süreleri (TTFB)
• Lazyload yanlış yapılandırılmış hero görselleri

2. INP — Interaction to Next Paint

Ne ölçer: Kullanıcının tıklama veya tuşa basma gibi bir etkileşimi başlatmasından, ekranda görsel değişikliğin gerçekleşmesine kadar geçen süre. (Mart 2024'ten itibaren FID'in yerini aldı.)

İyi eşik: 200 milisaniye veya altı İyileştirme gerekiyor: 200–500 ms arası Zayıf: 500 ms üzeri

INP, sayfanın ne kadar "canlı" hissettiğini ölçer. Butona tıkladığınızda sayfanın donuklaşması veya geç tepki vermesi, INP'nin yüksek olduğu anlamına gelir.

Tipik sebepler:

• Ana thread'i kilitleyen uzun JavaScript görevleri
• Üçüncü taraf scriptler (canlı destek, reklam ağları, analitik)
• Büyük component render süreleri

3. CLS — Cumulative Layout Shift

Ne ölçer: Sayfa yüklenirken öğelerin beklenmedik şekilde yer değiştirmesini. Bir butona tıklayacakken üstüne reklam yüklendi ve farklı bir yere bastınız — bu tam olarak CLS.

İyi eşik: 0,1 veya altı İyileştirme gerekiyor: 0,1–0,25 arası Zayıf: 0,25 üzeri

CLS, kullanıcı güvenini doğrudan etkiler. Sürekli kayan içerikler, formu yanlış doldurmaya veya yanlış butona tıklamaya neden olur.

Tipik sebepler:

• Boyutu belirtilmemiş görseller ve videolar
• Fontların geç yüklenmesi (FOUT — Flash of Unstyled Text)
• Sonradan eklenen reklam alanları
• Dinamik içerikler için yer tutucuların olmaması

---

Türkiye'deki Web Sitelerinin Durumu

PageSpeed Insights verilerine göre Türkiye'deki kurumsal ve KOBİ web sitelerinin büyük çoğunluğu Core Web Vitals'ı geçemiyor. Bunun birkaç temel nedeni var:

1. Hazır şablon bağımlılığı WordPress, Wix ve Squarespace tabanlı sitelerin çoğu, bu metrikler gözetilerek optimize edilmemiş. Eklentiler ve hazır temalar sayfa ağırlığını artırır, JavaScript yükünü şişirir.

2. Ucuz hosting Paylaşımlı hosting hizmetleri, sunucu yanıt sürelerini (TTFB) 800ms–2s aralığına çıkarıyor. Bu tek başına LCP'yi geçmez hale getiriyor.

3. Görsel optimizasyonu yokluğu JPEG veya PNG olarak yüklenen 3–5 MB görseller, mobil bağlantılarda sayfa ağırlığını artırıyor. WebP/AVIF formatına geçiş ve next-gen image servisi kullanmak büyük fark yaratıyor.

4. Üçüncü taraf script yükü Canlı destek widget'ları, Facebook Pixel, Google Ads remarketing, heatmap araçları — bunların her biri main thread'i meşgul eder ve INP'yi kötüleştirir.

---

Pratik İyileştirme Rehberi

LCP için

Görselleri optimize edin:

<!-- Yanlış -->
<img src="hero.jpg">

<!-- Doğru: boyut, format ve preload -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">
<img src="hero.webp" width="1200" height="600" alt="Hero">

Sunucu yanıt süresini düşürün: CDN kullanmak, statik asset'leri edge'den sunmak TTFB'yi 50-100ms'ye indirebilir. Türkiye için Cloudflare veya Vercel Edge Network iyi seçenekler.

Kritik kaynakları önceden yükleyin: <link rel="preconnect"> ile Google Fonts veya üçüncü taraf script'ler için bağlantıyı önceden kurun.

INP için

Uzun görevleri parçalayın: 50ms'den uzun süren JavaScript görevleri "Long Task" olarak kabul edilir ve INP'yi artırır. scheduler.yield() veya setTimeout(..., 0) kullanarak görevleri parçalara bölün.

Üçüncü taraf script'leri geciktirin:

<!-- Reklam ve analitik script'leri lazy load edin -->
<script async src="https://www.googletagmanager.com/gtag/js?id=..."></script>

CLS için

Görsellere her zaman boyut verin:

<img src="photo.webp" width="800" height="450" alt="...">

Font değişimi önleyin:

/* font-display: swap yerine optional veya block kullanın kritik fontlar için */
@font-face {
  font-display: optional;
}

Reklam alanlarını önceden rezerve edin: Dinamik içerik gelecek alanlara minimum yükseklik verin:

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

---

Sitenizi Test Etme

Birden fazla araç kullanmanızı öneririz:

1. PageSpeed Insights — Google'ın resmi aracı, hem lab hem sahadan veri
2. Chrome DevTools → Lighthouse — geliştirme ortamında anlık test
3. web.dev/measure — zaman içindeki değişimi takip etmek için
4. Google Search Console → Core Web Vitals raporu — gerçek kullanıcı verisi (28 günlük alan)

Search Console raporu özellikle önemli: lab ortamında iyi çıkan siteler, gerçek cihaz ve bağlantı verisiyle farklı sonuçlar verebilir.

---

Sonuç

Core Web Vitals, hem kullanıcı deneyimini hem SEO sıralamalarını doğrudan etkileyen metrikler. Türkiye'deki ortalama KOBİ sitesinin bu metriklerde düşük puan almasının temel sebebi teknik bilgi eksikliği değil, doğru mimari kararların baştan verilmemiş olması.

Eğer sitenizin Core Web Vitals durumunu merak ediyorsanız, ücretsiz analiz için bizimle iletişime geçebilirsiniz. Sitenizi test edip hangi metriklerde sorun olduğunu ve nasıl iyileştirilebileceğini detaylı raporla paylaşıyoruz.