Shopify sunucuları, ölçeklendirmeyi ve küresel bir CDN’i yönetir. Peki, neden bu kadar çok Shopify mağazası hala mobilde yavaş hissediliyor? Cevap neredeyse her zaman Shopify’ın üzerinde çalışan şeylerdir: uygulamalar, tema kodu, görseller ve üçüncü taraf betikleri.
İyi haber: bunların hepsi sizin kontrolünüzde. İşte bir Shopify mağazasını hızlandırmanın 15 pratik yolu.
Shopify hızını nasıl ölçersiniz
- Shopify yönetimi → Analitik → Web performansı: Gerçek ziyaretçilerden alınan Core Web Vitals (varsa)
- Google Arama Konsolu → Temel Web Vital Verileri
- Sayfa Hızı İçgörüleri bireysel sayfalar için
- Chrome DevTools (Performans ve Ağ sekmeleri) yüklenenleri görmek için
Ana, koleksiyon ve ürün sayfalarınız için mobilde gerçek kullanıcı verilerine (LCP, INP, CLS) odaklanın. E-ticaret için Temel Web Vital Verileri‘ni görün.
Uygulamalar ve betikler
1. Uygulamalarınızı denetleyin
Her bir uygulama, mağaza vitrinine özellik eklediğinde JavaScript ve CSS ekleyebilir. Tüm yüklü uygulamaları listeleyin ve her biri için sorun: buna hala ihtiyacımız var mı ve her sayfada mı yükleniyor?
2. Kalan uygulama kodunu kaldırın
Bir uygulamayı kaldırmak her zaman kodunu silmez. Eski uygulamalar genellikle temaya kod parçacıkları enjekte eder. Kaldırdığınız uygulamalara referanslar için tema kodunuzu arayın (kod parçacıkları, script etiketleri, {% render %} çağrıları) ve bunları temizleyin. tema uygulama uzantıları kullanan yeni uygulamalar daha temiz bir şekilde kaldırılır.
3. Tema uygulama uzantılarını ve uygulama bloklarını tercih edin
Uygulama seçerken, uygulama blokları/gömme kullananları tercih edin. Bunlar yalnızca gerektiği yerlerde yerleştirilmesi ve kaldırılması daha kolaydır.
4. İzleme ve pazarlama etiketlerini kontrol et
Pikseller, ısı haritaları, sohbet widget’ları, incelemeler, açılır pencereler ve A/B test araçları hızla birikir. Mümkünse pikseller için Shopify’ın Müşteri Olaylarını kullanın, tekrar edenleri kaldırın ve sohbet widget’larını yalnızca etkileşimden sonra yükleyin.
Tema
5. Modern, hafif bir tema kullanın
Son Online Mağaza 2.0 temaları, Shopify’ın ücretsiz temaları da dahil olmak üzere, genellikle performans düşünülerek tasarlanmıştır. Birçok yerleşik efekti olan çok ağır premium temalar yavaş olabilir.
6. Ana sayfadaki bölüm sayısını sınırlayın
Her kaydırıcı, video ve ürün döngüsü ağırlık ekler. Ana sayfayı odaklı tutun. Bir güçlü kahraman, beş kaydırıcıdan daha iyidir.
7. Katmanlı ağır kaydırıcılardan ve üst kısımda otomatik oynatılan videolardan kaçının
Genellikle LCP öğesi haline gelirler ve render işlemini geciktirirler. Statik bir kahraman resmi genellikle daha hızlıdır ve aynı şekilde dönüşüm sağlar.
8. Liquid kodunu optimize et
Verimsiz Liquid (büyük koleksiyonlar üzerinde iç içe döngüler, birçok all_products araması) sunucu render’ını yavaşlatır. Yavaş Liquid bölümlerini bulmak için Shopify’ın Chrome için Tema Denetleyicisi‘ni kullanın.
Görseller
9. Shopify’nin resim filtrelerini doğru boyutlarla kullanın
image_url genişlik parametreleri ile ve image_tag ile widths ve sizes kullanın, böylece tarayıcı doğru boyutu indirir. Shopify’nın CDN’si modern formatları otomatik olarak sunar.
10. Kahraman veya ana ürün resmini tembel yüklemeyin
LCP resmi hemen yüklenmelidir. Bunun için loading: 'eager' ve fetchpriority: 'high' kullanın, ve katmanın altındaki her şeyi tembel yükleyin.
11. Görüntü boyutlarını ayarlayın
Her resimde genişlik ve yükseklik (veya en boy oranı) düzen kaymasını (CLS) önler.
Yazı Tipleri ve CSS
12. Özel yazı tiplerini sınırlayın
Her font ailesi ve ağırlığı ekstra bir indirme gerektirir. Sistem fontlarını veya az sayıda font dosyasını kullanın ve en önemli olanı önceden yükleyin.
13. Kullanılmayan CSS ve JavaScript’i azaltın
Kullanmıyorsanız tema özelliklerini kaldırın. Küçük efektler için büyük kütüphaneler (örneğin tam bir animasyon kütüphanesi) eklemekten kaçının.
İçerik ve yapı
14. Büyük koleksiyonları sayfalara ayırın
Bir sayfada yüzlerce ürün bulunan koleksiyonlar yavaştır. Mantıklı sayfa boyutları ile sayfalama veya “daha fazla yükle” kullanın.
15. Koleksiyon tabanlı ürün URL’lerine iç bağlantıları düzeltin
/products/handle yerine koleksiyon tabanlı URL’lere bağlantı vermek, SEO ve önbellek tutarlılığına yardımcı olur (bkz. Shopify SEO kontrol listesi).
Hızlı öncelik listesi
| Düzelt | Etkisi | Çaba |
|---|---|---|
| Kullanılmayan uygulamaları ve kalan kodu kaldırın | Yüksek | Düşük ile orta |
| Hero/LCP resmi istekli + doğru boyut | Yüksek | Düşük |
| Gecikme sohbeti ve gereksiz etiketler | Yüksek (INP) | Düşük |
| Ana sayfa bölümlerini basitleştir. | Orta | Düşük |
| Sıvıyı Optimize Et | Orta ile yüksek | Orta |
| Daha açık bir temaya geçin | Yüksek | Yüksek |
Sezonun zirvesinden önce
Hız değişikliklerini kod dondurmadan önce yapın. Kara Cuma kontrol listesini görün.
Sıkça sorulan sorular
Shopify planı hızını etkiler mi?
Mağaza hızı genellikle temanız, uygulamalarınız ve içeriğiniz tarafından belirlenir, planla değil.
Shopify yönetim panelindeki hız puanı önemli mi?
Gerçek kullanıcı Core Web Vitals, herhangi bir laboratuvar puanından daha önemlidir. Puanları bir rehber olarak kullanın, bir hedef olarak değil.
Shopify’yi özel bir headless mağaza kadar hızlı hale getirebilir miyim?
İyi optimize edilmiş bir Online Store 2.0 teması çok hızlı olabilir. Headless kurulumlar daha fazla kontrol sağlar ancak karmaşıklık ve maliyet ekler; otomatik olarak daha hızlı değildir.
Daha hızlı bir Shopify mağazası mı istiyorsunuz?
Shopify temalarını ve uygulama kurulumlarını hız ve Core Web Vitals için denetliyor ve optimize ediyorum. Benim Shopify hizmetim‘i inceleyin veya hız denetimi talep edin.