Shopify altyapısı CDN, sıkıştırma ve görsel dönüştürme gibi birçok optimizasyonu platform düzeyinde sağlar. Mağazalar arasındaki performans farkı ise çoğunlukla tema kararları, uygulamalar, sayfa bölümleri, medya ve ölçüm kodları gibi yönetilebilir katmanlarda oluşur.
Bu rehberde ne bulacaksınız?
Gerçek kullanıcı verisini laboratuvar testinden ayırmayı, sorunları tema ve uygulama katmanlarına dağıtmayı, değişiklikleri tema kopyasında doğrulamayı ve performans gerilemesini yayın sürecinde önlemeyi öğreneceksiniz.
Performans taban çizgisini şablonlara göre kurun
Tek bir ana sayfa skoru mağazanın tamamını temsil etmez. Ürün, koleksiyon, arama, sepet ve içerik şablonları farklı Liquid, uygulama ve medya yükleri kullanır.
Saha ve laboratuvar verisini ayırın
Shopify Web Performance raporları gerçek ziyaretçi sinyallerini, laboratuvar araçları ise tekrarlanabilir bir hata ayıklama ortamını sağlar. Bu iki veri türünü aynı puan gibi yorumlamayın.
- LCP, INP ve CLS değerlerini şablon gruplarıyla inceleyin.
- Laboratuvar testinde cihaz, bağlantı ve test URL’sini sabitleyin.
- Değişiklik tarihlerini performans verisinin yanına kaydedin.
Temsili URL seti oluşturun
En hızlı veya en yavaş tek sayfayı seçmek yerine gerçek katalog çeşitliliğini temsil eden küçük bir URL seti kullanın.
- Büyük görselli ve çok varyasyonlu ürünleri örnekleme ekleyin.
- Uzun koleksiyon ile az ürünlü koleksiyonu ayrı test edin.
- Oturumlu davranış gerektiren sepet akışını ayrıca doğrulayın.
Tema katmanındaki asıl darboğazı bulun
Tema performansı yalnız dosya boyutuyla açıklanmaz. Liquid hesapları, tekrar eden section yapıları, render engelleyen varlıklar ve gereksiz JavaScript birlikte değerlendirilmelidir.
HTML ve CSS ile çözülebilen işi ayırın
Shopify tema rehberi, temel alışveriş işlevlerinin JavaScript’e bağımlı olmamasını ve JavaScript’in gerektiğinde aşamalı geliştirme olarak kullanılmasını önerir.
- Menü, varyasyon ve temel ürün bilgisinin JavaScript olmadan erişimini test edin.
- Aynı işi yapan tema scriptlerini birleştirin veya kaldırın.
- Sayfa yüklenirken çalışan kodu kullanıcı etkileşimi gerektiren koddan ayırın.
Bölüm ve medya yükünü azaltın
Çok sayıda section, otomatik başlayan video ve görünmeyen carousel öğeleri ilk görünümü ve etkileşimi geciktirebilir.
- Her şablonda iş hedefi olmayan bölümleri kaldırın.
- Ana görseli gerçek görüntü ölçüsüne uygun kaynaktan sunun.
- İlk ekranda olmayan video ve iframe içeriklerini kontrollü geciktirin.
Uygulama ve üçüncü taraf kodlarını yönetin
Uygulamalar mağazaya değer katabilir; ancak app embed, etiket, sohbet, yorum ve kişiselleştirme kodları aynı anda çalıştığında özellikle INP ve yükleme sırası etkilenebilir.
Kod sahipliği envanteri çıkarın
Tarayıcıda görünen her harici isteğin hangi uygulama veya iş gereksinimi için çalıştığı bilinmelidir.
- Tema kodu, app embed ve müşteri olayı kaynaklarını ayrı listeleyin.
- Sahibi ve kullanım amacı bilinmeyen kodu tema kopyasında devre dışı test edin.
- Kaldırılan uygulamanın tema kalıntılarını geliştirici talimatıyla kontrol edin.
Katkıyı performans maliyetiyle karşılaştırın
Bir araç yalnız yüklü olduğu için tutulmamalı; sağladığı iş değeri ile oluşturduğu kullanıcı deneyimi maliyeti birlikte değerlendirilmelidir.
- Önce ve sonra ölçümünü aynı şablonlarda tekrarlayın.
- Özelliğin kullanımını ve dönüşüm yolundaki görevini doğrulayın.
- Benzer iş yapan uygulamaları tek sorumluya indirin.
Değişiklikleri güvenli yayın sürecine bağlayın
Performans müdahalesi sepet, varyasyon, arama veya ölçüm davranışını bozuyorsa başarılı sayılamaz. Her değişiklik işlev ve veri doğrulamasıyla birlikte yayınlanmalıdır.
Tema kopyasında kabul testi yapın
Canlı temayı doğrudan değiştirmek yerine güncel temanın kopyasında tek değişkenli denemeler uygulayın.
- Ürün seçimi, sepete ekleme ve ödeme başlangıcını test edin.
- Mobil menü, arama ve uygulama bileşenlerini klavyeyle kontrol edin.
- Dönüşüm olaylarının değişiklikten sonra tek kez çalıştığını doğrulayın.
Performans bütçesi ve gerileme kaydı tutun
Tek seferlik hız çalışması, yeni bölüm ve uygulamalarla kısa sürede geri alınabilir. Yayın ölçütleri karar sürecine eklenmelidir.
- Kritik şablonlar için izlenecek metrik ve kabul aralığını yazın.
- Tema ve uygulama değişikliklerini sürüm notunda işaretleyin.
- Saha verisindeki değişimi yeterli veri penceresiyle yeniden değerlendirin.
Resmi kaynaklar
Özellikler ve platform kuralları zamanla değişebilir. Uygulama öncesinde aşağıdaki birincil kaynakların güncel sürümünü kontrol edin.