Rehber
2025
Core Web Vitals 2025: Site Hızı & UX Rehberi (LCP • INP • CLS)
Google sıralamalarında ve dönüşümlerde kritik rol oynayan Core Web Vitals metriklerini
( LCP, INP, CLS ) pratik örneklerle anlatıyor; WordPress odaklı
hızlandırma adımlarını ve ölçüm araçlarını adım adım gösteriyoruz.
- Net Eşikler: LCP < 2.5s, INP < 200ms, CLS < 0.1
- WordPress Odaklı: Görsel/JS/Font optimizasyonu ve cache/CDN pratikleri
- Ölçüm: PSI, Lighthouse, CrUX, Search Console raporları
Bu Rehberde Neler Var?
Aşağıdaki başlıklara tıklayarak ilgili bölüme gidebilirsiniz.
1. Core Web Vitals Nedir?
Core Web Vitals, Google’ın gerçek kullanıcı verisine dayalı (CrUX) deneyim metrikleri setidir.
Üç ana metriğe odaklanır: LCP (Largest Contentful Paint),
INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift).
Bu metrikler; ilk yükleme hızı, etkileşim gecikmesi ve
görsel istikrar başlıklarını ölçer.
2. Hedef Eşikler & Ölçüm
2.1 Eşik Değerler (Geçer not aralıkları)
- LCP: ≤ 2.5 saniye
- INP: ≤ 200 ms
- CLS: ≤ 0.1
Not: Sunucu tarafı gecikme (TTFB) ve render blocking etmenleri bu metrikleri doğrudan etkiler.
2.2 Ölçüm Araçları
PageSpeed Insights
Lab + Alan verisi, her sayfa için hızlı skor.
Search Console (CWV)
Tüm site için URL gruplu alan verisi.
Lighthouse
Lab: engelleyiciler, kritik CSS, bundle analizi.
Chrome UX Report
Gerçek kullanıcı telco/cihaz dağılımı.
3. Hızlandırma Planı (Adım Adım)
3.1 LCP İyileştirme
- Kahraman görselini (hero) optimize edin:
AVIF/WebP,fetchpriority="high",preload. - Kritik CSS’i satır içi (inline) verin: Üstte görünen alan için yeterli.
- Render-blocking JS/CSS’yi azaltın:
defer/async, kullanmadıklarınızı kaldırın. - TTFB’yi düşürün: Hızlı hosting + CDN + veritabanı optimizasyonu.
Örnek: Hero görseli önceliklendirme
<link rel="preload" as="image" href="/img/hero.avif" imagesrcset="/img/hero-768.avif 768w, /img/hero-1280.avif 1280w" imagesizes="(max-width: 768px) 100vw, 1280px">
<img src="/img/hero.avif" width="1280" height="720" fetchpriority="high" decoding="async" alt="Ana görsel">3.2 INP İyileştirme
- Hydration/JS yükünü azaltın: Kod bölme, kritik etkileşimi erken hazırla.
- Üçüncü taraf scriptleri erteleyin: Tag Manager ile koşullu yükleme.
- Event listener’ları optimize edin: Pasif dinleyici (
{ passive: true }) kullanın.
3.3 CLS İyileştirme
- Görsellere boyut verin:
width/heightveyaaspect-ratioile yer tutucu. - Font geçişlerini kontrol edin:
font-display: swap, FOIT/FOUT riskini azaltın. - Dinamik içerik şiftini önleyin: Reklam/yerleşim için sabit kapsayıcı.
3.4 TTFB Azaltma
- HTTP/2/3 ve Brotli sıkıştırma
- Object cache (Redis/Memcached), opcode cache
- CDN edge (coğrafi olarak yakın sunucu)
4. WordPress İçin Pratik Ayarlar
- Cache & CDN: Full-page cache + CDN (HTML cache varyasyonlarını sınırlayın).
- Görseller: Otomatik
WebP/AVIFüretimi,lazy+loading=lazy. - Minify & Combine: Mantıklı birleştirme; critical CSS uygulaması.
- Fontlar: Yerel barındırma,
preload+font-display: swap. - Eklenti diyeti: Gereksiz eklentileri kapatın, tek iş — tek eklenti.
5. Görsel & Video Optimizasyonu
Görseller
srcset+sizesile responsive- Öncelikli görsel için
preload - SVG ikonlar (inline) + sprite
Videolar
- YouTube gömme için lite-embed
preconnect& üçüncü taraf izni- Otomatik oynatmayı sınırlayın
6. Resource Hints & Priority Hints
Preload/Prefetch/Preconnect ile kritik kaynakları öne alın; fetchpriority ile
tarayıcıya öncelik ipucu verin.
Örnek: Preconnect + Preload + Priority
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="/css/above-the-fold.css">
<img src="/img/hero.avif" fetchpriority="high" width="1280" height="720" alt="Kahraman">
7. Üçüncü Taraf Script Yönetimi
- Tag Manager ile koşullu yükleme (ör. onay sonrası pazarlama tag’leri)
- defer / async ve partytown gibi çözümler
- Aşırı ısı haritası / widget kullanımından kaçının
8. İzleme & Raporlama
- Search Console → Core Web Vitals raporu
- PageSpeed Insights haftalık takip (ana şablonlar)
- GA4 + Looker Studio ile hız & dönüşüm korelasyonu
9. Sık Sorulan Sorular
preload ve fetchpriority kullanın, kritik CSS’i inline verin.swap kullanın; dinamik bileşenlere sabit kapsayıcı ayırın.