Giriş: Kullanıcı Deneyimi ve Sayfa Hızının Resmi Ölçütü

Google'ın sıralama faktörleri arasında en net ve şeffaf ölçülebilen kriterlerin başında Core Web Vitals (Önemli Web Verileri) gelir. Bir web sitesinin hızlı açılması, sayfa yüklenirken öğelerin zıplamaması ve kullanıcının tıklamalarına anında yanıt vermesi hem SEO hem de doğrudan satış dönüşümü için hayati öneme sahiptir.

Özellikle Google'ın FID (First Input Delay) yerine resmi olarak devreye aldığı INP (Interaction to Next Paint) metriği ile birlikte sayfa hızı kavramı tamamen etkileşim odaklı hale geldi.

Bu rehberde LCP, CLS ve INP metriklerini kod seviyesinde nasıl optimize edeceğinizi inceliyoruz.

1. LCP (Largest Contentful Paint) — Yükleme Hızı

Hedef: ≤ 2.5 saniye

LCP, sayfanın görünür alanındaki en büyük görselin veya metin bloğunun ne kadar sürede ekrana geldiğini ölçer.

LCP'yi Düşürmenin Yolları:

  • Hero görsellerini AVIF veya WebP formatında optimize edin ve priority / fetchpriority="high" özelliğiyle yükleyin.
  • Kritik CSS'i inline olarak verin, render-blocking harici stil dosyalarını engelleyin.
  • Sunucu yanıt süresini (TTFB) düşürmek için CDN (Edge Caching) kullanın.

2. CLS (Cumulative Layout Shift) — Görsel Kararlılık

Hedef: ≤ 0.1

CLS, sayfa yüklenirken öğelerin beklenmedik şekilde yer değiştirmesini ve zıplamasını ölçer. Kullanıcı bir butona basacakken reklamın aniden açılıp butonu aşağı itmesi kötü bir CLS örneğidir.

CLS'yi Sıfırlamanın Yolları:

  • Tüm görsellere (img) ve videolara kesin width ve height değerleri verin veya aspect-ratio CSS özelliği tanımlayın.
  • Dinamik yüklenen banner ve reklamlar için önceden sabit yükseklikte yer tutucu (skeleton/placeholder) kutular ayırın.
  • Yazı tipleri (fontlar) için font-display: swap kullanırken sistem fontuyla arasındaki boyut farkını size-adjust ile eşitleyin.

3. INP (Interaction to Next Paint) — Etkileşim Hızı

Hedef: ≤ 200 milisaniye

INP, kullanıcının sayfadaki bir butona, menüye veya sekmeye tıkladığında tarayıcının yeni kareyi ekrana çizene kadar geçen süreyi ölçer. Ağır JavaScript işlemleri tarayıcının ana iş parçacığını (main thread) kilitlerse INP skoru kırmızıya döner.

INP'yi Yeşil Bölgeye Çekmenin Yolları:

  • Ağır JavaScript kütüphanelerini kod bölme (code-splitting) ile parçalayın ve yalnızca ihtiyaç duyulan sayfada yükleyin.
  • Gereksiz üçüncü taraf izleme script'lerini (tracking pixels, ağır chatbot pencereleri) erteleyin veya kaldırın.
  • Uzun süren döngüleri scheduler.yield() veya requestIdleCallback() ile mikro parçalara bölün.