Shopify mağaza hızı rehberi: Core Web Vitals'ı iyileştirmenin pratik yolları

Mobilde yavaş açılan bir ürün sayfası, müşteri daha ürünü görmeden kaybetmeniz demek. Google da sayfa deneyimini sıralama sinyallerinden biri olarak kullanıyor. İyi haber şu: Shopify'da hız sorunlarının çoğu birkaç tanıdık kaynaktan gelir.

Hızı doğru ölçün

• PageSpeed Insights: Ana sayfa, bir koleksiyon ve en çok satan ürün sayfanız için ayrı ayrı ölçün. Mobil sonuçlara odaklanın.
• Gerçek kullanıcı verisi: PageSpeed'deki "gerçek kullanıcıların deneyimi" bölümü, laboratuvar puanından daha önemlidir.
• Üç ana metrik: LCP (en büyük içeriğin yüklenme süresi), INP (etkileşime yanıt süresi) ve CLS (sayfa kayması).

1. Görseller

Görseller genellikle en büyük yük. Shopify görselleri otomatik olarak uygun boyut ve formatta sunar, ama yine de:

• Çok büyük çözünürlükte (örneğin 5000 piksel) görsel yüklemeyin.
• Ana görselin (hero) üstüne kayan yazı veya video koymadan önce iki kez düşünün.
• Sayfanın üst kısmındaki ilk görsel hariç diğer görsellerin geç (lazy) yüklenmesini sağlayın; modern temalar bunu varsayılan olarak yapar.

2. Uygulamalar

Her uygulama sayfaya kendi script'ini ekleyebilir. Kullanmadığınız uygulamaları kaldırın ve kaldırdıktan sonra temada kod kalıp kalmadığını kontrol edin. App Embed ile çalışan uygulamaları tema düzenleyicideki Uygulama yerleştirmeleri bölümünden tek tek kapatıp hızdaki etkisini ölçebilirsiniz.

3. Yazı tipleri

Çok sayıda yazı tipi ve kalınlık kullanmak yüklemeyi yavaşlatır. İki yazı tipi ve birkaç kalınlık çoğu marka için yeterlidir. Mümkünse temanın sunduğu yazı tiplerini kullanın.

4. Kayan bannerlar ve pop-up'lar

Otomatik kayan bannerlar hem yavaştır hem de çoğu zaman tıklanmaz. Sayfa açılır açılmaz çıkan pop-up'lar ise mobil deneyimi bozar ve CLS'yi artırabilir. Tek, güçlü bir ana görsel genellikle daha iyi sonuç verir.

5. Tema

Eski veya aşırı özelleştirilmiş temalar zamanla hantallaşır. Online Store 2.0 uyumlu, güncel bir tema kullanın ve tema güncellemelerini takip edin. Temanıza eklenmiş eski kod parçalarını (kaldırılmış uygulamalardan kalanlar gibi) temizletin.

6. Üçüncü taraf takip kodları

Her pazarlama etiketi sayfaya ek yük getirir. Kullanmadığınız piksel ve takip kodlarını kaldırın; Shopify'ın müşteri olayları (Customer Events) özelliği, takip kodlarını daha kontrollü yönetmenize yardımcı olur.

Önce ölç, sonra değiştir

Her değişiklikten önce ve sonra aynı sayfaları ölçün. Böylece hangi düzeltmenin gerçekten fark yarattığını görür, zamanınızı en etkili işlere ayırırsınız.