Core Web Vitals Nedir? LCP, INP ve CLS Rehberi
Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimi kalitesini ölçmek için tanımladığı üç temel metriktir. SEO sıralamasını doğrudan etkiler ve web sitenizin gerçek kullanıcılar tarafından nasıl deneyimlendiğini gösterir. Bu rehberde her metriği detaylıca açıklıyor, nasıl ölçüleceğini ve nasıl iyileştirileceğini anlatıyoruz.
Core Web Vitals Nedir?
Core Web Vitals, Google'ın 2020'de duyurduğu ve 2021'den itibaren sıralama faktörü olarak kullandığı üç temel performans metriğidir. Bu metrikler, bir web sayfasının yükleme hızını, etkileşime yanıt verme süresini ve görsel kararlılığını ölçer.
2024 itibarıyla üç metrik şunlardır:
- LCP (Largest Contentful Paint): Yükleme performansı
- INP (Interaction to Next Paint): Etkileşime yanıt verme (2024'te FID'nin yerini aldı)
- CLS (Cumulative Layout Shift): Görsel kararlılık
Bu metrikler "laboratuvar" (lab) ve "alan" (field) olmak üzere iki şekilde ölçülür. Laboratuvar verileri kontrollü ortamda ölçülür (Lighthouse gibi), alan verileri ise gerçek kullanıcılardan toplanır (Chrome UX Report). Google sıralama için alan verilerini kullanır.
Bilgi: Core Web Vitals yalnızca SEO için değil, kullanıcı deneyimi için de önemlidir. Google'ın araştırmasına göre, üç metriği de iyi olan sayfaların kullanıcı terk oranı %24 daha düşüktür.
LCP (Largest Contentful Paint)
LCP Nedir?
LCP, sayfadaki en büyük görünür içerik öğesinin tam olarak render edilme süresini ölçer. "En büyük içerik" genellikle şunlardan biridir:
- Hero görseli (büyük banner resmi)
- Video poster görseli
- Büyük bir metin bloğu
- Arka plan görseli (
background-imageile yüklenen)
LCP, kullanıcının sayfanın "yüklenmiş" olduğunu hissettiği anı temsil eder.
LCP Değer Aralıkları
| Durum | Süre | Anlamı |
|---|---|---|
| İyi | ≤ 2.5 saniye | Sayfa hızlı yükleniyor, kullanıcı beklemiyor |
| İyileştirme gerekiyor | 2.5 – 4.0 saniye | Fark edilir gecikme, bazı kullanıcılar ayrılabilir |
| Kötü | > 4.0 saniye | Ciddi gecikme, yüksek terk oranı |
LCP Nasıl İyileştirilir?
LCP'yi etkileyen dört ana faktör ve çözümleri:
1. Yavaş sunucu yanıt süresi (TTFB)
- CDN kullanarak içeriği kullanıcıya yakın sunun
- Sunucu tarafı önbellekleme uygulayın
- Veritabanı sorgularını optimize edin
- HTTP/2 veya HTTP/3 kullanın
2. Render engelleyen kaynaklar
- Kritik CSS'i inline olarak
<head>'e ekleyin - Kritik olmayan CSS ve JavaScript'i
deferveyaasyncile yükleyin - Kullanılmayan CSS ve JS kodlarını kaldırın
3. Yavaş kaynak yükleme
- LCP öğesi görsel ise,
<link rel="preload">ile önceden yükleyin - Görselleri WebP/AVIF formatına dönüştürün ve boyutlarını optimize edin
fetchpriority="high"özniteliğini LCP görseline ekleyin- LCP görseline
loading="lazy"kullanmayın — bu ilk ekranda görünen görselleri geciktirir
4. İstemci taraflı render
- Server-side rendering (SSR) veya static site generation (SSG) kullanın
- JavaScript tabanlı render'ı minimize edin
INP (Interaction to Next Paint)
INP Nedir?
INP, kullanıcının bir etkileşimde bulunması (tıklama, dokunma, klavye girişi) ile ekranın bu etkileşime görsel olarak yanıt vermesi arasındaki süreyi ölçer. 2024'te FID (First Input Delay) metriğinin yerini almıştır.
FID yalnızca ilk etkileşimi ölçerken, INP sayfa ömrü boyunca tüm etkileşimleri ölçer ve en kötü p75 değerini raporlar. Bu, sayfanın genel etkileşim performansının daha doğru bir göstergesidir.
INP Değer Aralıkları
| Durum | Süre | Anlamı |
|---|---|---|
| İyi | ≤ 200ms | Etkileşimler anında hissediliyor |
| İyileştirme gerekiyor | 200 – 500ms | Fark edilir gecikme, kullanıcı deneyimi düşer |
| Kötü | > 500ms | Sayfa yanıt vermiyor gibi hissediliyor |
INP Nasıl İyileştirilir?
1. Uzun görevleri (long tasks) parçalayın
JavaScript'in ana iş parçacığını (main thread) 50ms'den uzun süre bloklaması "uzun görev" olarak tanımlanır. Bu görevler etkileşimleri geciktirir.
- Büyük JavaScript fonksiyonlarını
requestIdleCallbackveyascheduler.yield()ile küçük parçalara bölün - Ağır hesaplamaları Web Worker'lara taşıyın
- Üçüncü parti scriptleri değerlendirin — gereksiz olanları kaldırın veya lazy load yapın
2. JavaScript boyutunu azaltın
- Kullanılmayan JavaScript kodlarını kaldırın (tree-shaking)
- Kod bölümleme (code splitting) uygulayın — her sayfa yalnızca ihtiyaç duyduğu JavaScript'i yüklesin
- Üçüncü parti kütüphanelerin boyutunu
bundlephobia.comile kontrol edin
3. DOM boyutunu küçültün
- 1500'den fazla DOM düğümü performans sorunlarına neden olur
- Karmaşık iç içe yapıları sadeleştirin
- Büyük listeler için virtualization kullanın
Dikkat: INP sorunlarını tespit etmek zor olabilir çünkü laboratuvar araçları gerçek kullanıcı etkileşimlerini simüle edemez. Chrome DevTools'un "Performance" sekmesinde etkileşimleri elle test edin ve "Total Blocking Time" metriğini takip edin.
CLS (Cumulative Layout Shift)
CLS Nedir?
CLS, sayfa yüklenirken veya kullanıcı etkileşimi sırasında içerik öğelerinin beklenmedik şekilde kaymasını ölçer. Hepimiz şu deneyimi yaşamışızdır: Bir makale okurken sayfaya bir reklam yüklenir ve okuduğunuz paragraf aşağı kayar. Bu, CLS sorunudur.
CLS, her beklenmedik kayma için etkilenen alanın boyutunu ve kayma mesafesini çarparak hesaplanır. Kullanıcının tetiklediği kaymalar (örneğin bir butona tıklayarak bir bölümü genişletme) CLS'e dahil edilmez.
CLS Değer Aralıkları
| Durum | Puan | Anlamı |
|---|---|---|
| İyi | ≤ 0.1 | Sayfa kararlı, içerikler kayma yapmıyor |
| İyileştirme gerekiyor | 0.1 – 0.25 | Bazı kaymalar var, kullanıcı fark edebilir |
| Kötü | > 0.25 | Ciddi kayma sorunları, okuma ve tıklama zorlaşıyor |
CLS Nasıl İyileştirilir?
1. Görseller ve videolar için boyut belirtin
- Tüm
<img>ve<video>etiketlerinewidthveheightözniteliklerini ekleyin - CSS
aspect-ratioözelliğini kullanarak yer tutma alanı oluşturun - Responsive görseller için CSS'te boyut oranını koruyun
2. Reklamlar ve dinamik içerik için alan ayırın
- Reklam alanlarına sabit boyut verin (
min-height) - Geç yüklenen içerikler (lazy loaded) için yer tutucu (placeholder/skeleton) kullanın
- İçerik ekleme işlemlerini
content-visibilityile optimize edin
3. Yazı tipi yüklemesini optimize edin
font-display: swapveyafont-display: optionalkullanın- Yazı tiplerini
<link rel="preload">ile önceden yükleyin - Fallback yazı tiplerinin boyutlarını web yazı tipiyle eşleştirin (
size-adjust)
4. Sayfa üstüne geç yüklenen içerik eklemeyin
- Cookie banner'ları sayfanın altına sabitlenmiş (fixed) olarak gösterin, üstten itmek yerine
- Bildirim çubuklarını sayfayı kaydırmayacak şekilde konumlandırın (fixed/sticky)
Core Web Vitals Nasıl Ölçülür?
1. Google PageSpeed Insights
En kolay ve hızlı yöntemdir. URL'nizi girin, hem alan verilerini (gerçek kullanıcılar) hem de laboratuvar verilerini (Lighthouse) görün. Her metrik için puan ve iyileştirme önerileri sunar.
2. Google Search Console
"Temel Web Verileri" (Core Web Vitals) raporu, sitenizin tüm sayfalarını iyi/iyileştirme gerekiyor/kötü olarak sınıflandırır. Sorunlu URL gruplarını ve etkilenen sayfa sayısını gösterir.
3. Chrome DevTools (Lighthouse)
Chrome tarayıcısında F12 > Lighthouse sekmesinden çalıştırabilirsiniz. Performans, Erişilebilirlik, SEO ve En İyi Uygulamalar kategorilerinde denetim yapar.
4. Web Vitals JavaScript Kütüphanesi
Google'ın web-vitals JavaScript kütüphanesini sitenize ekleyerek gerçek kullanıcı verilerini (RUM - Real User Monitoring) toplayabilirsiniz. Bu verileri kendi analitik sisteminize gönderebilirsiniz.
5. Chrome UX Report (CrUX)
Google'ın Chrome tarayıcısından topladığı anonim performans verileridir. BigQuery veya CrUX API üzerinden erişilebilir. Google sıralama için bu verileri kullanır.
Önemli Fark: Lighthouse (laboratuvar) puanı ile CrUX (alan) verisi arasında fark olabilir. Lighthouse ideal koşullarda test eder. Gerçek kullanıcılar yavaş bağlantılar, eski cihazlar ve coğrafi uzaklık nedeniyle farklı sonuçlar yaşar. SEO için önemli olan alan verisidir.
Core Web Vitals ve SEO
Google, Core Web Vitals'ı 2021'den beri sıralama faktörü olarak kullanmaktadır. Ancak etkisi hakkında realist olmak gerekir:
- Core Web Vitals, yüzlerce sıralama faktöründen biridir
- İçerik kalitesi ve alakalılık hala en önemli faktörlerdir
- CWV, eşit kalitedeki iki sayfa arasında fark yaratır (tie-breaker)
- Çok kötü CWV değerleri doğrudan sıralama düşüşüne neden olabilir
Bununla birlikte, CWV iyileştirmelerinin dolaylı SEO etkisi büyüktür: daha hızlı sayfalar daha düşük terk oranı, daha uzun oturum süresi ve daha iyi etkileşim oranları getirir — bunların hepsi dolaylı sıralama sinyalleridir.
Pratik: Kendi Sitenizi Test Edin
Şimdi kendi sitenizi test etmek için adımlar:
- PageSpeed Insights'a gidin:
pagespeed.web.devadresinde sitenizin ana sayfasını test edin - Alan verilerini kontrol edin: "Bu URL'nin alan verileri" bölümünde LCP, INP ve CLS değerlerini not alın
- Sorunlu metrikleri belirleyin: Kırmızı veya sarı olan metriklere odaklanın
- "Fırsatlar" bölümünü inceleyin: Tahmini süre tasarrufu en yüksek olan önerilere öncelik verin
- Search Console'u kontrol edin: "Temel Web Verileri" raporunda site genelinde kaç sayfa sorunlu görebilirsiniz
- En önemli sayfaları test edin: Ana sayfa, ürün sayfaları ve landing page'ler öncelikli olmalıdır
Sonuç
Core Web Vitals, web sitenizin kullanıcı deneyimi kalitesinin nesnel ölçüsüdür. LCP sayfa yüklemesini, INP etkileşim hızını, CLS görsel kararlılığı ölçer. Bu üç metriği düzenli takip etmek ve iyileştirmek hem SEO hem de kullanıcı memnuniyeti için kritiktir.
Performans optimizasyonu teknik bir konu olsa da etkisi doğrudan iş sonuçlarına yansır. Daha hızlı sayfalar daha fazla dönüşüm, daha düşük terk oranı ve daha iyi Google sıralaması getirir.
Web site performans analizi rehberimizde TTFB, görsel optimizasyonu, CDN ve önbellekleme stratejilerini daha detaylı ele alıyoruz.
Clarity'den otomatik raporlar ister misiniz?
ClarityInsights verilerinizi analiz eder ve UX önerileri içeren bir AI raporu gönderir.
Ücretsiz rapor alın