Shopify hız optimizasyonu: tema, uygulama, görsel

Her Shopify mağazası aynı sunucularda ve CDN'de çalışır, bu yüzden yavaş bir mağaza yüklediği şeyler yüzünden yavaştır: tema, uygulama script'leri, görseller ve video. Shopify'da hız optimizasyonu, barındırmayı değiştirmek değil, bunları kaldırmak ve küçültmek demektir. Çoğu mağazada en büyük kazançlar kullanılmayan uygulama kodunu kaldırmak, ana görseli sıkıştırmak ve widget'ları daha geç yüklemektir.

Bu rehber hızın doğru şekilde nasıl ölçüleceğini gösteriyor, ardından düzeltmeleri genellikle karşılığını verdikleri sırayla ele alıyor. Shopify SEO rehberinin bir parçasıdır.

Doğru sayfaları ölç

Yalnızca ana sayfayı değil, bir ürün sayfasını ve bir koleksiyon sayfasını test et. Sıralanan ve alıcıların geldiği sayfalar onlardır.

• Google PageSpeed Insights tek bir yükleme için laboratuvar puanları verir ve mağazanın yeterli ziyaretçisi varsa son 28 günde Chrome kullanıcılarından gelen gerçek Core Web Vitals verilerini gösterir. Google'ın kullandığı sayılar gerçek kullanıcı sayılarıdır.
• Search Console'un Core Web Vitals raporu URL'lerini durumlarına göre gruplar; böylece tüm ürün sayfalarının ortak bir sorunu olup olmadığını görebilirsin.
• Shopify'ın Analytics içindeki web performansı raporu aynı gerçek kullanıcı metriklerini zaman içinde gösterir; bir değişikliğin işe yarayıp yaramadığını kontrol etmek için faydalıdır.

Üç Core Web Vitals metriğine odaklan: Largest Contentful Paint (ana görselin ya da metnin ne kadar hızlı göründüğü), Interaction to Next Paint (sayfanın bir dokunuşa ne kadar hızlı yanıt verdiği) ve Cumulative Layout Shift (öğelerin ne kadar kaydığı). Laboratuvar puanları testten teste değişir; kusursuz bir 100'ün peşinden koşma.

1. Kullanmadığın uygulama kodunu kaldır

Uygulamalar yavaş bir Shopify mağazasının en yaygın nedenidir. Vitrine dokunan her biri her sayfaya JavaScript ve CSS ekleyebilir.

• Sahip olduğun uygulamaları listele. Artık kullanmadıklarını kaldır.
• Bir uygulamayı kaldırmak, temaya eklediği kodu her zaman kaldırmaz. Tema dosyalarında (Online Store > Themes > Edit code) uygulamanın adını ara ve kalan parçaları ve script etiketlerini sil.
• Tema uygulama uzantılarını (tema düzenleyicide eklediğin uygulama blokları) kullanan uygulamaları tercih et. Kaldırdığında temizce silinirler ve yalnızca onları yerleştirdiğin yerde yüklenirler.
• Tuttuğun uygulamaların her sayfada yüklenip yüklenmediğini kontrol et. Bir beden tablosuna yalnızca ürün sayfalarında ihtiyaç vardır.

2. En büyük görseli düzelt

Çoğu ürün ve koleksiyon sayfasında en büyük öğe bir ürün fotoğrafı ya da ana banner'dır. Onu hızlandır:

• Makul dosyalar yükle. Fotoğrafları yüklemeden önce yaklaşık 2.000 ile 2.500 piksel genişliğe yeniden boyutlandır ve sıkıştır. Shopify'ın CDN'i yeniden boyutlandırılmış sürümleri ve WebP gibi modern formatları otomatik sunar, ama çok büyük bir orijinal yine de zaman kaybettirir.
• İlk görseli geç yükleme (lazy-load). Sayfanın üstündeki görseller hemen yüklenmeli. Geç yükleme daha aşağıdaki görseller içindir.
• Duyarlı görseller kullan. Güncel temalar her ekrana doğru boyutu sunmak için Shopify'ın image_url ve image_tag filtrelerini kullanır. Eski temalar her cihaza tek bir büyük boyut sunabilir.
• Ana alanda otomatik oynayan videodan kaçın. Video gerekiyorsa önce bir kapak görseli göster, videoyu sonra yükle.

3. Widget'ları daha geç yükle

Yorumların, sohbet balonlarının, açılır pencerelerin, çapraz satış karusellerinin ve sosyal medya akışlarının üründen önce yüklenmesi nadiren gerekir.

• Sohbeti ve açılır pencereleri sayfa etkileşimli hale geldikten sonra ya da bir gecikmeyle yükle.
• Yorum widget'larını ana içeriği engellemesinler diye ekranın alt kısmına koy. SEO için yorum metnini sayfa HTML'inde tut.
• Artık bakmadığın üçüncü taraf izleme piksellerini kaldır. Her biri bir script daha demektir.

4. Güncel bir tema kullan

Shopify'ın ücretsiz Dawn tabanlı temaları dahil Online Store 2.0 için yapılmış temalar uygulama blokları, duyarlı görseller ve daha hafif JavaScript etrafında tasarlanmıştır. Ağır slider'lar ve jQuery içeren birkaç yıllık bir tema, ne kaldırırsan kaldır yavaş olabilir.

Değiştirmeden önce yeni temanın demo ürün sayfasını PageSpeed Insights'ta test et. Kendi demosunda yavaş olan bir tema senin ürünlerinle de yavaş olacaktır.

5. Düzen kaymasını durdur

Sayfa yüklenirken zıplayan içerik Cumulative Layout Shift'e zarar verir ve alıcıları rahatsız eder.

• Görsellere genişlik ve yükseklik ver (Shopify'ın image_tag filtresi bunları ekler).
• Yüklemeden sonra görünen banner'lar ve duyuru çubukları için yer ayır.
• Özel yazı tiplerini font-display: swap ile yükle ve kalınlık sayısını sınırla.

Pek işe yaramayanlar

• Hız artırıcı uygulamalar. Çoğu sayfaya kendi script'ini ekler. Kod kaldırmak, kod eklemekten iyidir.
• Barındırmayı ya da CDN'i değiştirmek. Shopify'da bunu yapamazsın ve gerek de yok.
• Birkaç kilobayt CSS'i küçültmek. Bir uygulamayı kaldırmak ya da ana görseli düzeltmekle karşılaştırıldığında gerçek kullanıcı metriklerini nadiren değiştirir.

Hızlı kalmasını sağla

Uygulama ve bölüm ekledikçe hız geriler. Her yeni uygulamadan sonra bir ürün sayfasını yeniden kontrol et ve Core Web Vitals raporuna ayda bir bak. zaDojo'nunki gibi bir site denetimi, tüm mağazadaki yavaş sayfaları ve fazla büyük görselleri işaretler; böylece sayfaları tek tek test etmek zorunda kalmazsın.

Sık sorulan sorular

Shopify hızı SEO'yu etkiler mi? Evet, biraz. Core Web Vitals bir sıralama sinyalidir, ama içerik ve alaka daha önemlidir. Hız satışlar için daha önemlidir: alıcılar yavaş ürün sayfalarını terk eder.

İyi bir Shopify hız puanı nedir? Gerçek kullanıcı verisinde "Good" Core Web Vitals hedefle (Largest Contentful Paint 2,5 saniyenin altında, Interaction to Next Paint 200 milisaniyenin altında, Cumulative Layout Shift 0,1'in altında). 100 üzerinden laboratuvar puanı bir hedef değil, bir yol göstericidir.

Shopify mağazam mobilde neden yavaş? Telefonların işlemcileri ve bağlantıları daha yavaştır, bu yüzden uygulamalardan gelen ağır JavaScript orada çok daha fazla zarar verir. Önce mobilde test et.