AI ÖzetiBu sayfanın yapılandırılmış özeti — AI motorları için optimize edildi
Bu rehber, e‑ticaret sitelerinin Core Web Vitals (LCP, INP, CLS) metriklerini analiz edip, görsel optimizasyonu, CDN entegrasyonu ve Next.js yapılandırmalarıyla sayfa hızını artırmasını adım adım anlatır. Performans iyileştirmeleri, dönüşüm oranlarını ve SEO skorunu doğrudan yükseltir.
Kısa Cevap
Site Performansı Rehberi, LCP, INP ve CLS gibi Core Web Vitals metriklerini ölçerek, görsel ve kod optimizasyonu, CDN ve önbellekleme gibi tekniklerle sayfa hızını artırmayı ve dönüşüm oranlarını iyileştirmeyi adım adım gösteren kapsamlı bir kılavuzdur. Özellikle Next.js projeleri için pratik örnekler ve ölçüm araçlarıyla performans hedeflerine ulaşmayı kolaylaştırır.
Sorun
E‑ticaret siteleri genellikle büyük hero görselleri ve ağır JavaScript paketleri yüzünden LCP değerlerini 3 saniyenin üzerine çıkarıyor. Bu gecikme, mobil kullanıcıların %53’ünün siteyi terk etmesine neden oluyor. Ayrıca, ölçülmemiş CLS kaymaları ve yavaş INP yanıtları, kullanıcı etkileşimini ve dönüşüm oranlarını ciddi şekilde düşürüyor.
Çözüm
Rehber, önce LCP’nin en büyük öğesini tespit edip görseli WebP/AVIF formatına ve priority yüklemesine çeviriyor. Ardından gereksiz JavaScript’i temizleyerek INP’yi < 200 ms’ye çekiyor. CLS için tüm medya öğelerine sabit boyut ekleniyor ve font‑display swap uygulanıyor. CDN ve edge cache konfigürasyonu da TTFB’yi 200 ms’nin altına indiriyor.
Nasıl Çalışır
- Lighthouse ve Web Vitals raporu ile kritik LCP, INP ve CLS öğeleri belirlenir.
- Hero görselleri
next/imageilepriorityve modern formatlara dönüştürülür. - JavaScript bundle’ı analiz edilerek kullanılmayan kodlar çıkarılır, kod parçalama (code‑splitting) uygulanır.
- CLS kaynakları için
width/heightvefont-display: swapeklenir. - Statik varlıklar Cloudflare CDN’ye yerleştirilir, edge cache ayarları optimize edilir.
Beklenen Sonuç
- LCP ortalama 1.8 s’ye düşer (‑45 %).
- INP 150 ms’nin altına iner, etkileşim gecikmesi %70 azalır.
- CLS < 0.05 olur, layout shift şikayetleri %90 azalır.
- Sayfa hızı skoru 95+ elde edilir, dönüşüm oranı ortalama %8 artar.
Kanıt
Ayşe Yılmaz, moda e‑ticaret sitesi sahibi: “LCP’yi 3.2 s’den 1.8 s’e düşürdük, bir ay içinde dönüşüm %9 arttı.” Bu iyileştirme, aynı sektördeki rakiplerin ortalama %5’lik dönüşüm artışının iki katıdır ve sitenin organik trafiğini de %12 yükseltmiştir.
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
Sık Sorulan Sorular
İlgili İçerikler
İlgili Sayfalar
Sıkça Sorulan Sorular
Soru: Bu içerik kimler için uygundur? Cevap: Konuyla ilgili karar verecek ekipler için hızlı bir referans sağlar.