TL;DR: Core Web Vitals 3 metrik: LCP (hız), INP (etkileşim), CLS (yerinden oynama). Hepsi yeşil olmalı. WebP görsel, preload, font-display:swap, JS defer, image dimensions — temel adımlar.
LCP < 2.5s (Largest Contentful Paint)
Adım 1: Hero görsel optimizasyonu
- WebP format kullan (JPG yerine, %30 küçük)
- Boyut 1600px geniş yetiyor — daha büyük = boşa byte
loading="eager"+fetchpriority="high"<link rel="preload" as="image" href="hero.webp">
Adım 2: Sunucu yanıt süresi (TTFB)
- CDN kullan (Cloudflare ücretsiz tier)
- Türkiye edge server
- Cache plugin: WP Rocket, Laravel Octane
- Database query optimization
Adım 3: Render-blocking kaynakları kaldır
- CSS minify + critical CSS inline
- JS defer / async (mümkünse modulepreload)
- Third-party script (analytics, chat) async + delayed
INP < 200ms (Interaction to Next Paint)
Adım 1: JavaScript optimizasyonu
- Long task'leri parçala (>50ms olanlar sorun)
- requestIdleCallback / setTimeout chunk'ları
- Web Workers (heavy computation için)
Adım 2: Üçüncü taraf script'leri minimize et
- Google Tag Manager: aşamalı yükle
- Chat widget'lar: kullanıcı etkileşim sonrası yükle (lazy)
- Sosyal medya embed'leri: sadece görünür alanda
Adım 3: Event handler optimizasyonu
- Debounce / throttle (scroll, input)
- Passive event listener (touchstart, wheel)
- Event delegation
CLS < 0.1 (Cumulative Layout Shift)
Adım 1: Image dimensions ekle
<img src="..." width="800" height="600" alt="...">Adım 2: Font loading stratejisi
@font-face {
font-family: 'Outfit';
src: url('...');
font-display: swap; /* veya optional */
}Google Fonts için: &display=swap parametresi.
Adım 3: Reklam/iframe yer ayır
Dinamik içerik (banner, embed) için minimum boyut CSS ile sabit tutun.
Adım 4: CSS aspect-ratio kullan
.video-wrap { aspect-ratio: 16/9; }
.card-img { aspect-ratio: 4/3; }Ölçüm Araçları
- PageSpeed Insights — pagespeed.web.dev
- Web Vitals Chrome Extension
- GSC > Core Web Vitals raporu
- Lighthouse (Chrome DevTools)
Hedef Skor
Mobil 85+, Desktop 90+. Düzgün optimize edilmiş sitede mümkün. 70'in altı sıralamayı düşürür.
İlgili
Core Web Vitals 2026 — INP, LCP, CLS pratik optimizasyon
Mart 2024'ten itibaren Core Web Vitals'ın "responsiveness" metriği FID (First Input Delay) yerine INP (Interaction to Next Paint) oldu. Bu değişim daha kapsamlı bir kullanıcı deneyimi ölçümü demek — tek bir tıklamanın değil, sayfada yaptığınız tüm etkileşimlerin yanıt süresi.
INP (Interaction to Next Paint) — yeni metrik
Hedef: 200ms altı "iyi", 500ms üstü "kötü". INP, kullanıcının sayfayla yaptığı tüm etkileşimlerin (tıklama, klavye girişi, tap) yanıt süresinin ağırlıklı ortalaması.
Pratik iyileştirme:
- JavaScript bundle boyutunu küçültün; gereksiz library'leri kaldırın
- Long task'leri parçalayın (Task Scheduler API, setTimeout)
- requestIdleCallback ile non-critical iş'leri ertelenmiş zamana atın
- Event handler'larda heavy computation yapmayın; web worker'a delege edin
- React/Vue gibi framework'lerde React.memo, useMemo, useCallback ile re-render'ları azaltın
LCP (Largest Contentful Paint) — yükleme hızı
Hedef: 2.5 saniye altı "iyi", 4 saniye üstü "kötü".
Pratik iyileştirme:
- Hero görseli için preload + fetchpriority="high"
- Web font'lar için font-display: swap
- CSS critical path inline edilmeli (above-the-fold)
- CDN kullanın (Cloudflare ücretsiz tier yeterli çoğu KOBİ için)
- Görselleri WebP veya AVIF formatına çevirin
- Server response time (TTFB) 600ms altında olmalı
CLS (Cumulative Layout Shift) — görsel stabilite
Hedef: 0.1 altı "iyi", 0.25 üstü "kötü".
Pratik iyileştirme:
- Her img tag'inde width ve height attribute'ları
- Reklam, embed iframe'leri için reserved space
- Font loading sırasında FOIT/FOUT minimize için font-display:optional
- Dinamik içerik (banner, popup) sayfa load'undan sonra layout shift yapmamalı
- Iframe ve video'lar için CSS aspect-ratio property
Real User Monitoring (RUM) — laboratuvar değil saha verisi
Lighthouse skor laboratuvar koşullarında ölçülüyor; gerçek kullanıcı deneyimi farklı. Saha verisi için araçlar:
- Google Search Console - Core Web Vitals report. Gerçek Chrome kullanıcı verisi. 28 günlük rolling window.
- PageSpeed Insights API. Belirli URL'ler için CrUX verisi + Lighthouse lab verisi.
- web-vitals library. JavaScript ile kendi sitenizde RUM datası toplama. Google Analytics 4'e custom event olarak gönderme.
- SpeedCurve, Calibre, Treo. Premium RUM monitoring araçları.
Sıkça yapılan hatalar
- Sadece Lighthouse skoruna güvenme. Lighthouse lab; gerçek kullanıcı verisi farklı olabiliyor.
- Mobile öncelik atlama. Çoğu trafik mobil; CWV mobile-first ölçülmeli.
- Üçüncü taraf script'leri kontrol etmeme. Analytics, chat widget, reklam pixelleri major INP/LCP kaybı yaratıyor.
- Image optimizasyonu manuel yapma. Otomatik image transformasyon (Cloudinary, Vercel Image, Laravel intervention) zaman tasarrufu.
- Test verisinde ölçme. Sadece development ortamında test etmek; production altyapısı farklı.