Mobil cihazlarda Shopify tema performansı
Mobil performans; görsel boyutları, Liquid çıktısı, uygulama scriptleri, JavaScript çalışması ve kararlı yerleşimlerin temsili şablonlarda ölçülmesiyle iyileşir.
Yazar Ömer Hakan Ölçer ·
Önce ölçün, sonra değiştirin
En az ana sayfa, koleksiyon, ürün, sepet ve içerik yoğun bir sayfayı test edin. Cihazı, ağ profilini, tema sürümünü ve URL'yi kaydedin; böylece önce-sonra sonuçları karşılaştırılabilir olur.
- LCP öğesi ve yüklenme aşamaları
- INP veya uzun etkileşimler
- CLS kaynakları
- Transfer boyutu ve üçüncü taraf scriptleri
Doğru boyutlu görseller sunun
390 piksellik ekranda 4000 piksellik ürün görselini masaüstü boyutunda sunmayın. Responsive Shopify görsel URL'leri, açık width/height ve doğru sizes kullanın. Yalnızca olası LCP görselini önceliklendirin; ekran altındaki görseller lazy kalmalıdır.
Uygulama ve JavaScript bütçesi oluşturun
Her uygulama mağazaya kod, ağ isteği veya DOM yükü ekleyebilir. Her uygulamanın amacını, sahibini, script maliyetini ve kaldırma kriterini kaydedin. Kullanılmayan app embed'lerini kaldırın, kritik olmayan işlevleri ihtiyaç anında yükleyin.
Liquid ve yerleşimi kararlı tutun
Karmaşık döngüler ve gereksiz büyük koleksiyonlar sunucu ve render işini artırır. Görsel, banner ve dinamik widget'lar için alan ayırın. İçerik kayıyor veya etkileşimler bloklanıyorsa hızlı ilk boyamanın faydası sınırlıdır.
Yayın kuralı
Tema önizlemesini mevcut sürümle aynı URL ve koşullarda karşılaştırın. Ana akışlar çalışıyor ve performans bütçeleri aşılmıyorsa yayınlayın.