Core Web Vitals Nedir?

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimini değerlendirmek amacıyla kullandığı temel performans metrikleridir. Bu metrikler, sayfanın ne kadar hızlı yüklendiğini, kullanıcı etkileşimlerine ne kadar çabuk tepki verdiğini ve yükleme sırasında görsel düzenin ne kadar kararlı kaldığını ölçer.

Core Web Vitals üç ana metrikten oluşur:

• Largest Contentful Paint (LCP): Sayfadaki en büyük içeriğin görüntülenme süresini ölçer.
• Interaction to Next Paint (INP): Kullanıcının yaptığı bir etkileşime sayfanın ne kadar hızlı yanıt verdiğini gösterir.
• Cumulative Layout Shift (CLS): Sayfa yüklenirken oluşan beklenmedik düzen kaymalarını ölçer.

Bu metrikler yalnızca arama motorları için değil, gerçek kullanıcı deneyimi açısından da önemlidir. Hızlı, kararlı ve akıcı çalışan sayfalar ziyaretçilerin sitede daha rahat gezinmesine katkı sağlayabilir.

---

Google Core Web Vitals'ı Neden Oluşturdu?

Eskiden performans değerlendirmeleri büyük ölçüde teknik ölçümlere dayanıyordu. Ancak Google, gerçek kullanıcı deneyimini daha iyi yansıtan metriklere ihtiyaç duydu.

Core Web Vitals ile amaçlanan başlıca noktalar:

• Sayfaların daha hızlı yüklenmesini teşvik etmek
• Kullanıcı etkileşimlerini iyileştirmek
• Görsel kararlılığı artırmak
• Mobil kullanıcı deneyimini geliştirmek
• Web genelinde daha kaliteli sayfaların oluşturulmasını desteklemek

Bu yaklaşım, geliştiricilerin yalnızca teknik puanlara değil, ziyaretçilerin gerçek deneyimine de odaklanmasını sağlar.

---

Core Web Vitals SEO'yu Etkiler mi?

Core Web Vitals, Google'ın değerlendirdiği sayfa deneyimi sinyallerinden biridir. Ancak tek başına yüksek Core Web Vitals puanına sahip olmak üst sıraları garanti etmez.

Sıralamayı etkileyen diğer önemli unsurlar da vardır:

• İçerik kalitesi
• Arama niyetini karşılama
• Konu otoritesi
• E-E-A-T yaklaşımı
• İç bağlantı yapısı
• Güvenlik
• Mobil uyumluluk
• Teknik SEO

Core Web Vitals, bu bütünün önemli parçalarından biridir ve özellikle benzer kalitedeki sayfalar arasında fark yaratabilir.

---

🔥 Bence bundan sonra stratejimiz şöyle olmalı:

Her pillar makaleden 10–15 yeni makale çıkaracağız.

Örneğin bu yazıdan:

• LCP Nedir?
• INP Nedir?
• CLS Nedir?
• Google PageSpeed Insights Rehberi
• Lighthouse Rehberi
• Lazy Load Rehberi
• HTTP/3 Nedir?
• CDN Nedir?
• Cache Nedir?
• WebP mi AVIF mi?
• Font Optimizasyonu
• JavaScript Performans Optimizasyonu çıkarabiliriz.

Largest Contentful Paint (LCP) Nedir?

Largest Contentful Paint (LCP), sayfa açıldıktan sonra kullanıcı tarafından görülen en büyük içerik öğesinin ne kadar sürede yüklendiğini ölçen Core Web Vitals metriğidir.

Bu içerik genellikle:

• Hero görseli
• Büyük banner
• Başlık alanı
• Büyük video kapağı
• Ana içerik bloğu

olabilir.

Google'a göre ideal LCP değeri:

🟢 2.5 saniyenin altında

---

LCP Değerleri

---

LCP Neden Yükselir?

En sık görülen nedenler:

• Büyük görseller
• Yavaş sunucu
• Büyük CSS dosyaları
• Render Blocking CSS
• Ağır JavaScript
• CDN kullanılmaması
• Cache olmaması
• Font yüklenmesi
• Çok fazla reklam
• Ağır slider kullanımı

---

LCP Nasıl İyileştirilir?

✔ WebP

✔ AVIF

✔ CDN

✔ Lazy Load

✔ Critical CSS

✔ HTTP/3

✔ Cache

✔ Sunucu optimizasyonu

✔ Gereksiz JavaScript kaldırılması

✔ Hero görselinin optimize edilmesi

---

Interaction to Next Paint (INP) Nedir?

INP, kullanıcının yaptığı bir işlemin ne kadar hızlı gerçekleştiğini ölçer.

Örneğin:

• Menü açılması
• Butona tıklanması
• Form gönderimi
• Arama kutusu
• Accordion açılması

---

Google Hedefi

🟢 200 ms altında

---

INP'yi Kötü Etkileyenler

• Ağır JavaScript
• Uzun çalışan scriptler
• Büyük DOM
• Gereksiz animasyonlar
• Çok fazla Event Listener
• Kötü API cevap süreleri

---

INP Nasıl Düzeltilir?

• JavaScript küçültün.
• Async kullanın.
• Defer kullanın.
• Büyük scriptleri bölün.
• Gereksiz eklentileri kaldırın.
• Web Worker kullanın.
• API isteklerini azaltın.

---

Cumulative Layout Shift (CLS) Nedir?

CLS sayfanın yüklenirken kaymasını ölçer.

Örneğin

Kullanıcı

"Tıkla"

diyecekken

Reklam geldi

Sayfa aşağı kaydı

Yanlış yere bastı.

İşte buna CLS denir.

---

Google Hedefi

🟢 0.1 altında

---

CLS Neden Oluşur?

• Boyutu belirtilmeyen görseller
• Reklam alanları
• Dinamik içerikler
• Geç yüklenen fontlar
• Sonradan eklenen bannerlar

---

CLS Nasıl Düzeltilir?

• width height kullanın
• Reklam alanı ayırın
• Font preload kullanın
• Hero alanını sabitleyin
• Dinamik içerik yüksekliği belirleyin

---

Google PageSpeed Insights

Google'ın ücretsiz performans analiz aracıdır.

Ölçtüğü başlıca konular:

• Performance
• Accessibility
• Best Practices
• SEO
• Core Web Vitals

---

PageSpeed Size Ne Söyler?

• Büyük resim var.
• Render Blocking CSS var.
• Cache eksik.
• JavaScript ağır.
• DOM büyük.
• CSS optimize edilmeli.
• Font optimize edilmeli.
• CDN öneriliyor.

---

Lighthouse

Lighthouse Chrome'un performans analiz motorudur.

Analiz ettiği alanlar:

• SEO
• Performance
• Accessibility
• PWA
• Best Practices

---

Search Console Core Web Vitals

Search Console gerçek kullanıcı verisini gösterir.

Yani laboratuvar değil

Gerçek kullanıcı.

Raporlar

Mobil

Masaüstü

LCP

INP

CLS

URL bazında gösterilir.

---

Mobil Performans

Google artık

Mobile First Index

kullanıyor.

Yani

önce

telefon.

Sonra

masaüstü.

Bu yüzden

Mobil puan

çok önemlidir.

---

Masaüstü Performans

Desktop puanı yüksek olabilir.

Ama

Mobil

30 olabilir.

Google mobili baz alacağı için

mobil optimizasyon ihmal edilmemelidir.

---

Görsel Optimizasyonu

Web sitelerindeki trafiğin büyük bölümü görsellerden oluşur.

Öneriler:

• AVIF
• WebP
• Responsive Images
• Lazy Load
• Srcset
• Compression

---

Font Optimizasyonu

Yanlış font kullanımı LCP ve CLS'yi yükseltebilir.

Yapılması gerekenler

• Font preload
• Font display swap
• WOFF2
• Gereksiz font kaldırılması

---

CSS Optimizasyonu

En sık hatalar

• Büyük CSS
• Kullanılmayan CSS
• Inline CSS eksikliği
• Render Blocking CSS

---

JavaScript Optimizasyonu

En büyük performans düşmanı

çoğu zaman

JavaScript'tir.

Yapılabilecekler

• Defer
• Async
• Tree Shaking
• Code Splitting
• Minify
• Compression

---

Cache (Önbellek)

Cache sayesinde

ikinci ziyaret

çok daha hızlı olur.

Türleri

• Browser Cache
• Server Cache
• Object Cache
• CDN Cache

---

CDN

CDN

kullanıcıya

en yakın sunucudan

dosya gönderir.

Avantajları

• Daha hızlı
• Daha güvenli
• Daha az gecikme
• Daha düşük sunucu yükü

---

HTTP/3

Yeni nesil internet protokolüdür.

Avantajları

• Daha düşük gecikme
• Daha hızlı bağlantı
• Mobil ağlarda daha iyi performans
• Daha stabil veri aktarımı

---

Lazy Load

Sayfadaki tüm görselleri

aynı anda yüklemek yerine

kullanıcı aşağı indikçe

yükler.

Avantajları

• Daha düşük LCP
• Daha az veri tüketimi
• Daha hızlı ilk açılış

---

Performans Test Araçları

En çok kullanılan araçlar

• Google PageSpeed Insights
• Lighthouse
• GTMetrix
• WebPageTest
• Pingdom
• Chrome DevTools
• Search Console
• Ahrefs Audit
• Semrush Audit
• Cloudflare Analytics

Core Web Vitals'ta Yapılan 40 Büyük Hata

Performans Hataları

1. Çok büyük görseller yüklemek.
2. WebP veya AVIF kullanmamak.
3. Lazy Load uygulamamak.
4. Gereksiz slider kullanmak.
5. Ana sayfaya video eklemek.
6. Büyük GIF dosyaları kullanmak.
7. CDN kullanmamak.
8. Tarayıcı önbelleğini kapalı bırakmak.
9. HTTP/3 kullanmamak.
10. Çok fazla harici istek yapmak.

---

CSS ve JavaScript Hataları

11. Kullanılmayan CSS dosyalarını silmemek.
12. CSS küçültmesi (Minify) yapmamak.
13. JavaScript dosyalarını küçültmemek.
14. Render Blocking CSS kullanmak.
15. Gereksiz JavaScript kütüphaneleri yüklemek.
16. Çok fazla üçüncü taraf script kullanmak.
17. Defer kullanmamak.
18. Async kullanmamak.
19. Tek dosyada binlerce satır JavaScript bulundurmak.
20. Gereksiz animasyonlar kullanmak.

---

Sunucu Hataları

21. Yavaş hosting kullanmak.
22. PHP sürümünü güncellememek.
23. HTTP/2 veya HTTP/3 desteği olmaması.
24. Veritabanını optimize etmemek.
25. Cache sistemini devre dışı bırakmak.
26. Sunucu sıkıştırmasını (Brotli/Gzip) kullanmamak.
27. CDN yapılandırmasını yanlış yapmak.
28. DNS gecikmelerini göz ardı etmek.
29. Aşırı sunucu yükü oluşturmak.
30. Sunucu loglarını takip etmemek.

---

Kullanıcı Deneyimi Hataları

31. Boyutu belirtilmeyen görseller kullanmak.
32. Geç yüklenen reklam alanları oluşturmak.
33. Fontları optimize etmemek.
34. Menülerin geç açılması.
35. Mobil performansı test etmemek.
36. Tıklama alanlarını küçük bırakmak.
37. Aşırı pop-up kullanmak.
38. Ana içerikten önce büyük reklamlar göstermek.
39. Mobil cihazlarda ağır efektler kullanmak.
40. Core Web Vitals raporlarını düzenli takip etmemek.

---

100 Maddelik Core Web Vitals Kontrol Listesi

Görseller

✅ WebP kullanılıyor.

✅ AVIF değerlendirildi.

✅ Responsive Images kullanılıyor.

✅ Srcset tanımlandı.

✅ Lazy Load aktif.

✅ Hero görseli optimize edildi.

✅ Görsel boyutları belirlendi.

✅ Alt metinler eklendi.

✅ Büyük PNG dosyaları kaldırıldı.

✅ Gereksiz görseller silindi.

---

CSS

✅ CSS küçültüldü.

✅ Kullanılmayan CSS kaldırıldı.

✅ Critical CSS uygulandı.

✅ CSS sıkıştırıldı.

✅ CSS dosya sayısı azaltıldı.

✅ Inline CSS optimize edildi.

✅ Gereksiz framework kaldırıldı.

✅ Render Blocking CSS azaltıldı.

✅ Font CSS optimize edildi.

✅ Medya sorguları düzenlendi.

---

JavaScript

✅ JavaScript küçültüldü.

✅ Defer kullanıldı.

✅ Async kullanıldı.

✅ Code Splitting uygulandı.

✅ Tree Shaking yapıldı.

✅ Gereksiz eklentiler kaldırıldı.

✅ Üçüncü taraf scriptler azaltıldı.

✅ Event Listener'lar optimize edildi.

✅ DOM boyutu kontrol edildi.

✅ Gereksiz animasyonlar kaldırıldı.

---

Sunucu

✅ HTTP/3 aktif.

✅ Brotli sıkıştırması etkin.

✅ Gzip kontrol edildi.

✅ CDN kullanılıyor.

✅ PHP güncel.

✅ Cache aktif.

✅ Object Cache çalışıyor.

✅ Redis/Memcached değerlendirildi.

✅ Sunucu yanıt süresi ölçüldü.

✅ DNS performansı kontrol edildi.

---

Kullanıcı Deneyimi

✅ CLS değeri ölçüldü.

✅ LCP değeri ölçüldü.

✅ INP değeri ölçüldü.

✅ Mobil test yapıldı.

✅ Tablet test yapıldı.

✅ Masaüstü test yapıldı.

✅ Font yükleme optimize edildi.

✅ Reklam alanları sabitlendi.

✅ Hero alanı optimize edildi.

✅ Sayfa geçişleri test edildi.

---

AI SEO Açısından Performans

Yüksek performans yalnızca kullanıcı deneyimini iyileştirmekle kalmaz, aynı zamanda üretken yapay zekâ sistemlerinin sayfayı daha verimli işlemesine de katkı sağlayabilir.

Performansın dolaylı olarak desteklediği alanlar:

• Daha hızlı tarama
• Daha verimli render süreci
• Daha düşük sunucu hatası riski
• Daha iyi mobil deneyim
• Daha düzenli içerik sunumu

Tek başına yüksek performans, yapay zekâ sistemlerinde görünürlüğü garanti etmez; ancak kaliteli içerik ve sağlam teknik altyapıyla birlikte önemli bir avantaj sağlayabilir.

---

2026 Core Web Vitals Trendleri

AI Destekli Performans Analizi

Performans araçları, sorunları yalnızca raporlamak yerine önceliklendirip çözüm önerileri sunuyor.

---

HTTP/3 Yaygınlaşıyor

Yeni nesil bağlantı protokolü özellikle mobil kullanıcı deneyimini iyileştiriyor.

---

AVIF Standartlaşıyor

Daha düşük dosya boyutu ve yüksek kalite nedeniyle AVIF kullanımı artıyor.

---

JavaScript Optimizasyonu Daha Kritik

Modern web uygulamalarında gereksiz JavaScript yükünü azaltmak daha da önem kazanıyor.

---

Edge Computing ve CDN

İçeriğin kullanıcıya en yakın sunucudan sunulması, performans optimizasyonunun temel parçalarından biri hâline geliyor.

---

Sık Sorulan Sorular

Core Web Vitals ücretsiz ölçülebilir mi?

Evet. Google PageSpeed Insights ve Google Search Console gibi ücretsiz araçlarla temel metrikler takip edilebilir.

---

LCP için ideal değer nedir?

Google'ın önerdiği hedef, 2,5 saniyenin altında bir LCP değeridir.

---

INP neden önemlidir?

INP, kullanıcının sayfayla etkileşime geçtiğinde aldığı tepki süresini ölçer. Daha düşük değerler daha akıcı bir deneyim sunar.

---

CLS neden yükselir?

Boyutu tanımlanmamış görseller, geç yüklenen reklam alanları ve dinamik içerikler CLS değerini artırabilir.

---

Mobil performans masaüstünden daha mı önemlidir?

Google mobil öncelikli indeksleme kullandığı için mobil deneyim büyük önem taşır. Ancak masaüstü performansını da ihmal etmemek gerekir.

---

Sonuç

Core Web Vitals, modern web performansının en önemli göstergelerinden biridir. Hızlı yüklenen, kullanıcı etkileşimlerine hızlı cevap veren ve görsel olarak kararlı sayfalar, hem ziyaretçiler hem de arama motorları açısından daha güçlü bir deneyim sunar.

Ancak performans tek başına başarı getirmez. Kaliteli içerik, teknik SEO, güvenlik, erişilebilirlik ve kullanıcı odaklı tasarım ile birlikte değerlendirildiğinde uzun vadeli dijital başarı için sağlam bir temel oluşturur.