Sayfa Hızı ve E-Ticaret SEO: Yavaş Site Ne Kaybettirir?

Bir e-ticaret sitesi yöneticisi olarak şu gerçekle yüzleşmeniz gerekiyor: Sayfanız ne kadar yavaş yüklenirse, o kadar fazla müşteri kaybediyorsunuz. Bu sadece bir tahmin değil, araştırmalarla kanıtlanmış bir gerçektir.

Google ve Amazon'un araştırmaları aynı sonuca işaret ediyor: Her 1 saniyelik yükleme gecikmesi, dönüşüm oranlarını yaklaşık %7 düşürüyor. Walmart ise sayfa yükleme süresini 1 saniye kısalttığında gelirlerinin %2 arttığını açıklamıştır.

Bu rakamlar, büyük ölçekte çalışan şirketler için geçerli; ancak mantık her büyüklükteki e-ticaret sitesi için aynıdır. Ziyaretçi beklemeyi sevmez. Bekleme arttıkça hayal kırıklığı artar, çıkış oranı artar ve satışlar düşer.

Sayfa Hızının SEO'ya Etkisi

Hız optimizasyonu yalnızca dönüşüm değil, doğrudan SEO sıralamalarınızı da etkiler.

Google'ın Hız Sinyalleri

2010'dan beri resmi bir sıralama faktörü olan sayfa hızı, 2021'deki Page Experience güncellemesiyle daha da kritik hale geldi. Core Web Vitals üç metrik üzerinden ölçülen hız ve stabilite skorları, Google sıralamalarında doğrudan etkilidir:

• LCP (Largest Contentful Paint): Ana içeriğin yükleme süresi
• INP (Interaction to Next Paint): Etkileşim yanıt hızı
• CLS (Cumulative Layout Shift): Görsel stabilite

Bu metriklerin detayları için Core Web Vitals rehberimize göz atabilirsiniz.

Mobil Hız: Daha da Kritik

Türkiye'de mobil internet kullanımı masaüstüne göre çok daha yaygındır. Mobil ağlar masaüstü bağlantılara kıyasla genellikle daha yavaş olduğundan, mobil hız optimizasyonu ekstra önem taşır. Google'ın mobile-first indexing yaklaşımı nedeniyle de mobil hız, sıralama kararlarında belirleyici rol oynar.

E-Ticaret Sitelerinin Hız Profili: Neyi Yavaşlatıyor?

Tipik bir e-ticaret sitesinin performans sorunları belli kategorilere düşer:

1. Görsel Optimizasyonu: En Büyük Kazanım

E-ticaret siteleri doğası gereği görsel yoğundur. Ürün görselleri, banner'lar, lifestyle fotoğrafları... Bunların tümü optimize edilmediğinde sayfayı saniyeler içinde yavaşlatır.

Doğru Format Seçimi

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" alt="Ürün Açıklaması" width="800" height="600">
</picture>

Görsel Boyutlandırma

Görsel, gösterildiği boyuttan daha büyük olmamalıdır. 300×300px'lik bir thumbnail için 2000×2000px görsel yüklemek ciddi bant genişliği israfıdır.

<img
  src="urun-800.webp"
  srcset="urun-400.webp 400w, urun-800.webp 800w, urun-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  alt="Nike Air Max 270"
  width="800"
  height="600"
>

Görsel Sıkıştırma Araçları

Next.js Image Component

Next.js kullanıyorsanız, <Image> component'i otomatik olarak şunları yapar:

• WebP dönüşümü
• Responsive srcset üretimi
• Lazy loading
• Boyut rezervasyonu (CLS önleme)
• Priority loading seçeneği

import Image from 'next/image'

// Ürün detay sayfası - öncelikli yükleme
<Image
  src="/images/urun-ana.jpg"
  alt="Nike Air Max 270 Erkek Spor Ayakkabı"
  width={800}
  height={600}
  priority
  quality={85}
/>

// Ürün listesi - lazy loading
<Image
  src="/images/urun-thumbnail.jpg"
  alt="Nike Air Max 270 Thumbnail"
  width={300}
  height={300}
  loading="lazy"
/>

2. Lazy Loading: Görünmeyeni Yükleme

Lazy loading, kullanıcı o noktaya kaydırana kadar görsel veya içerik yüklememeyi ifade eder. Bu, özellikle uzun ürün listesi sayfaları için büyük performans kazanımı sağlar.

Yerel Lazy Loading

Modern tarayıcılar için ekstra JavaScript gerektirmez:

<img src="urun.webp" alt="Ürün" loading="lazy" width="300" height="300">

Intersection Observer API ile Gelişmiş Lazy Loading

// İlk 4 ürün görseli hemen yükleniyor, gerisine lazy loading
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' }); // 200px önceden yüklemeye başla

images.forEach(img => observer.observe(img));

3. CDN: Coğrafi Hız Avantajı

CDN (Content Delivery Network), içeriklerinizi dünyanın veya Türkiye'nin farklı lokasyonlarındaki sunucularda depolayarak kullanıcılara en yakın sunucudan sunar.

Türkiye'de CDN Etkisi

İstanbul'da bir kullanıcı, Ankara'daki bir sunucudan içerik alıyorsa gecikme yaşar. CDN bu mesafeyi ortadan kaldırır.

• Statik varlıklar (görseller, CSS, JS) çok daha hızlı yüklenir
• Sunucu yükü azalır
• DDoS koruması
• SSL/TLS işlenmesi
• Otomatik sıkıştırma (gzip/brotli)

4. JavaScript Optimizasyonu

Aşırı ve optimize edilmemiş JavaScript, sayfaları birkaç kat yavaşlatabilir.

Code Splitting

Tüm JavaScript'i tek dosyada yüklemeyin. Yalnızca o sayfanın ihtiyaç duyduğu kodu yükleyin:

// Next.js'de dinamik import (otomatik code splitting)
import dynamic from 'next/dynamic'

const UrunYorumlari = dynamic(() => import('./UrunYorumlari'), {
  loading: () => <YukleniyorSkeleti />,
})

Tree Shaking

Kullanılmayan kod parçacıklarını build sürecinde ortadan kaldırın. Modern bundler'lar (Webpack, Vite, Turbopack) bunu otomatik yapar; ancak doğru yapılandırma gerektirir.

Script Yükleme Stratejileri

<!-- Kritik script: Senkron yükle -->
<script src="kritik.js"></script>

<!-- Kritik olmayan script: Defer ile yükle (DOM hazır olduktan sonra çalışır) -->
<script src="analytics.js" defer></script>

<!-- Bağımsız script: Async (DOM'u beklemeden yükle) -->
<script src="chat-widget.js" async></script>

5. Sunucu Tarafı Optimizasyonu

TTFB (Time to First Byte) Azaltma

TTFB, tarayıcının sunucuya istek gönderip ilk byte'ı alması arasındaki süredir. Hedef: 200ms altı.

• Yavaş veritabanı sorguları
• Sunucu tarafında ağır hesaplamalar
• Sunucu kaynağının yetersizliği
• Büyük sayfalar için sunucu tarafı render süreleri

• Redis veya Memcached ile veritabanı sonuçlarını önbelleğe alın
• Statik sayfa üretimi (SSG) veya ISR (Incremental Static Regeneration) kullanın
• Sunucu kapasitesini artırın

Next.js ile Rendering Stratejisi

• Ürün sayfaları: ISR (fiyat/stok değişirse yeniden oluştur)
• Kategori sayfaları: ISR
• Ana sayfa: ISR
• Sepet/checkout: SSR veya CSR
• Kullanıcı hesabı: CSR

6. Caching Stratejisi

İyi bir caching stratejisi, sunucu yükünü dramatik biçimde azaltır ve kullanıcılara daha hızlı deneyim sunar.

Tarayıcı Cache

## Nginx yapılandırması örneği
location ~* \.(jpg|jpeg|png|gif|webp|svg|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ~* \.(css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Sunucu Tarafı Cache

Ürün listeleme sayfaları için cache süresi 5-15 dakika yeterlidir (fiyat ve stok çok sık değişmiyorsa). Ürün detay sayfaları için ISR ile saatlik veya günlük yenileme yapılabilir.

7. Web Fontları Optimizasyonu

Özel fontlar yükleme süresine ek yük getirir. Özellikle Google Fonts ve özel font dosyaları dikkatli yönetilmezse CLS ve LCP sorunlarına yol açar.

/* font-display: swap ile FOUT'u kabul edin, FOIT'tan kaçının */
@font-face {
  font-family: 'SiteFont';
  src: url('/fonts/sitefont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Hız Testleri ve Hedef Skorlar

Aşağıdaki araçlarla sitenizi test edin ve hedef skorları takip edin:

• Mobil Performance: 70+ (ideal: 85+)
• Masaüstü Performance: 90+
• LCP: < 2.5s
• INP: < 200ms
• CLS: < 0.1

Türkiye'de Sık Yapılan Hata: Görseller ve Barındırma

Türkiye'deki e-ticaret sitelerinde en yaygın hız sorunları:

1. Yüksek çözünürlüklü ürün görseli yükleme: 5MB+ ürün görselleri optimize edilmeden kullanılıyor
2. Paylaşımlı hosting kullanımı: Ucuz paylaşımlı sunucular yüksek trafikte çöküyor
3. CDN eksikliği: Türkiye'de birden fazla şehirde PoP'u olan CDN kullanılmıyor
4. Üçüncü taraf chatbot ve widget'lar: Birden fazla chat uygulaması aynı anda aktif
5. WordPress + çok sayıda eklenti: Her eklenti ek yük getiriyor

Sonuç: Hız Bir Tercih Değil, Zorunluluktur

E-ticarette hız optimizasyonu artık "fark yaratan ekstra" değil, temel bir gereklilik. Google'ın hızı sıralama faktörü olarak kullanması ve kullanıcıların sabırsızlaşan beklentileri, yavaş siteleri ciddiye alınmaz kılıyor.

Her saniye önemlidir. Her kilobyte önemlidir. Her optimizasyon, uzun vadede dönüşüm oranı ve gelir üzerinde birleşik bir etki yaratır.

Daha fazla bilgi için:

• Core Web Vitals Rehberi
• E-Ticaret Teknik SEO Rehberi
• SEO Sözlüğü