Hızın satışla ilişkisi tartışmalı değil: yavaş sayfa, henüz ürünü görmeden kaybedilen müşteri demektir. Mobil kullanıcıların sabrı özellikle düşüktür. Bu rehber, Shopify’da gerçekten ölçülebilir fark yaratan teknik müdahaleleri, en yüksek etkiden en düşüğe doğru sıralıyor.
Önce ölçün: doğru araçlar ve doğru metrikler
Optimizasyona başlamadan önce mevcut durumu kaydedin. Aksi halde neyin işe yaradığını bilemezsiniz.
| Metrik | Ne ölçer? | Hedef |
|---|---|---|
| LCP | En büyük içeriğin görünme süresi | 2,5 sn altı |
| INP | Etkileşime yanıt süresi | 200 ms altı |
| CLS | Görsel kayma miktarı | 0,1 altı |
| Toplam sayfa ağırlığı | İndirilen veri | Mümkün olduğunca düşük |
Ölçümü mobil modda ve anasayfa dışında ürün ile koleksiyon sayfalarında da yapın. Çoğu mağaza anasayfayı optimize eder, oysa reklamdan gelen trafiğin çoğu doğrudan ürün sayfasına düşer.
Önemli uyarı: Shopify’ın kendi panelindeki hız puanı ile PageSpeed sonuçları farklı yöntemlerle hesaplanır. Puanı kovalamak yerine gerçek kullanıcı verisine (Core Web Vitals alan verisi) bakın.
1. Görseller: en büyük kazanç burada
Tipik bir Shopify mağazasında sayfa ağırlığının büyük bölümü görsellerdir. Yapılması gerekenler:
- Doğru boyutta yükleyin: Ekranda 800 piksel genişlikte gösterilecek görseli 3000 piksel yüklemeyin
- Modern format kullanın: Shopify görselleri otomatik olarak WebP’ye dönüştürebilir; kaynağı temiz yüklemek yeterlidir
- Sıkıştırın: Yüklemeden önce kalite kaybı olmadan sıkıştırma yapın; çoğu ürün fotoğrafı 150–250 KB altına inebilir
- Tembel yükleme (lazy load): Ekranın altındaki görseller ilk yüklemede indirilmemeli
- İlk ekrandaki görseli öncelikleyin: Hero görselinde lazy load kullanmayın — LCP’yi bozar
- Boyut niteliklerini verin: Genişlik/yükseklik tanımlı olmayan görseller CLS (sayfa kayması) yaratır
- Slider kullanmayın: 5 görsellik anasayfa slider’ı, 5 kat ağırlık ve düşük dönüşüm demektir
2. Uygulama temizliği
Kurulan her uygulama sayfaya kendi JavaScript ve CSS dosyasını ekler. Üstelik uygulamayı silseniz bile tema koduna eklediği kod parçaları kalabilir.
Uygulanacak yöntem:
- Yüklü uygulamaları listeleyin ve her biri için “son 30 günde bana ne kazandırdı?” sorusunu sorun
- Kullanılmayanları kaldırın
- Aynı işi yapan uygulamaları tekilleştirin (iki ayrı popup uygulaması gibi)
- Kaldırdıktan sonra tema kodunda artık kalan betikleri temizleyin
- Yalnızca belirli sayfada gereken uygulamanın betiğini tüm sitede yüklemekten kaçının
Beş uygulamayı kaldırmak, çoğu mağazada tema optimizasyonundan daha büyük kazanç sağlar. İşin kod tarafı için hız optimizasyonu hizmetimize bakabilirsiniz.
3. Tema ve kod optimizasyonu
- Güncel bir tema kullanın: Yeni nesil Shopify temaları eski nesle göre yapısal olarak daha hafiftir
- Kullanılmayan bölümleri kaldırın: Tema ayarlarında gizlenen bölüm hâlâ kod yükleyebilir
- jQuery bağımlılığını azaltın: Eski temalarda ağır kütüphaneler taşınır
- CSS/JS’i erteleyin: Kritik olmayan betikleri
deferile yükleyin - Çoklu tema düzenlemelerini merkezileştirin: Farklı geliştiricilerin bıraktığı üst üste kod katmanları en sık görülen yavaşlama nedenidir
Tema kodu üzerinde çalışırken mutlaka tema kopyası üzerinde ilerleyin ve yayına almadan önce mobilde tam bir satın alma testi yapın.
4. Font ve üçüncü taraf betikleri
Yazı tipleri sessiz bir yavaşlatıcıdır. Üç kural:
- En fazla 2 font ailesi, her birinden 2 kalınlık kullanın
- Shopify’ın sunduğu sistem/yerleşik fontları tercih edin — dış kaynaktan font çekmek ek bağlantı maliyeti yaratır
font-display: swapile metnin font yüklenmeden görünmesini sağlayın
Üçüncü taraf betikleri (canlı destek, ısı haritası, çoklu piksel, yorum widget’ları) ayrı bir yük katmanıdır. Her birinin gerçekten gerekli olup olmadığını sorgulayın; ölçüm araçlarını tek bir etiket yöneticisi altında toplayın.
5. Anasayfa kurgusu
Anasayfaya her şeyi koyma eğilimi hıza en çok zarar veren alışkanlıktır. Sağlıklı anasayfa: 1 hero görseli, net bir değer önerisi, 6–8 öne çıkan ürün, güven unsurları ve kategorilere yönlendirme. Otomatik oynayan video, dev slider ve 40 ürünlük ızgara hem yavaşlatır hem karar felci yaratır.
Hız iyileştirmesinin dönüşüme dönüşmesi için sayfa kurgusunun da doğru olması gerekir — bu ikisini birlikte ele almak gerekir: dönüşüm optimizasyonu rehberi.
Hız hakkında 4 yaygın yanlış inanış
- “100/100 puan almalıyım”: Hayır. Gerçek kullanıcı deneyimi puandan önemlidir; e-ticarette 100 puan pratik olarak ulaşılamazdır.
- “Hız uygulaması kurayım, halletsin”: Hız için kurulan uygulama da sayfaya kod ekler. Kök nedeni çözmez.
- “Sunucumu güçlendireyim”: Shopify barındırmayı kendisi yönetir; sunucu sizin kontrolünüzde değildir.
- “Tema değiştirsem yeter”: Yeni tema iyi bir başlangıçtır ama görsel ve uygulama yükü taşınırsa sonuç değişmez.
Mağazanızın hız denetimini yaptırmak ve somut bir iyileştirme planı almak için hız optimizasyonu hizmetimize göz atın.
Sık Sorulan Sorular
Shopify mağazam neden yavaş?
En yaygın üç neden: optimize edilmemiş büyük görseller, gereğinden fazla kurulu uygulama ve ağır/çok katmanlı tema kodu. Sunucu Shopify tarafından yönetildiği için barındırma kaynaklı değildir.
Hız uygulaması kurmak işe yarar mı?
Sınırlı. Hız için kurulan uygulama da sayfaya kod ekler ve kök nedeni çözmez. Kalıcı çözüm görsel, uygulama ve tema optimizasyonudur.
PageSpeed puanı 100 olmalı mı?
Hayır. E-ticarette 100 puan pratik olarak ulaşılamaz. Gerçek kullanıcı verisine dayanan Core Web Vitals metriklerine (LCP, INP, CLS) bakmak daha doğrudur.
Hangi hız metrikleri hedeflenmeli?
LCP 2,5 saniyenin altı, INP 200 milisaniyenin altı ve CLS 0,1'in altı yaygın kabul gören hedeflerdir.
Shopify Mağazanızı Bir Üst Seviyeye Taşımaya Hazır mısınız?
15 dakikalık ücretsiz keşif görüşmesinde mağazanızı analiz edelim, size özel yol haritasını çıkaralım.