Core Web Vitals (CWV), Google'ın kullanıcı deneyimini ölçtüğü 3 ana performans metrikidir: LCP, INP, CLS. Bu metrikler 2021'den bu yana sıralama faktörü, 2024'te FID yerine INP geldi, 2026'da CWV'nin sıralamadaki ağırlığı daha da arttı.
İyi CWV skorları sadece SEO için değil, dönüşüm için de kritik: 1 saniyelik gecikme dönüşüm oranını %7 düşürüyor, 3 saniyenin üstüne çıkan sayfalar ziyaretçilerin %53'ünü kaybediyor (Google araştırması). E-ticaret için yıllık ciroya çarpan etkisi var.
1. Core Web Vitals Nedir?
Google'ın "kullanıcı odaklı" performans metrikleri seti. Lab data (Lighthouse, PageSpeed Insights — kontrollü ortam) ile gerçek kullanıcı verisi (CrUX — Chrome User Experience Report) karşılaştırılır. Sıralamada gerçek kullanıcı verisi (field data) daha önemlidir; lab skoru iyi ama gerçek kullanıcı verisi kötü olan sayfalar sıralamada cezalandırılır.
2. 3 Ana Metrik: LCP, INP, CLS
< 2.5 saniye. Tipik suçlu: optimize edilmemiş hero görseli, yavaş sunucu yanıtı, render-blocking CSS/JS.< 200ms. Tipik suçlu: ağır JavaScript, ana iş parçacığını bloklayan üçüncü taraf scriptleri.< 0.1. Tipik suçlu: width/height belirtmemiş görsel, geç yüklenen reklam, font değişimi (FOIT/FOUT).3. Ölçüm Araçları
Doğru ölçüm doğru optimizasyonun ön koşulu. 4 araç birlikte kullanılır:
3.1. PageSpeed Insights (pagespeed.web.dev)
Google'ın resmi aracı. Hem lab (Lighthouse) hem field (CrUX) verisi gösterir. Mobil ve masaüstü ayrı puanlama. 90+ skor "İyi", 50-89 "Orta", <50 "Zayıf". Hedefiniz mobilde 90+, masaüstünde 95+ olmalı.
3.2. Lighthouse (Chrome DevTools)
Tarayıcının kendi içinde çalışan denetim aracı. PageSpeed'in yerel versiyonu. Tek farkı: kontrol ettiğiniz makinenin gücüne göre değişen sonuçlar. Geliştirme sırasında hızlı kontrol için ideal.
3.3. CrUX Report (Chrome User Experience Report)
Gerçek kullanıcı verisi. BigQuery üzerinden veya Search Console'da görünür. 28 günlük yuvarlanan ortalama. SEO için en önemli veri — Google sıralamada bunu kullanır.
3.4. Web Vitals JS Library
Sitenize ekleyerek gerçek ziyaretçilerinizin CWV verisini Analytics'e gönderebilirsiniz. npm install web-vitals. GA4'e custom event olarak gönderim.
4. LCP Optimizasyonu
LCP en zor optimize edilen metrik çünkü çok sayıda faktöre bağlı. 4 ana iyileştirme alanı var:
4.1. Sunucu Yanıt Süresi (TTFB)
- Hızlı hosting (Türkiye lokasyonlu SSD veya Cloudflare/Vercel edge)
- HTTP/3 ve QUIC desteği
- Veritabanı sorgu optimizasyonu (yavaş sorgu = yavaş yanıt)
- CDN kullanımı (Cloudflare, BunnyCDN, Fastly)
- Cache (full page cache + object cache)
4.2. Render-Blocking Kaynaklar
CSS ve JS dosyaları sayfa render'ını bloklar. Çözüm:
- Kritik CSS inline: sayfa açıldığında görünen alanın CSS'i HTML head'inde inline; kalan CSS async yüklenir
- JS defer/async: render gerektirmeyen JS'ler defer veya async ile yüklenir
- Preload kritik kaynaklar:
<link rel="preload" as="font">kritik font için - Preconnect/dns-prefetch: üçüncü taraf domain bağlantılarını önceden hazırla
4.3. Hero Görseli Optimizasyonu
- WebP veya AVIF formatı (PNG/JPG'den 30-50% küçük)
- Doğru boyutta servis et (mobile için 768px, desktop için 1920px)
- fetchpriority="high" ekle (LCP elementi için browser önceliklendir)
- Loading attribute = "eager" (lazy değil — LCP olduğu için)
- Responsive image:
<img srcset sizes>
4.4. Resource Hints
Tarayıcıya yapacağı işleri önceden söyleyin: <link rel="dns-prefetch"> (DNS çözümleme), <link rel="preconnect"> (TCP+TLS hazırlığı), <link rel="preload"> (kritik kaynak yükle), <link rel="prefetch"> (sonraki sayfa için).
5. INP Optimizasyonu
INP, FID (First Input Delay) yerine 2024'te eklendi. Sadece ilk etkileşimi değil, sayfada kalış boyunca tüm etkileşimleri ölçer. Daha sıkı bir metrik.
5.1. JavaScript Yükünü Azalt
- Bundle splitting (sadece o sayfada gereken JS'i yükle)
- Tree shaking (kullanılmayan kodu temizle)
- Minification + compression (gzip/brotli)
- Modern syntax kullan (ES2020+ daha küçük transpile edilir)
5.2. Long Task Yönetimi
Ana iş parçacığını 50ms+ meşgul eden tasklar "long task" sayılır. Çözüm: büyük işlemleri requestIdleCallback veya setTimeout ile böl, Web Worker'a taşı (CPU yoğun işler için), scheduler.postTask kullan (modern API).
5.3. Event Listener Optimizasyonu
- Throttle/debounce (scroll, resize event'leri için)
- Passive event listeners (touch, wheel için)
- Delegation (çok sayıda listener yerine üst element'e tek listener)
6. CLS Düzeltme Teknikleri
CLS sıçraması kullanıcıyı sinir eder ve dönüşümü öldürür. En sık nedenler:
6.1. Görsellerde Boyut Bildir
Her img tag'inde width ve height attribute'leri olmalı. Modern tarayıcılar aspect-ratio'yu kullanarak alanı önceden ayırır, görsel yüklendiğinde sıçrama olmaz.
6.2. Reklam ve Embed'lere Yer Ayır
Reklam slotu, YouTube embed, sosyal medya embed gibi geç yüklenen içerikler için CSS ile minimum yükseklik tanımlayın: min-height: 250px.
6.3. Font Yüklenirken Sıçrama (FOIT/FOUT)
font-display: swapkullan (FOUT — daha iyi UX)- Fallback font ile yedek font'un metric'i match etsin (size-adjust, ascent-override)
- Critical font'ları preload et
- Font subsetting (sadece kullanılan karakterleri yükle — Türkçe için latin-ext yeterli)
7. Görsel Optimizasyonu
Web sayfalarında trafik byte'ının %50'si görsellere ait. Görsel optimizasyonu en yüksek getirili tek iş.
7.1. Format Seçimi
- AVIF — 2026 itibarıyla en küçük format, ~50% PNG/JPG'den küçük. Safari 16+, Chrome 85+, Firefox 93+ destekliyor.
- WebP — yaygın destek, ~30% küçük. Picture tag ile fallback verin.
- JPG/PNG — fallback için.
- SVG — ikon ve logo için (vektör, ölçek-bağımsız, küçük).
7.2. Lazy Loading
Görüş alanı dışındaki görseller lazy load edilmeli: <img loading="lazy">. Modern tarayıcı native destek veriyor; eski tarayıcı için Intersection Observer polyfill. Hero görseli ASLA lazy olmaz (LCP elementi).
7.3. Responsive Görsel
Tek görseli farklı ekran boyutu için farklı çözünürlük servis edin. srcset ve sizes attribute'leriyle. Mobil için 768w, tablet için 1024w, desktop için 1920w.
8. Font Optimizasyonu
Web font'ları 200-500 KB ekleyebilir. Doğru yapılandırma şart.
8.1. Font Subsetting
Türkçe siteler için "latin-ext" yeterli (Türkçe karakterler içerir). Latin-ext subsetin boyutu full font'un %25'i. Google Fonts kullanıyorsanız &subset=latin-ext parametresi ekleyin.
8.2. Self-hosted vs CDN
Google Fonts CDN'i hızlı ama üçüncü taraf bağlantı + DNS lookup gerektirir. Self-hosted (kendi sunucunuzdan) — daha hızlı ve KVKK-uyumlu (Google'a kullanıcı IP'si gitmez). 2026 trendi self-host.
8.3. Font Display Stratejisi
font-display: swap — fallback font hemen gösterilir, custom font yüklenince swap olur. Ama swap'da size farkı varsa CLS olur. Çözüm: size-adjust, ascent-override, descent-override, line-gap-override CSS özellikleri ile fallback font'un metrics'ini custom font'a uydur.
9. Third-Party Script Yönetimi
Google Tag Manager, Facebook Pixel, hotjar, intercom gibi üçüncü taraf scriptleri ana iş parçacığını bloklayarak INP'yi mahveder. 2026 stratejisi: Partytown.
9.1. Partytown ile Web Worker'a Taşıma
Partytown (BuilderIO tarafından), üçüncü taraf scriptleri Web Worker'da çalıştırır — ana iş parçacığı serbest kalır. GTM, GA4, Facebook Pixel, Mixpanel için ideal. Kurulum: npm install @builder.io/partytown, sonra script tag'ine type="text/partytown" ekle.
9.2. Yükleme Stratejisi
defer— sayfa parse'ı bittiğinde yükleasync— paralel yükle, render'ı bloklamaz ama sırasız çalışır- Lazy load: kullanıcı etkileşim sonrası yükle (chat widget gibi)
- Self-host (Plausible, Fathom, Umami gibi privacy-first analytics)
9.3. GTM Optimizasyonu
GTM çok yaygın ama büyük performans yükü. Çözüm: GTM'i Partytown ile worker'a taşı, kritik tag'ları (consent yönetimi gibi) GTM dışına al, gereksiz tag'ları temizle, server-side GTM'e geçişi değerlendir.
10. Sonuç ve Kontrol Listesi
Core Web Vitals 2026'da daha sıkılaşıyor. Aşağıdaki kontrol listesini geçen sayfalar Lighthouse 95+ alır:
Hızlı Kontrol Listesi
- ☐ PageSpeed Insights mobilde 90+, masaüstünde 95+
- ☐ LCP < 2.5s (gerçek kullanıcı verisi)
- ☐ INP < 200ms
- ☐ CLS < 0.1
- ☐ Hero görseli WebP/AVIF, fetchpriority="high"
- ☐ Kritik CSS inline, kalan CSS async
- ☐ Tüm görsellerde width+height + lazy load (LCP hariç)
- ☐ Font subsetting (latin-ext) + size-adjust fallback
- ☐ GTM Partytown ile worker'a taşındı
- ☐ HTTP/3 + Brotli compression aktif
- ☐ CDN kullanımı (Cloudflare/BunnyCDN)
- ☐ Web Vitals JS library ile gerçek kullanıcı ölçümü
Sonuç
Core Web Vitals optimizasyonu hem SEO hem dönüşüm için zorunlu yatırım. Doğru yapılandırma ile sayfa hızı 2-3 katı, dönüşüm %15-30 artabilir. Yatırımın geri dönüşü ortalama 3 ay.
İzmir'de profesyonel performans optimizasyonu için SEO Danışmanlığı hizmetimizden yararlanabilirsiniz. Daha geniş web tasarım stratejisi için İzmir Web Tasarım Rehberi 2026'yı okuyun.
İlgili rehberler: