Birkaç hafta önce Bursa'dan bir mobilya satıcısı çaresizce aradı. „Pagespeed skorumuz mobilde 23. Google bunun felaket olduğunu söylüyor." Haklıydı. Mağazası ortalama bir 4G bağlantıda ilk görselin görünmesi için 7,8 saniye bekliyordu. Son iki yılda yaklaşık 500.000 TL pazarlama harcamıştı — ama ziyaretçilerin yarısı sayfa yüklenmeden çıkıyordu.
Üç hafta sonra mobil skoru 71'e, masaüstü 94'e çıktı. Yükleme süresi 2 saniyenin altına indi. Dönüşüm bir ay içinde %31 arttı. Ne yaptık? Sihir değil. Metodolojik olarak her performans frenini tespit ettik ve doğru sırayla kaldırdık. Bu yazıda size tam olarak bunu göstereceğim.
Shopify hızı neden önemli (kısa ve acı)
Google'ın kendisinin verdiği rakamlar:
- Yükleme süresi 1'den 3 saniyeye çıkınca hemen çıkma oranı %32 artıyor
- 1'den 5 saniyeye: %90 artış
- 1'den 6 saniyeye: %106
- 1'den 10 saniyeye: %123
Dönüşüm açısından:
- 1 saniye fazla yükleme = %7 daha az dönüşüm (Akamai araştırması)
- Amazon hesaplamış: 100ms gecikme = %1 ciro kaybı
- Walmart: her saniye iyileşme = %2 daha fazla dönüşüm
Shopify'ın kendisi 2022'de gösterdi: Pagespeed 70 üstü mağazalar, 40 altındakilere göre ortalama %28 daha iyi dönüşüm yapıyor. Modada %45 bile.
Yani mağazanız yavaşsa, kelimenin tam anlamıyla her gün para kaybediyorsunuz.
Mevcut hızınızı nasıl ölçersiniz?
Herhangi bir şeyi optimize etmeden önce ölçmeniz gerekiyor. Her gün kullandığım üç araç:
Google PageSpeed Insights
Resmi araç. pagespeed.web.dev adresine gidin, URL'nizi girin. İki değere bakın:
- Mobil Skor (önemli olan — trafiğinizin %60'ı mobil)
- Masaüstü Skor (genelde 20-30 puan daha yüksek)
Hedef: Mobil 70 üstü, masaüstü 90 üstü. Ulaşılabilir ama kolay değil.
Shopify'ın yerleşik Speed Report'u
Shopify Admin → Analytics → Reports → "Online store speed". Bu skor Shopify'ın kendi değerlendirmesi. 50+ kabul edilebilir, 70+ iyi, 80+ mükemmel.
WebPageTest.org
Profesyoneller için. Hangi elementin ne zaman yüklendiğini, nerede tıkandığını gösteriyor. Daha karmaşık ama derin analiz için rakipsiz.
47 optimizasyon, etkiye göre sıralı
Bu listeyi beş yılda yaptığım Shopify denetimlerinden derledim. Etki/çaba oranına göre sıralı. Sadece ilk 10'u uygulasanız bile mümkün iyileştirmenin %70-80'ini alırsınız.
KADEME 1 — En büyük etkili acil önlemler
1. Görselleri sıkıştırın ve WebP'ye geçirin. Bir numara bu. Yükleme süresinin %60-70'i görsellerden. Shopify 2022'den beri otomatik WebP'ye çeviriyor ama birçok mağazada hâlâ eski JPG/PNG'ler var. tinypng.com veya Crush.pics gibi araçlar bir saatte yüzlerce görseli optimize edebilir.
Gerçek etki: Bursa'daki mobilya satıcısında: 4,8s yükleme süresi sadece görsel optimizasyonuyla 2,9s'ye düştü.
2. Fold altındaki görseller için lazy loading aktive edin. Dawn ve tüm modern temalar bunu otomatik yapıyor. Ama kontrol edin: temanızın kodunda loading="lazy" var mı img etiketlerinde?
3. Kullanılmayan uygulamaları kaldırın. Her uygulama frontend'inize kod yüklüyor. İki yıl önce kurduğunuz ve bir daha dokunmadığınız uygulamalar yine de performansınızı öldürüyor. Shopify Admin → Apps → acımasızca silin.
Gerçek etki: Bir denetimde 32 uygulamadan 17'sini sildik. Pagespeed skoru: 41 → 67.
4. Hero görselini optimize edin (LCP). Largest Contentful Paint genelde hero görseliniz. 800 KB'sa tüm sayfa yavaşlar. Hedef: 200 KB altı, WebP format, tam çözünürlük (mobil için büyütülmüş görsel olmasın).
5. Temayı modern bir taban üzerinde kontrol edin. 2021 öncesi temalar genelde ağır. Dawn (Shopify'ın kendi), Origin, Studio, Sense — bunlar performans odaklı. Eski bir premium temanız varsa (Avone, Booster, Wokiee) tema değişimi genelde tek çözüm.
KADEME 2 — Yüksek etki, orta çaba
6. Custom fontları azaltın. Her ek font 100-300 KB. Maksimum iki font (başlık + gövde), maksimum 2-3 ağırlık (ör. 400, 600, 700).
7. Google Fonts'u lokal barındırın. Google'dan direkt yüklemek yerine (ekstra DNS lookup) Shopify'ın font loader'ını kullanın. 200-400ms tasarruf.
8. Kritik kaynaklar için preload. theme.liquid'de <head> içine hero görseli için preload ekleyin. Tarayıcı ihtiyacı olduğunu bilmeden yüklemeye başlar.
9. Uygulamaların "Asset Loading" kontrol edin. Bazı uygulamalar sadece ürün sayfasında gerekli olmasına rağmen HER sayfada kod yüklüyor. Tema kodunda uygulama bloğunu koşullu yapın.
10. Tracking piksellerini azaltın. Facebook, Google Analytics, TikTok, Pinterest, Klaviyo — her piksel performans maliyeti. Gerçekten hepsine ihtiyacınız var mı? 6 aydır değerlendirilmeyen pikseli kaldırın.
KADEME 3 — Orta etki, yüksek detay
11. CSS minify ve birleştirme. Shopify kısmen otomatik yapıyor ama custom section veya uygulama CSS'i genelde optimize değil.
12. JavaScript defer/async. defer veya async olmayan scriptler render'ı engelliyor.
13. Third-party scriptleri consent manager ile yükleyin. Tracking pikselleri cookie consent sonrası yüklensin. Hem performans hem KVKK.
14. Critical CSS inline. İlk görünür alan için gereken CSS'i HTML'e gömün. Bir round-trip tasarrufu.
15. İkonlar için SVG sprite. 20 küçük ikon görseli yerine bir SVG sprite. Request sayısını drastik azaltır.
16-20. CDN cache kontrolü, uzun anasayfalarda section splitting (max 6-8 section), ağır animasyonları mobilde azaltma, video hero'yu mobilde resimle değiştirme, slideshow görsellerini önceden yükleme.
KADEME 4 — Teknik detay optimizasyonları
21-30. Tema ayarlarını gözden geçirme, Liquid döngülerini optimize etme, metafield kullanımını verimli yapma, infinite scroll yerine pagination, variant switching optimizasyonu, quick-view uygulama kontrolü, wishlist performans kontrolü, son görüntülenen ürün limitini azaltma (4-6 yeterli), search suggestion kontrolü, review'ları lazy load etme.
KADEME 5 — İleri düzey optimizasyonlar
31-40. Resource hints (preconnect, dns-prefetch), CLS'i sıfıra indirme (width/height her zaman tanımlı), FID optimizasyonu (JS code splitting), server-side rendering kontrolü, AVIF format testi, Brotli compression, tema JS'ini modüllere bölme, inline SVG, CSS framework bloat eliminasyonu, ağır formları sadeleştirme.
KADEME 6 — Headless / Hydrogen seviyesi
41-45. Hydrogen / Headless mimari (Pagespeed 95+ istiyorsanız), edge caching, statik sayfa üretimi, ISR, Next.js / Remix alternatifi.
KADEME 7 — İzleme ve bakım
46. Real User Monitoring kurulumu. SpeedCurve veya Calibre gibi araçlar gerçek kullanıcı deneyimini ölçer.
47. Her 6 ayda bir performans denetimi. Uygulamalar kuruluyor, tema güncellemeleri kod değiştiriyor. Bugün hızlı olan 6 ay sonra yavaş olabilir.
Speed denetimlerinde tipik sürecimiz
Gün 1-2: Teşhis
PageSpeed Insights, WebPageTest, Lighthouse ile kapsamlı analiz. En büyük performans katillerini tespit edip etki/çaba sırasına koyuyoruz.
Gün 3-7: Quick Wins
Görselleri sıkıştırma, kullanılmayan uygulamaları silme, hero optimizasyonu. Tipik olarak 20-30 Pagespeed puanı kazandırır.
Gün 8-14: Tema optimizasyonu
Kod seviyesinde müdahale: JavaScript splitting, CSS optimizasyonu, critical CSS inline, lazy loading.
Gün 15-21: Uygulamalar ve üçüncü taraflar
Hangi uygulamalar gerekli, hangisi gidebilir, hangisi farklı konfigüre edilmeli? Tracking piksel denetimi.
Gün 22-28: İnce ayar
Son mil optimizasyonları: resource hints, compression header'lar, CDN ayarları. Son 5-10 puan genelde en zorudur.
Sıkça sorulan sorular
Gerçekten ne kadar Pagespeed skoru lazım?
Mobilde 60 üstü kabul edilebilir, 70 üstü iyi, 80 üstü mükemmel. 50 altında kesinlikle para kaybediyorsunuz. 90 üstü güzel ama son puanlar için harcanan çaba genelde ekonomik değil.
Optimizasyon ne kadar sürer?
Quick wins (görseller, uygulamalar, hero): 1 hafta. Tam optimizasyon: 3-4 hafta. Headless geçiş: 3-6 ay.
Profesyonel speed optimizasyonu ne kadara mal olur?
Denetim: 25.000-50.000 TL. Tam optimizasyon: 100.000-250.000 TL karmaşıklığa göre. ROI tipik 3-6 ay içinde.
Headless mağazam için mantıklı mı?
Yıllık 25 milyon TL altı yapıyorsanız: genelde hayır. Çaba faydayı aşıyor. 25 milyon üstü ve iddialı UX ile: değerlendirmeye değer.
Premium tema mağazamı hızlandırır mı?
Genelde tam tersi. Premium temalar (Booster, Avone, Wokiee) özellik zengini ama ağır. Dawn (ücretsiz) çoğunlukla daha hızlı.
Sonuç
Speed optimizasyonu %80 disiplin, %20 sihir. Çoğu mağaza ilk 10-15 optimizasyonla koda derinden müdahale etmeden performansını dramatik iyileştirebilir.
Mağazanızın nerede durduğundan emin değilseniz: pagespeed.web.dev üzerinden ücretsiz denetim yapın. Mobil skor 60'ın altındaysa daha fazla para kaybetmeyin. Bize ulaşın, ilk görüşme ücretsiz.
