Modern web uygulamaları için hız ve kullanıcı deneyimi (UX) her zamankinden daha kritik. Google'ın Core Web Vitals (CWV) seti, sayfa hızını ve etkileşim kalitesini ölçen üç ana metriğe odaklanır: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) ve INP/FID (Interaction to Next Paint / First Input Delay). Bu yazıda, bu metriklerin ne anlama geldiğini, hangi eşiklerin hedeflenmesi gerektiğini, nasıl ölçüleceğini ve pratik optimizasyon stratejilerini detaylı şekilde ele alacağız.
Core Web Vitals nedir ve neden önemli?
Core Web Vitals kullanıcı deneyiminin performans odaklı en kritik parçalarını ölçen standart bir settir. Arama motoru sıralamaları, kullanıcı etkileşimi, dönüşüm oranları ve sayfa terk etme oranları üzerinde doğrudan etkisi olduğu için SEO ve iş hedefleri açısından önem taşır.
Ana metrikler ve hedef değerler
- LCP (Largest Contentful Paint): Sayfanın ana içeriğinin yüklenme süresi. Hedef: <= 2.5s (iyi), 2.5–4s (iyileştirmeye açık), >4s (zayıf).
- CLS (Cumulative Layout Shift): Görsel kararlılık; beklenmeyen layout kaymalarının toplam skoru. Hedef: <= 0.1 (iyi), 0.1–0.25 (iyileştirmeye açık), >0.25 (zayıf).
- INP / FID (Interaction to Next Paint / First Input Delay): Kullanıcı etkileşimlerinin gecikmesi. FID geçmişte kullanıldı (hedef <=100ms), INP modern alternatif olup ideal hedef <=200ms olarak kabul edilebilir.
Laboratuvar (lab) ve alan (field) verileri: fark nedir?
Lab verileri (Lighthouse, WebPageTest) kontrollü bir ortamda ölçüm sağlar; değişiklikleri test etmek ve optimizasyon etkilerini görmek için uygundur. Field verileri (Chrome User Experience Report - CrUX, Real User Monitoring - RUM) gerçek kullanıcıların deneyimini yansıtır ve CWV açısından nihai sonuçları belirler. Her iki yaklaşımı da kullanmak gerekir: lab ile sorunları tespit edip düzeltin, field ile gerçek etkiyi doğrulayın.
Ölçüm ve araçlar
- PageSpeed Insights: Hem lab hem field verisini sunar, öneriler üretir.
- Lighthouse: Yerel veya Chrome DevTools içinden detaylı rapor sağlar.
- Web Vitals JS: Gerçek zamanlı RUM verisi toplamak için kullanılır (getLCP, getCLS, getINP/getFID).
- WebPageTest, GTmetrix, Chrome DevTools: Derin performans analizi ve film şeridi incelemesi için yararlı.
Basit bir Web Vitals örneği (RUM)
import {getCLS, getLCP, getINP} from 'web-vitals';
getCLS(console.log);
getLCP(console.log);
getINP(console.log);
Performans optimizasyonu: adım adım strateji
Aşağıdaki başlıklar doğrudan Core Web Vitals'e etki eden tekniklerdir. Projenize göre önceliklendirme yapın ve sonuçları RUM ile takip edin.
1. Sunucu ve ağ optimizasyonları
- CDN kullanın: Statik içerikleri coğrafi olarak yakın sunuculardan vererek LCP'yi iyileştirin.
- HTTP/2 veya HTTP/3'e geçiş: Paralel kaynak indirmeyi iyileştirerek başlangıç gecikmesini azaltır.
- GZIP/Brotli sıkıştırması: Transfer edilen veri miktarını küçültür.
- Cache-Control ve uzun süreli önbellekleme politikaları ile yeniden ziyaretlerde yükü azaltın.
2. Görsel ve medya optimizasyonu
- Resimleri modern formatlara dönüştürün (WebP, AVIF) ve responsive srcset kullanın.
- Boyutu küçültün, gereksiz meta verileri temizleyin ve dosya sıkıştırma uygulayın.
- width/height veya CSS aspect-ratio ile yer ayırtın; böylece CLS azalır.
- Lazy-loading (loading="lazy") ile başlangıç yükünü azaltın; LCP hedefi olan ana görselleri preload ile önceliklendirin.
3. CSS ve kritik render yolunu yönetme
- Kritik CSS'i sayfanın head kısmına inline ekleyin ve geri kalan stilleri asenkron yükleyin.
- Unused CSS'i temizleyin (purgecss vb.).
- Font yüklemelerini optimize edin: font-display: swap kullanın, gerekli font ağırlıklarını sınırlayın ve preload kullanarak FOUT/FID etkisini azaltın.
4. JavaScript optimizasyonu ve ana iş parçacığı (main thread)
- Gereksiz JS'yi erteleyin veya dinamik yükleyin (defer, async, code-splitting).
- Uzun görevleri azaltmak için web worker'lar kullanın.
- Third-party scriptleri sınırlandırın veya lazy-load yapın; reklam, analiz ve widget'lar sıklıkla CLS ve INP/FID'i bozar.
- Minification ve tree-shaking ile paket boyutlarını küçültün.
5. Layout shift (CLS) azaltma taktikleri
- Resimler ve iframelar için boyut tanımlayın.
- Dinamik içerik (reklam ağları, embedler) için placeholder kullanın.
- Font değişimlerinin yer değiştirmeye neden olmaması için font-display ayarlarını yapın.
- Animasyonlarda transform ve opacity kullanın; top/left gibi özelliklerle layout'u tetiklemeyin.
Kontrol listesi: Yayına almadan önce
- Lighthouse ile lab raporları çalıştırıldı mı?
- Real User Monitoring (Web Vitals) kuruldu mu?
- LCP ana öğesi optimize edildi ve preload edildi mi?
- CLS için tüm görsel/iframe öğelerinde boyut tanımlı mı?
- JS ana iş parçacığı kısa tutuluyor mu, uzun görevler var mı?
- CDN, sıkıştırma ve cache header'ları düzgün yapılandırıldı mı?
Ölçüm sonrası: İzleme ve sürekli iyileştirme
Core Web Vitals tek seferlik bir kontrol değil, sürekli izlenmesi gereken metriklerdir. RUM ile zaman içinde değişikliklerin etkilerini izleyin, deploy sonrası regresyonları otomatik testlerle yakalayın ve kullanıcı segmentlerine göre optimizasyonlar yapın (mobil vs masaüstü, düşük bağlantı vs yüksek bağlantı).
Sonuç
Core Web Vitals modern web performansının temel taşlarıdır. Doğru araçlar ve yapılandırmalarla LCP, CLS ve INP/FID gibi metrikleri iyileştirmek mümkündür. Hem sunucu tarafı hem de ön yüz tarafı optimizasyonlarını bir arada yürüterek kullanıcı memnuniyetini, dönüşüm oranlarını ve SEO sıralamalarını iyileştirebilirsiniz. Ekolsoft olarak performans analizleri, CDN entegrasyonları ve uygulama optimizasyonları konusunda destek sunuyoruz — iletişime geçin, sitenizin CWV skorlarını birlikte yükseltelim.
