Shopify mağazanız neden yavaş açılıyor

Yavaş açılan Shopify mağazalarının nedenleri çoğu zaman aynıdır. Mağazayı Shopify barındırır ve tema dosyalarını kendi CDN'i üzerinden sunar. İncelediğimiz mağazalarda fazladan yük genellikle yıllar içinde temanın üzerine eklenen kodlardan geliyor.

Bu yazıda hızı doğru ölçmenin yolunu, en sık gördüğümüz nedenleri ve bunları hangi sırayla düzelttiğimizi anlatıyoruz.

Doğru verilerle başlayın

Google, sayfa deneyimini üç Core Web Vitals metriğiyle ölçer. Her metriğin bir iyi eşiği vardır. Bir sayfa, gerçek ziyaretlerin 75. yüzdelik diliminde üç eşiğin üçünü de karşıladığında başarılı sayılır. Mobil ve masaüstü ayrı ayrı ölçülür.

• Largest Contentful Paint (LCP) yüklenme süresini ölçer. 2,5 saniye veya altı iyi kabul edilir.
• Interaction to Next Paint (INP) sayfanın dokunma ve tıklamalara ne kadar hızlı tepki verdiğini ölçer. 200 milisaniye veya altı iyi kabul edilir.
• Cumulative Layout Shift (CLS) içeriğin sayfa yüklenirken ne kadar kaydığını ölçer. 0,1 veya altı iyi kabul edilir.

Gerçek ziyaretçilerden gelen saha verisine (field data) odaklanın. Laboratuvar testi bir kez, simüle edilmiş tek bir cihazda ve tek bir bağlantıyla çalışır. Nedenleri bulmanıza yardım eder. Müşterilerinizin gerçekte ne yaşadığını ise saha verisi gösterir.

Mağazanızı nasıl kontrol edersiniz

• Shopify'ın web performansı raporları. Yönetim panelinde Analizler > Raporlar bölümüne gidin ve web performansı raporlarını aratın. Bu raporlar gerçek ziyaretlerden gelen LCP, INP ve CLS değerlerini sayfa türüne, sayfa URL'sine ve cihaza göre ayrı ayrı gösterir. Veriler 36 saate kadar gecikebilir ve raporlar son 90 günü kapsar.
• Aynı grafiklerde uygulama yükleme, tema güncellemesi ve yeni kod eklenmesi gibi olaylar işaretlenir. Çizgi aniden yükseldiğinde o gün neyin değiştiğini görebilirsiniz.
• pagespeed.web.dev adresindeki PageSpeed Insights. Üst bölüm, Chrome User Experience Report'tan (CrUX) gelen saha verisini gösterir. Laboratuvar testi onun altında yer alır. Önce saha verisine bakın.
• CrUX ve Google Search Console'daki Core Web Vitals raporu. CrUX yalnızca yeterli trafiği olan sayfaları ve siteleri kapsar, Google bu eşiği tam olarak açıklamıyor. Küçük mağazalar burada hiç saha verisi göremeyebilir. Bu durumda Shopify'ın raporlarını esas alın.

Sık görülen nedenler

• Kaldırılan uygulamalardan kalan kodlar. Shopify'ın kendi hız rehberine göre bir uygulamayı kaldırmak, kodunu temanızdan otomatik olarak silmez. Eski snippet'ler, aylar önce kaldırdığınız uygulamaların script ve stil dosyalarını yüklemeye devam eder. Tema uygulama eklentileriyle (theme app extensions) geliştirilen uygulamalarda bu sorun büyük ölçüde yaşanmaz, çünkü bu uygulamaları eklemek için kimsenin tema kodunu düzenlemesi gerekmez.
• Çok sayıda uygulama ve script. Mağaza sayfalarına JavaScript ekleyen her uygulama tarayıcıya ek iş çıkarır. Shopify'a göre kötü bir INP değerinin en olası nedeni temadan, uygulamalardan veya etiket yöneticisinden gelen fazla JavaScript'tir.
• Büyük görseller. Fotoğraf makinesinden çıktığı boyutta yüklenip küçük bir kartta gösterilen ürün fotoğrafları boşuna veri harcatır. Shopify, görsellerin gösterildikleri boyuta göre küçültülmesini öneriyor. image_tag'i srcset ve sizes ile kullanırsanız her cihaz kendine uygun boyutta bir dosya indirir.
• Sayfanın çizilmesini engelleyen tema kodu. head bölümündeki eşzamanlı (synchronous) scriptler, sayfanın ilk görüntüsünü geciktirir. Shopify'ın tema rehberine göre kritik olmayan scriptlerde defer, yalnızca bağımsız üçüncü taraf scriptlerde async kullanılmalı. Ağır bölümler, kaydırmalı galeriler ve sayfa geçiş efektleri yükü daha da artırır.
• Üçüncü taraf etiketler. Canlı destek, ürün yorumu, ısı haritası ve reklam etiketleri çoğu zaman başka alan adlarından yüklenir. Her yeni alan adı için ayrı bir bağlantı kurulur. Etiket yöneticileriyle etiket eklemek kolaydır, eklenen etiketi unutmak da.

Önce neyi düzeltmeli

En çok trafik alan sayfa türlerinizde, mobilde eşiği geçemeyen metrikle başlayın. Ardından bu listeyi sırayla uygulayın.

• Kullanmadıklarınızı kaldırın. Yüklü tüm uygulamaları listeleyin ve her birinin hâlâ işinize yarayıp yaramadığını sorun. Ardından temada, daha önce kaldırdığınız uygulamalardan kalan kodları arayın. Uygulamamız Store Health bu artık kodları tarar.
• LCP görselini düzeltin. Pek çok ana sayfa, kategori ve ürün sayfasında LCP öğesi sayfanın üst kısmındaki büyük bir görseldir. Bu görselde geç yükleme (lazy loading) kullanmayın. Görselin fetchpriority değerini high yapın, sayfanın aşağısındaki görsellerde ise geç yüklemeyi kullanın.
• Scriptleri erteleyin. Sayfanın ilk görünümünde gerekmeyen scriptlere defer ekleyin. Canlı destek ve yorum widget'larını, sağlayıcısı destekliyorsa sayfa yüklendikten sonra yükleyin.
• Etiket yöneticisini temizleyin. Artık kullanmadığınız araçların etiketlerini ve bir uygulamanın zaten gönderdiği olayları tekrarlayan etiketleri kaldırın.
• Yer ayırın. Görsellere, videolara ve gömülü içeriklere genişlik ve yükseklik verin. Böylece bu öğeler yüklenirken içerik yerinden oynamaz. Düzen kaymalarının birçoğu bu şekilde önlenir.
• Temayı gözden geçirin. Yıllar boyunca üzerinde değişiklik yapılmış eski bir temayı düzeltmek, yenisiyle değiştirmekten daha maliyetli olabilir. Shopify güncel bir tema kullanılmasını öneriyor ve tek bir şablonda çok fazla bölüm kullanılmaması konusunda uyarıyor.

Her seferinde tek bir değişiklik yapın. Her değişiklikten sonra birkaç gün Shopify'ın raporlarını izleyin. Grafikteki olay işaretleri değişikliğin ne zaman yayına girdiğini gösterir, böylece işe yarayıp yaramadığını görebilirsiniz.

Bir de bizim bakmamızı isterseniz yardımcı olabiliriz. Hıza ve kalan kodlara odaklanan ücretsiz bir mağaza incelemesi yapıyoruz. Dilerseniz ücretsiz bir görüşmede raporlarınızı birlikte de inceleyebiliriz.