Shopify Hız Optimizasyonu: Core Web Vitals Rehberi

Shopify altyapısı sunucu ve CDN tarafını sizin yerinize yönetir; ancak mağazanızın hızlı olup olmadığını büyük ölçüde temanız, uygulamalarınız ve görselleriniz belirler. Shopify hız optimizasyonu denildiğinde bugün ölçüt Google’ın Core Web Vitals metrikleridir: LCP, INP ve CLS. Bu yazıda bu metriklerin ne anlama geldiğini, Shopify’da nereden izleneceğini ve hangi iyileştirmelerin gerçekten fark yarattığını anlatıyoruz.

Hızın arama görünürlüğü ve dönüşüm üzerindeki etkisini daha geniş bir çerçevede e-ticaret SEO kontrol listesi ve dönüşüm oranı optimizasyonu yazılarımızda ele almıştık. Burada konuya Shopify’a özgü bir açıdan bakıyoruz.

Core Web Vitals nedir?

Core Web Vitals, Google’ın gerçek kullanıcı deneyimini ölçmek için kullandığı üç temel metriktir. Google’ın web.dev sitesindeki tanımlara göre “iyi” kabul edilen eşikler şunlardır:

Bu değerler, sayfa yüklemelerinin 75. yüzdelik dilimine göre değerlendirilir ve mobil ile masaüstü ayrı ayrı ölçülür. Yani ziyaretlerin en az yüzde 75’inde eşiğin altında kalmanız gerekir. Bir sayfanın “geçmesi” için üç metriğin de iyi eşikte olması gerekir. INP, Mart 2024’te FID’in yerine Core Web Vitals’a dahil oldu; web.dev’e göre INP’nin 500 milisaniyenin üzerinde olması “zayıf” kabul ediliyor.

Shopify site hızı nereden ölçülür?

Hızı ölçmek için üç kaynak birlikte kullanılmalıdır:

• Shopify web performansı raporu: Shopify’ın yardım merkezine göre yönetim panelinde Online Mağaza > Temalar sayfasında bir özet, Analizler > Raporlar altında ayrıntılı raporlar bulunuyor. Rapor son 30 günün gerçek kullanıcı verisine dayanıyor ve LCP, INP, CLS için “iyi, orta, zayıf” sınıflaması yapıyor. Verinin oluşması için mağazanın şifreli (özel) modda olmaması gerekiyor.
• Google Search Console: Core Web Vitals raporu, sorunlu URL gruplarını mobil ve masaüstü için ayrı gösterir.
• PageSpeed Insights: Tek bir sayfayı hem gerçek kullanıcı verisiyle (yeterli trafik varsa) hem de laboratuvar testiyle analiz eder ve somut öneriler sunar.

Önemli bir ayrım: Shopify pagespeed skoru olarak bilinen laboratuvar puanı, tek bir test anına ve simüle edilmiş bir cihaza dayanır. Sıralamada ve kullanıcı deneyiminde asıl önemli olan gerçek kullanıcı verisidir. Puanı 100’e çıkarmaya çalışmak yerine LCP, INP ve CLS değerlerini iyi eşiğe getirmeye odaklanın.

Shopify raporunda verinin 36 saate kadar gecikmeli gelebildiğini ve değerlerin son 30 güne yayıldığını unutmayın. Bir iyileştirme yaptığınızda etkisini hemen değil, birkaç hafta içinde göreceksiniz. Bu yüzden her değişikliğin tarihini not edin; böylece hangi adımın hangi metriği iyileştirdiğini sonradan karşılaştırabilirsiniz.

Shopify’ı yavaşlatan başlıca nedenler

• Fazla sayıda uygulama: Her uygulama vitrine kendi JavaScript ve CSS dosyalarını ekleyebilir. Kaldırılan uygulamalar bile tema koduna eklediği parçaları geride bırakabilir.
• Optimize edilmemiş görseller: Ana görselin gereğinden büyük yüklenmesi LCP’yi doğrudan bozar.
• Ağır tema özellikleri: Otomatik kayan slaytlar, video arka planlar ve çok sayıda animasyon özellikle mobilde yük oluşturur.
• Üçüncü taraf komut dosyaları: Sohbet araçları, ısı haritaları, pop-up’lar ve reklam etiketleri hem yüklemeyi hem tepki süresini etkiler.
• Yer ayrılmamış öğeler: Boyutu tanımlanmamış görseller, sonradan yüklenen bannerlar ve çerez uyarıları CLS’yi artırır.

LCP nasıl iyileştirilir?

Shopify mağazalarında LCP öğesi çoğunlukla ana sayfadaki büyük banner ya da ürün sayfasındaki ilk ürün görselidir. İyileştirme adımları:

1. Ana görseli tembel yüklemeden çıkarın: Ekranın ilk görünen kısmındaki görsel gecikmeli (lazy) yüklenmemelidir. Güncel Shopify temalarının çoğu bunu doğru yapar; özel kod eklediyseniz kontrol edin.
2. Doğru boyutu kullanın: Shopify’ın görsel filtreleri, cihaz genişliğine göre farklı boyutlarda görsel sunmanızı sağlar. Tema kodunda görsellerin uygun boyut setleriyle çağrıldığından emin olun.
3. Ana sayfa slaytını sadeleştirin: Tek ve güçlü bir görsel, çoğu zaman beş slayttan daha hızlıdır ve dönüşüm açısından da daha nettir.
4. Görsel dosyalarını küçültün: Yüklemeden önce görselleri gereksiz büyük çözünürlükten arındırın; Shopify modern formatları uygun tarayıcılara otomatik sunar.
5. Yazı tiplerini sınırlayın: Fazla sayıda özel yazı tipi ve kalınlık, metnin görünmesini geciktirir.

INP nasıl iyileştirilir?

INP, ziyaretçinin “Sepete ekle” butonuna, varyant seçimine veya menüye dokunduğunda sayfanın ne kadar hızlı tepki verdiğini ölçer. Kötü INP’nin en yaygın nedeni, ana iş parçacığını meşgul eden JavaScript’tir.

• Kullanmadığınız uygulamaları kaldırın ve tema kodunda geride kalan parçalarını temizleyin.
• Aynı işi yapan uygulamaları tekilleştirin; örneğin iki farklı yorum veya pop-up uygulaması kullanmayın.
• Sohbet ve pop-up gibi araçların sayfa yüklenir yüklenmez değil, kullanıcı etkileşiminden sonra veya gecikmeli çalışmasını sağlayın.
• Reklam ve analitik etiketlerini tema koduna gömmek yerine Shopify’ın Customer events altyapısı üzerinden yönetin. Kurulum ayrıntılarını Shopify’da GA4 ve Meta Pixel kurulumu yazımızda anlattık.

CLS nasıl iyileştirilir?

CLS, okumaya veya tıklamaya hazırlanan ziyaretçinin altından içeriğin kaymasıdır; yanlış ürüne tıklamaya ya da sayfadan vazgeçmeye yol açar.

• Görseller ve videolar için genişlik ve yükseklik değerlerinin tanımlı olduğundan emin olun.
• Duyuru çubuğu, kampanya bannerı veya ücretsiz kargo mesajı gibi sonradan beliren öğeler için sayfada önceden yer ayırın.
• Çerez uyarısını sayfanın akışını itecek şekilde değil, üst katman olarak gösterin.
• Yorum yıldızları gibi uygulama bileşenlerinin yüklendiğinde ürün başlığını aşağı itmediğini kontrol edin.

Shopify görsel optimizasyonu için pratik kurallar

Görseller çoğu Shopify mağazasında sayfa ağırlığının en büyük kısmını oluşturur. Ekibinizin ürün yüklerken uygulayabileceği basit kurallar belirleyin:

• Ürün görsellerini tutarlı bir en-boy oranında yükleyin; bu hem tasarımı hem CLS’yi iyileştirir.
• Gereğinden yüksek çözünürlükte görsel yüklemeyin; yakınlaştırma için makul bir üst sınır belirleyin.
• Görsellere ürünü tarif eden alternatif metin yazın; bu, erişilebilirlik ve görsel arama için de gereklidir.
• Ana sayfadaki videoları otomatik oynatmak yerine kapak görseliyle gösterin.

Tema seçimi ve özelleştirmenin hıza etkisi

Shopify Tema Mağazası’ndaki güncel temalar genellikle performans gözetilerek geliştirilir; ancak bir temanın demo mağazasındaki hızı, sizin uygulamalarınız ve içeriğinizle aynı kalmaz. Tema seçerken demo sayfasını PageSpeed Insights ile test edin, ardından kendi içeriğinizi ekledikten sonra tekrar ölçün. Tema dosyalarında özel değişiklik yapacaksanız temanın bir kopyası üzerinde çalışın ve her değişiklikten sonra ölçümü tekrarlayın.

Mobil ziyaretçiler neden öncelikli olmalı?

Shopify’ın web performansı özeti, oturumların cihaz türüne göre dağılımını da gösterir. Çoğu e-ticaret mağazasında trafiğin büyük kısmı mobil cihazlardan gelir ve mobil cihazlar hem daha yavaş işlemciye hem de daha değişken bağlantıya sahiptir. Bu yüzden masaüstünde iyi görünen bir sayfa mobilde eşiğin üzerinde kalabilir. İyileştirme çalışmalarına mobil değerlerden başlayın, testleri gerçek bir orta segment telefonda da tekrarlayın ve mobil menü, varyant seçici, sepet çekmecesi gibi etkileşimlerin gecikmeden çalıştığını kontrol edin.

Hangi sayfalardan başlamalısınız?

Tüm siteyi aynı anda düzeltmeye çalışmak yerine trafiğin ve gelirin yoğunlaştığı şablonlardan başlayın. Shopify’da sayfalar şablonlar üzerinden üretildiği için bir ürün şablonunda yapılan iyileştirme, o şablonu kullanan bütün ürün sayfalarına yansır. Öncelik sırası çoğu mağaza için şöyledir: ürün sayfası şablonu, koleksiyon (kategori) şablonu, ana sayfa ve sepet. Her şablonda önce LCP’yi, sonra CLS’yi, en son INP’yi ele almak genellikle en hızlı kazanımı sağlar; çünkü ilk ikisi çoğu zaman görsel ve yerleşim düzenlemeleriyle çözülürken INP için uygulama ve kod incelemesi gerekir.

Hız çalışması nasıl sürdürülebilir hale getirilir?

Hız tek seferlik bir proje değildir; her yeni uygulama, kampanya bannerı veya reklam etiketi değerleri yeniden bozabilir. Şu düzeni öneriyoruz:

1. Ayda bir Shopify web performansı raporunu ve Search Console Core Web Vitals raporunu kontrol edin.
2. Yeni uygulama kurmadan önce ve kurduktan sonra ana sayfa, kategori ve ürün sayfasını ölçün.
3. Kaldırılan uygulamaların tema kodunda iz bırakıp bırakmadığını kontrol edin.
4. Kampanya dönemlerinden önce ana sayfadaki ağır öğeleri gözden geçirin.

Sonuç

Shopify’da hız, altyapıdan çok sizin eklediklerinizle ilgilidir: uygulamalar, görseller, tema özellikleri ve üçüncü taraf komut dosyaları. LCP için ana görsele, INP için JavaScript yüküne, CLS için yer ayrılmamış öğelere odaklandığınızda en büyük kazanımları elde edersiniz. Ölçümü Shopify’ın gerçek kullanıcı verisiyle ve Search Console ile düzenli takip edin. Hızlı bir mağaza hem reklam bütçenizin daha verimli çalışmasına hem de ziyaretçilerin ürünü görmeden ayrılmamasına katkı sağlar; bu nedenle hız çalışmasını tek seferlik bir teknik iş değil, mağaza yönetiminin düzenli bir parçası olarak görün.

Mağazanızın hız sorunlarını tespit etmek, tema ve uygulama yükünü azaltmak için Shopify hız optimizasyonu dahil Shopify geliştirme hizmetlerimizi inceleyebilirsiniz. Önce durumu görmek isterseniz ücretsiz website analizi talep edebilirsiniz.

Sık Sorulan Sorular

Shopify site hızı nasıl ölçülür?

Shopify yönetim panelindeki web performansı raporu son 30 günün gerçek kullanıcı verisiyle LCP, INP ve CLS değerlerini gösterir. Buna ek olarak Google Search Console'daki Core Web Vitals raporunu ve tek sayfa analizi için PageSpeed Insights'ı kullanabilirsiniz.

Core Web Vitals için iyi değerler nelerdir?

Google'ın web.dev kaynağına göre LCP 2,5 saniye veya altı, INP 200 milisaniye veya altı, CLS 0,1 veya altı iyi kabul edilir. Değerler sayfa yüklemelerinin 75. yüzdelik dilimine göre, mobil ve masaüstü için ayrı değerlendirilir.

Shopify pagespeed skoru düşükse sıralamam düşer mi?

PageSpeed laboratuvar puanı tek başına sıralama ölçütü değildir. Google, gerçek kullanıcı verisine dayalı Core Web Vitals değerlerini kullanır. Puanı yükseltmek yerine LCP, INP ve CLS değerlerini iyi eşiğe getirmeye odaklanın.

Shopify uygulamaları siteyi yavaşlatır mı?

Vitrine kod ekleyen uygulamalar sayfa yüklemesini ve tepki süresini etkileyebilir. Kullanmadığınız uygulamaları kaldırın, kaldırdıktan sonra tema kodunda kalan parçaları kontrol edin ve aynı işi yapan uygulamaları tekilleştirin.

Shopify görsel optimizasyonu için ne yapmalıyım?

Ana görseli tembel yüklemeden çıkarın, görselleri gereğinden büyük yüklemeyin, tutarlı en-boy oranı kullanın ve görsellerin boyutlarının tanımlı olduğundan emin olun. Shopify, modern görsel formatlarını uygun tarayıcılara otomatik olarak sunar.