Kurulu uygulamalar vitrininizin yüküne ne ekler?

Shopify mağazalarının çoğu yorumları, paketleri, ek satışları, sadakat programlarını ve canlı sohbeti uygulamalarla ekler. Vitrinde özelliği olan her uygulama, çalıştığı her sayfaya ek yük de getirir. Bu, uygulamalardan kaçınmanız gerektiği anlamına gelmez; her birinin maliyetini bilmeniz gerektiği anlamına gelir. Ancak o zaman bir uygulamayı tutmak bilinçli bir karar olur.

Uygulamalar vitrininize nasıl gelir?

İki yol var ve uygulamadan vazgeçtiğinizde ikisi çok farklı davranır:

Shopify uygulama geliştiricilerini ilk yola yönlendirir: Built for Shopify programındaki uygulamalar vitrin öğeleri için tema uygulama uzantılarını kullanmak zorundadır ve sayfa oluşturucular ile yedekleme araçları gibi dar istisnalar dışında tema dosyalarını Asset API ile değiştiremez. Eski uygulamalar ve program dışındaki uygulamalar hâlâ ikinci yolu kullanıyor olabilir.

Bir uygulama bir sayfaya neye mal olur?

• Daha fazla sunucuya istek. Her üçüncü taraf kaynak, bir şey indirilmeden önce kendi bağlantısını ister.
• Ana iş parçacığında JavaScript. Script’lerin dokunuşlara ve tıklamalara yanıt veren aynı iş parçacığında ayrıştırılması, derlenmesi ve çalıştırılması gerekir. Uygulamaların INP’ye zarar verdiği yer burasıdır; çoğu zaman da ziyaretçilerin en çok etkileşime girdiği ürün sayfasında.
• Render’ı engelleyen kod. Sayfanın head kısmında defer ya da async olmadan yüklenen bir script render’ı bekletir; bu da LCP’yi geciktirir.
• Yalnızca kullanıldığı yerde değil, her yerde. Site genelinde yüklenen bir script, özelliği hiç göstermeyen sayfalarda da çalışır. App embed block’lar geliştiricilerin script’leri yalnızca belirli sayfalarda yüklemesine izin verir; ama her uygulama bunu yapmaz.

Belirli bir uygulamanın maliyeti uygulamaya, temaya ve sayfaya bağlıdır. Uygulama başına bakabileceğiniz güvenilir bir rakam yoktur; bu yüzden sonraki bölüm önemlidir. Her metriğin neden oluştuğu için Shopify’da Core Web Vitals ve INP yazısına bakın.

Shopify’ın kendi ölçütü

Shopify, uygulama geliştiricilerinden etkiyi, uygulama kurulup ayarlanmadan önceki ve sonraki Lighthouse performans skoru farkı olarak ölçmelerini ister; üç sayfa türüne göre ağırlıklandırılır: ana sayfa %17, ürün %40, koleksiyon %43, birkaç çalıştırmanın ortalaması alınarak. Built for Shopify statüsü için bir uygulama vitrin skorunu on puandan fazla düşürmemelidir. Bu kendi mağazanız için de faydalı bir çıtadır: temanızda bundan fazlasına mal olan bir uygulama ciddi bir incelemeyi hak eder.

Ağırlıklara dikkat edin. Shopify’ın yönteminde ürün ve koleksiyon sayfaları skorun toplam %83’ünü taşır, ana sayfa yalnızca %17’sini. Bu da uygulamaların genellikle çalıştığı ve ziyaretçilerin satın almaya karar verdiği sayfalarla örtüşür: yorumlar, beden rehberleri, rozetler, paketler ve ek satışlar ürün sayfalarında toplanır. Ana sayfada zararsız görünen bir uygulama, satış yapan sayfadaki en pahalı şey olabilir.

Mağazanızı uygulama uygulama ölçmek

1. Vitrinde varlığı olan her uygulamayı listeleyin ve her biri için özelliğinin gerçekten göründüğü sayfaları yazın.
2. Temada kalıntıları arayın. Layout dosyasında ve snippet’lerde artık kullanmadığınız uygulamalardan kalan kodlara bakın. Bir şeyi silmeden önce uygulamanın geliştiricisine ek silme adımları gerekip gerekmediğini sorun.
3. Geçmişe bakın. Shopify’ın web performansı raporları uygulama kurulumlarını ve tema değişikliklerini grafikte işaretler. Bir kurulumun hemen yanında LCP ya da INP’de görülen ani bir sıçrama ilk şüphelinizdir.
4. Uygulama olmadan test edin. Chrome DevTools’ta uygulamanın script URL’lerini engelleyin ve Lighthouse’u ana sayfa, ürün ve koleksiyon şablonlarında yeniden çalıştırın. Birkaç çalıştırmanın ortalamasını alın ve Shopify’ın yaptığı gibi ağırlıklandırın. Aradaki fark, uygulamanın temanızdaki laboratuvar maliyetidir.
5. İki rakamla karar verin. Maliyeti uygulamanın kazandırdığının yanına koyun. Shopify’ın kendi önerisi, her uygulamanın performans maliyetini karşılayacak kadar değer yarattığını kontrol etmektir.

DevTools kısmı, adım adım

• Script’leri bulun. Network panelinde uygulamanın alan adına ya da dosya adlarına göre filtreleyin. Lighthouse’un JavaScript boot-up time denetimi, hangi script’lerin ayrıştırılması, derlenmesi ve çalıştırılmasının en pahalı olduğunu gösterir.
• Engelleyin ve karşılaştırın. Bir isteğe sağ tıklayıp “Block request URL”i seçin, sonra sayfayı yeniden yükleyip Lighthouse’u tekrar çalıştırın. Bu, canlı temaya dokunmadan mağazayı o uygulama olmadan simüle eder.
• Şelale grafiğini okuyun. Önce, erken başlayıp sayfayı bekleten script’leri düzeltin. Geç yüklenip az çalışan script’ler genellikle kalabilir.
• Tuttuğunuz uygulamalarda, sayfa render için onlara ihtiyaç duymuyorsa script’lerinin async ya da defer ile yüklendiğini kontrol edin; kritik yoldaki üçüncü taraf bir kaynak için preconnect kullanmayı düşünün.

Uygulama sağlayıcısına sorulacak sorular

• Uygulama tema uygulama uzantılarını mı kullanıyor, yoksa tema dosyalarına mı yazıyor?
• Script’i yalnızca özelliğinin göründüğü sayfalarda yüklenebilir mi?
• Dosyaları Shopify’ın CDN’inden mi, yoksa kendi sunucularından mı sunuluyor?
• Kaldırıldıktan sonra temada ne kalıyor ve nasıl siliniyor?
• Shopify’ın on puanlık Lighthouse çıtasına göre ölçüldü mü?

Sayfa oluşturucular ve temayı düzenleyen uygulamalar üzerine bir not

Sayfa oluşturucular, işleri temayı düzenlemek olduğu için Shopify’ın Built for Shopify statüsünde tema dosyalarını değiştirmesine hâlâ izin verdiği az sayıdaki uygulama türünden biridir. Bu onları bir yorum widget’ından farklı kılar: birini kaldırmak yalnızca bir script’i silmek değil, oluşturduğu sayfaları yeniden yapmak anlamına gelebilir. Onları da diğer uygulamalar gibi ölçün; ama kaldırılmalarını bir uygulama silme işi olarak değil, küçük bir tema projesi olarak planlayın.

Tut, düzelt, değiştir ya da yeniden yap

• Maliyeti küçük olan ya da değeri maliyetini açıkça karşılayan uygulamaları tutun.
• Yüklemeyi düzeltin: sağlayıcıdan sayfaya özel yükleme isteyin ya da bir widget’ı ekranın alt kısmına taşıyıp etkileşim anında yükleyin.
• Özelliğini artık modern bir temanın kendisi sunan ya da hâlâ tema dosyalarına kod enjekte eden uygulamaları değiştirin.
• Ağır bir uygulamanın yalnızca dar bir kısmını kullanıyorsanız özelliği temada ya da küçük bir özel uygulama olarak yeniden yapın; böylece vitrin yalnızca ihtiyacınız olanı taşır.
• Kaldırılmış uygulamalardan kalan kodu temizleyin. Hiçbir bedeli olmayan tek değişiklik budur.

Lintel bu işi nasıl ele alır?

Uygulama denetimi performans işlerimizin ilk adımıdır: her uygulamanın neyi nerede yüklediğini listeler, yukarıdaki yöntemle ölçer ve her birinin maliyetini kontrol edebileceğiniz rakamlarla size veririz. Tutma, değiştirme ya da yeniden yapma kararı sizde kalır; tema tarafındaki düzeltmeler de Shopify tema geliştirme kapsamına girer.