Core Web Vitals Nedir?
Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için kullandığı üç temel metrikten oluşur. Bu metrikler doğrudan arama sıralamasını etkiler.
LCP — Largest Contentful Paint
Hedef: 2.5 saniyenin altında
LCP, sayfanın en büyük görsel veya metin bloğunun yüklenme süresini ölçer.
LCP Optimizasyon Teknikleri
1. Görsel Optimizasyonu
- WebP veya AVIF formatı kullanın
- Lazy loading yerine hero görsellere loading="eager" ekleyin
- fetchpriority="high" attribute'u kullanın
2. Sunucu Yanıt Süresini İyileştirin
- CDN kullanımı (Cloudflare, Fastly)
- Sunucu tarafı önbellekleme
- TTFB'yi 800ms altına indirin
3. Render-Blocking Kaynakları Kaldırın
- CSS'i inline veya preload edin
- Kritik olmayan JavaScript'i defer edin
INP — Interaction to Next Paint
Hedef: 200ms altında
INP, kullanıcı etkileşimlerine (tıklama, dokunma, klavye) verilen yanıt süresini ölçer. FID'in yerini aldı.
INP Optimizasyon Teknikleri
1. JavaScript Yürütme Süresini Azaltın
- Uzun görevleri parçalara bölün (chunking)
- Web Workers kullanın
- Gereksiz third-party scriptleri kaldırın
2. Event Handler Optimizasyonu
- Debounce ve throttle kullanın
- Ağır hesaplamaları async yapın
3. React Uygulamaları İçin
- useDeferredValue ve useTransition kullanın
- Gereksiz re-render'ları önleyin
CLS — Cumulative Layout Shift
Hedef: 0.1 altında
CLS, sayfa yüklenirken görsel öğelerin beklenmedik kaymasını ölçer.
CLS Optimizasyon Teknikleri
1. Görseller İçin Boyut Belirtin
<img src="hero.jpg" width="1200" height="600" alt="Hero">
2. Font Yükleme Optimizasyonu
- font-display: swap kullanın
- Sistem fontlarına yakın fallback fontlar seçin
3. Dinamik İçerik
- Reklam alanları için yer tutucu (placeholder) kullanın
- Animasyonlarda transform kullanın, top/left değil
Ölçüm Araçları
- Google Search Console → Core Web Vitals raporu (gerçek kullanıcı verisi)
- PageSpeed Insights → Anlık analiz
- Chrome DevTools → Performance paneli
- Lighthouse → Kapsamlı denetim
Gerçek Proje Örneği
Bir e-ticaret müşterimizde yaptığımız optimizasyonlar:
| Metrik | Önce | Sonra |
|---|---|---|
| LCP | 4.8s | 1.9s |
| INP | 380ms | 145ms |
| CLS | 0.28 | 0.04 |
Sonuç: Organik trafik %34 artış, dönüşüm oranı %18 artış.