Core Web Vitals 2026: LCP, INP ve CLS'i Gerçekten Düzeltmenin Yolu
Lighthouse skorunu değil, gerçek kullanıcı metriklerini iyileştiren teknik adımlar. INP'nin sıralamaya etkisi ve saha verisi nasıl okunur.
Hüda Çetin
Kurucu
Lab verisi ile saha verisini karıştırmayın
Lighthouse laboratuvar verisidir: tek bir cihaz, tek bir bağlantı simülasyonu. Google'ın sıralama sinyali olarak kullandığı ise CrUX üzerinden toplanan gerçek kullanıcı verisidir.
Search Console'daki Core Web Vitals raporu 28 günlük saha verisini gösterir. Optimizasyon kararlarını bu rapordaki URL gruplarına göre önceliklendirin.
LCP: en büyük içeriğin boyanma süresi
LCP problemlerinin büyük çoğunluğu görsel kaynaklıdır. Hero görselinin geç keşfedilmesi, boyutunun büyüklüğü veya render'ı bloklayan kaynaklar en sık görülen üç nedendir.
- Hero görselini `priority` ile önceliklendirin, lazy loading uygulamayın
- AVIF/WebP formatı ve doğru `sizes` tanımı ile aktarım boyutunu düşürün
- Kritik font dosyalarını `preload` edin, `font-display: swap` kullanın
- Sunucu yanıt süresini (TTFB) 200 ms altına çekmek için statik üretim veya ISR tercih edin
- Üçüncü parti scriptleri `afterInteractive` ile geciktirin
INP: etkileşimden sonraki boyama
FID'in yerini alan INP, kullanıcının her etkileşimine verilen yanıt süresini ölçer. 200 ms altı iyi, 500 ms üstü kötü kabul edilir.
Ana neden uzun JavaScript görevleridir. Sunucu bileşenleri kullanarak istemciye gönderilen JS miktarını azaltmak, INP üzerinde en yüksek etkiyi yaratan tek müdahaledir.
- İstemci bileşenlerini yalnızca etkileşim gereken yerlerde kullanın
- Ağır listeleri sanallaştırın veya sayfalayın
- Uzun görevleri `scheduler.yield` veya parçalama ile bölün
- Analitik ve chat widget'larını kullanıcı etkileşimine kadar erteleyin
CLS: beklenmedik düzen kaymaları
CLS'i sıfıra yaklaştırmak genellikle en kolay kazanımdır ve çoğunlukla eksik boyut tanımlarından kaynaklanır.
- Tüm görsel ve iframe'lere genişlik/yükseklik veya `aspect-ratio` verin
- Reklam ve embed alanları için yer tutucu yükseklik ayırın
- Web fontlarını `size-adjust` ile yedek fonta yaklaştırın
- Dinamik banner'ları içeriğin üstüne değil, ayrılmış alana yerleştirin
Ölçüm döngüsünü kurun
Tek seferlik optimizasyon kalıcı değildir. `web-vitals` kütüphanesiyle gerçek kullanıcı metriklerini kendi analitiğinize gönderin ve her dağıtımdan sonra regresyon olup olmadığını izleyin.
Sıkça sorulan sorular
Lighthouse skorum 100, ama Search Console kırmızı gösteriyor. Neden?
Lighthouse laboratuvar koşullarını, Search Console gerçek kullanıcıların cihaz ve bağlantı çeşitliliğini ölçer. Karar verirken saha verisini esas alın.
Core Web Vitals sıralamayı ne kadar etkiliyor?
İçerik kalitesi kadar güçlü bir sinyal değil, ancak yakın rekabette ayrıştırıcı. Asıl etkisi dolaylı: yavaş sayfalar hemen çıkma oranını ve dönüşümü düşürür.