Shopify mağazanızı hızlandırmanın 10 yolu
Sayfa yükleme süresi uzadıkça ziyaretçi kaybı artar. Google’ın verilerine göre sayfa yükleme süresi 1 saniyeden 3 saniyeye çıktığında terk oranı yüzde 32 artar. 5 saniyeye çıktığında bu oran yüzde 90’a ulaşır.
Hızlı bir Shopify mağazası Google’da daha iyi sıralama alır, daha fazla ziyaretçiyi müşteriye dönüştürür ve daha az şikayet alır. Bu yazıda mağazanızı hızlandırmak için uygulayabileceğiniz 10 somut adımı paylaşıyoruz.
Bu yazıda
- Mevcut hızınızı ölçün
- 1-3: Resim optimizasyonu
- 4-6: Uygulama yönetimi
- 7-8: Tema optimizasyonu
- 9-10: Diğer iyileştirmeler
- Sık sorulan sorular
Mevcut hızınızı ölçün
İyileştirmeye başlamadan önce nerede durduğunuzu bilin. Google PageSpeed Insights (pagespeed.web.dev) ile mağazanızın ana sayfasını, bir ürün sayfasını ve bir koleksiyon sayfasını test edin. Core Web Vitals puanlarını not alın.
Shopify yönetim panelinde de Online Store > Themes altında bir hız puanı gösterilir. Bu puan genel bir gösterge sunar ama detaylı analiz için PageSpeed Insights daha bilgilendiricidir. Her değişiklikten sonra tekrar ölçerek ilerlemenizi takip edin.
1-3: Resim optimizasyonu
1. Resimleri yüklemeden önce sıkıştırın
Shopify resimleri otomatik olarak WebP formatına dönüştürür. Ama bu orijinal dosya boyutunu küçültmez. 5MB’lık bir fotoğrafı olduğu gibi yüklemek yerine önce sıkıştırın. TinyPNG veya Squoosh gibi ücretsiz araçlar görsel kaliteyi koruyarak dosya boyutunu yüzde 50-80 azaltabilir.
2. Doğru resim boyutlarını kullanın
Ürün resimleriniz 4000×4000 piksel olmak zorunda değildir. Shopify’da ürün resimleri için 2048×2048 piksel genellikle yeterlidir. Daha büyük resimler gereksiz yere bant genişliği tüketir. Banner’lar için de gösterileceği alanın 2 katı genişlik yeterlidir (retina ekranlar için).
3. Lazy loading’in aktif olduğundan emin olun
Lazy loading, ekranda görünmeyen resimlerin sayfa yüklenirken indirilmemesini sağlar. Shopify’ın modern temaları bunu varsayılan olarak destekler. Ama eski temalar veya özel kodlar lazy loading’i bozabilir. Temanızın bu özelliği doğru uyguladığından emin olun.
Varyant resimleri açısından da bu konu önemlidir. Varyant başına birden fazla resim kullanıyorsanız, filtreleme sayesinde yalnızca seçili varyantın resimleri yüklenir. Bu da gereksiz resim indirmelerini azaltır.
4-6: Uygulama yönetimi
4. Kullanmadığınız uygulamaları kaldırın
Her Shopify uygulaması sayfaya JavaScript ve bazen CSS dosyaları ekler. Kullanmadığınız ama yüklü bıraktığınız uygulamalar hala bu dosyaları yükler. Uygulama listesini gözden geçirin ve aktif olarak kullanmadıklarınızı kaldırın.
Sadece devre dışı bırakmak yetmeyebilir. Bazı uygulamalar app embed kapatılsa bile tema koduna eklediği script’leri bırakabilir. Tamamen kaldırıp kontrol etmeniz önerilir.
5. Aynı işi yapan birden fazla uygulama kullanmayın
Bazen mağaza sahipleri farklı uygulamaları deneyip eskisini kaldırmayı unutur. İki swatch uygulaması, iki upsell uygulaması veya iki popup uygulaması aynı anda yüklü kalabilir. Bu hem hız kaybına hem de çakışmalara yol açar.
6. Uygulama etkisini ölçün
Her uygulamayı tek tek devre dışı bırakıp sayfa hızını ölçün. Hangi uygulamanın en çok yavaşlattığını bulun. Bazı uygulamalar çok büyük JavaScript dosyaları yükler. Bu uygulamaları alternatiflerle değiştirmek veya gereksizse kaldırmak faydalıdır.
Rubik Variant Images performans odaklı tasarlanmıştır. App embed teknolojisi kullanır ve tema dosyalarına ek kod yazmaz. Swatch’lar Shadow DOM içinde render edilir, bu da tema CSS’i ile çakışmayı önler.
7-8: Tema optimizasyonu
7. Güncel bir tema kullanın
Shopify’ın yeni nesil temaları (Online Store 2.0) eski temalara göre daha hızlıdır. Section’lar ve block’lar ile çalışır, sayfa oluşturma esnekliği sunar. Dawn, Horizon, Refresh gibi ücretsiz temalar performans açısından çok iyi optimize edilmiştir.
Eski bir tema kullanıyorsanız güncellemeyi veya yeni bir temaya geçmeyi düşünün. SSS yazımızda tema değişikliğinin varyant resim atamalarını etkilemediğini belirttik. Metafield’lerde saklanan atamalar tema değişikliğinden etkilenmez.
8. Kullanılmayan tema özelliklerini kapatın
Birçok tema animasyonlar, paralaks efektleri ve kaydırma efektleri içerir. Bu özellikler görsel olarak etkileyici olsa da sayfa performansını düşürebilir. Özellikle mobilde bu efektler sorun yaratabilir. Kullanmadığınız efektleri tema ayarlarından kapatın.
9-10: Diğer iyileştirmeler
9. Font sayısını azaltın
Her özel font dosyası ek bir HTTP isteği ve indirme süresi demektir. İki font ailesi (başlık + gövde) genellikle yeterlidir. Üçüncü veya dördüncü bir font eklenmesi performansı olumsuz etkiler. Sistem fontları (system fonts) en hızlı seçenektir.
10. Üçüncü taraf script’leri kontrol edin
Google Analytics, Facebook Pixel, Hotjar, canlı sohbet widget’ları ve reklam pikselleri sayfaya harici script’ler ekler. Her biri sayfa yükleme süresini artırır. Gerçekten ihtiyaç duyduklarınızı belirleyin ve gereksiz olanları kaldırın.
Google Tag Manager kullanarak tüm takip kodlarını tek bir yönetim noktasından kontrol edebilirsiniz. Bu script’lerin sayfa yüklendikten sonra (defer veya async) yüklenmesini sağlamak da performansı iyileştirir.
Sonuç
Shopify mağazanızın hızını artırmak tek seferlik bir iş değildir. Yeni uygulamalar ekledikçe, yeni resimler yükledikçe ve tema değişiklikleri yaptıkça düzenli olarak hız testleri yapın. Küçük iyileştirmeler biriktikçe büyük farklar yaratır.
Ürün sayfalarınızı hızlandırmanın bir yolu da galeri resim sayısını kontrol etmektir. Sadece seçili varyant resimlerini göstererek galerideki gereksiz resimleri gizleyebilir ve sayfa performansını iyileştirebilirsiniz.
Sık sorulan sorular
Shopify mağazamın hızını nasıl ölçerim?
Google PageSpeed Insights (pagespeed.web.dev) en güvenilir araçtır. Ana sayfa, ürün sayfası ve koleksiyon sayfası olmak üzere farklı sayfa türlerini test edin.
Shopify uygulamaları mağazayı yavaşlatır mı?
Evet, her uygulama sayfaya JavaScript ve CSS dosyaları ekler. Kullanmadığınız uygulamaları kaldırmak en kolay hız iyileştirmelerinden biridir.
Resim boyutu ne olmalı?
Ürün resimleri için 2048×2048 piksel yeterlidir. Daha büyük boyutlar gereksiz bant genişliği tüketir. Yüklemeden önce TinyPNG gibi araçlarla sıkıştırın.
Varyant resimleri sayfa hızını etkiler mi?
Çok sayıda resim yüklenmesi sayfayı yavaşlatabilir. Ama varyant başına resim filtreleme kullanırsanız yalnızca seçili varyantın resimleri gösterilir. Bu, gereksiz resim yüklemelerini azaltır.
En iyi Shopify teması hangisi?
Performans açısından Dawn, Horizon ve Refresh gibi Shopify’ın kendi ücretsiz temaları çok iyi optimize edilmiştir. Premium temalar arasında Impulse ve Impact da hız konusunda iyi performans gösterir.
Lazy loading nedir?
Ekranda görünmeyen resimlerin sayfa yüklenirken indirilmemesidir. Kullanıcı sayfayı kaydırdıkça resimler yüklenir. Modern Shopify temaları bunu varsayılan olarak destekler.
İlgili yazılar
