Shopify Core Web Vitals optimizasyonu, e-ticaret ödeme ve sepet sayfalarındaki yükleme hızını, etkileşimi ve görsel kararlılığı iyileştirmeye yönelik teknik bir uygulamadır. Satıcılar bunu, üçüncü taraf komut dosyalarının yürütülmesini azaltarak, Shopify İçerik Dağıtım Ağı aracılığıyla görüntü teslimini optimize ederek ve dinamik içerikten kaynaklanan düzen kaymalarını en aza indirerek başarırlar. Bu eylemler, yüksek arama motoru sıralamalarını korumak ve müşteri yolculuğunun son aşamalarında dönüşüm oranlarını artırmak için gerekli olan hızlı ve güvenilir bir kullanıcı deneyimi sağlar.
Shopify sepet hızını neler etkiler?
Sepet sayfası genellikle bir Shopify mağazasının en dinamik kısmıdır. İndirimleri, kargo tahminlerini ve envanter seviyelerini gerçek zamanlı olarak hesaplamak için genellikle karmaşık Liquid mantığına dayanır. Bir kullanıcı bir ürün eklediğinde, tema genellikle sepet çekmecesini veya özel sepet sayfasını tam bir yeniden yükleme olmadan güncellemek için birkaç JavaScript işlevi yürütmelidir. Tema kodu verimli değilse bu süreç yavaşlayabilir.
Aşırı Liquid döngüleri, yavaş sunucu yanıt sürelerinin yaygın bir nedenidir. Örneğin, bir sepet sayfası ilgili ürünleri önermek için büyük bir koleksiyondaki her ürünü döngüye sokarsa, sunucunun HTML oluşturması daha uzun sürer. Bu gecikme, İlk Bayta Kadar Süreyi (TTFB) artırır ve bu da diğer tüm yükleme kilometre taşlarını geriye iter. Yavaş bir arka uç, diğer performans metriklerinde yüksek puanlar almayı imkansız hale getirir.
Bir sunucu bir isteği işlemek için çok uzun sürdüğünde, CSS ve komut dosyalarının indirilmesi de dahil olmak üzere tüm olaylar zinciri gecikir.
Google Search Central
Ürün ağırlıklı sepet sayfalarında Largest Contentful Paint neden gecikir?
Largest Contentful Paint (LCP), ekrandaki en büyük görünür öğenin oluşturulması bittiğinde ölçülür. Bir sepet sayfasında bu genellikle sepetteki ilk ürünün resmi veya büyük bir promosyon afişidir. Bu görseller optimize edilmezse, LCP puanı düşecek ve arama motorlarına sayfanın kullanıcı için yavaş olduğu sinyalini verecektir.
Birçok Shopify teması, varsayılan olarak tüm görsellere tembel yükleme (lazy loading) uygular. Bu, uzun ürün sayfaları için iyi olsa da, LCP öğeleri için zararlıdır. Ekranın üst kısmında görünen görseller yüksek öncelikle yüklenmelidir. Ayrıca, yüklenmesi uzun süren özel yazı tiplerinin kullanımı, metin tabanlı LCP öğelerinin oluşturulmasını geciktirebilir ve bu da kötü bir kullanıcı deneyimine yol açar.
- Sepetteki ilk ürün görseli için fetchpriority=’high’ özniteliğini kullanın.
- Görsellerin Shopify’ın otomatik filtreleri aracılığıyla WebP veya AVIF gibi modern formatlarda sunulduğundan emin olun.
- Yükleme işlemi sırasında yeniden boyutlandırmayı önlemek için açık genişlik ve yükseklik öznitelikleri ayarlayın.
- Görsel gelmeden önce düzenin hazır olduğundan emin olmak için ana CSS dosyasını önceden yükleyin (preload).
Ödeme düğmeleri için Interaction to Next Paint (INP) yönetimi
Interaction to Next Paint (INP), bir sayfanın kullanıcı girişlerine verdiği genel yanıt verebilirliği değerlendiren bir metrikdir. Bir Shopify mağazasında en kritik etkileşimler, bir kullanıcı ‘Sepeti Güncelle’ veya ‘Ödemeye Geç’ düğmesine tıkladığında gerçekleşir. Tarayıcı ağır JavaScript görevlerini yürütmekle meşgulse, bu tıklamalar hantal veya yanıt vermiyor gibi hissettirecektir.
Uzun görevler, iyi bir INP puanının baş düşmanıdır. Bunlar, ana iş parçacığını 50 milisaniyeden fazla meşgul eden komut dosyalarıdır. Tipik bir Shopify ortamında, bu görevler genellikle izleme pikselleri, sadakat programı widget’ları veya karmaşık kargo hesaplayıcıları tarafından tetiklenir. Bu komut dosyaları çalıştığında, tarayıcı düğmenin tıklandığını göstermek için ekranı güncelleyemez.
Harici kitaplıklar, izleme komut dosyaları veya devasa çerçeve hidrasyon rutinleri bu kritik pencere sırasında işlemciyi meşgul ederse, sayfa geçici olarak donar.
Google Search Central
Alien Road, Shopify Core Web Vitals optimizasyonunu nasıl uygular?
Alien Road’da, müşterilerimiz için performansı artırmak amacıyla sistematik bir süreç izliyoruz. Shopify temasının liquid dosyalarının ve yüklü uygulamaların kapsamlı bir denetimiyle başlıyoruz. Tipik bir çalışmada, sepet sayfasında yüklenen JavaScript’in %30’a kadarının kaldırılmış ancak ‘zombi’ kod bırakmış uygulamalardan geldiğini sıklıkla görüyoruz. Sayfa ağırlığını hafifletmek için bu kalıntıları manuel olarak kaldırıyoruz.
Örneğin, moda ürünleri satan bir Shopify mağazası için, sepet çekmecesinin açılma animasyonunun ağır bir pazarlama otomasyonu komut dosyası tarafından engellendiğini tespit edebiliriz. Ekibimiz, gecikmeye neden olan belirli Uzun Görevi bulmak için Chrome DevTools kullanır. Daha sonra bu temel olmayan komut dosyalarını gecikmeli bir yükleme sırasına taşıyarak, yalnızca kullanıcı birincil etkileşimini bitirdikten sonra yürütülmelerini sağlıyoruz. Bu teknik ayarlama, pazarlama verilerini kaybetmeden INP puanını önemli ölçüde artırır.
Ayrıca Cart AJAX API için özel kod uyguluyoruz. Bir miktar değiştiğinde tüm sayfayı yenilemek yerine, yalnızca belirli metin öğelerini güncelliyoruz. Bu, aktarılan veri miktarını azaltır ve düzen kaymalarını önleyerek müşteri için sağlam ve kararlı bir arayüz oluşturur.
Ödeme sürecinde Cumulative Layout Shift nasıl azaltılır?
Cumulative Layout Shift (CLS), bir sayfanın görsel kararlılığını ölçer. Shopify’da CLS sorunları genellikle kargo ücretleri, indirim mesajları veya ‘Bununla Birlikte Alın’ önerileri gibi dinamik öğeler ilk boyamadan sonra düzene girdiğinde ortaya çıkar. Bu, ‘Ödeme’ düğmesinin aniden hareket etmesine neden olur ve bu da yanlışlıkla tıklamalara veya genel hayal kırıklığına yol açabilir.
Bunu çözmek için geliştiriciler, CSS min-height özelliklerini kullanarak bu öğeler için yer ayırmalıdır. Ayrıca, düzen kaymaları genellikle web yazı tipleri yüklendiğinde ve sistem yazı tiplerinin yerini aldığında meydana gelir, bu da metin bloklarının boyutunun değişmesine neden olur. ‘font-display: swap’ özelliğini kullanmak ve yedek yazı tipinin metriklerini eşleştirmek bu etkiyi azaltabilir. Düzeni kararlı tutmak, bir satın almanın son adımlarında güven oluşturmak için önemli bir faktördür.
Üçüncü taraf uygulama şişkinliği Shopify performansını nasıl etkiler?
Bir Shopify mağazasına eklenen her uygulama genellikle kendi komut dosyası etiketini temaya enjekte eder. Bu uygulamalar incelemeler veya çapraz satış gibi değerli özellikler sağlasa da, varlıklarını genellikle ödeme dahil her sayfada yüklerler. Bu, bant genişliği için yarışan devasa bir ağ isteği birikimi yaratır.
Bunu yönetmek için pazarlamacılar uygulama listelerini düzenli olarak denetlemelidir. Bir uygulama yalnızca ürün sayfasında gerekliyse, komut dosyasının sepet veya ödeme sayfalarında yüklenmesine izin verilmemelidir. Birçok modern Shopify teması, komut dosyalarını belirli şablonlarla sınırlamak için kullanılabilen koşullu yüklemeye izin verir. Bu yaklaşım, ödeme ortamını temiz ve hızlı tutar.
- Performans sekmesini kullanarak yürütülmesi 50 ms’den uzun süren komut dosyalarını tanımlayın.
- Birden fazla izleme pikselini tek bir etiket yöneticisi kapsayıcısında birleştirin.
- Mümkün olduğunda ağır uygulamaları hafif Liquid kodu alternatifleriyle değiştirin.
- Mobil alışveriş deneyimi için gerekli olmayan uygulama özelliklerini devre dışı bırakın.
Time to First Byte (TTFB) için teknik stratejiler
Shopify barındırılan bir platform olsa da, geliştiriciler arka uç performansı üzerinde hala bir miktar kontrole sahiptir. Sepet şablonundaki karmaşık Liquid filtrelerinin ve iç içe döngülerin sayısını azaltmak, daha hızlı HTML oluşturulmasına yol açabilir. Bunu iyileştirmek için geliştiriciler, tüm varlıkların doğru URL filtreleri kullanılarak çağrıldığından emin olarak Shopify İçerik Dağıtım Ağı’ndan yararlanabilirler.
Yüksek TTFB genellikle şişmiş bir temanın işaretidir. Bazı durumlarda, sayfa yüklenirken harici API’lerden veri getiren özel kod önemli gecikmelere neden olabilir. Bu tür verileri, ana sayfa içeriği tarayıcıya teslim edildikten sonra eşzamansız olarak getirmek daha iyidir. Bu, kullanıcının sepet içeriğini mümkün olduğunca çabuk görmesini sağlar.
Performans denetiminize bu hafta başlayın
Daha iyi performansa giden ilk adım ölçümdür. Shopify mağazanızı özel bir tarayıcı penceresinde açın ve sepet sayfanızın bir izini kaydetmek için Chrome DevTools Lighthouse veya Performance panelini kullanın. ‘Uzun Görevler’ bölümündeki kırmızı bayrakları arayın ve hangi komut dosyalarının ana iş parçacığını engellediğini belirleyin. Darboğazların ayrıntılı bir listesine sahip olduğunuzda, kullanılmayan uygulamaları kaldırarak ve temanızın görsel yükleme mantığını optimize ederek temizleme sürecine başlayabilirsiniz. Düzenli izleme, yeni güncellemelerin zaman içinde deneyimi düşürmemesini sağlar.