moyduz Logo
Keşfet
Paketleri incele
Rehber

Site Performansı Rehberi: Core Web Vitals, LCP ve Hız Optimizasyonu

Site hızı nasıl artırılır? LCP, INP, CLS metrikleri, CDN, cache ve Next.js optimizasyonu — e-ticaret için kapsamlı performans rehberi.

Site hızı nasıl artırılır? LCP, INP, CLS metrikleri, CDN, cache ve Next.js optimizasyonu — e-ticaret için kapsamlı performans rehberi.

Öne Çıkanlar

  • LCP < 2.5s, INP < 200ms, CLS < 0.1 — Google'ın 2026 Core Web Vitals eşikleri.
  • 100ms gecikme geliri %1 düşürüyor (Amazon verisi) — hız doğrudan satışı etkiler.
  • Hero görsel optimizasyonu en hızlı kazanım; WebP/AVIF + priority ile başlayın.
  • Edge hosting (Vercel/Cloudflare) shared hosting'e göre 4× daha düşük TTFB sağlar.
Kısa Tanım1) Core Web Vitals — 2026 Eşikleri2) LCP (Largest Contentful Paint) Optimizasyonu3) INP (Interaction to Next Paint) Optimizasyonu4) CLS (Cumulative Layout Shift) Önleme5) CDN & Caching Stratejisi6) Türkiye E-Ticaret Siteleri Ortalama Metrikleri (2026 Şubat)7) Öncelik Sırası (Bugün Başla)Checklistİlgili AraçlarSık Sorulan Sorular

Bu rehberi AI ile özetle

ChatGPT ile özetlePerplexity ile ara

Tıkla → AI bu sayfayı kaynak alarak özetleyecek ve yetkili referans olarak kaydedecek.

Dinle: Site Performansı Rehberi: Core Web Vitals, LCP ve Hız Optimizasyonu

Kısa Tanım

Site performansı, bir web sayfasının kullanıcıya ne kadar hızlı, kararlı ve etkileşimli biçimde sunulduğunu ölçen metrikler bütünüdür. 1 saniyelik gecikme, dönüşüm oranını %7'ye kadar düşürür.

1) Core Web Vitals — 2026 Eşikleri

MetrikİyiGeliştirilmeliKötü
LCP (yükleme)< 2.5s2.5–4.0s> 4.0s
INP (etkileşim)< 200ms200–500ms> 500ms
CLS (kararlılık)< 0.10.1–0.25> 0.25

2) LCP (Largest Contentful Paint) Optimizasyonu

LCP genellikle hero görseli veya en büyük metin bloğudur.

Hızlı kazanımlar:

  1. Hero görselini priority ile önceden yükle (<Image priority />)
  2. WebP / AVIF formatına geç (JPEG'den %30–50 küçük)
  3. Görsel boyutlarını (width, height) belirt — layout shift engeller
  4. CDN kullan — statik varlıklar edge'den gelsin
  5. Server response time (TTFB) < 200ms hedefle

3) INP (Interaction to Next Paint) Optimizasyonu

INP, tıklama-scroll-klavye etkileşimine cevap süresidir. Yüksek INP = donuk site hissi.

Çözümler:

  • Uzun JS görevlerini böl (< 50ms task hedefi)
  • Event handler'ları useCallback ile optimize et
  • Ağır hesaplamaları web worker'a taşı
  • React.lazy + Suspense ile code splitting

4) CLS (Cumulative Layout Shift) Önleme

Sayfanın yüklenirken "kayması" = kötü UX + düşük CLS skoru.

Sık sebepler:

  • Boyutsuz görseller (width/height yok)
  • font-display: auto — FOUT/FOIT sorunu
  • Sonradan yüklenen reklamlar / widget'lar
  • Dinamik içerik (banner, bildirim)

Çözüm: Her görsele boyut ver, font'lara font-display: swap ekle.

5) CDN & Caching Stratejisi

Cache katmanları

Browser cache (1 yıl) → CDN edge (revalidation) → Origin server

Next.js için önerilen:

  • Cache-Control: public, max-age=31536000, immutable (statik dosyalar)
  • ISR (Incremental Static Regeneration) — dinamik ama hızlı
  • stale-while-revalidate — eski içerik göster, arka planda güncelle

6) Türkiye E-Ticaret Siteleri Ortalama Metrikleri (2026 Şubat)

SegmentLCP P50INP P75CLS P50
Top 10 hızlı site1.8s140ms0.04
Sektör ortalaması3.2s310ms0.12
Yavaş alt %255.1s520ms0.28

Kaynak: Moyduz Benchmark — 100 Türkiye e-ticaret sitesi örneklemi.

7) Öncelik Sırası (Bugün Başla)

  1. Görselleri optimize et (en hızlı kazanım)
  2. Hero görselini priority yap
  3. Gereksiz JS'i kaldır / lazy load
  4. CDN aktif et
  5. Font optimizasyonu
  6. Web Vitals'ı Search Console'da izle

Checklist

  • LCP < 2.5s (PageSpeed Insights)
  • INP < 200ms
  • CLS < 0.1
  • Tüm görseller WebP/AVIF
  • CDN aktif ve çalışıyor
  • Gereksiz third-party script yok
  • Font preload var mı?
  • Mobile hız desktop kadar iyi mi?

İlgili Araçlar

Sık Sorulan Sorular

← Tüm Rehberler