Core Web Vitals 2026 Rehberi: INP, LCP ve CLS Nasıl Optimize Edilir?

Core Web Vitals Nedir ve Neden Önemli?

Core Web Vitals, Google'ın 2021'de sıralama faktörü olarak açıkladığı üç kullanıcı deneyimi metriğidir. Bu metrikler yükleme hızını, etkileşim yanıt süresini ve görsel kararlılığı ölçer. 2024 Mart itibarıyla FID (First Input Delay) resmi olarak kullanımdan kaldırıldı; yerine INP (Interaction to Next Paint) geçti. Bu değişiklik, optimize ederken dikkat etmeniz gereken öncelikleri kökten değiştirdi.

Sitenizin Core Web Vitals puanlarını öğrenmek için PageSpeed Analyzer aracımızı kullanabilirsiniz; URL girerken hem mobil hem masaüstü sonuçlarını ayrı ayrı inceleyin.

LCP (Largest Contentful Paint) Optimizasyonu

LCP, görüntü alanında görünen en büyük içerik öğesinin (genellikle hero görseli veya H1 başlığı) yükleme süresini ölçer. Eşik değerleri:

LCP'yi İyileştiren Teknikler

• LCP öğesini önceden yükle: <link rel="preload" as="image" href="hero.webp"> ile tarayıcı hero görselini erken indirir
• Sunucu yanıt süresini düşür: TTFB (Time to First Byte) < 800ms hedefleyin; CDN kullanımı en hızlı çözümdür
• Render-blocking resource'ları ortadan kaldır: CSS ve JS dosyalarını async/defer ile yükleyin
• Görsel formatı optimize et: WebP veya AVIF kullanın; AVIF, WebP'ye göre ortalama %20 daha küçük boyut sağlar
• fetchpriority="high": LCP görseline fetchpriority="high" eklemek Chromium tabanlı tarayıcılarda LCP'yi ortalama 300ms iyileştirir

INP (Interaction to Next Paint) Optimizasyonu

INP, kullanıcının sayfayla etkileşime girdiği andan (tık, dokunuş, klavye tuşu) tarayıcının ekranı güncellediği ana kadar geçen sürenin en kötü senaryosunu ölçer. FID yalnızca ilk etkileşimi ölçerken INP, sayfanın tüm yaşam döngüsündeki etkileşimleri kapsar; bu yüzden çok daha zorlu bir metriktir.

INP Sorunlarının Kökleri

Kötü INP puanının üç ana nedeni vardır:

1. Uzun JavaScript görevleri (Long Tasks): Ana iş parçacığını (main thread) 50ms'den uzun süre bloke eden JS görevleri. Chrome DevTools > Performance sekmesinde kırmızı köşeli görevler bunlardır.
2. Aşırı DOM boyutu: 1.000+ DOM düğümü olan sayfalarda tarayıcının yeniden hesaplama maliyeti artar. Google, 1.400 düğümü eşik olarak öneriyor.
3. Üçüncü taraf scriptler: Reklam, analitik ve chat widget'ları ana iş parçacığını sürekli meşgul eder.

INP İyileştirme Stratejileri

• Büyük JS görevlerini parçalara bölün: scheduler.yield() API'si veya setTimeout(fn, 0) ile uzun görevleri bölerek tarayıcıya nefes aldırın
• React'ta gereksiz render'ı önleyin: useMemo, React.memo ve useCallback ile state değişikliklerinin yayılmasını sınırlayın
• Event handler'ları optimize edin: Tıklama/input event'lerinde ağır hesaplamalar yapmak yerine işlemi Web Worker'a taşıyın
• Üçüncü taraf scriptleri lazy yükleyin: Reklam ve analitik scriptleri kullanıcı etkileşimi sonrasına erteleyin

CLS (Cumulative Layout Shift) Optimizasyonu

CLS, sayfa yüklenirken öğelerin beklenmedik biçimde yer değiştirmesini ölçer. Kullanıcı bir bağlantıya tıklamak üzereyken reklam yüklenmesi ve içeriğin kayması klasik bir CLS örneğidir.

CLS Sorunlarını Giderme

• Görsellere boyut verin: Her <img> etiketine width ve height atribütü ekleyin; bu tarayıcının aspect ratio hesaplamasına olanak tanır
• Font yükleme stratejisi: font-display: optional veya font-display: swap kullanın; optional FOUT'u tamamen önler
• Dinamik içeriğe alan ayırın: Reklam ve banner alanları için sabit yükseklik rezerv edin: min-height: 90px
• Animasyonlarda transform kullanın: top/left yerine transform: translate() kullanın; compositing layer'da çalışır, layout shift tetiklemez

Core Web Vitals Ölçümü: Lab vs Field Verisi

Metric ölçümünde iki kaynak karıştırılmamalıdır:

• Lab verisi (Lighthouse, PageSpeed Insights): Simüle edilmiş koşullarda anlık ölçüm. Geliştirme sürecinde hızlı geri bildirim için idealdir ama gerçek kullanıcı deneyimini yansıtmaz.
• Field verisi (CrUX — Chrome UX Report): Son 28 gündeki gerçek Chrome kullanıcılarının deneyimi. Google sıralama kararlarında bu veriyi kullanır. Google Search Console > Core Web Vitals raporu bu kaynaktan beslenir.

Kritik not: Lighthouse'da "İyi" puan alıp Search Console'da "Kötü" görüyorsanız sorun büyük ihtimalle üçüncü taraf scriptlerde ya da gerçek kullanıcı cihaz/bağlantı koşullarındadır. Her iki kaynağı da düzenli izleyin.

Sonuç

2026'da Core Web Vitals optimizasyonu artık "teknik iyileştirme" değil, doğrudan sıralama ve gelir etkisi olan stratejik bir önceliktir. INP'nin sıralama faktörü haline gelmesiyle birlikte yalnızca sayfa yükünü değil, sayfanın tüm etkileşim sürecini optimize etmek zorunlu hale geldi. PageSpeed Analyzer aracımızla sitenizin güncel puanlarını kontrol edin ve en düşük skorlu sayfadan başlayarak öncelik sırasıyla ilerleyin.