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.
Hızlı Cevap: Siteni Hızlandırmak İçin Ne Yapmalısın?
- LCP > 3s ise: Hero görselini
priorityyap + 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/heightekle,font-display: swapuygula - 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ıyor | next/image + CDN + font preload kur |
| Hız skoru 50–70 arası | LCP öğesini tespit et, görsel optimize et |
| Hız skoru 70–89 | INP + CLS düzeltmesi, JS bundle |
| Hız skoru 90+ | TTFB + cache stratejisi ince ayarı |
| Mobil yavaş, masaüstü iyi | Mobil görseller + responsive image |
| Trafik var ama dönüşüm düşük | CLS + INP — kullanıcı deneyimi fix |
Performans Sorununun Satış Etkisi (Risk)
| Yavaşlık Seviyesi | Dö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 | İyi | Geliştirilmeli | Kötü |
|---|---|---|---|
| LCP (yükleme) | < 2.5s | 2.5–4.0s | > 4.0s |
| INP (etkileşim) | < 200ms | 200–500ms | > 500ms |
| CLS (kararlılık) | < 0.1 | 0.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:
- Hero görselini
priorityile önceden yükle (<Image priority />) - WebP / AVIF formatına geç (JPEG'den %30–50 küçük)
- Görsel boyutlarını (
width,height) belirt — layout shift engeller - CDN kullan — statik varlıklar edge'den gelsin
- 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ı
useCallbackile optimize et - Ağır hesaplamaları
web worker'a taşı React.lazy+Suspenseile 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)
| Segment | LCP P50 | INP P75 | CLS P50 |
|---|---|---|---|
| Top 10 hızlı site | 1.8s | 140ms | 0.04 |
| Sektör ortalaması | 3.2s | 310ms | 0.12 |
| Yavaş alt %25 | 5.1s | 520ms | 0.28 |
Kaynak: Moyduz Benchmark — 100 Türkiye e-ticaret sitesi örneklemi.
7) Öncelik Sırası (Bugün Başla)
- Görselleri optimize et (en hızlı kazanım)
- Hero görselini
priorityyap - Gereksiz JS'i kaldır / lazy load
- CDN aktif et
- Font optimizasyonu
- Web Vitals'ı Search Console'da izle
Karar Matrisi: Hangi Adımdan Başlamalısın?
| Durumun | Önce Bunu Yap |
|---|---|
| PageSpeed < 50 | Görsel optimize (WebP + priority) + hosting değiştir |
| PageSpeed 50–70 | LCP öğesini bul, CDN kur |
| PageSpeed 70–89 | INP + CLS fix, JS bundle temizle |
| PageSpeed 90+ | TTFB < 200ms, cache stratejisi |
| Mobil < masaüstü | Responsive image + mobil JS kısalt |
| Shared hosting | Vercel / 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
İ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)