Shopify uygulamaları hız puanımı ne kadar düşürüyor?

Uygulamaya bağlı. Harici API çağrısı yapanlar 5-20 puan düşürebiliyor. Metafield tabanlı çalışanlar çok daha az etkili. Her uygulamayı tek tek test edin.

Shopify Tips & Tutorials

Shopify mağaza hızını artırma: uygulama performansı

Q: Shopify hız puanım düşük, ne yapmalıyım?

Önce ürün sayfanızı PageSpeed Insights'ta test edin. Genellikle en büyük etkiyi resim optimizasyonu ve kullanılmayan uygulama temizliği sağlıyor.

Q: Metafield tabanlı yükleme neden daha hızlı?

Metafield'lar sayfanın HTML'siyle birlikte render ediliyor. Tarayıcı sayfayı aldığında veri zaten orada. Harici sunucuya bağlanma ve yanıt bekleme süresi yok.

April 1, 2026

Mağazanız her yavaş yüklendiğinde para kaybediyorsunuz. Google’ın verisine göre sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında terk oranı %32 artıyor. 5 saniyeye çıktığında %90’a fırlıyor.

Hızlı bir mağaza Google’da daha üst sıralarda çıkıyor, daha fazla ziyaretçiyi müşteriye dönüştürüyor ve daha az kişiyi hayal kırıklığına uğratıyor. Bu yazıda Shopify mağazanızı hızlandırmak için hemen uygulayabileceğiniz 10 pratik ipucunu anlatıyorum. Özellikle uygulamaların sayfa hızına etkisine odaklanıyorum.

Bu yazıda

Mevcut hızınızı ölçün
Core Web Vitals hedefleri
1-3: Resim optimizasyonu
4-6: Uygulama yığını temizliği
7-8: Tema ve kod
9-10: İleri seviye iyileştirmeler
Rubik Variant Images’ın performans yaklaşımı
Video
Sık sorulan sorular
İlgili yazılar

Mevcut hızınızı ölçün

Bir şeyi düzeltmeden önce mevcut durumu ölçün. Karşılaştıracak rakamlarınız olsun.

Google PageSpeed Insights (pagespeed.web.dev): Ana sayfa ve bir ürün sayfası URL’si girin. Performans puanını, LCP, INP ve CLS değerlerini not edin.
Shopify hız raporu: Admin > Online Store > Themes > Speed. Puanınızı benzer mağazalarla karşılaştırıyor.
Chrome DevTools: Ürün sayfasını açın, F12 > Network sekmesi > yenileyin. Toplam istek sayısını ve transfer boyutunu kontrol edin.

Ana sayfa değil, ürün sayfasını test edin. Ürün sayfalarında daha fazla resim, daha fazla uygulama kodu ve daha fazla JavaScript var. Neredeyse her zaman daha yavaşlar.

Core Web Vitals hedefleri

Google sayfa deneyimini değerlendirmek için üç metrik kullanıyor. Üçü de arama sıralamanızı etkiliyor.

Metrik	İyi	Geliştir	Kötü	Ne ölçüyor
LCP (Largest Contentful Paint)	2.5s altı	2.5-4s	4s üstü	Ana resim/içeriğin yüklenme hızı
INP (Interaction to Next Paint)	200ms altı	200-500ms	500ms üstü	Tıklama/dokunmaya tepki hızı
CLS (Cumulative Layout Shift)	0.1 altı	0.1-0.25	0.25 üstü	Yükleme sırasında sayfa kayması

Gerçek ziyaretçilerinizin %75’inin üç metrikte de “İyi” seviyesinde olması gerekiyor. Tek bir yavaş sayfa sitenizin genel puanını düşürebilir.

Resim optimizasyonu (1-3)

1. Resimleri yüklemeden önce sıkıştırın

Shopify otomatik sıkıştırma ve responsive boyutlandırma yapıyor ama doğru boyutlu dosyalarla başladığınızda en iyi sonucu alıyorsunuz. Maksimum 2048x2048px’de yükleyin. Ürün fotoğrafları için JPEG veya WebP kullanın (şeffaflık gerekmiyorsa PNG’den kaçının). 5MB’lık bir PNG genellikle kalite kaybı olmadan 200KB’lık bir WebP’ye dönüştürülebilir.

Araçlar: TinyPNG, Squoosh (ücretsiz), ShortPixel (toplu). CS Smart Bulk Image Upload kullanıyorsanız 20MB’ı aşan resimleri yüklemeden önce otomatik yeniden boyutlandırıyor.

2. Ürün başına resim sayısını azaltın

Ürün sayfasındaki her resim bir HTTP isteği. 6 renkli ve renk başına 5 fotoğraflı bir ürün 30 resmi yüklüyor, müşteri sadece 5’ini görmek istese bile.

Çözüm: varyant başına resim filtreleme. Rubik Variant Images seçilen varyantın resimlerini gösterip diğerlerini gizliyor. Ama daha önemlisi, Shopify’ın lazy loading mekanizması görünmeyen resimleri yüklemiyor. Sonuç: sayfa başlangıçta daha az veri indiriyor.

3. Doğru resim formatını kullanın

Shopify CDN otomatik olarak WebP sunuyor ama yüklediğiniz orijinal dosya da önemli. PNG yerine JPEG yüklerseniz Shopify daha iyi optimize edebiliyor. Şeffaf arka plan gereken ürünler dışında PNG kullanmayın.

Uygulama yığını temizliği (4-6)

4. Kullanmadığınız uygulamaları kaldırın

Yüklü ama kullanmadığınız uygulamalar hala ürün sayfanıza JavaScript ve CSS enjekte edebilir. “Devre dışı” bile olsa temaya eklenen app embed kalıntıları kalabilir. Kullanmadığınız uygulamayı kaldırın, sonra tema düzenleyicisinde app embed’lerin temiz olduğunu kontrol edin.

5. Uygulama yükleme yöntemlerini anlayın

Her Shopify uygulaması farklı şekilde veri yüklüyor. Bazıları sayfa yüklenirken harici sunucuya API çağrısı yapıyor. Müşterinin tarayıcısı sunucuya istek gönderiyor, yanıt bekliyor, sonra içeriği render ediyor. Bu süreç 200-500ms arasında ek gecikme yaratabiliyor.

Daha iyi yaklaşım: verileri Shopify metafield’larında saklamak. Veriler sayfayla birlikte geliyor, ekstra istek yok. Rubik Variant Images bu yöntemi kullanıyor. Metafield tabanlı yükleme, harici API çağrısı yok.

6. Uygulama etkisini test edin

Bir uygulamanın sayfa hızınıza etkisini ölçmek basit: uygulamanın app embed’ini geçici olarak kapatın, PageSpeed Insights’ta test edin, sonra açıp tekrar test edin. Farkı karşılaştırın.

Bazı uygulamalar 0-5 puan düşürüyor. Bazıları 15-20 puan. Etkisi büyük olan uygulamalarda alternatif arayın. Swatch uygulamalarının hız etkisi yazımızda farklı uygulamaların performans karşılaştırmasını yapıyoruz.

Tema ve kod (7-8)

7. Hafif bir tema seçin

Temaların performansı çok farklı. Shopify’ın ücretsiz temaları (Dawn, Horizon, Sense) genellikle en hızlılar çünkü Shopify’ın kendi ekibi tarafından optimize edilmiş. Premium temalar daha fazla özellik sunuyor ama bazıları çok fazla JavaScript yüklüyor.

Tema seçerken demo mağazasını PageSpeed Insights’ta test edin. Temanın kendisi 50 puan alıyorsa uygulamalar ve ürünler eklendikten sonra daha da düşecek.

8. Üçüncü parti script’leri geciktirin

Analitik, canlı sohbet, sosyal medya pikselleri gibi üçüncü parti script’ler sayfa yükleme sırasında çalışıyor ve ana içeriği yavaşlatıyor. Bunları defer veya async ile geciktirin. Kritik olmayan script’ler sayfanın ana içeriği yüklendikten sonra çalışabilir.

Shopify’ın yerleşik reklam etiketleri (Google Analytics, Facebook Pixel) zaten optimize edilmiş durumda. Ama temanıza veya uygulamalar aracılığıyla eklenen ekstra script’ler genellikle optimize edilmemiş oluyor.

İleri seviye iyileştirmeler (9-10)

9. Critical CSS ve lazy loading

Ekranın üst kısmında (above the fold) görünen içerik için gereken CSS’i inline olarak sayfa başına ekleyin. Geri kalanını lazy load edin. Bu LCP’yi doğrudan iyileştiriyor.

Resimler için native lazy loading (loading="lazy") kullanın. Shopify’ın yeni temaları bunu varsayılan olarak yapıyor ama özel bölümler eklediğinizde kontrol edin.

10. Font sayısını sınırlayın

Her özel font bir ek HTTP isteği ve indirme. Sistemde mevcut fontları (system fonts) tercih edin. Özel font kullanmanız gerekiyorsa en fazla 2 font ailesi, 3-4 ağırlık ile sınırlayın. font-display: swap kullanarak yazıların font yüklenmeden önce de görünmesini sağlayın.

Rubik Variant Images’ın performans yaklaşımı

Variant image uygulamalarının çoğu harici sunucuya API çağrısı yapıyor. Sayfa yüklendiğinde tarayıcı uygulamanın sunucusuna bağlanıyor, varyant-resim eşleşme verisini istiyor ve yanıt gelince galeriyi güncelliyor. Bu süreç hem ek ağ gecikmesi yaratıyor hem de sunucu yanıt süresiyle doğrudan bağlantılı.

Rubik farklı çalışıyor. Tüm varyant resim verileri Shopify metafield’larında saklanıyor. Metafield’lar sayfanın Liquid şablonuyla birlikte render ediliyor. Tarayıcı sayfayı aldığında veri zaten orada. Harici sunucu yok, ek istek yok, bekleme yok.

Pratik etkisi: uygulamanın sunucusu çökse bile mağazanızda hiçbir şey bozulmuyor. Veriler zaten Shopify tarafında. Bu hem hız hem güvenilirlik açısından büyük avantaj.

Swatch’lar da Shadow DOM içinde izole render ediliyor. Temanızın CSS’iyle çakışma olmadığı için gereksiz CSS override’lar, !important kuralları veya spesifiklik savaşları yaşanmıyor. Daha az CSS, daha az hesaplama, daha hızlı render.

Video

Rubik Variant Images’ın ürün sayfasında nasıl çalıştığını görmek için:

Rubik Variant Images’ı ücretsiz deneyin

Sık sorulan sorular

Shopify hız puanım düşük, ne yapmalıyım?

Önce ürün sayfanızı PageSpeed Insights’ta test edin. En büyük sorunları görün: büyük resimler mi, çok fazla uygulama mı, ağır tema mı? Genellikle en büyük etkiyi resim optimizasyonu ve kullanılmayan uygulama temizliği sağlıyor.

Uygulamalar hız puanımı ne kadar düşürüyor?

Uygulamaya bağlı. Harici API çağrısı yapan uygulamalar 5-20 puan düşürebiliyor. Metafield tabanlı çalışan uygulamalar (Rubik gibi) çok daha az etkili. Her uygulamayı tek tek test edin: app embed kapatın, ölçün, açın, ölçün.

Metafield tabanlı yükleme neden daha hızlı?

Metafield’lar Shopify’ın kendi altyapısında saklanıyor ve sayfanın HTML’siyle birlikte render ediliyor. Tarayıcı sayfayı aldığında veri zaten orada. Harici sunucuya bağlanma, istek gönderme ve yanıt bekleme süresi yok.

Core Web Vitals neden önemli?

Google arama sıralamasında sayfa deneyimini bir faktör olarak kullanıyor. LCP, INP ve CLS üç temel metrik. Kötü değerler sıralamanızı düşürüyor, iyi değerler yükseltiyor. Ayrıca hızlı sayfalar daha yüksek dönüşüm oranı sağlıyor.

Hangi Shopify temaları en hızlı?

Shopify’ın ücretsiz temaları (Dawn, Horizon, Sense) genellikle en hızlılar. Premium temalarda Prestige, Focal ve Impulse iyi performans gösteriyor. Her zaman temanın demo mağazasını PageSpeed Insights’ta test edin.