Yorum Uygulamaları Mağazanızı Yavaşlatır mı?

Kısa cevap: Bazı yorum uygulamaları bir Shopify mağazasını ölçülebilir şekilde yavaşlatır, ama sebep neredeyse her zaman dört şeyden biridir — yıldız ikonları için indirilen bir webfont, sayfanızın içinde ikinci bir sayfa yükleyen bir iframe, sayfanın render edilmesini engelleyen bir script, ya da koleksiyon sayfasında ürün kartı başına ayrı bir widget örneği — "yorum uygulamaları" diye bir kategori olduğu için değil.

Bir yorum widget'ı neden bir şeyi yavaşlatsın ki?

Yıldız ikonları için indirilen bir webfont. Bazı widget'lar sadece beş yıldız çizmek için kendi ikon fontunu gönderir, yani ziyaretçinizin tarayıcısı beş karakterlik bir Unicode ya da küçük bir satır içi SVG olabilecek bir puanı göstermeden önce koca bir font dosyası indirir.

Sayfanızın içinde ikinci bir sayfa yükleyen bir iframe. Iframe, sayfanızın içinde bir tarayıcı sekmesi gibidir — mağazanızın zaten yaptığı her şeyin üstüne, kendi ağ istekleriyle kendi belgesini yüklemesi, ayrıştırması ve render etmesi gerekir.

Sayfanın render edilmesini engelleyen bir script. Async ya da defer olmadan yerleştirilmiş, ya da sayfanın geri kalanı boyanmadan önce çalışan bir script, altındaki her şeyi bekletir — yorumlar üç bölüm aşağıda olsa bile tarayıcı onu bekler.

Koleksiyon sayfasında ürün kartı başına bir widget örneği. Bir koleksiyon sayfası düzinelerce ürün gösterebilir. Tek bir ürün sayfası için tasarlanıp kart başına bir kez tekrar kullanılan bir widget, yukarıdaki her sorunu ekrandaki ürün sayısıyla çarpar.

Bunu kendiniz nasıl ölçersiniz

Mağazanızı Chrome'da açın, sağ tıklayıp Inspect'i seçin, Network sekmesini açın ve önbelleği temizleyip sayfayı yeniden yükleyin. Bunu bir yorum uygulaması kurmadan önce ve kurduktan sonra, aynı ürün ve koleksiyon sayfalarında yapın, toplam istek sayısını ve toplam sayfa ağırlığını karşılaştırın.

Chrome'un kendi Lighthouse paneli, ya da canlı URL'nize karşı çalıştırdığınız PageSpeed Insights, size bir puan ve bir şelale grafiği verir — özellikle raporun uygulamanın script'ine ya da alan adına atfettiği her şeye bakın.

Bu karşılaştırma yalnızca aynı sayfayı iki kez test ederseniz anlam ifade eder. On beş görselli yoğun bir ürün sayfası her zaman sade bir sayfadan daha ağır olur; izole etmeye çalıştığınız şey uygulamanın kendisinin eklediği fark.

Makul bir boyut nasıl görünür

Tek bir doğru sayı yok, ama gzip'li haliyle onlarca kilobayt ekleyen, sayfayı engellemeden yüklenen ve bir iframe yerine kendi kapsamlı elementinin içinde render eden bir script, bir yorum widget'ı için makul bir çıta sayılır.

Kudo'nun mağaza widget'ı gzip'li 34 KB'dir, hiçbir webfont indirmez ve bir shadow root içinde render edilir — ana sayfanın CSS'inin içine giremediği, widget'ın da ana sayfaya taşmadığı kapsamlı bir element. Yorumları herkese açık, salt okunur bir uçtan okur, yani sayfanın kendisinde hiçbir veritabanı anahtarı taşınmaz.

Bu tek bir veri noktası, evrensel bir standart değil — bir tedarikçinin "script'iniz ne kadar büyük" sorusuna verdiği cevap belirsizse, referans olarak kullanın.

Bir yorum uygulaması kurmadan önce sorulacak beş soru

Webfont indiriyor mu, yoksa yıldızları fontsuz mu çiziyor? Beş yıldız ikonu için bir webfont, ziyaretçinin cihazında zaten bulunan bir fontun atlayabileceği bir ağırlıktır.

Satır içi mi render ediliyor, yoksa bir iframe içinde mi? Iframe, sayfanızın içinde yüklenen ikinci bir sayfadır; kendi kapsamlı stiliyle satır içi widget'lar genelde bu maliyeti önler.

Script sayfayı engelliyor mu, yoksa onu bekletmeden mi yükleniyor? Etiketin asenkron yüklenecek şekilde işaretlenip işaretlenmediğini özellikle sorun.

Koleksiyon sayfasında, tüm ızgara için tek bir istek mi var, yoksa ürün kartı başına bir tane mi? Küçük bir script'i gerçek bir yavaşlamaya çeviren çarpan budur.

Size gzip'li boyutu söyleyebiliyorlar mı? Bunu tek cümlede cevaplayabilen bir tedarikçi büyük ihtimalle bunu ölçmüştür; belirsiz bir cevap zaten kendi başına bir bilgidir.

Bunun koleksiyon sayfalarınızla bağlantısı

Bu sorunun en ağır hali özellikle koleksiyon ızgarasında ortaya çıkar; tek bir ürün için tasarlanmış bir widget'tan kart başına bir kez çalışması istenir — kurulumdan hemen sonra bir yavaşlama fark ettiyseniz önce kontrol etmeye değer olan durum budur. Boyutun ötesinde, yorum uygulamalarını karşılaştırırken başka nelere bakmanız gerektiğine de göz atın — kilobayttan daha zor ölçülen kısımlar dahil.

İki Dakikalık Özet

Kudo'nun widget'ı gzip'li 34 KB'dir, webfont'u atlar ve bir iframe yerine shadow root içinde render edilir — yukarıdaki "makul bir boyut" tam olarak bunu anlatıyor.

getkudo.co adresinden ücretsiz başlayın.

Sıkça Sorulan Sorular

Tüm yorum uygulamaları Shopify mağazalarını yavaşlatır mı?
Hayır. Yavaşlama belirli uygulama tercihlerinden gelir — bir webfont, bir iframe, engelleyici bir script, ya da koleksiyon sayfasında kart başına widget'lar — yorumları göstermenin kendisinden değil.

Bir yorum widget script'i için normal boyut nedir?
Resmi bir sayı yok, ama gzip'li haliyle onlarca kilobayt, sayfayı engellemeden yükleniyorsa makul bir çıtadır. Tedarikçinin sitesinde yazmıyorsa doğrudan sorun.

Shopify'ın kendi hız puanı bunu yakalar mı?
Lighthouse ve PageSpeed Insights eklenen ağırlığı ve render'ı engelleyen script'i gösterir, ama tüm sayfayı puanlar — genel puan iyi görünse bile küçük bir uygulama şelale grafiğindeki en büyük tek kalem olabilir.

Iframe her zaman kötü müdür?
Her zaman değil, ama her zaman satır içi render'dan daha maliyetlidir — ikinci bir belgenin sayfanızın üstüne yüklenip render edilmesi gerekir. Bir tedarikçi iframe kullanıyorsa nedenini sorun.

Bunu bir şey kurmadan önce test edebilir miyim?
Çoğu uygulama ücretsiz bir katman ya da deneme sunar. Önce bir geliştirme temasına kurun, kurulum öncesi ve sonrası Network sekmesi karşılaştırmasını yapın ve gerçek mağazanızda canlıya almadan önce karar verin.