Shopify Site Hızı Optimizasyonu İçin 9 İpucu

Shopify, Lindt gibi büyük şirketlerin e-ticaret mağazalarını yalnızca 5 gün içinde oluşturup açabildiği, inanılmaz derecede erişilebilir bir platformdur. Bir mağaza açmak ve hemen ticarete başlamak kolaydır ve bu süreci kolaylaştırmak için birçok yerleşik işlevselliğe sahiptir.

Ancak, tüccarların mağazalarından en iyi şekilde yararlanabilmeleri için bilmeleri gereken bazı şeyler vardır. Site hızı bu kritik faktörlerden biri olmaya devam ediyor. Yavaş yüklenen bir sitenin birçok olumsuzluğu vardır: düşük katılım ve yüksek hemen çıkma oranlarından, daha az trafiğe, daha düşük satışlara ve hatta hasar görmüş arama motoru sıralamasına (Google, hızlı yükleme süresi olan sayfaları sever), kendi işinizi daha iyi yapmak için elinizden geleni yapmak mantıklıdır. siteyi olabildiğince hızlı

Bu makalede, mevcut site hızınızı değerlendirmenin yollarını inceleyeceğiz ve ardından hızını artırmak için elinizden gelen her şeyi yaptığınızdan emin olmak için size en iyi ipuçlarımızı vereceğiz.

Shopify sitenizin mevcut hızını nasıl kontrol edebilirsiniz?

Size bir hız puanı ve iyileştirmeler için öneriler verecek olan PageSpeed ​​Insights'ı kullanın. Masaüstü ve mobil sonuçları ayıracak ve aşağıdakiler gibi önerilerde bulunacaktır:

• Resimlerinizi optimize edin
• JavaScript ve CSS'yi küçültün
• Ekranın üst kısmındaki oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın
• Tarayıcı önbelleğinden yararlanın ve sunucu yanıt süresini azaltın
• Yönlendirmelerden kaçının
• Gzip sıkıştırması

Testi sadece ana sayfanızda çalıştırmak yeterli değildir - en azından sitenizin en çok ziyaret edilen ilk 10 sayfasını test etmeye değer - hız iyileştirmelerinin en büyük etkiye sahip olacağı yer burasıdır. Bir webiste hız denetimini çalıştırma ve yorumlama kılavuzumuza göz atın.

Yine de Insights aracı için bazı uyarılar var. Yararlı olsa da, birkaç şeyi akılda tutmaya değer. Büyük ölçüde Javascript'e dayanan siteleri işaretler (çoğu Shopify sitesinin yaptığı gibi) ve siteleri bazı pratik hususları dikkate almayan teknik bir kontrol listesine göre değerlendirir. Testin gerçekleştirildiği anda ne kadar bant genişliğinin mevcut olduğuna bağlı olarak da değişebilir.

Başka bir ajansta, bazı site değişikliklerinin ardından puanı 98'den 96'ya düşen ve başka değişiklikler yaparak puanını geri almakta ısrar eden bir müşteriyi hatırlıyorum. Bunu yapmanın sitelerinin diğer alanlarını bozabileceğini veya baltalayabileceğini anlamadıkları şey, kritik faktör puandaki sayı değil, sitenin kendisinin gerçek dünyadaki kullanılabilirliği ve hızıydı.

Özetle: site hızınızda nerede olduğunuza dair bir fikir edinmek için iyi bir rehber, ancak her şeyin başı ve sonu değil.

Sayfa hızınızı değerlendirmek için Pingdom veya GTmetrix'i de kullanabilirsiniz - birkaç farklı araç denemek size hız performansı, sorunlar ve düzeltici eylem hakkında daha geniş bir genel bakış sağlayacaktır.

Site Hızınızı Nasıl Artırırsınız?

Sitenizin nasıl performans gösterdiğine dair bir fikriniz olduğunda, sayfalarınızı çalıştırdığınız herhangi bir aracın arkasından gelen bazı önerilen eylemler olabilir. Öyleyse, bunları tamamlamak için site hızınızı artırmak için yapabileceğiniz ilk on eylemimiz burada.

1 Sayfaları daha hızlı hale getirmek için AMP kullanın

AMP (hızlandırılmış mobil sayfalar), mobil cihazlarda sayfa yükleme hızını artırmaya yardımcı olur. Öncelik, sayfa boyutunu ve yükleme süresini azaltmak için web sayfalarını standart bir biçimde (Google tarafından tanımlanan) sunmaktır. Örneğin, sayfanın tüm içeriği aynı anda yüklenir ve tarayıcılar AMP sayfalarının düzenini önceden bilir.

Shopify, mağazalarının AMP sürümlerini standart olarak sunmasa da uygulama mağazasında, mağazanızın sayfalarının AMP sürümlerini sizin adınıza oluşturacak RocketAmp gibi uygulamalar bulunmaktadır. Bu rotayı izler ve uygulamayı kullanmayı daha sonra bırakırsanız, sayfa hatalarıyla ilgili sorunlara neden olabileceğini unutmayın.

2 Görüntü optimizasyonu

Resimlerinizi sıkıştırmak, özellikle e-ticaret sitelerinde web sayfalarının daha hızlı yüklenmesi için önemlidir.

Görüntü sıkıştırma, görüntünün orijinal boyutunda alınması ve ardından kalitesini etkilemeden dosya boyutunun küçültülmesi anlamına gelir.

Shopify, aşağıdaki resim biçimlerini kullanmanıza olanak tanır:

• JPEG veya JPG
• Aşamalı JPEG
• PNG
• GIF

PNG görüntüleri, resminizde saydam piksellere ihtiyacınız varsa yararlıdır (bunları genellikle arka planda saydam kısmı gösteren bir ızgara deseni ile görürsünüz), ancak genellikle JPEG'lerden daha fazla yer kaplarlar, bu nedenle, eğer varsa, JPEG'leri standart olarak kullanmayı düşünün. Yapabilmek.

İki sıkıştırma seviyesi vardır:

• görüntü kalitesinde azalma olmadan size küçük bir dosya veren 'kayıpsız sıkıştırma'
• 'kayıplı sıkıştırma', bu da daha da küçük bir dosyayla sonuçlanır, ancak görüntü kalitesinden ödün verilir

Her iki seçenek de sizin için mevcuttur, ancak ürün satan bir e-ticaret sitesi olarak, görüntülerin müşterileri satın almaya ikna etmenin önemli bir parçası olması muhtemeldir. Eastside Co tarafından 1.500 çevrimiçi alışverişçiyle yapılan yakın tarihli bir ankette, katılımcıların %37,8'i ürün görsellerinin satın alma kararlarında 'çok veya son derece etkili' olduğunu düşündüklerini söyledi. Bunu akılda tutarak, daha küçük dosyalar için kayıpsız sıkıştırma kullanmayı, ancak kaliteyi düşürmemeyi düşünün.

Sitenize görsel yüklediğinizde, piksel genişliği ve yüksekliği olarak sayfa için gereken boyutta olduklarından emin olun. Resimlerinizin boyutunu küçültmek için ücretsiz tinypng.com aracını kullanabilirsiniz.

3 Hızlı ve duyarlı bir tema kullanın

Eastside Co gibi bir Shopify Expert'in hizmetlerinden yararlanmak yerine kullanıma hazır bir tema kullanıyorsanız, hızlı ve duyarlı bir tema seçtiğinizden emin olun. Bu, web sitenizdeki öğeleri görüntülemek için kullanılan cihazın boyutlarına göre değiştirecekleri ve daha iyi ve daha hızlı bir kullanıcı deneyimi sağlayacakları anlamına gelir.

4 Mağazanızda yüklü olan uygulamaları inceleyin

Shopify mağazanızın yöneticisine gidin ve yüklediğiniz tüm uygulamaları inceleyin ve ihtiyacınız olmayan veya kullanmadığınız uygulamaları kaldırın. Genellikle Shopify sitelerinin daha yavaş hızının ardındaki sorun, üzerlerinde çalışan uygulamaların sayısıdır: Yüklediğiniz her uygulama, web sitenizde daha fazla kod ve yüklenecek daha fazla öğedir.

Uygulamaların yanı sıra, kullandığınız herhangi bir üçüncü taraf koduna bakmanız ve artık gerekmeyen herhangi bir şey varsa genel bir düzenleme yapmanız da faydalı olacaktır.

5 HTTP isteklerinin sayısını azaltın

Bir ziyaretçi web sayfalarınızdan birini tarayıcısına her yüklediğinde, CSS dosyaları, Javascript'ler, tasarım resimleri vb. gibi ek web dosyaları da yüklenir. Bunun gibi bir dosya her istendiğinde, tarayıcı için ek bir istek oluşturur. işlemek için. Bunlar HTTP istekleri olarak bilinir ve ne kadar çok olursa, o kadar uzun sürer.

HTTP isteklerinin sayısını azaltmak için atabileceğiniz birkaç teknik adım vardır. Bu makale, bunu yapmanıza ve sitenizin hızını artırmanıza yardımcı olacak 9 eylem sunmaktadır.

6 Bozuk bağlantıları ve yönlendirmeleri en aza indirin

Bozuk bağlantılar HTTP isteklerinizi artırabilir (5. maddeye bakın) ve mağazanızdan ayrılıp başka bir yerden alışveriş yapma şanslarını artıracağı için ziyaretçilerinizin bunlara ulaşmasını istemezsiniz.

Gereksiz yönlendirmeler (örneğin, A sayfası, B sayfasını işaret eder ve bu, örneğin, ziyaretçinin nihayet geldiği C sayfasını gösterir), ziyaretçinizin ulaşmasının daha uzun sürdüğü anlamına gelir ve genel site hızını düşürür.

Shopify uygulama mağazasında, bozuk bağlantıları ve yönlendirmeleri belirlemek ve bunları sürekli olarak düzeltmenize yardımcı olmak için kullanılabilen uygulamalar vardır.

7 Kaydırıcılardan ve atlıkarınca görüntülerinden kurtulun

Kaydırıcılar bazı web sitelerinde kalıcıdır, ancak bir dizi resim yerine tek bir kahraman resmi öneririz. Niye ya?

• Bırakın ikinci veya üçüncüyü görmeyi beklemeyi, ilk slayda neredeyse hiç kimse tıklamıyor.
• Her slayt, sayfaya ek ağırlık anlamına gelir ve kimse onları gerçekten görmediği veya kullanmadığı için büyük ölçüde gereksizdir.
• Mobil cihazlarda daha da az etkilidirler

Bunun yerine bir 'kahraman' resmi kullanın (açıklandığı gibi optimize edilmiştir). Tek ihtiyacın olan bu.

8 Tüm izleme kodunu Google Etiket Yöneticisi (GTM) aracılığıyla yerleştirin

Kullanmakta olduğunuz üçüncü taraf kodlarından herhangi birini Google Etiket yöneticisine taşıyın. Zamanla, sitenize pazarlama yazılımı veya analiz kodu eklenecek ve siteniz hantallaşabilir. GTM'yi kullanmak, tüm üçüncü taraf kodunun yönetilmesinin daha kolay olduğu ve ayrıca yalnızca ilgili sayfalara yüklendiği anlamına gelir. Ayrıca, hepsini takip edebileceğiniz ve satır boyunca gereksiz hale gelen tüm öğeleri kaldırabileceğiniz anlamına gelir.

9 Tembel yükleme

Bu, Shopify mağazanızın hızını artırmanın başka bir kolay yoludur. Geç yükleme, bir sayfada "ekranın üst kısmında" olmayan hiçbir şeyin, kullanıcı daha aşağı kaydırana kadar yüklenmediği bir yöntemdir.

Bu, resim ağırlıklı veya daha aşağıda video içeren sayfalarda hızı optimize etmek için harika bir 'hile'dir. Esasen, her şeyi aynı anda yüklemek yerine, yalnızca gerektiği gibi öğeleri getiriyorsunuz. CSS Püf Noktalarından tembel yüklemenin nasıl uygulanacağına ilişkin bu ayrıntılı kılavuza göz atın.

İşte karşınızda: Sitenizin hızını artırmak için elinizden gelen her şeyi yaptığınızdan emin olmak için aklınızda bulundurmanız gereken 9 pratik nokta. Shopify mağazanızla ilgili site hızından satışları artırmaya kadar herhangi bir yardıma ihtiyacınız olursa bize yazın!