Aşağıdaki makale size yardımcı olacaktır:Shopify Hız Optimizasyonu Rehberi
Shopify mağaza sahipleri için en önemli hususlardan biri site performansıdır. Web sitenizin performansı, web sitenizin kullanıcıları dönüştürme yeteneğini doğrudan etkiler. Siteniz ne kadar hızlıysa, dönüşüm sağlama olasılığınız o kadar fazladır. Ayrıca, eğer arıyorsanız Shopify mağazanızın SEO’sunu iyileştirinperformans bir küçük sıralama faktörü Google’ın algoritmasında.
Ek olarak, site performansı diğer tüm dijital pazarlama girişimlerinizi etkiler. Ücretli, e-posta, çevrimiçi itibar yönetimi veya sosyal pazarlama olsun, web sitenizin hızı tüm bu farklı kanallardan kullanıcıları etkileyecektir. Siteniz bu kanallardan makul miktarda trafik alıyorsa, performansta yalnızca küçük bir artış bile gelirde gözle görülür artışlar sağlayabilir.
Site hızındaki bir saniyelik iyileştirme, bu site için +8.000$ gelir sağlayabilir.
Bu nedenle Shopify sitenizin iyi performans göstermesini sağlamak, mağazanızın başarısı için çok önemlidir. Shopify sitenizi hızlandırmak yalnızca kullanıcı deneyiminizi geliştirmekle kalmaz, aynı zamanda kârlılığınız üzerinde de doğrudan bir etkiye sahip olabilir.
Shopify Halihazırda Hangi Site Hızı Optimizasyonlarına Sahiptir?
Shopify’ın güzel yanlarından biri, mağazanızın kutudan çıkar çıkmaz bazı hız optimizasyonları ile gelmesidir. Genel olarak, Shopify siteleri diğer çözümlere kıyasla oldukça hızlıdır. Platform genellikle şu platformlardan daha hızlı olduğundan Shopify mağaza sahipleri için bu harika bir haber: magento.
Yeni bir Shopify sitesi oluşturduktan sonra, aşağıdaki performans özelliklerinin halihazırda uygulanması gerektiğini göreceksiniz:
- Tarayıcı Önbelleğinden Yararlanın: Shopify, sitenizin dahili kaynaklarını varsayılan olarak zaten önbelleğe almalıdır. Önbelleğe alma, resimler, JavaScript ve CSS gibi bazı içeriğinizin kullanıcıların tarayıcılarında yerel olarak depolanmasına olanak tanır. Bu, aynı kaynağı iki kez görüntülediklerinde içeriği yeniden indirmek zorunda kalmayacakları anlamına gelir. Kullanıcılar sitenizin içeriğinin bir kısmını eskisinden çok daha hızlı görebileceklerinden bu, mağazanızı hızlandırabilir. Üçüncü taraf kaynaklarının önbelleğe alma sorunları nedeniyle işaretlendiğini görüyorsanız, önbelleğe almayı doğrudan ayarlamak için yapabileceğiniz hiçbir şey olmadığını unutmayın.
- Bir CDN Kullanın: Shopify Fastly CDN’yi kullanır. Bir CDN (İçerik Dağıtım Ağı), sitenizin içeriğinin bir kısmının Dünya genelindeki sunucularda depolanmasına olanak tanır. Bu, kullanıcılarınız ile sitenizin içeriği arasındaki fiziksel mesafeyi azaltır. Fiziksel mesafeyi azaltmak, sitenizin performansını iyileştirmeye yardımcı olur.
Shopify Site Hızı Nasıl Optimize Edilir:
İşte bir Shopify sitesini hızlandırmak için 8 adım:
1. Hafif Bir Shopify Teması Seçin (Orijinal Veriler)
Hızlı bir Shopify teması seçmek, web sitenizi performans açısından hemen harika bir konuma getirebilir. Bazı temalar kutudan çıkar çıkmaz gereksiz şişkinliklerle gelebilir ve bu da sitenizi performans açısından dezavantajlı bir duruma sokar. Tersine, daha hafif bir tema, sitenizi ileriye dönük güçlü performans için ayarlayacaktır.
Size daha iyi performans gösteren temalardan bazıları hakkında bir fikir vermek için Shopify Tema mağazasında bulunan 200’den fazla şablonu test ettik ve karşılaştırma ölçütleri olan First Contentful Paint (FCP) ve Time To Interactive’i (TTI) Google PageSpeed Insights’tan kaydettik. Testlerimizin belirlediği en iyi performans gösteren temaları aşağıda bulabilirsiniz:
Elbette bu, yüksek performanslı temaların yavaşlatılamayacağı veya bunların siteniz için en iyi seçenekler olduğu anlamına gelmez. Ancak, hız optimizasyonu sizin için en önemliyse, bunlar seçmeyi düşünebileceğiniz şeyler olabilir.
2. Büyük Resim Boyutlarını Küçültün
Büyük resim varlıklarını yeniden boyutlandırmak, bir Shopify sitesini hızlandırmanın en iyi yollarından biri olabilir. Çok sayıda Shopify sitesini değerlendirirken, birçok işletmenin çok sayıda görsel kullanma eğiliminde olduğunu fark ettik. Görüntüler e-ticaret mağazalarının temelini oluşturduğundan bu mantıklıdır. Bu, görsellerin ürünleri öne çıkarmak için gerekli olduğu perakende gibi sektörlerde daha da doğrudur.
Görseller, mağazanızın kullanıcı deneyimini ve marka bilincini geliştirmenin harika bir yolu olsa da, genellikle bir performans ödünleşimi ile gelirler. Görüntü dosyalarının boyutu genellikle standart HTML veya CSS’den çok daha büyüktür. Sayfada çok sayıda resim kullanmanın sonucu, kullanıcıların indirmesi daha az resim yoğun bir sayfaya göre daha uzun süren çok ağır bir sayfa ağırlığı olabilir:
Bu sayfa, resim varlıklarında toplam boyutu 14 MB olan 173 resim isteği kullanıyor
Ayrıca, optimize edilmemiş resimler sitenizin sayfasını daha da ağırlaştırabilir. Görüntüler genellikle “oluşturma boyutlarından” çok daha büyük boyutlarda yüklenir. Bu, kullanıcıların tarayıcıda gerçekte gördüğü boyuttur:
Bu sayfa, oluşturma boyutunun neredeyse 2 katı kadar gerçek bir boyut içeriyor
Görüntüler, oluşturma boyutundan çok daha büyük boyutlarda yüklendiğinde bu, gereksiz performans sorunlarına neden olur. Bu, kullanıcıların, oluşturması için gerçekte gerekenden daha büyük bir görüntü indirmesi gerektiği anlamına gelir. Sonuç olarak, kullanıcıların içeriği fiilen görebilmeleri için fazladan tarayıcı kaynaklarını ve verilerini boşa harcamaları gerekir.
Belirli bir sayfada Chrome DevTools’u kullanarak daha büyük resimler bulabilirsiniz. Basitçe sağ tıklayın ve “İncele” yi seçin. “Ağ” sekmesine gidin ve sayfayı yenileyin. Bu size sayfanızı yüklemek için kullanılan tüm kaynakları gösterecektir. Ardından, en büyük varlıkları bulmak için “Boyut”a göre sıralayabilirsiniz.
Herhangi bir büyük resim (100+ KB) görürseniz, sayfanızda o resmi bulun ve bir kez daha sağ tıklayın ve “İncele”yi seçin. Görüntü bağlantısının üzerine geldiğinizde, gerçek (içsel) boyutla karşılaştırmalı olarak oluşturma boyutu gösterilir.
3. Görüntüleri Sıkıştırın
Görüntüler, sıkıştırılmadıklarında optimize edilmemiş de olabilir. Shopify mağazalarında, yüklenen resimlere gerekli olandan daha büyük resim boyutlarına yol açan hiçbir sıkıştırma uygulanmadığını görmek çok yaygındır.
Sıkıştırma kullanarak, görüntü varlıklarınızın orijinal görüntüden çok daha küçük dosya boyutlarına sahip olmasını sağlayabilirsiniz. Daha küçük dosya boyutu, tarayıcıların web sitenizin içeriğini daha hızlı yüklemesine olanak tanır.
Görüntü sıkıştırma söz konusu olduğunda, bu iki yöntemin bir kombinasyonunu kullanmayı tercih ediyoruz:
- Shopify Uygulamaları: Bazı uygulamalar, yükleme sırasında görselleri otomatik olarak sıkıştırır. ile iyi deneyimler yaşadık Crush.pics.
- optimize edilmiş: Bu, büyük resim varlıklarını sitenize yüklemeden önce manuel olarak sıkıştırmanıza olanak tanır.
4. GIF’leri Statik Görüntülerle Değiştirin
Daha yavaş Shopify mağazalarında gördüğümüz yadsınamaz bir trend, GIF’lerin kullanılmasıdır. GIF’ler, kullanıcılar için daha etkileşimli bir deneyim sağladıkları için son derece değerli olabilir. Bir kez daha, bu, sitenizi bir kullanıcı deneyimi ve marka perspektifinden geliştirmeye yardımcı olabilir.
Ancak, GIF varlıkları son derece büyüktür. Bir sayfada yalnızca bir GIF kullanmak bile boyutunu önemli ölçüde artırabilir:
Bu tek GIF varlığı 2,8 MB’dir
Sadece iki veya üç GIF kullanmanın tek bir sayfanın 10 MB’tan fazlasını oluşturduğu durumlar gördük. Bu dosyalar sayfa ağırlığına önemli ölçüde katkıda bulunur, bu nedenle mümkün olduğunda bunları statik resimlerle değiştirmeye çalışmanızı öneririz. Bu, önemli ölçüde kaynak tasarrufu ve iyileştirilmiş Shopify hız optimizasyonu ile sonuçlanabilir.
5. Tembel Yükleme Resimleri
Shopify siteleri listemizi PageSpeed Insights aracılığıyla çalıştırırken bulduğumuz en yaygın önerilerden biri “Ekran dışı görüntüleri ertele” idi. Bu, sitenin tüm resim varlıklarının aynı anda yüklendiğinin bir göstergesidir:
Birçok Shopify sitesi çok sayıda resim kullandığından, çok sayıda örnekte geç yüklemeye bakmak mantıklıdır. Bu, Shopify web sitenizi hızlandırabilir çünkü sitenizin tüm resimleri aynı anda yüklenmez, yalnızca kullanıcı sayfayı aşağı kaydırdığında yüklenir.
Yavaş yükleme uygulamakla ilgileniyorsanız, Shopify’da oldukça iyi yardım belgeleri bunun etrafında. Uygulamak için geliştiricilerimizle birlikte çalışarak müşterilerimiz için en iyi başarıyı elde ettik. tembel boyutlar kitaplığı.
6. Üçüncü Taraf JavaScript ve Shopify Uygulamalarını Sınırlayın
Bir Shopify mağazası, çok sayıda uygulama ve üçüncü taraf kaynağı kullanıyor. Bu, tarayıcının yapması gereken çok sayıda istekle sonuçlanıyor
WordPress eklentilerine benzer şekilde Shopify, site sahiplerinin bir geliştirici arka planına ihtiyaç duymadan web sitelerine kolayca işlevsellik eklemelerine olanak tanıyan “Uygulamalar”a sahiptir. Uygulamalar, sitenizin yeteneklerini artırmanın harika bir yoludur. Aynısı, herhangi bir ek üçüncü taraf komut dosyası için de geçerlidir.
Ancak, bu eklemelerin bir performans maliyeti olduğunu unutmayın.
Web sitenize her uygulama veya komut dosyası eklediğinizde, bu, sitenizin yaptığı toplam istek sayısını artırır. Ek olarak, bu komut dosyalarının boyutu da dikkate alınmalıdır. Çok fazla uygulama veya üçüncü taraf kodu, Shopify mağazanızın performansını düşürebilir.
Çok sayıda üçüncü taraf takip kodu kullanan bir Shopify mağazası örneği
Bu kaynaklar site performansına zarar verebileceğinden tüm izleme kodunu, Shopify Uygulamalarını ve kullandığınız diğer üçüncü taraf kaynakları düzenli olarak gözden geçirmeniz önemlidir. Pazarlama ve geliştirme ekibinizle dürüst bir konuşma yapmanızın yararlı olduğunu düşünüyoruz. Her kaynakla ilgili şu beş soruyu sormak, kaynak hakkında karar vermek için yardımcı olabilir:
- Bu özelliği gerçekte ne sıklıkla kullanıyoruz?
- Bu bir “olmazsa olmaz” mı yoksa “olsa iyi olur” mu?
- Kullanabileceğimiz daha hafif bir seçenek var mı?
- Bundan elde edeceğimiz fayda, bir performans değiş tokuşu yapmaya değer mi?
- Bu özelliğin kullanıcılarımız tarafından ne sıklıkta kullanıldığını görmek için başvurabileceğimiz herhangi bir ölçüm var mı?
Elbette bu soruların cevapları mağazanıza ve iş modelinize göre değişiklik gösterecektir. Örneğin, bir sohbet özelliği bazı mağazalar için çok önemliyken diğerleri için önemsiz olabilir. Bu soruları yanıtladıktan sonra, hangi öğelerin güvenli bir şekilde kaldırılabileceğini belirlemek için geliştirme ekibinizle çalışmanızı öneririz.
Nereden başlayacağınızdan emin değil misiniz? Shopify mağazalarının kullandığını tespit ettiğimiz ve performans üzerinde daha büyük etkilere sahip olma eğiliminde olan bazı üçüncü taraf kodlarını burada bulabilirsiniz:
Elbette bu teknolojilerin hiçbirine karşı değiliz. Ancak bunlardan birini kullandığınızı biliyorsanız bunun Shopify mağazanızın performansını etkileyebileceğini bilmenizde fayda var. Testiniz bunların sorunlara neden olabileceğini gösteriyorsa Shopify sitenizi hızlandırmak için bunları kaldırmayı veya değiştirmeyi düşünün.
7. İzleme Kodlarını Google Etiket Yöneticisine Taşıyın
Google Etiket Yöneticisi koda hiç dokunmanıza gerek kalmadan web sitenize kolayca etiket eklemenizi ve kaldırmanızı sağlayan bir çözümdür. Web sitenizin tüm izleme kodunu tek bir yerden yönetmenin harika bir yoludur. Ayrıca, Google Etiket Yöneticisi ile ilgili harika şeylerden biri de, tüm kodun eşzamansız yüklery. Bu, Google Etiket Yöneticisi aracılığıyla yüklenen kodun sitenizin içeriğinin oluşturulmasını engellemeyeceği anlamına gelir. Bu, izleme kodunuzun bir kısmını Google Etiket Yöneticisi’ne taşımak için bir “etiket taşıma” işlemini düşünebileceğiniz anlamına gelir. Aşağıdaki adımları uygulayarak bunu yapabilirsiniz:
- Shopify mağazanıza Google Etiket Yöneticisi ekleyin
- Etiketler > Yeni’ye gidin ve Shopify’da kullandığınız “Etiket Türleri”nde yerleşik etiketleri arayın.
- Bu etiketleri Google Etiket Yöneticisi’nde uygulayın
- Herhangi bir yerleşik etiket bulamadıysanız, “Özel HTML”yi seçip etiketinizi ekleyebilirsiniz.
- Tetiklemenizi doğru ayarlayın. Çoğu zaman bu, “Tüm Sayfalar” olarak ayarlanır
- Google Etiket Yöneticisi değişikliklerinizi yayınlayın
- Shopify’a geri dönün ve Google Etiket Yöneticisi aracılığıyla eklediğiniz tüm uygulamaları kaldırın
- Mağazanıza gidin ve yeni etiketlerinizin düzgün çalıştığını test edin. Bunu Google Etiket Yöneticisi’ni kullanarak yapabilirsiniz. “Önizleme modu
Google Analytics, Hotjar, Facebook gibi izleme piksellerini ve diğer üçüncü taraf kodlarını Google Etiket Yöneticisi’ne taşımayı düşünün.
8. Mağazanızı Google PageSpeed Insights ile Yönetin
Google Sayfa Hızı Analizleri Google’ın site hız testi aracıdır. Sitenizi analiz eder ve hem sitenizin nasıl performans gösterdiğine ilişkin ölçümler hem de sitenizin hızını nasıl artırabileceğinize ilişkin öneriler sağlar. Bir test yapmak için araca gidin ve performans verilerini görmek istediğiniz sayfayı girin. Aşağıdaki ekran görüntüsü gibi bir şey görmelisiniz:
İyi miktarda veriyi geri alabilirsiniz ve oldukça bunaltıcı olabilir. Baktığımız temel veri noktalarını tartışalım:
- İlk İçerikli Boya: İçeriğin ilk bitinin oluşturulmasının ne kadar sürdüğü. Bu, kullanıcıya içeriğin yüklenmeye başladığını göstermek için önemlidir.
- Etkileşim Zamanı: Sayfanın kullanıcı için ilk kez etkileşimli hale gelmesinin ne kadar sürdüğü.
Genel olarak, belirli bir sayfanın nasıl yüklendiğine dair bir fikir edinmek için önce bu iki metriğe bakacağız. Bu, site hızı iyileştirmelerinizin bir etkisi olup olmadığını görmek için geri dönüp yeniden ölçebileceğiniz harika kıyaslama verileri sağlayabilir.
Shopify Store Performans Testleri (Orijinal Veriler)
Bilmek isteyebileceğiniz bir şey, mağazanızın diğer Shopify siteleriyle karşılaştırıldığında nasıl olduğudur. Size bir referans noktası vermek için en önde gelen Shopify mağazalarından bazılarının performanslarını kıyaslama amacıyla bir analiz gerçekleştirdik.
Metodoloji:
Bu verileri toplamak için 400’den fazla Shopify sitesinin ana sayfa performansını ölçtük. First Contentful Paint, Etkileşim Süresi, Sayfa Boyutu, Görüntü Boyutu ve Toplam İstekler gibi veri noktalarını topladık. Tüm performans verileri sitenin mobil versiyonu içindir. Ardından, Google PageSpeed puanına göre sayfaların üst ve alt %20’sini karşılaştırdık.
En iyi 20%:
- İlk İçerikli Boyama: 2,78 saniye
- Etkileşim Süresi: 8,98 saniye
- Toplam Sayfa Boyutu: 2.01 MB
- Toplam Resim Varlıkları: 1,11 MB
- İstekler: 72
Ortalama:
- İlk İçerikli Boyama: 3,8 saniye
- Etkileşim Süresi: 22,1 saniye
- Toplam Sayfa Boyutu: 4.41 MB
- Toplam Resim Varlıkları: 2,1 MB
- İstekler: 171
Alt %20:
- İlk İçerikli Boyama: 5,89 saniye
- Etkileşim Süresi: 30.37 saniye
- Toplam Sayfa Boyutu: 5.54 MB
- Toplam Resim Varlıkları: 2,59 MB
- İstekler: 235
Ek kaynaklar
Ayrıca, Shopify sitenizin performansını iyileştirmenin bazı ek yollarını arıyorsanız aşağıdaki kaynaklar yardımcı olacaktır. Shopify sitelerinde ve diğer içerik yönetim sistemlerine sahip sitelerde performansı artırmak için kullanılabilecek favori site hızı araçlarımızı ve kaynaklarımızı bir araya getirdik.
Sayfa Hızı Test Araçları:
- pingdom
- Google Sayfa Hızı Analizleri
- WebPageTest.org
- Chrome Geliştirme Araçları
- Google Deniz Feneri
- Google ile Düşün
Görüntü Optimizasyonu:
Devamını oku:
Shopify mağazanızın hızını optimize etmek istiyorsanız bunlar harika ayarlamalar olabilir. Görüntü optimizasyonunu iyileştirmek, istekleri azaltmak ve yavaş yüklemeyi uygulamak, sitenizin daha hızlı yüklenmesini sağlamanın harika yolları olabilir. Umarız sonuç, tüm dijital kanallarınız için kullanıcı deneyimini iyileştiren daha yüksek performans olur. Shopify mağazanızın site performansını veya SEO’yu iyileştirmek istiyorsanız Shopify SEO hizmetlerimiz hakkında daha fazla bilgi edinebilirsiniz.
Chris Long Hakkında
Chris Long, Go Fish Digital’de Pazarlamadan Sorumlu Başkan Yardımcısıdır. 9 yılı aşkın deneyimiyle Chris, Google’ın algoritması ve web teknolojisine ilişkin derin bir anlayışla müşterilerin organik trafiği iyileştirmelerine yardımcı olmak için benzersiz sorunlar ve gelişmiş arama durumları üzerinde çalışır. Chris, GEICO, Adobe ve The New York Times gibi müşteriler için arama stratejileri konusunda tavsiyelerde bulundu. Moz, Search Engine Land ve Search Engine Journal’a katkıda bulunmaktadır. Ayrıca SMX East ve BrightonSEO gibi endüstri konferanslarında konuşmacıdır.
