Core Web Vitals Nedir?

Bir web sitesine tıklıyorsunuz, ancak sayfanın açılması beklediğinizden çok daha uzun sürüyor. Tam bir yazıyı okumaya başlamışken içerik bir anda yer değiştiriyor ya da bir butona bastığınız halde sayfa tepki vermiyor. Böyle bir deneyimin kullanıcı açısından ne kadar can sıkıcı olduğunu tahmin etmek zor değil.

Google da kullanıcı deneyimini değerlendirirken tam olarak bu noktaya odaklanıyor. Bir internet sitesinin yalnızca kaliteli içerik sunması yeterli değil; hızlı, kararlı ve sorunsuz bir kullanım deneyimi de sunması gerekiyor. Çünkü iyi bir kullanıcı deneyimi artık bir web sitesinin sahip olabileceği küçük bir avantajdan çok daha fazlası. Google arama sonuçlarında daha iyi konumlara ulaşmak isteyen siteler için önemli bir değerlendirme kriteri.

İşte Core Web Vitals (Önemli Web Verileri) bu noktada devreye giriyor. Peki Core Web Vitals tam olarak neyi ölçüyor? Bu metrikler Google sıralamalarını ne ölçüde etkiliyor ve bir web sitesinin performansını iyileştirmek için neler yapılabilir? Gelin, tüm bu sorulara birlikte bakalım.

Core Web Vitals

Core Web Vitals, Google’ın web sayfalarının kullanıcıya ne kadar iyi bir deneyim sunduğunu değerlendirmek için kullandığı temel performans ölçümleridir. Türkçede “Temel Web Metrikleri” veya “Önemli Web Verileri” şeklinde ifade edilen bu metrikler, bir web sitesinin teknik performansını kullanıcı deneyimi açısından değerlendirmeye yardımcı olur.

Peki Core Web Vitals neden bu kadar önem taşıyor?

Çünkü Google için artık yalnızca kaliteli ve özgün içerik sunmak yeterli değil. Bir web sayfasının gerçek kullanıcılar tarafından ne kadar hızlı, sorunsuz ve akıcı şekilde kullanıldığı da önemli bir değerlendirme kriteri. Örneğin bir sayfanın açılması 3 saniye sürerken başka bir sayfanın 1 saniyeden kısa sürede yüklenmesi, ziyaretçinin davranışını doğrudan etkileyebilir. Bu durum; sayfada kalma süresinden etkileşime, hatta arama sonuçlarındaki performansa kadar birçok noktada kendini gösterebilir.

Core Web Vitals, Google’ın daha geniş kapsamlı “Page Experience” yani “Sayfa Deneyimi” değerlendirmesinin önemli bir bölümünü oluşturur. Sayfa deneyimi yalnızca performansla sınırlı değildir; HTTPS kullanımı, mobil cihazlarla uyumluluk ve kullanıcıyı rahatsız edebilecek müdahaleci reklamlar gibi farklı unsurlar da bu kapsamda değerlendirilir.

Ancak Core Web Vitals’ı diğer unsurlardan ayıran önemli bir nokta var: Web sitesinin performansını somut veriler üzerinden ölçmeye ve kullanıcı deneyimini teknik açıdan değerlendirmeye imkân vermesidir.

Üç Temel Metrik: LCP, INP ve CLS

Google, bir web sitesinin performansını değerlendirirken yüzlerce farklı sinyali dikkate alabilir. Ancak Core Web Vitals söz konusu olduğunda, özellikle üç temel metriğe odaklanmak gerekir: LCP, INP ve CLS. Bu metriklerin her biri, ziyaretçinin sayfayla yaşadığı deneyimin farklı bir bölümünü ölçer.

1. LCP (Largest Contentful Paint) – Ana İçeriğin Yüklenme Süresi

LCP, bir web sayfasında ziyaretçinin karşısına çıkan en büyük içerik öğesinin ne kadar sürede tamamen görüntülendiğini gösterir. Bu öğe büyük bir görsel, dikkat çekici bir başlık, video ya da sayfanın üst bölümünde yer alan başka bir içerik olabilir.

Basitçe ifade etmek gerekirse LCP, ziyaretçinin sayfaya girdikten sonra “Evet, artık sayfanın ana içeriğini görebiliyorum” diyebilmesi için ne kadar beklediğini ölçer.

Örneğin bir e-ticaret sitesinde ürün detay sayfasını açtığınızı düşünün. Sayfanın üst kısmında 500×500 px boyutlarında büyük bir ürün fotoğrafı bulunuyor ve bu görsel, ekranda görünen en büyük içerik öğesi. İşte bu görselin tamamen yüklenip görünür hale geldiği an, LCP değerinin belirlenmesinde önemli rol oynar.

Eğer görselin yüklenmesi 3,8 saniye sürüyorsa, ziyaretçi sayfanın ana içeriğini görebilmek için neredeyse 4 saniye beklemek zorunda kalıyor demektir. Özellikle mobil kullanıcılar açısından bu tür gecikmeler oldukça olumsuz bir deneyim yaratabilir.

LCP değerlendirmesi genel olarak şu şekilde yapılır:

🟢 İyi: 2,5 saniye veya daha az
🟡 Geliştirilmeli: 2,5 – 4 saniye
🔴 Zayıf: 4 saniyeden fazla

💡 Küçük ama etkili bir öneri: WordPress kullanıyorsanız, sayfanın en üstünde yer alan büyük ve yüksek çözünürlüklü görseller LCP süresini ciddi şekilde artırabilir. Özellikle gereğinden büyük görselleri optimize etmek ve uygun durumlarda WebP gibi daha hafif formatları kullanmak, sayfanın daha hızlı görüntülenmesine yardımcı olabilir.

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

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.

⚠️ 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?

Bir web sitesinin Core Web Vitals performansını değerlendirirken iki temel veri kaynağından yararlanılır: Lab verileri ve Field verileri. Lab verileri, belirli ve kontrollü koşullar altında gerçekleştirilen simülasyon testlerinden elde edilirken; Field verileri, gerçek kullanıcıların siteyi kullanırken yaşadığı deneyimleri yansıtır.

Google, arama sıralamalarında özellikle gerçek kullanıcı deneyimlerinden elde edilen Field verilerine önem verir. Bu verilerin en önemli kaynaklarından biri de Chrome kullanıcılarından toplanan CrUX (Chrome User Experience Report) verileridir.

Core Web Vitals değerlerini analiz etmek için kullanabileceğiniz farklı araçlar bulunuyor. Her birinin sunduğu veriler ve kullanım amacı biraz farklı.

1. PageSpeed Insights:
   Başlangıç için en kullanışlı araçlardan biridir. Google tarafından sunulan PageSpeed Insights, hem Lighthouse üzerinden oluşturulan laboratuvar test sonuçlarını hem de gerçek kullanıcılardan elde edilen CrUX verilerini bir arada gösterir. Bu nedenle performans kontrolüne buradan başlamak oldukça mantıklıdır.
2. Chrome DevTools:
   Tarayıcı üzerinden doğrudan performans analizi yapmak isteyenler için oldukça güçlü bir seçenektir. Özellikle Performance sekmesi sayesinde sayfanın yüklenme ve çalışma sürecini ayrıntılı şekilde inceleyebilirsiniz. Etkileşim gecikmelerini ve özellikle INP kaynaklı problemleri tespit etmek için oldukça faydalıdır.
3. Lighthouse (CLI/CI):
   Lighthouse’u yalnızca manuel testler için değil, geliştirme sürecinin bir parçası olarak da kullanabilirsiniz. CLI veya CI/CD sistemlerine entegre edildiğinde, yapılan her yeni deploy sonrasında performans düşüşlerini otomatik olarak kontrol etmek ve olası regresyonları erkenden fark etmek mümkün olur.
4. web-vitals.js:
   Google’ın açık kaynak olarak sunduğu bu JavaScript kütüphanesi, gerçek kullanıcıların Core Web Vitals değerlerini ölçmenize yardımcı olur. Elde edilen verileri kendi analiz veya ölçüm sisteminize aktararak kullanıcı deneyimini gerçek trafik üzerinden takip edebilirsiniz.
5. WebPageTest:
   Performans analizini daha detaylı yapmak isteyenler için WebPageTest oldukça kapsamlı seçenekler sunar. Farklı ülkelerden, bağlantı türlerinden ve cihazlardan test gerçekleştirebilir; waterfall grafikleri ve filmstrip görünümü sayesinde sayfanın yüklenme sürecini adım adım inceleyebilirsiniz.
6. Google Search Console:
   Sitenizin genel durumunu görmek ve hangi sayfaların performans problemi yaşadığını toplu şekilde belirlemek için Search Console oldukça değerlidir. Core Web Vitals / Temel Web Metrikleri raporu üzerinden mobil ve masaüstü sonuçlarını ayrı ayrı inceleyebilirsiniz.

Bu rapor sayesinde;

• URL’lerin İyi, İyileştirme Gerekiyor veya Kötü şeklinde hangi grupta yer aldığını,
• Problemin hangi Core Web Vital metriğinden kaynaklandığını (LCP, INP veya CLS),
• Sorundan etkilenen yaklaşık URL sayısını,
• Performans problemlerinin zaman içerisinde nasıl değiştiğini görebilirsiniz.

Özellikle çok sayıda sayfaya sahip web sitelerinde Search Console’un sunduğu bu toplu görünüm, hangi problemlerin önce ele alınması gerektiğini belirlemek açısından oldukça kullanışlıdır.

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

Core Web Vitals SEO Açısından Neden Önemli?

Google, Core Web Vitals metriklerini sıralamada özellikle iki sayfanın diğer önemli kriterler bakımından birbirine yakın olduğu durumlarda bir tür “eşitlik bozucu” olarak değerlendiriyor. Yani içerik kalitesi, bağlantı profili ve diğer SEO sinyalleri benzer olan iki sayfa arasında, kullanıcı deneyimi daha iyi olan sayfanın avantaj elde etmesi mümkün.

Fakat konuyu yalnızca bu doğrudan etkiden ibaret görmek doğru olmaz. Asıl önemli nokta, zayıf Core Web Vitals değerlerinin kullanıcı davranışını ve dolayısıyla SEO performansını dolaylı olarak olumsuz etkileyebilmesi.

Örneğin;

• Sayfa geç açıldığında kullanıcı beklemek istemeyebilir ve siteyi hızla terk edebilir. Bu da kullanıcı etkileşimlerinin olumsuz yönde değişmesine neden olabilir.
• Yavaş çalışan bir sayfada ziyaretçi daha az içerik inceleyebilir. Bu durum, sitedeki etkileşim ve geçirilen süre açısından dezavantaj yaratabilir.
• Özellikle büyük ve çok sayfalı web sitelerinde düşük performans, Googlebot’un sayfaları tarama biçimini de etkileyebilir ve mevcut crawl budget’ın verimsiz kullanılmasına yol açabilir.
• Mobil cihazlardan yapılan ziyaretlerin ağırlığı düşünüldüğünde, mobil performansın yetersiz olması çok daha önemli bir problem hâline gelir.

💡 Bu nedenle Core Web Vitals’ı yalnızca SEO açısından tamamlanması gereken teknik bir kontrol listesi olarak düşünmemek gerekiyor. Bu metriklerin temel amacı, gerçek kullanıcıların bir web sayfasını ne kadar hızlı, akıcı ve sorunsuz deneyimlediğini ölçmek.

İyi bir kullanıcı deneyimi yalnızca Google’da daha iyi görünmek için önemli değil. Ziyaretçinin sitede kalması, içeriği incelemesi, sayfalar arasında dolaşması ve sonunda bir aksiyon gerçekleştirmesi açısından da doğrudan değer taşıyor.

⭐ Üstelik Google’ın yapay zekâ destekli arama deneyimleri ve AI Overviews gibi yeni arama özellikleriyle birlikte organik aramadan gelen ziyaretçi davranışları da değişmeye devam ediyor. Kullanıcıların arama sonuçlarıyla etkileşim biçimi dönüşürken, web sitesinin teknik performansı ve kullanıcı deneyimi daha da önemli bir hâle geliyor.

Kısacası Core Web Vitals, tek başına “sıralamayı belirleyen sihirli bir SEO faktörü” değil. Ancak hızlı, stabil ve kullanıcı dostu bir web sitesi oluşturmanın önemli göstergelerinden biri. Bu yüzden SEO çalışmalarında yalnızca anahtar kelimelere, içeriklere ve backlinklere odaklanmak yerine, ziyaretçinin sayfaya geldiği andan itibaren yaşadığı deneyimi de bütünüyle ele almak gerekiyor.