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 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.

Ö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.
Hızlı Cevap: Siteni Hızlandırmak İçin Ne Yapmalısın?Kime Uygun? Performans Öncelik ProfiliPerformans Sorununun Satış Etkisi (Risk)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)Karar Matrisi: Hangi Adımdan Başlamalısın?Checklistİlgili AraçlarSık Sorulan Sorularİlgili İçerikler

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

Hızlı Cevap: Siteni Hızlandırmak İçin Ne Yapmalısın?

  • LCP > 3s ise: Hero görselini priority yap + WebP/AVIF'e geç → en hızlı kazanım, 1–2 haftada etki
  • INP > 300ms ise: Gereksiz JS temizle, ağır işlemleri web worker'a taşı
  • CLS > 0.1 ise: Görsellere width/height ekle, font-display: swap uygula
  • Shared hosting kullanıyorsan: TTFB genellikle 800ms+ — Vercel/Cloudflare'e geç, 4x fark görürsün
  • PageSpeed 100 hedefliyorsan: Gerek yok. Hedef eşik değerlerin altında olmak — LCP < 2.5s yeterli

Türkiye e-ticaret sitelerinin %74'ü LCP eşiğini geçemiyor. Bu rakiplere karşı açık bir pencere.

Kime Uygun? Performans Öncelik Profili

Durumİlk Yapılacak
Yeni site açılıyornext/image + CDN + font preload kur
Hız skoru 50–70 arasıLCP öğesini tespit et, görsel optimize et
Hız skoru 70–89INP + CLS düzeltmesi, JS bundle
Hız skoru 90+TTFB + cache stratejisi ince ayarı
Mobil yavaş, masaüstü iyiMobil görseller + responsive image
Trafik var ama dönüşüm düşükCLS + INP — kullanıcı deneyimi fix

Performans Sorununun Satış Etkisi (Risk)

Yavaşlık SeviyesiDönüşüm Etkisi
+100ms gecikme-%1 gelir (Amazon verisi)
LCP 4s vs LCP 2s-%12 dönüşüm (Google/Chrome)
Mobil 5s+ yüklenme-%53 terk oranı
CLS > 0.25-%15 etkileşim

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

Karar Matrisi: Hangi Adımdan Başlamalısın?

DurumunÖnce Bunu Yap
PageSpeed < 50Görsel optimize (WebP + priority) + hosting değiştir
PageSpeed 50–70LCP öğesini bul, CDN kur
PageSpeed 70–89INP + CLS fix, JS bundle temizle
PageSpeed 90+TTFB < 200ms, cache stratejisi
Mobil < masaüstüResponsive image + mobil JS kısalt
Shared hostingVercel / Cloudflare geçişi — her şeyin önünde

Site Sağlık Skoru aracımızla puanınızı 1 dakikada görün →

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

İlgili İçerikler

Kaynaklar

  • Core Web Vitals — resmi özet(web.dev)
  • Sayfa hızı ölçüm aracı(pagespeed.web.dev)
  • Google — arama merkezi temel rehberi(developers.google.com)
Bu sayfayı paylaş
Bu içeriği faydalı buldunuz mu?
← Tüm Rehberler