E-Ticaret Sitelerinde Sayfa Hızı Optimizasyonu

Siteniz yavaş açılıyorsa satış kaybediyorsunuz. Kulağa basit geliyor ama e-ticaret site hızı gerçekten bu kadar belirleyici. Google'ın kendi verisine göre sayfa 1 saniye yerine 3 saniyede açılırsa ziyaretçilerin %32'si geri dönüyor. Deloitte'un bulgusu daha da çarpıcı: 0,1 saniyelik bir hız farkı dönüşüm oranını %8,4 değiştiriyor. Bu rehberde site hızı optimizasyonu için görselden CDN'e, lazy loading'den kod temizliğine kadar ne varsa bir araya getirdik.

Daha önce CDN nedir yazımızda içerik dağıtım ağlarını anlattık. CDN ve SEO ilişkisi rehberimizde de sıralama etkisine baktık. Ama birçok müşterimiz "tamam CDN anladım, peki geri kalan her şeyi nasıl yapacağım?" diye soruyor. İşte bu yazı tam o soruya cevap.

Site Hızı Neden Önemli?

Google 2021'den beri Core Web Vitals dediği üç metriği resmi sıralama faktörü olarak kullanıyor: LCP (Largest Contentful Paint), INP (Interaction to Next Paint) ve CLS (Cumulative Layout Shift). Bu üçünden biri kötüyse sıralamanız düşüyor, nokta. On-page SEO'nuz kusursuz olsa bile yavaş bir site o çalışmayı boşa çıkarır.

Bir de şöyle düşünün: müşteriniz sitenizde onlarca ürünü gezip filtre uyguluyor, sepete ekliyor, karşılaştırıyor. Her sayfada yarım saniyelik gecikme bile toplam deneyimi mahvediyor. Ve rakibiniz hızlıysa? Google aynı anahtar kelime için onu öne çıkarıyor. Biz bunu danışanlarımızda defalarca gördük. İçerik kalitesi aynı, SEO çalışması aynı ama hızlı olan kazanıyor.

Hız Ölçüm Araçları

Bir şeyi optimize etmeden önce ölçmeniz lazım. Herkes "sitem yavaş" diyor ama asıl soru şu: nesi yavaş? Neresi darboğaz? Bu soruların cevabı ancak doğru araçlarla çıkıyor. Birkaç farklı aracı birlikte kullanmak, e-ticaret performansınızın tam resmini çizer.

Google PageSpeed Insights: Google'ın kendi aracı olduğu için ilk bakacağınız yer burası olmalı. Lab data (kontrollü ortam) ve field data (CrUX, yani gerçek kullanıcı verileri) ikisini birden gösteriyor. 90 üstü iyi, 50-89 orta, 50 altı sorunlu. E-ticaret siteleri için en dikkat etmeniz gereken metrik LCP. Yani sayfadaki en büyük görselin veya metin bloğunun ne kadar sürede render edildiği.

GTmetrix: "Neden yavaş" sorusuna en iyi cevabı veren araç. Waterfall analizi ile hangi dosyanın ne kadar sürede yüklendiğini grafik olarak gösteriyor. Farklı lokasyonlardan test edebiliyorsunuz. Biz bir darboğaz arıyorsak genelde ilk GTmetrix'e bakıyoruz.

WebPageTest: İleri seviye analiz için. Farklı tarayıcılar, cihazlar ve bağlantı hızlarıyla test edebiliyorsunuz. Filmstrip görünümü var, sayfanın milisaniye milisaniye nasıl yüklendiğini izliyorsunuz. Teknik ekiplerin favorisi.

Google Search Console: Gerçek kullanıcı verilerini görmek istiyorsanız burası. Core Web Vitals raporu hangi sayfalarınızın "iyi", hangilerinin "kötü" olduğunu listeliyor. Optimizasyon yapıp sonuçların Google'a yansımasını bekliyorsanız, genellikle 28 gün sürüyor. Sabırlı olun.

Chrome DevTools Lighthouse: F12'ye basıp hemen çalıştırabilirsiniz. Geliştirme sırasında her değişiklikten sonra hızlı kontrol için birebir. Lab ortamında çalıştığı için gerçek kullanıcı verisinden sapma gösterebilir ama "bu değişiklik hızı artırdı mı?" sorusuna anında cevap verir.

Biz nasıl yapıyoruz? PageSpeed Insights ile genel durumu görüyoruz, GTmetrix ile darboğazı tespit ediyoruz, Search Console ile uzun vadede takip ediyoruz. Bu üçlü kombinasyon yeterli.

Görsel Optimizasyonu

Bir e-ticaret sayfasının ağırlığının %50-70'i görsellerden geliyor. Yüzlerce ürün fotoğrafı, kategori banner'ları, slider görselleri... Tek bir sayfa 5-10 MB'a çıkabiliyor. Görsel optimizasyonu bu yüzden en büyük hız kazanımını sağlayan alan.

Format seçimi her şeyi değiştirir. AVIF şu an en verimli format, JPEG'e kıyasla dosya boyutunu yarıya indiriyor. WebP de JPEG'e göre %25-35 daha küçük. Tarayıcı uyumu konusunda WebP artık neredeyse evrensel (%97+), AVIF de %92+ desteğe ulaştı. Bizim önerimiz şu: AVIF'i birincil yapın, tarayıcı desteklemezse WebP'ye düşsün, en kötü ihtimalde JPEG. HTML'de picture elementi ile bu zinciri kurarsınız.

Sıkıştırmayı abartmayın ama ihmal de etmeyin. Ürün görselleri için %75-85 kalite gayet yeterli. İnsan gözü farkı algılamıyor ama dosya boyutu %40-60 düşüyor. Banner ve dekoratif görsellerde %60-70 kalite bile kabul edilebilir. Sharp, Squoosh, ImageOptim gibi araçlarla toplu sıkıştırma yapabilirsiniz.

Responsive görseller (srcset) zorunluluk. Mobilde 400px'lik bir alana 1920px görsel yüklemek düpedüz israf. srcset ve sizes attribute'larıyla tarayıcıya "ekrana göre doğru boyutu indir" diyorsunuz. Masaüstünde 800px, tablette 600px, mobilde 400px. Bu kadar.

width/height belirtin, CLS'yi düzeltin. Görsele width ve height verdiğinizde tarayıcı indirmeden önce alanı ayırıyor, sayfa kayması (layout shift) olmuyor. Kulağa basit geliyor çünkü basit. Ama ürün listelerinde görseller geç yüklenince sayfanın zıplaması çok yaygın bir sorun ve ziyaretçileri kaçırıyor.

CDN Kullanımı

Kısaca: CDN (Content Delivery Network) dosyalarınızı dünya genelindeki sunuculara dağıtıyor ve kullanıcıya en yakın noktadan sunuyor. İstanbul'daki bir ziyaretçi ABD'deki ana sunucunuza gitmek yerine İstanbul'daki CDN noktasından alıyor. Gecikme 200-300 ms'den 5-15 ms'ye iniyor. Fark inanılmaz.

E-ticarette CDN'in etkisi özellikle görsel yoğun sayfalarda ortaya çıkıyor. Yüzlerce ürün görseli, CSS, JS, font dosyaları... Bunlar CDN üzerinden sunulduğunda sayfa yüklenme süresi %40-60 iyileşiyor. CDN'siz 4-6 saniyede açılan ürün sayfası, CDN ile 1-2 saniyeye düşüyor. CDN'in SEO etkisini ayrı bir rehberde detaylıca anlattık.

Cache politikalarını doğru kurun. Statik dosyalara (görseller, CSS, JS) uzun TTL (1 ay+) verin, sık değişen içeriklere kısa TTL (1 saat - 1 gün). Cache-busting (dosya adına hash ekleme) ile güncellemeler anında yansınsın. Yanlış cache yapılandırması müşteriye eski görsel göstermek ya da her ziyarette dosyayı sıfırdan indirtmek gibi sorunlara yol açıyor. İkisi de istemeyeceğiniz şeyler.

Güzel bir bonus daha: çoğu CDN otomatik görsel optimizasyonu da sunuyor. Cloudflare Polish, AWS CloudFront Image Optimization gibi özelliklerle görseller CDN seviyesinde AVIF/WebP'ye dönüştürülüp sıkıştırılabiliyor. Origin sunucunuzda hiçbir şey değiştirmeden görsel optimizasyonu yapılmış oluyor. CDN depolama nedir rehberimizde dosya yönetimi ve kota detaylarını bulabilirsiniz.

Lazy Loading

Mantık basit: sayfadaki her şeyi baştan yüklememek. Kullanıcı aşağı kaydırdıkça ihtiyaç olan görselleri yüklemek. 50 ürünlü bir kategori sayfası düşünün. Lazy loading yoksa tarayıcı 50 görseli aynı anda indirmeye çalışıyor. Lazy loading ile sadece ekranda görünen 6-8 tanesini indiriyor, gerisini kullanıcı scroll ettikçe yüklüyor.

Uygulaması da çok kolay. img etiketine loading="lazy" yazmak yeterli. Ek JavaScript kütüphanesi falan gerekmiyor, tüm modern tarayıcılar bunu native destekliyor.

Ama bir hata yapmayın: above-the-fold görsellere lazy loading koymayın. Sayfanın üst kısmındaki hero banner, ilk ürün görselleri, logo bunların hemen yüklenmesi gerekiyor. Bunları lazy yaparsanız LCP metriğiniz kötüleşir ve Google'dan puan yersiniz. Bu görsellere loading="eager" koyun ya da hiçbir şey koymayın, varsayılan zaten eager.

Görseller dışında video ve iframe'leri de lazy yükleyin. YouTube embed'leri, harita iframe'leri, sosyal medya widget'ları sayfayı beklenmedik şekilde yavaşlatıyor. Ürün sayfalarındaki video tanıtımları lazy load ile sayfa açılış süresinden tamamen çıkarabilirsiniz.

Rakamlarla konuşalım: ortalama bir e-ticaret kategori sayfasında lazy loading sonrası ilk yüklenme boyutu %40-60 düşüyor, LCP 0,5-1 saniye iyileşiyor. Az iş, büyük kazanım.

Kod Optimizasyonu

Görseller ve CDN tamam. Ama bir de kodunuz var. Optimize edilmemiş bir e-ticaret sitesinde 1-3 MB JavaScript ve 200-500 KB CSS yüklenmesi çok yaygın. Bu dosyalar tarayıcının sayfayı render etmesini engelliyor, yani sayfa yüklenme süresini doğrudan etkiliyor.

CSS/JS minification: Boşluklar, yorumlar, gereksiz karakterler. Bunları kaldırınca dosya boyutu %20-30 küçülüyor. Webpack, Vite, Next.js gibi build araçları bunu otomatik yapıyor. T-Soft, İdeaSoft, Ticimax gibi altyapılar da kendi minification süreçlerini içerir ama tema özelleştirmelerinde eklediğiniz kodları ayrıca kontrol etmeniz şart.

Critical CSS: Sayfanın üst kısmını (above-the-fold) render etmek için gereken CSS'i HTML'e inline yapın, gerisini async yükleyin. Tarayıcı harici CSS dosyasını beklemeden üst kısmı göstermeye başlıyor. LCP'de 0,5-1 saniyelik iyileşme sağlayabiliyor. Penthouse ve Critical gibi araçlarla bu CSS'i otomatik çıkarabilirsiniz.

JavaScript defer/async: Analytics, chat widget, reklam pikselleri, heatmap araçları... Bunlar sayfayı inanılmaz yavaşlatıyor. Script etiketlerine defer ekleyerek HTML parse'ını engellemeyen yükleme yapın. Sayfa önce render olsun, bu scriptler sonra yüklensin. Ziyaretçi farkı bile anlamaz ama hız metrikleriniz tavan yapar.

Kullanılmayan kod (dead code): E-ticaret sitelerinde zamanla biriken eski kütüphaneler ve CSS kuralları bir yük haline geliyor. Chrome DevTools'taki Coverage aracıyla (F12 > More tools > Coverage) bakın, şaşıracaksınız. Genellikle CSS'in %40-60'ı, JS'in %30-50'si hiç kullanılmıyor. Bu ölü kodu temizlemek bedava hız kazanımı.

Font optimizasyonu: Tam font dosyası yerine subset yükleyin. Türkçe karakterli Latin Extended subset, tam dosyaya göre %60-80 daha küçük. font-display: swap ile font yüklenene kadar sistem fontunu gösterin, beyaz ekran olmasın. Format olarak WOFF2 kullanın, WOFF'tan %30 daha küçük.

HTTP/2 veya HTTP/3: Sunucunuzun bu protokolleri desteklediğinden emin olun. Multiplexing (tek bağlantıda çoklu dosya indirme), header sıkıştırma gibi özellikler sayfa yüklenme süresini ciddi kısaltıyor. CDN kullanıyorsanız zaten otomatik aktif geliyor, ekstra bir şey yapmanıza gerek yok.

Mobil Performans

Google mobile-first indexing kullanıyor. Yani sitenizi mobil versiyonuna göre değerlendiriyor. Türkiye'de e-ticaret trafiğinin %70'inden fazlası zaten mobil (DataReportal 2025). Yani mobil performans masaüstünden bile önemli. Biz müşterilerimizin çoğunda mobil metriklerden başlıyoruz.

Mobil ağlarda gecikme bambaşka bir dünya. 4G'de ortalama 50-100 ms, 3G'de 100-300 ms. Bu yüzden CDN'in mobilde etkisi masaüstünden çok daha büyük. Her dosya için ekstra round-trip mobilde katlanarak büyüyor. Dosya sayısını minimumda tutmak burada kritik.

srcset ile mobil boyut görselleri sunun. 1920px genişliğindeki bir ürün görselini 375px'lik telefon ekranına yüklemek hem bant genişliği hem bellek israfı. Mobil için 400-600px yeterli. Bu tek değişiklik bile mobil hızı gözle görülür şekilde artırıyor.

Touch alanlarını büyük tutun. Butonlar minimum 48x48 piksel olmalı. Küçük touch hedefler hem yanlışlıkla tıklamaya yol açıyor hem de gecikmeli tepki veriyor. Bu da INP (Interaction to Next Paint) metriğinizi bozuyor. Küçük detay ama Google'ın umursadığı bir detay.

Mobilde üçüncü parti scriptlere çok dikkat edin. Analytics, chat, reklam pikseli, heatmap... Masaüstünde tolere edebilirsiniz ama mobilde her ek script sayfa açılışını belirgin yavaşlatıyor. İhtiyacınız olmayan scriptleri mobilde yüklemeyin ya da kullanıcı etkileşimi sonrası yükleyin.

Test ederken Chrome DevTools'ta device emulation açın, throttling ile yavaş 3G simüle edin. Sadece Wi-Fi'da test etmek sizi yanıltır. Gerçek kullanıcınız metroda 4G ile geziniyor, ofisteki Wi-Fi'yla değil.

Sıkça Sorulan Sorular