Google, 2021'den bu yana sayfa deneyimi sinyallerini sıralama faktörü olarak kullanıyor. Bu sinyallerin en önemlisi Core Web Vitals — üç temel performans metriği.
Core Web Vitals Nedir?
LCP — Largest Contentful Paint Sayfanın en büyük içerik öğesinin (genellikle hero görseli veya ana başlık) görünür hale gelme süresi. İyi: 2.5 saniyenin altı. Zayıf: 4 saniyenin üstü.
INP — Interaction to Next Paint (CLS'nin yerini aldı) Kullanıcının bir etkileşimine (tıklama, dokunma, klavye) sayfanın tepki süresi. İyi: 200ms altı. Bu metrik, sayfanın "donuk" hissettirip hissettirmediğini ölçüyor.
CLS — Cumulative Layout Shift Sayfa yüklenirken öğelerin beklenmedik biçimde kayma miktarı. Okurken altındaki reklam yüklenip her şeyi aşağı kaydırdıysa yüksek CLS. İyi: 0.1 altı.
Neden Bu Kadar Önemli?
Yavaş siteler Google sıralamasında geriliyor ve dönüşüm oranlarını doğrudan düşürüyor. Amazon'un yaptığı araştırma: 100ms'lik gecikme satışları %1 azaltıyor. Mobil kullanıcılar özellikle sabırsız — 3 saniye geçince %53'ü siteyi terk ediyor.
LCP İyileştirme Yöntemleri
Görsel optimizasyonu: JPEG yerine WebP veya AVIF formatı. Görselleri doğru boyutta serve etmek. loading="lazy" ile görünür alan dışındaki görselleri ertelemek. Hero görselini ise priority ile öne almak.
Sunucu yanıt süresi: CDN kullanımı, sunucuya coğrafi yakınlık ve önbellekleme stratejisi TTFB'yi (ilk byte süresini) düşürür.
Render-blocking kaynaklar: CSS ve JS dosyalarını defer veya async ile yüklemek, kritik CSS'i inline etmek.
INP İyileştirme Yöntemleri
Uzun JavaScript görevlerini parçalara bölmek (code splitting). Ağır hesaplamaları Web Worker'a taşımak. Gereksiz event listener'ları kaldırmak. React'ta useMemo ve useCallback ile gereksiz re-render'ları önlemek.
CLS İyileştirme Yöntemleri
Görsellere mutlaka width ve height attribute'u eklemek. Dinamik içerik (reklam, embed) için önceden alan ayırmak. Web fontları için font-display: swap yerine font-display: optional değerlendirmek.
Performansı Nasıl Ölçersiniz?
Google PageSpeed Insights: URL girin, anında skor alın. Lighthouse: Chrome DevTools içinde, geliştirme ortamında test. Search Console: Core Web Vitals raporunda gerçek kullanıcı verisi. web.dev/measure: Ayrıntılı analiz.
Next.js'in Avantajı
Next.js, Image bileşeni ile otomatik format dönüşümü, lazy loading ve boyut optimizasyonu yapıyor. Font optimizasyonu yerleşik. Statik export ile CDN'den direkt sunum mümkün. Doğru kullanılan bir Next.js site, PageSpeed'de 90+ skor almak için özel çaba gerektirmiyor.