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

Bir web sitesine girmek istiyorsunuz ama sayfa bir türlü yüklenmiyor, okumak istediğiniz metin aniden aşağı kayıyor veya bir butona tıkladığınızda işlem gerçekleşmiyor. Sinir bozucu, değil mi? İşte Google da tam olarak böyle düşünüyor. Kullanıcılara kusursuz bir deneyim sunmak asla bir “ekstra” değil, Google’da üst sıralara çıkmanın en temel kurallarından biri. İşte tam bu noktada karşımıza Core Web Vitals (Önemli Web Verileri) çıkıyor. Peki Core Web Vitals nedir, sitenizin sıralamasını nasıl etkiler ve en önemlisi bu metrikler nasıl iyileştirilir?

Core Web Vitals (Önemli Web Verileri) Nedir?

Core Web Vitals, en basit tabiriyle Google’ın bir web sayfasındaki kullanıcı deneyimini (UX) ölçmek için kullandığı bir dizi spesifik performans metriğidir. Türkçede genellikle “Temel Web Metrikleri” ya da “Önemli Web Verileri” olarak kullanılır.

Peki neden bu kadar önemli? Çünkü Google artık sadece içeriğin kalitesine bakmıyor; sayfanızın gerçek kullanıcılar tarafından nasıl deneyimlendiğini de ölçüyor. Bir sayfanın 3 saniyede yüklenmesi ile 0,8 saniyede yüklenmesi arasındaki fark, hem kullanıcı davranışını hem de Google sıralamasını doğrudan etkiliyor.

Core Web Vitals, daha geniş “Page Experience” (Sayfa Deneyimi) sinyal grubunun bir parçasıdır. Bu sinyal grubuna aynı zamanda HTTPS kullanımı, mobil uyumluluk ve müdahaleci reklamlar gibi faktörler de dahildir. Ancak Core Web Vitals, bu grup içindeki en teknik ve en ölçülebilir bileşendir.

Üç Temel Metrik: LCP, INP ve CLS

Google, yüzlerce farklı veriyi analiz etse de, Core Web Vitals kapsamında odaklanmanız gereken üç temel metrik vardır. Her biri sayfanızın farklı bir yönünü değerlendirir:

1. LCP (Largest Contentful Paint) – Sayfa Yükleme Hızı

LCP, ekranınızdaki en büyük içerik öğesinin (bu bir hero görseli, büyük bir başlık veya bir video olabilir) ekranda tam olarak görünür hale gelme süresini ölçer. Yani ziyaretçiniz sayfanıza girdiğinde, “Tamam, bu sayfa yüklendi ve buradayım” hissini ne kadar sürede yaşıyor?

Bir e-ticaret sitesi düşünün. Kullanıcı ürün sayfasını açıyor. Üst kısımdaki ürün fotoğrafı (500×500 px) sayfanın en büyük görünür öğesi. Bu fotoğraf ekranda göründüğünde LCP ölçümü tamamlanmış olur. Eğer bu 3,8 saniye sürüyorsa, kullanıcı boş bir ekranı neredeyse 4 saniye boyunca seyrediyor demektir.

• 🟢 İyi: 2.5 saniye veya daha kısa
• 🟡 Geliştirilmeli: 2.5 – 4.0 saniye arası
• 🔴 Kötü: 4.0 saniyeden uzun

💡 İpucu: Eğer WordPress kullanıyorsanız ve en üstteki öne çıkan görseliniz çok büyük boyutluysa, LCP skorunuz anında kırmızıya döner. Bu görselleri WebP formatına çevirerek harika sonuçlar elde edebilirsiniz.

# LCP’yi Kötüleştiren Başlıca Nedenler:

Sorun	Etki	Çözüm Yönü
Optimize edilmemiş görseller	Büyük dosya boyutu → yavaş indirme	WebP/AVIF formatı, sıkıştırma
Yavaş sunucu yanıt süresi (TTFB)	Tüm yükleme süreci gecikmeli başlar	CDN, sunucu optimizasyonu, önbellekleme
Render-blocking kaynaklar	CSS/JS dosyaları sayfa göstermeden önce indirilir	Kritik CSS inline, JS defer/async
LCP görselinin geç keşfedilmesi	Tarayıcı görseli geç fark eder	Preload ipuçları, fetchpriority özelliği
İstemci tarafı render (CSR)	İçerik JS yüklendikten sonra görünür	SSR veya SSG’ye geçiş

2. INP (Interaction to Next Paint) – Etkileşim Hızı

INP, ziyaretçinin sayfanızla yaptığı (tıklama, dokunma veya klavye tuşuna basma gibi) tüm etkileşimlere sitenizin ne kadar hızlı tepki verdiğini ölçer. INP kullanıcının tüm oturum boyunca gerçekleştirdiği etkileşimleri takip eder ve en kötü 75. yüzdeliği (p75) raporlar. Basitçe söylemek gerekirse: bir butona tıkladığınızda sayfa bu tıklamaya görsel olarak ne kadar hızlı tepki veriyor? INP bunu ölçüyor.

💡 Somutlaştıralım: Bir kullanıcı sitenizde birden fazla etkileşim gerçekleştiriyor: bir butona tıklıyor (120 ms), bir form alanına yazıyor (90 ms), bir sekme açıyor (550 ms). INP bu etkileşimlerin 75. yüzdeliğini baz alır. Bu örnekte en kötü etkileşim 550 ms olduğu için INP puanınız büyük olasılıkla “Kötü” kategorisine girer.

• 🟢 İyi: 200 milisaniye veya daha kısa
• 🟡 Geliştirilmeli: 200 – 500 milisaniye arası
• 🔴 Kötü: 500 milisaniyeden uzun

# INP’yi Artıran Başlıca Sebepler:

• Uzun JavaScript görevleri: 50 ms’yi aşan JS görevleri, tarayıcının kullanıcı etkileşimlerine yanıt vermesini geciktirir (long tasks).
• Ana iş parçacığı (main thread) tıkanıklığı: JS, CSS animasyonları ve diğer işlemler aynı thread üzerinde çalışır; birbirleriyle yarışırlar.
• Şişirilmiş JavaScript bundle’ları: Büyük ve gereksiz JS dosyaları hem indirme hem de parse/execute aşamalarında gecikmeye yol açar.
• Üçüncü taraf scriptler: Reklam, analitik ve chat widget’ları gibi dışarıdan yüklenen scriptler sıklıkla INP sorunlarına neden olur.

3. CLS (Cumulative Layout Shift) – Görsel Kararlılık

Bir yazıyı okurken aniden üstte bir reklamın yüklenmesiyle tüm metnin aşağı kaydığı ana hiç tanık oldunuz mu? Ya da “İptal” butonuna basacakken sayfa kaydığı için yanlışlıkla “Satın Al” butonuna tıkladığınızı? CLS, bu sinir bozucu beklenmedik sayfa kaymalarını ölçer. Puanınız ne kadar sıfıra yakınsa o kadar iyidir.

• 🟢 İyi: 0.1 veya daha düşük
• 🟡 Geliştirilmeli: 0.1 – 0.25 arası
• 🔴 Kötü: 0.25’ten yüksek

Core Web Vitals Skorları Nasıl İyileştirilir?

Skorlarınızı ölçtünüz (bunun için Google PageSpeed Insights veya Search Console kullanabilirsiniz) ve bazı metrikler kırmızı görünüyor. Peki şimdi ne yapmalısınız? İşte her bir metrik için adım adım iyileştirme yolları:

# LCP İçin En Etkili İyileştirme Taktikleri

1. Görselleri Optimize Edin:
   • LCP görselinizi preload edin. HTML <head> bölümüne <link rel="preload" as="image" href="hero.webp"> ekleyin. Tarayıcı bu görseli diğer kaynakları beklemeden indirir.
   • fetchpriority=”high” kullanın. LCP görselinizdeki <img> etiketine bu özelliği ekleyin. Tarayıcıya “bu görsele öncelik ver” mesajı verir.
   • Görselleri WebP veya AVIF formatına dönüştürün. JPEG’e kıyasla AVIF formatı aynı kalitede yüzde 50’ye kadar daha küçük dosya boyutu sunabilir.
2. Hızlı Bir Hosting Kullanın (TTFB’yi düşürün): Sunucunuzun yanıt süresi yavaşsa, sitenizin hızlı yüklenmesi imkansızdır. Kaliteli bir sunucu altyapısı ve CDN (İçerik Dağıtım Ağı) şu durumda son derece önemli.
3. Önbellekleme (Caching) Kurun: Dinamik sayfaları her seferinde yeniden oluşturmak yerine önbelleğe alarak ziyaretçilere çok daha hızlı sunun.

# INP İyileştirme Stratejileri

1. JavaScript’i Hafifletin: INP’nin en büyük düşmanı, arka planda sürekli çalışan ve tarayıcıyı meşgul eden ağır JavaScript kodlarıdır. Kullanmadığınız eklentileri kaldırın.
2. Kritik Olmayan Scriptleri Erteleyin (Defer/Async): Analiz veya reklam kodları gibi sitenin çalışması için hayati olmayan scriptlerin yüklenmesini erteleyin.
3. Gutenberg Gibi Hafif Düzenleyiciler Tercih Edin: Eğer WordPress altyapısındaysanız, aşırı kod yükü bindiren sayfa oluşturucular yerine çekirdek düzenleyicileri ve hafif kod parçacıklarını (Code Snippets) kullanmak sitenizi çok daha tepkisel hale getirir.

Strateji	Açıklama	Etki Seviyesi
Uzun görevleri böl	setTimeout veya scheduler.yield() ile uzun JS görevlerini parçalara bölerek tarayıcıya nefes aldırın	Yüksek
Gereksiz JS kaldır	Code splitting ve tree-shaking ile yalnızca ihtiyaç duyulan kodu yükleyin	Yüksek
3. taraf scriptleri geciktir	Kritik olmayan scriptleri defer veya async ile yükleyin	Orta
Web Worker kullanın	Yoğun hesaplamayı arka plan thread’ine taşıyın	Orta
Gereksiz DOM güncellemelerini azalt	Her event handler çalıştığında layout hesaplaması tetiklememesine dikkat edin	Orta

⚠️ INP, çoğu sitenin FID’e kıyasla daha düşük performans gösterdiği bir metrik. Web.dev verilerine göre sitelerin önemli bir kısmı INP geçişiyle birlikte puanlarında gerileme yaşadı. Özellikle ağır JavaScript kullanan SPA (Single Page Application) siteleri bu konuda dikkatli olmalı.

# CLS’i Düşürmek İçin Pratik Adımlar

1. Görsellere Genişlik ve Yükseklik Verin: Sitenize eklediğiniz her görsele HTML veya CSS içinde mutlaka width ve height (genişlik ve yükseklik) değerleri tanımlayın. Böylece tarayıcı, görsel henüz yüklenmeden önce onun yerini ayırır ve sayfa kaymaz.
2. Reklam ve Yerleştirilen İçeriklere (Embeds) Alan Ayırın: Google AdSense veya benzeri reklam alanları için sabit boyutlu kutular (div) oluşturun.
3. Özel Fontlara Dikkat Edin: Web fontları yüklenene kadar sistem fontlarının görünmesi (FOUT), metin boyutlarında fark yaratarak kaymalara neden olabilir. Font yükleme stratejinizi gözden geçirin.
4. CSS animasyonlarında transform kullanın. top, left veya margin yerine transform: translateY() kullanarak layout tetiklemeyin.
5. Font yükleme stratejinizi optimize edin. font-display: swap yerine font-display: optional veya font-display: block kullanarak metin patlamasını kontrol altına alın.
6. Dinamik içeriği sayfanın üstüne eklemeyin. Yeni yüklenen içeriği her zaman mevcut içeriğin altına ekleyin.

Core Web Vitals Nasıl Ölçülür?

Core Web Vitals’ı ölçmek için iki farklı veri türü kullanılır: Lab verisi (simüle edilmiş test ortamı) ve Field verisi (gerçek kullanıcı deneyimleri). Google, sıralama kararlarında ağırlıklı olarak field verisine yani CrUX (Chrome User Experience Report) verilerine güvenir.

Hangi Araçla Ne Ölçülür?

• PageSpeed Insights: Google’ın resmi aracı. Hem Lighthouse lab skorunu hem de gerçek kullanıcı verilerini (CrUX) gösterir. Başlangıç noktanız bu olmalı.
• Chrome DevTools: Performance sekmesiyle her metriği tarayıcı üzerinde doğrudan test edin. INP sorunlarını bulmak için vazgeçilmez.
• Lighthouse (CLI/CI): CI/CD pipeline’ınıza entegre ederek her deploy’da performans regresyonlarını otomatik olarak yakalayın.
• web-vitals.js: Google’ın açık kaynak kütüphanesi. Gerçek kullanıcı verilerini kendi analitik sisteminize gönderin.
• WebPageTest: Farklı coğrafyalardan ve cihazlardan test imkânı. Waterfall şelalesi ve filmstrip görünümüyle derinlemesine analiz.
• Google Search Console: “Core Web Vitals” raporu ile sitenizin hangi URL’lerinin sorunlu olduğunu toplu olarak görün. Önceliklendirme için ideal. Search Console’da “Deneyim” başlığı altında “Temel Web Metrikleri” raporunu bulacaksınız. Bu rapor size şunları gösterir:
  • Mobil ve masaüstü ayrımında “İyi”, “İyileştirme Gerekiyor” ve “Kötü” URL grupları
  • Hangi metriğin sorun yarattığı (LCP, INP veya CLS)
  • Etkilenen URL sayısı ve bu sorunun zaman içinde nasıl değiştiği.

Pratik İyileştirme Stratejileri

Üç metriği ayrı ayrı ele aldık. Şimdi genel performans stratejisine bakalım, çünkü bazı iyileştirmeler birden fazla metriği aynı anda etkiler.

# Görsel Optimizasyonu (LCP + CLS)

Görseller, Core Web Vitals sorunlarının büyük çoğunluğunun kaynağıdır. Hem LCP’yi hem de CLS’i iyileştirmek için şu adımları izleyin:

• Tüm görselleri WebP veya AVIF formatına dönüştürün.
• Her <img> etiketine width ve height ekleyin.
• Görünür alandaki (above-the-fold) görselleri fetchpriority="high" ile işaretleyin.
• Görünür alan dışındaki görsellere loading="lazy" ekleyin.
• Duyarlı görseller için srcset ve sizes kullanın.

# Sunucu Tarafı Optimizasyon (LCP)

TTFB (Time to First Byte) yüksekse, LCP’yi iyileştirmek zorlaşır. Sunucu yanıt süresini kısaltmak için:

• Statik varlıklar için CDN kullanın (Cloudflare, Fastly, AWS CloudFront)
• HTTP/2 veya HTTP/3 protokollerine geçin
• Sunucu tarafında önbellekleme (caching) uygulayın
• Veritabanı sorgu sürelerini optimize edin
• Uygun durumlarda SSG (Static Site Generation)‘ye geçin

# JavaScript Optimizasyonu (INP + LCP)

JavaScript, modern web performansının en büyük düşmanı olmaya devam ediyor. Özellikle INP açısından kritik birkaç pratik:

// Kötü: Uzun süren işlem main thread'i bloklar
function processLargeArray(arr) {
  arr.forEach(item => heavyWork(item)); // 500ms+ sürebilir
}

// İyi: scheduler.yield() ile main thread'e nefes aldır
async function processLargeArray(arr) {
  for (const item of arr) {
    heavyWork(item);
    await scheduler.yield(); // tarayıcıya ara ver
  }
}

📌 Üçüncü Taraf Script UyarısıGoogle Analytics, Facebook Pixel, canlı destek widget’ları ve reklam scriptleri sıklıkla INP değerini yüzlerce milisaniye artırır. Bu scriptleri auditleyin; kullanmadığınız hizmetlerin scriptlerini kaldırın, kullandıklarınızı ise mümkün olduğunca geç yükleyin.

# Özel CMS Kullanıcıları İçin Notlar

Platform	En Sık Sorun	Önerilen Çözüm
WordPress	Şişirilmiş tema JS/CSS, yavaş hosting	WP Rocket / LiteSpeed Cache, kaliteli hosting, minimum tema ve genel hız optimizasyonu.
Shopify	Çok fazla app scripti, büyük görseller	App sayısını azalt, görsel CDN kullan (Imgix), Liquid lazy-load
Next.js	Büyük JS bundle’ları, CSR sayfalar	next/image, dynamic import, ISR/SSG kullanımı
Wix / Squarespace	Platform sınırlamaları, ağır script	Sınırlı kontrol; mümkünse daha esnek platforma geçiş

Core Web Vitals’ın SEO’ya Etkisi

Doğrudan soralım: Core Web Vitals ne kadar önemli bir sıralama sinyali?

Google, Core Web Vitals’ı “bir bağlantı çözücü” (tiebreaker) olarak tanımlamış olsa da gerçekte durum biraz daha karmaşık. Eğer iki sayfa içerik kalitesi, backlink profili ve diğer sinyaller açısından eşit düzeydeyse, Core Web Vitals skorları daha iyi olan sayfa öne geçer.

Ama asıl resim şu: Kötü bir Core Web Vitals, dolaylı yollardan sıralamayı ciddi ölçüde etkiler. Çünkü:

• Yavaş yüklenen sayfalarda hemen çıkma oranı artar → Google bu sinyali görür
• Yavaş sayfalarda kullanıcılar daha az içerik tüketir → dwell time düşer
• Crawl budget’ının bir kısmı yavaş sayfaların tekrar tekrar ziyaret edilmesiyle harcanır
• Mobil performans düşüklüğü, mobile-first indexing döneminde özellikle kritik

💡 Core Web Vitals’ı yalnızca bir “SEO kutusu işaretleme” aktivitesi olarak görmemek gerekir. Bunlar, gerçek kullanıcı deneyimini ölçen metriklerdir ve iyi bir kullanıcı deneyimi, hem arama motorlarında hem de gerçek işletme metriklerinde olumlu sonuç verir.

⭐ Google’ın yapay zeka destekli arama deneyimi (AI Overviews / SGE) ile birlikte organik tıklama oranları değişiyor. Bu ortamda Core Web Vitals, sitenizin “geleneksel” arama sonuçlarında görünür kalması için önemini korurken, aynı zamanda kullanıcıların sitede geçirdiği süreyi ve bağlılığını artırarak dolaylı SEO sinyallerini güçlendirmeye devam ediyor.

Sıkça Sorulan Sorular