Core Web Vitals Neden Önemli?

Google sıralama faktörü. Kullanıcı deneyimi doğrudan dönüşüm oranlarını etkiler. Yavaş site trafik ve ciro kaybettirir.

1. LCP (Largest Contentful Paint) İyileştirme

Ana içerik öğesinin yüklenme süresi. Hedef: 2.5 saniye altı.

Görselleri Optimize Et: WebP/AVIF formatı kullan. Boyutları ekran genişliğine göre sınırla (srcset).
Kritik Kaynakları Önceden Yükle: LCP görseli için <link rel="preload" fetchpriority="high"> ekle.
Sunucu Yanıt Süresini (TTFB) Düşür: CDN (Cloudflare, Fastly) kullan. Sunucu tarafı önbellekleme (Redis/Varnish) aç.
Render Engelleyici Kaynakları Kaldır: CSS dosyalarını küçült. Kritik olmayan JavaScript dosyalarına defer veya async ver.

Kullanıcı etkileşimine verilen yanıt gecikmesi. FID yerine geçti. Hedef: 200 milisaniye altı.

Uzun Görevleri (Long Tasks) Böl: 50ms üzerindeki JS bloklarını parçala. requestIdleCallback veya scheduler.yield() kullan.
Gereksiz JavaScript Kodunu Temizle: Kullanılmayan kütüphaneleri kaldır. Tree-shaking uygula.
DOM Boyutunu Küçült: Sayfadaki toplam DOM düğüm sayısını 1400 altında tut. Derin iç içe geçmiş etiketleri temizle.
Web Workers Kullan: Ağır hesaplama işlemlerini ana iş parçacığından (main thread) çıkar.

Yükleme sırasında sayfa düzeni kayması. Hedef: 0.1 puan altı.

Görsel ve Videolara Boyut Ver: Tüm <img> ve <video> etiketlerine width ve height veya CSS aspect-ratio tanımla.
Dinamik Reklam ve İframe Alanlarını Sabitle: Reklam alanlarına önceden minimum yükseklik (min-height) ata.
Font Kaymalarını Önle: Web fontları için font-display: swap veya optional tanımla. Boyut farkı için size-adjust kullan.

Modern web projelerinde performans sonradan eklenen bir özellik değil, geliştirme standardıdır.

Statik ve Sunucu Taraflı İşleme (SSG/SSR): Next.js veya Astro gibi modern mimariler ile ilk yükleme hızını maksimize et.
Edge Rendering: Veriyi kullanıcıya en yakın lokasyonda işle.
Performans Bütçeleri: CI/CD süreçlerine Lighthouse CI entegre et. Bütçeyi aşan PR'ları engelle.

Ölçüm yapmadan iyileştirme yapılamaz. PageSpeed Insights, Chrome User Experience Report (CrUX) ve Search Console verilerini düzenli takip et.