Core Web Vitals Nedir? LCP, INP ve CLS Hız Optimizasyonu Rehberi

Google'ın Sayfa Deneyimi (Page Experience) sinyallerinin merkezinde yer alan Core Web Vitals, bir web sayfasının gerçek Chrome kullanıcılarındaki yüklenme hızını, etkileşim tepkiselliğini ve görsel kararlılığını ölçer. Laboratuvar testlerinde yüksek puan almak tek başına yeterli değildir; önemli olan saha verisinde (CrUX) iyi eşik değerlerini yakalamaktır.

1. Largest Contentful Paint (LCP) — İdeal Eşik: 2.5 Saniye Altı

LCP, ekranın ilk görünen kısmındaki en büyük metin bloğunun veya görselin çizilme süresini ölçer. LCP süresini düşürmek için üç adımı birlikte uyguluyoruz:

• Sunucu Yanıt Süresi (TTFB): Veritabanı sorgularını düz dizi (plain array) önbellekleme ile bellekten sunmak ve HTTP Gzip/Brotli sıkıştırmasını aktif etmek. Sunucu gecikmenizi Online Ping aracımızla ölçebilirsiniz.
• WebP Görsel Dönüşümü: 1 MB boyutundaki PNG ekran görüntülerini kalite kaybı olmadan 80-120 KB WebP formatına indirmek.
• Önceliklendirme: Hero görselinde loading="lazy" yerine fetchpriority="high" kullanmak.

2. Interaction to Next Paint (INP) — İdeal Eşik: 200 ms Altı

FID metriğinin yerini alan INP, kullanıcının menüye tıklaması, akordeon açması veya form alanında seçim yapması ile tarayıcının bir sonraki kareyi çizmesi arasındaki gecikmeyi ölçer. Ağır jQuery eklentilerini ve satır içi devasa script bloklarını harici dosyalara ayırıp yalnızca ihtiyaç duyulan sayfalarda yüklemek ana iş parçacığını (main thread) rahatlatır.

3. Cumulative Layout Shift (CLS) — İdeal Eşik: 0.1 Altı

Sayfa yüklenirken görsellerin sonradan boyut kazanarak metinleri aşağı kaydırması hem kullanıcı deneyimini bozar hem de CLS puanını düşürür. Tüm <img> etiketlerine gerçek width ve height değerlerinin yazılması ve CSS dosyalarının <body> sonuna değil <head> içine yerleştirilmesi düzen kaymasını engeller.