Shopify'ın kendi yayımladığı eşikler: CLS 0.1, INP 200ms, Theme Store için 60 Lighthouse. En yüksek etkili beş düzeltme, uygulamaların skora etkisi ve laboratuvar–saha ölçüm farkı.
Shopify mağazanızın hızı dönüşümü, tekrar eden satışı ve arama sıralamasını doğrudan etkiliyor. Bu yazıda Shopify'ın kendi belirlediği eşikleri, en yüksek etkiyi yaratan beş teknik düzeltmeyi, uygulamaların hıza etkisini ve laboratuvar ile saha ölçümü arasındaki farkı anlatıyoruz.
Sayfa hızı tartışması genelde tek bir sayıya indirgeniyor: "Lighthouse skorum kaç?" Oysa Shopify'ın hem tema hem uygulama tarafında yayımladığı somut eşikler var ve gerçek iyileştirme bu eşikleri hedefleyerek geliyor. Aşağıdaki rakamlar Shopify'ın kendi geliştirici belgelerinden.
Hangi eşikleri hedefliyorsunuz
| Ölçüt | Eşik | Nereden geliyor |
|---|---|---|
| CLS (görsel kayma) | 0,1 veya altı | Built for Shopify gereksinimi |
| INP (etkileşim gecikmesi) | 200 ms veya altı | Built for Shopify gereksinimi |
| Lighthouse performans skoru | Ortalama en az 60 | Shopify Theme Store kabul şartı |
| Uygulamanın skora etkisi | En fazla −10 puan | Uygulama mağazası şartı |
Theme Store eşiği önemli bir referans: bir tema mağazaya kabul edilmek için ana sayfa, ürün sayfası ve kategori sayfası ortalamasında en az 60 Lighthouse skoru almak zorunda. Yani mağazanız 60'ın altındaysa sorun büyük ihtimalle temanızın kendisinde değil, temaya sonradan eklenenlerde.
En yüksek etkiyi yaratan beş düzeltme
Shopify'ın "önce bunlara bakın" dediği liste, Core Web Vitals üzerinde en geniş etkiyi yaratan maddelerden oluşuyor:
- LCP görselini asla geç yükleme (lazy-load) yapmayın. İlk ekranda görünen büyük görsele
loading="lazy"koymak, o görseli yerleşim tamamlanana kadar bekletir. İlk ekrandaki görseller her zaman normal (eager) yüklenmeli. - LCP görselini
fetchpriority="high"ile işaretleyin. Tarayıcıya "bunu diğer kaynaklardan önce indir" der. Tek satırlık değişiklikle ölçülebilir LCP kazancı sağlar. - LCP görselini animasyonun arkasına saklamayın. Fade-in ve reveal animasyonları, görsel indikten sonra bile LCP olayını geciktirir.
- Kritik içeriği JavaScript ile değil Liquid ve HTML ile basın. Ürün bilgisini, hero alanını ya da menüyü istemci tarafı JavaScript'e taşımak hem LCP'yi geciktirir hem SEO'ya zarar verir. Liquid sunucu tarafında, tarayıcı hiçbir şey yapmadan önce render olur.
- İç içe Liquid döngülerinden kaçının. Ürün, varyant ve seçenekler üzerinde iç içe kurulan döngüler katalog büyüdükçe karesel şekilde büyür. 10 üründe hızlı olan tema 100 üründe yavaşlar — yüksek TTFB'nin en yaygın sebebi budur.
Bir uyarı da preload için: kaynak ipuçlarını fazla kullanmak tarayıcının kendi önceliklendirmesiyle yarışır ve sayfayı yavaşlatabilir. Yalnızca tarayıcının geç keşfettiği bir–iki kaynak için kullanın.
Uygulamalar: en sık atlanan yavaşlama sebebi
Shopify, bir uygulamanın mağaza hızına etkisini kurulum öncesi ve sonrası Lighthouse skorunu karşılaştırarak ölçüyor. Ölçüm şu ağırlıklarla yapılıyor:
| Sayfa | Ağırlık |
|---|---|
| Kategori sayfası | %43 |
| Ürün detay sayfası | %40 |
| Ana sayfa | %17 |
Bu ağırlıklandırma tek başına öğretici: ana sayfa hızı, ürün ve kategori sayfalarının yanında ikinci planda. Çoğu mağaza sahibi ana sayfayı optimize edip asıl dönüşümün gerçekleştiği sayfaları olduğu gibi bırakıyor.
Kural şu: bir uygulama mağazanın Lighthouse skorunu 10 puandan fazla düşürmemeli. Pratik yaklaşım, yüklü uygulamaları tek tek kaldırıp ölçmek — çoğu mağazada iki-üç uygulama toplam yavaşlamanın büyük kısmından sorumlu çıkıyor.
Bir de "sahte performans uygulamaları" uyarısı var: Lighthouse ve PageSpeed testlerini kandıran, saydam öğe enjekte eden ya da tarayıcı botlarına farklı sayfa sunan uygulamalar. Skoru yükseltir, gerçek kullanıcı deneyimini değiştirmez.
Lighthouse mu, gerçek kullanıcı verisi mi
İkisi farklı sorulara cevap veriyor ve karıştırılması en sık yapılan ölçüm hatası:
| Saha verisi (RUM) | Laboratuvar verisi (Lighthouse) |
|---|---|
| Gerçek kullanıcıların yaşadığını gösterir | Belirli bir sorunu ayıklamak için |
| Değişiklik öncesi/sonrası kıyas için | Tekrarlanabilir, karşılaştırılabilir ölçüm |
| Neyi optimize edeceğinize karar vermek için | CI/CD'de otomatik kontrol için |
| Yeni ya da düşük trafikli mağazada yetersiz | Saha verisi yokken tek seçenek |
Lighthouse skorları saha verisinden ciddi şekilde farklı çıkabiliyor — laboratuvar testi tek bir cihazda, simüle edilmiş ağ kısıtıyla çalışıyor; gerçek kullanıcılarınızsa çok çeşitli cihaz, bağlantı ve coğrafyada. Laboratuvar iyileştirmesini her zaman saha verisiyle doğrulayın.
Mobil: asıl sınav orada
Core Web Vitals varsayılan olarak mobilde ölçülüyor ve Shopify trafiğinin çoğunluğu mobilden geliyor. Yani mobil performans, tema performansıdır. Mobile özgü maddeler:
- Gerçekçi kısıtlamayla test edin. Mobil CPU ve ağ kısıtı olmadan yapılan test yanıltıcıdır.
- Araya giren tam ekran katmanları kaldırın. Sayfa yüklenirken içeriği kapatan pop-up'lar hem Google cezası hem CWV kaybı getiriyor.
- Dokunma hedeflerini büyütün. Etkileşimli öğeler mobilde en az 48 × 48 piksel olmalı; küçük hedefler yanlış dokunma ve INP kaybı üretiyor.
- Ekran genişliğini aşan içeriği düzeltin. Yatay kaydırma CLS'yi bozuyor.
- Mobil ve masaüstü içeriği eşit olsun. Mobilde CSS ile gizlenen içerik, Google'ın mobil öncelikli dizinlemesinde geri plana düşebiliyor.
Ölçüm ve sürdürülebilirlik
Shopify'ın Theme Check adlı resmî linter'ı, dağıtımdan önce aşırı büyük paket, ayrıştırmayı bloklayan script ve uzak kaynak gibi performans ihlallerini yakalıyor. Bunu geliştirme akışına koymak, sorunları canlıya çıkmadan durduruyor.
Tek seferlik performans projeleri neden başarısız oluyor? Çünkü her yeni uygulama, her yeni bölüm ve her kampanya scripti skoru yeniden aşağı çekiyor. İşe yarayan yaklaşım, ölçümü ve kontrolü tekrarlanabilir bir döngüye bağlamak — tema güncellemesi ya da uygulama kurulumu sonrası ölçüm yapmayı standart hale getirmek.
Sık yapılan hatalar
- Sadece ana sayfayı optimize etmek. Ölçümün %83'ü ürün ve kategori sayfasından geliyor.
- Lighthouse skorunu tek gerçek saymak. Saha verisiyle doğrulanmayan iyileştirme, iyileştirme değildir.
- Uygulamaları hiç gözden geçirmemek. Kullanılmayan uygulamalar kaldırılmadıkça script'leri yüklenmeye devam eder.
- Hero görselini animasyonla açmak. Estetik kazanç, LCP kaybıyla ödeniyor.
- Katalog büyürken temayı yeniden ölçmemek. İç içe Liquid döngüleri küçük katalogda görünmez, büyükte TTFB'yi patlatır.
Sonuç
Shopify'da hız optimizasyonu belirsiz bir "iyileştirme" işi değil; Shopify'ın kendi yayımladığı net eşikleri olan bir mühendislik işi. LCP görselini doğru yüklemek, kritik içeriği Liquid'de basmak ve uygulama envanterini temiz tutmak, çoğu mağazada kazancın büyük kısmını tek başına getiriyor.
Hızın dönüşüme etkisini ölçmek istiyorsanız dönüşüm oranı yazımıza, ölçümleme altyapısı için GA4 e-ticaret ölçümleme yazımıza bakabilirsiniz.
Commerslab olarak Shopify mağazalarının tema ve uygulama performansını bu eşiklere göre denetliyoruz. Shopify site kurulumu hizmetimizi inceleyin veya mağazanız için hız denetimi isteyin.
