Bir ziyaretçinin ürün sayfasına ulaştığı ilk saniyeler, alışverişin devam edip etmeyeceğini çoğu zaman belirler. Sayfa geç açılıyorsa, düğmeler dokunuşa geç yanıt veriyorsa ya da içerik yüklenirken yerinden kayıyorsa ziyaretçi sabrını kaybeder ve sepete tek bir ürün eklemeden ayrılabilir.

Bu yazıda hızın e-ticarette neden bu kadar önemli olduğunu, Google'ın sayfa deneyimini nasıl ölçtüğünü ve Shopify'ın mağazaları hızlı tutmak için altyapı tarafında neler yaptığını anlatıyoruz. Ardından mağazaları hâlâ yavaşlatabilen unsurları ve Booster Wizard olarak izlediğimiz optimizasyon adımlarını paylaşıyoruz.

Hız Neden Satışları Etkiler?

Hızlı bir mağaza, ziyaretçinin ürünleri rahatça gezmesini, aradığını çabuk bulmasını ve ödeme adımına takılmadan ilerlemesini sağlar. Shopify'ın yardım merkezi de web performansını iyileştirmenin alışveriş deneyimini güçlendirebileceğini, mağazanın daha kolay keşfedilmesine yardımcı olabileceğini ve dönüşüm oranlarını artırabileceğini belirtir.

Hızın bir de arama motoru tarafı var. Google, sayfa deneyimini ölçmek için Core Web Vitals adını verdiği üç metriği kullanır:

  • Largest Contentful Paint (LCP): Sayfadaki en büyük içeriğin, e-ticarette çoğu zaman ana ürün görselinin, ne kadar sürede göründüğünü ölçer. Google'a göre iyi değer 2,5 saniyenin altıdır.
  • Interaction to Next Paint (INP): Sayfanın tıklama ve dokunuşlara ne kadar hızlı yanıt verdiğini ölçer. İyi değer 200 milisaniyenin altıdır.
  • Cumulative Layout Shift (CLS): Sayfa yüklenirken içeriğin ne kadar kaydığını, yani görsel kararlılığı ölçer. İyi değer 0,1'in altıdır.

Google, iyi Core Web Vitals değerlerine ulaşmayı Arama'da başarı için önemle tavsiye ediyor ve bu metriklerin, diğer sayfa deneyimi unsurlarıyla birlikte, temel sıralama sistemlerinin ödüllendirmeyi hedeflediği deneyimle örtüştüğünü belirtiyor. Hız tek başına sıralamayı belirlemez; içerik ve alaka düzeyi her zaman önce gelir.

Shopify'ın Hız Altyapısı Neler Sunar?

Shopify'da barındırma, güvenlik ve platform güncellemeleri Shopify tarafından yönetilir. Hız açısından öne çıkan altyapı unsurlarını aşağıda ele alıyoruz.

Küresel İçerik Dağıtım Ağı (CDN)

Shopify mağazaları Cloudflare tarafından işletilen bir içerik dağıtım ağı üzerinden sunulur; Shopify'a göre bu ağ, mağazanın dünyanın her yerinde hızlı yüklenmesini sağlar. Temanın assets klasöründeki dosyalar da Shopify'ın CDN'inden HTTP/3, Brotli sıkıştırma ve uç önbellekleme (edge caching) ile, ek bir ayar gerektirmeden sunulur.

Otomatik Görsel Optimizasyonu ve Duyarlı Görseller

E-ticaret sayfalarının en ağır parçası genellikle görsellerdir ve ürün sayfalarında LCP öğesi çoğu zaman ana görseldir. Shopify'ın görsel CDN'i görselleri otomatik olarak optimize eder: her istek için en uygun görsel biçimini sunabilir, görseli yeniden boyutlandırıp sıkıştırarak dosya boyutunu küçük tutar. Temalarda kullanılan image_url ve image_tag Liquid filtreleri, srcset ve sizes nitelikleriyle birlikte her ekran genişliğine uygun boyutta görsel sunmayı kolaylaştırır.

Online Store 2.0 ve Tema Performansı

Online Store 2.0 temalarında sayfalar, tema düzenleyicisinden eklenip çıkarılabilen bölümler (sections) ve bloklardan oluşur. Bu yapı, sayfada yalnızca gerçekten kullanılan bölümlere yer vermeyi kolaylaştırır. Shopify Tema Mağazası'na girmek isteyen temalar için de bir performans şartı bulunur: Shopify'ın geliştirici dokümantasyonuna göre bir temanın ana sayfa, ürün ve koleksiyon sayfalarında ortalama en az 60 Lighthouse performans puanı alması gerekir.

Shopify'ın Ödeme Sayfası (Checkout)

Satışın tamamlandığı ödeme sayfası Shopify'ın kendi ürünüdür ve Shopify'a göre güvenlikten ya da performanstan ödün vermeden özelleştirilebilecek şekilde tasarlanmıştır. Ödeme sayfasına eklenen arayüz uzantıları (checkout UI extensions) ödeme sayfasından ayrı, yalıtılmış bir ortamda çalışır ve yalnızca platformun sunduğu bileşenleri kullanabilir. Bu yapı, satışın en kritik adımına rastgele betiklerin doğrudan eklenmesinin önüne geçer.

Kampanya Dönemlerinde Güvenilirlik

Black Friday ve Cyber Monday gibi dönemlerde trafik olağan günlerin çok üzerine çıkar. Shopify'ın mühendislik blogunda anlatıldığına göre şirket, kampanya döneminden aylar önce tüm platformu öngörülen trafik hacimlerinde yük testlerinden geçiriyor, ortaya çıkan sorunları kampanyadan önce gideriyor ve güvenilirliği yıl boyu süren bir çalışma olarak ele alıyor.

Otomatik SSL

Shopify'a eklenen tüm alan adları için TLS (SSL) sertifikası ücretsiz olarak sağlanır ve sertifika otomatik olarak oluşturulur. Sertifika satın almanız ya da yenileme tarihlerini takip etmeniz gerekmez.

Altyapı değiştirirken hızın yanında arama görünürlüğünüzü de korumak için: Shopify'a geçişte SEO rehberimiz

Sunucu Tarafı ve Tarayıcı Tarafı Özelleştirme: Hıza Etkisi

Bir mağazaya yeni bir özellik eklemenin iki temel yolu vardır. İlki, işi sunucuda yapmak ve tarayıcıya hazır HTML göndermektir. İkincisi, sayfaya JavaScript eklemek ve özelliğin ziyaretçinin tarayıcısında çalışmasını sağlamaktır. İkinci yolda eklenen her betik indirilir, işlenir ve çalıştırılır; bu da sayfanın açılmasını ve etkileşimlere yanıt vermesini geciktirebilir.

Kendi sunucu tarafı kodunuzu çalıştırmanıza izin vermeyen kapalı e-ticaret altyapılarında ek özellikler çoğu zaman sayfaya eklenen tarayıcı tarafı betiklerle hayata geçirilir. Özellik sayısı arttıkça betik sayısı da artar ve her biri yükleme süresine eklenir. Shopify'da ise iş mantığının önemli bir kısmı sunucu tarafında çalışabilir:

  • Liquid: Shopify temalarındaki Liquid şablonları sayfa yapısını tanımlar ve HTML'i sunucuda üretir. Shopify'ın geliştirici dokümantasyonuna göre tarayıcı, sunucuda oluşturulmuş HTML'i aldığında içeriği hemen gösterebilir ve gereken dosyaları hemen keşfedebilir.
  • Shopify Functions: İndirimler, teslimat seçenekleri, ödeme yöntemleri ve sepet doğrulama gibi kurallar, ödeme sürecinde Shopify'ın arka ucunda çalışan ve WebAssembly'ye derlenen kodlarla özelleştirilebilir. Bu kurallar için ziyaretçinin tarayıcısına ek betik göndermek gerekmez.
  • Özel uygulamalar: ERP, muhasebe, kargo ya da pazaryeri entegrasyonları gibi işler kendi sunucusunda çalışan bir uygulamayla yürütülür. Uygulama, Shopify Admin API ile veri okuyup yazar; sipariş oluşturulması gibi olaylardan ise webhook'lar sayesinde, mağazayı sürekli sorgulamadan haberdar olur. Bu iş akışları vitrinde çalışmadığı için ziyaretçinin indirdiği sayfaya kod eklemez.
  • Tema uygulama uzantıları: Bir özelliğin vitrinde görünmesi gerektiğinde uygulama blokları (app blocks) ve uygulama yerleştirme blokları (app embed blocks) kullanılır. Bu uzantıların dosyaları Shopify'ın CDN'inden sunulur, betikler yalnızca ilgili blokun bulunduğu ya da seçilen sayfalarda yüklenebilir ve tema kodunun elle düzenlenmesi gerekmez.

Sonuç olarak Shopify'da bir özellik eklemek, her zaman sayfaya yeni bir betik eklemek anlamına gelmez. Biz de projelerimizde önce bir işin sunucu tarafında yapılıp yapılamayacağına bakıyor, tarayıcı tarafında yalnızca gerçekten gereken kodu bırakıyoruz.

Hazır uygulaması olmayan entegrasyonları nasıl geliştirdiğimizi merak ediyorsanız: Shopify özel uygulama geliştirme yazımız

Shopify Mağazalarını Ne Yavaşlatır?

Altyapı ne kadar güçlü olursa olsun, mağazaya eklenen her şey performansı etkiler. Shopify'ın yardım merkezi de tema kodunu, uygulamaları, görselleri, videoları, kayan görsel alanlarını (carousel), sosyal medya akışlarını ve analiz araçlarını hızı etkileyebilecek unsurlar arasında sayar. Projelerimizde en sık karşılaştığımız nedenler şunlar:

  • Çok sayıda uygulama: Her biri vitrine kendi betiğini ve stil dosyasını ekleyen uygulamalar birikerek sayfayı ağırlaştırır. Shopify, bir uygulamayı kaldırmanın onun kodunu her zaman temizlemeyebileceğini de hatırlatır.
  • Ağır görseller ve videolar: Optimize edilmeden yüklenen büyük dosyalar, otomatik oynayan videolar ve ilk ekranda çok sayıda yüksek çözünürlüklü görsel, ana içeriğin görünmesini geciktirir.
  • Optimize edilmemiş özel kod: Gereksiz döngüler içeren Liquid kodu, sayfanın görüntülenmesini bekleten (render-blocking) betikler ve kullanılmayan CSS ya da JavaScript dosyaları.
  • Üçüncü taraf izleme kodları: Reklam pikselleri, etiket yöneticileri, canlı destek araçları ve analiz betikleri zamanla birikir; çoğu zaman bazılarının artık kullanılmadığı fark edilmez.
  • Sahte performans uygulamaları: Shopify'ın geliştirici dokümantasyonu, Lighthouse testlerini yanıltan ama gerçek kullanıcı deneyimini iyileştirmeyen sözde hız uygulamalarından kaçınılmasını öneriyor.

Booster Wizard Shopify Mağazalarını Nasıl Hızlandırır?

Hız optimizasyonuna mağazanın tamamını ele alan bir denetimle başlıyoruz. Ana adımlar şunlar:

  • Uygulama denetimi: Yüklü her uygulamanın vitrine ne eklediğini, hangi sayfalarda çalıştığını ve satışa katkısını inceliyoruz. Gereksiz uygulamaları ve kaldırılmış uygulamalardan kalan kodları temizliyoruz.
  • Birkaç uygulama yerine tek bir özel uygulama: Birbirine yakın işler yapan birden fazla uygulamanın yerine, yalnızca ihtiyaç duyulan özellikleri içeren ve mümkün olan her işi sunucu tarafında yapan yalın bir özel uygulama geliştiriyoruz.
  • Tema kodu optimizasyonu: Liquid şablonlarını sadeleştiriyor, kritik olmayan betikleri defer ya da async ile erteliyor, kullanılmayan CSS ve JavaScript'i kaldırıyoruz.
  • Doğru lazy loading: İlk ekranın altında kalan görselleri gecikmeli yüklüyor, ana ürün görseli gibi LCP öğelerini ise öncelikli yüklüyoruz; Shopify'ın da vurguladığı gibi LCP görseli hiçbir zaman gecikmeli yüklenmemelidir.
  • Görsel ve video düzeni: Görselleri doğru boyutlarda yüklüyor, genişlik ve yükseklik değerlerini belirterek düzen kaymalarını önlüyor, videoları yalnızca gerektiğinde yüklenecek şekilde yerleştiriyoruz.
  • İzleme kodlarının düzenlenmesi: Etiket yöneticisindeki kullanılmayan ya da düşük değerli etiketleri kaldırıyor, ölçümü bozmadan betik yükünü azaltıyoruz.

Hızı Nasıl Ölçüyoruz?

Ölçülmeyen bir iyileştirmeyi tamamlanmış saymıyoruz. Her çalışmadan önce ve sonra aynı sayfaları aynı araçlarla ölçüyoruz:

  • PageSpeed Insights: Laboratuvar testini ve yeterli veri varsa sayfanın gerçek kullanıcı verilerini tek ekranda görmek için.
  • Lighthouse: Değişikliklerin etkisini kontrollü bir ortamda, sayfa sayfa karşılaştırmak için.
  • Search Console Core Web Vitals raporu: Mağazanın gerçek ziyaretçi deneyimini sayfa grupları bazında takip etmek için.
  • Shopify'ın web performansı raporları: Shopify yönetim panelindeki bu raporlar, son 30 günün gerçek kullanıcı verileriyle LCP, INP ve CLS değerlerini gösterir ve uygulama kurulumlarının, tema güncellemelerinin bu değerleri nasıl etkilediğini izlemeye yardımcı olur.

Sonuç

Shopify; küresel CDN'i, otomatik görsel optimizasyonu, sunucu tarafında çalışan Liquid ve Functions altyapısı, ölçeklenen ödeme sayfası ve kampanya dönemlerine yönelik kapsamlı hazırlığıyla hızlı bir mağaza için sağlam bir temel sunar. Bu temelin üzerine eklenen uygulamalar, görseller ve kodlar doğru yönetildiğinde mağaza büyüdükçe de hızlı kalır.

Türkiye odaklı markalar için Shopify'ın avantajlarını anlattığımız yazı: Türkiye'de satış yapan markalar için neden Shopify?

Mağazanızın hızını ölçmek ve Shopify altyapısından en iyi şekilde yararlanmak istiyorsanız: Shopify Partner hizmetlerimizi inceleyin