Web Performans Optimizasyonu: Core Web Vitals Rehberi
Google, 2021'den itibaren Core Web Vitals metriklerini doğrudan sıralama faktörü olarak kullanmaktadır. Kullanıcıların yüzde 53'ü, 3 saniyeden uzun yüklenen sayfaları terk etmektedir.
Core Web Vitals Nedir?
- LCP (Largest Contentful Paint) — Sayfanın en büyük içerik öğesinin görünme süresi. Hedef: 2.5 saniye altı
- CLS (Cumulative Layout Shift) — Görsel kararlılık skoru. Hedef: 0.1 altı
- INP (Interaction to Next Paint) — Kullanıcı etkileşimine yanıt süresi. Hedef: 200ms altı
LCP Optimizasyonu
LCP genellikle hero image veya büyük metin bloğudur. Hero görsellerinde eager loading ve fetchpriority yüksek olarak ayarlanmalıdır. WebP veya AVIF formatları ile yüzde 30-50 boyut azaltımı sağlanabilir. CDN kullanımı ile coğrafi olarak yakın sunucudan servis yapılmalı, kritik CSS inline eklenmeli ve render-blocking kaynaklar azaltılmalıdır.
CLS Optimizasyonu
Layout shift, kullanıcı deneyimini en çok bozan sorunlardan biridir. Görsellerin genişlik ve yükseklik değerleri her zaman belirtilmeli, font yüklemesi için font-display swap kullanılmalıdır. Dinamik içerik için alan rezervasyonu yapılarak beklenmedik kaymalar önlenebilir.
INP Optimizasyonu
Etkileşimden sonraki görsel güncellemeye kadar geçen süreyi ölçen INP için ana thread'i bloklayan uzun task'lar parçalara bölünmeli, ağır işlemler Web Worker'a taşınmalıdır. Gereksiz JavaScript bundle'larından tree-shaking ile kurtulunmalı, framework uygulamalarında gereksiz yeniden render işlemleri önlenmelidir.
Görsel Optimizasyonu
Görseller sayfanın en büyük varlıklarıdır. Fotoğraflar için WebP veya AVIF, ikonlar için SVG tercih edilmeli, responsive images için srcset ve sizes attribute'ları kullanılmalıdır. Viewport dışındaki görseller lazy loading ile ertelenebilir.
Ölçüm Araçları
- PageSpeed Insights — Google'ın resmi Core Web Vitals aracı
- Lighthouse — Chrome DevTools ile detaylı analiz
- WebPageTest — Farklı coğrafyalardan gerçek cihaz testleri
- CrUX — Chrome User Experience Report ile gerçek kullanıcı verisi
Sonuç
Core Web Vitals skorlarınızı iyileştirmek, hem organik trafiği artırır hem de kullanıcı memnuniyetini yükseltir. Ekolsoft projelerinde bu metrikleri sürekli izliyor ve optimize ediyoruz.
