Shopify mağazanız yavaşsa ilk iş tema değiştirmek veya bütün uygulamaları kaldırmak değildir. Önce yavaşlığın hangi sayfada, hangi cihazda ve hangi davranışta ortaya çıktığını belirleyin. Ardından görsel yükleme, etkileşim gecikmesi ve içerik kaymasını ayrı inceleyip kanıtı en güçlü ilk müdahaleyi seçin.
“Telefonda ürün fotoğrafı geç geliyor”, “filtreye dokununca sayfa donuyor” ve “sayfa yüklenirken düğme aşağı kayıyor” üç farklı sorundur. Aynı hız puanı altında görünseler bile aynı değişiklikle çözülmeyebilirler.
Bu rehber çalışan Shopify mağazasında teşhis sırasını kurar. Gerçek mağazanızda ölçüm yapıldığı, hız artışı elde edildiği veya satışların değişeceği iddiasını taşımaz.
Önce yavaşlığın tarifini netleştirin
Müşterinin açtığı gerçek sayfa adresini ve yaptığı işlemi kaydedin. Sorun ana sayfada mı, koleksiyonda mı, belirli bir ürün şablonunda mı? İlk açılış mı geç, yoksa sayfa açıldıktan sonra seçenek değiştirmek mi zor?
Aynı sayfayı farklı bir cihaz ve bağlantıyla da deneyin. Tek bilgisayardaki eklenti, yerel bağlantı veya önbellek durumu bütün mağazayı temsil etmez. Yönetim panelinin yavaşlaması da müşterinin mağazasında görülen sayfa performansıyla aynı problem değildir.
İlk karşılaştırma için ana sayfa, önemli bir koleksiyon ve tipik bir ürün sayfası seçebilirsiniz. Belirli bir şablondan şüpheleniyorsanız aynı şablonu kullanan ikinci bir ürünü ekleyin. Bu örneklem tüm kataloğun test edildiği anlamına gelmez; ortak kaynağı aramayı kolaylaştırır.
Hangi ölçüm neyi anlatır?
Core Web Vitals, temel web deneyimi ölçüleridir. Yükleme, etkileşim ve yerleşim kararlılığını farklı ölçülerle izler:
Dar ekranda tabloyu yana kaydırabilirsiniz.
| Ölçüm | Açık adı ve sade anlamı | Mağazada neyi incelemeye yardım eder? | İyi düzey için eşik |
|---|---|---|---|
| LCP | Largest Contentful Paint; en büyük içerik öğesinin görünme süresi | İlk ekrandaki büyük ürün fotoğrafı veya ana içerik ne zaman görünüyor? | 2,5 saniye veya daha az |
| INP | Interaction to Next Paint; etkileşimden sonraki görsel yanıt süresi | Dokunma veya tıklamadan sonra ekran ne kadar çabuk tepki veriyor? | 200 milisaniye veya daha az |
| CLS | Cumulative Layout Shift; birikimli yerleşim kayması | İçerik yüklenirken metin ve düğmeler beklenmedik biçimde ne kadar yer değiştiriyor? | 0,1 veya daha az; birimsiz değer |
Bu eşikler mağazanızda ölçülmüş sonuç değildir. Gerçek kullanıcı değerlendirmesinde 75. yüzdelik değer kullanılır: deneyimlerin yüzde 75’inin bu değerde veya daha iyi olması incelenir. Yalnız en hızlı açılışı göstermek yeterli değildir. Tanımlar ve değerlendirme yaklaşımı Web Vitals belgesinde açıklanır.
INP bir düğmenin işlevsel olarak doğru çalıştığını göstermez; tepki süresini ele alır. Sepete yanlış ürün eklenmesi veya hiç eklenmemesi ayrıca işlev sorunudur. Hız kontrolünde doğru ürün seçimi, sepet ve ödeme yolunun çalışması yine korunmalıdır.
Gerçek kullanıcı verisi ile laboratuvar testi neden farklı?
Gerçek kullanıcı verisi, farklı cihaz ve bağlantılarla gelen ziyaretçilerin geçmiş deneyimini toplar. Laboratuvar testi ise belirli cihaz/ağ koşulları altında sayfayı çalıştırıp o denemede görülen sorunlara ilişkin ipucu verir. Birinin yeşil olması diğerinin mutlaka yeşil olacağı anlamına gelmez.
Dar ekranda tabloyu yana kaydırabilirsiniz.
| Kaynak | Gösterdiği veri | Nasıl kullanılmalı? |
|---|---|---|
| Shopify web performansı raporları | Mağaza ziyaretçilerinin gerçek deneyimi; sayfa ve cihaz gibi ayrımlar | Hangi sayfa ailesi ve cihaz grubunun sorun yaşadığını belirlemek |
| PageSpeed Insights gerçek kullanıcı bölümü | Chrome User Experience Report, yani Chrome kullanıcı deneyimi raporu verisi | Geçmiş deneyimi incelemek; sonucun tek sayfa mı bütün alan adı mı olduğunu kontrol etmek |
| PageSpeed Insights içindeki Lighthouse bölümü | Benzetilmiş koşullarda laboratuvar testi ve teşhis önerileri | Şüpheli kaynakları bulup kontrollü değişikliklerin aynı koşullardaki etkisini karşılaştırmak |
Chrome kullanıcı deneyimi veri kümesinin kısaltması CrUX’tır. PageSpeed Insights bu veriyi önceki 28 günlük dönem için sunar. Yeterli sayfa verisi yoksa alan adı düzeyindeki veriyi gösterebilir; onda da yeterli örnek yoksa gerçek kullanıcı sonucu sunmayabilir. Bu boşluğu “mağaza hızlı” ya da “mağaza başarısız” diye yorumlamayın. Ayrıntılar PageSpeed Insights açıklamasında bulunur.
Shopify performans özetinin dönemini bununla karıştırmayın: özet son 30 günlük gerçek deneyime dayanır. Ayrıntılı raporlarda tarih ve cihaz ayrımına bakın. Shopify verinin 36 saate kadar gecikebileceğini ve rapor verisinin son 90 günle sınırlı olduğunu belirtir. Web performansı raporları belgesi kapsamı açıklar.
Bu yüzden bir değişiklikten hemen sonra laboratuvar testinin iyileşmesi, geçmiş gerçek kullanıcı döneminin de aynı anda değişeceği anlamına gelmez. Karşılaştırdığınız dönem ve ziyaretçi örneklemini kaydedin.
Belirtiye göre ilk kontrolü seçin
Aşağıdaki bulgular gerçek mağaza ölçümü değildir. Bir sonuç uydurmadan teşhis düşüncesini somutlaştıran temsili durumlardır.
Dar ekranda tabloyu yana kaydırabilirsiniz.
| Temsili belirti | İlk araştırılacak alan | İlk kontrollü müdahale | Kabul kontrolü |
|---|---|---|---|
| Ana sayfada ilk büyük fotoğraf geç beliriyor | Büyük görselin boyutu, ne zaman istendiği ve görüntülenmesini bekleten işler | Gerçekte sorunlu görselin boyut/yükleme davranışını düzeltin | Aynı test koşulunda daha erken görünme; görüntü kalitesi ve kırpma doğru |
| Koleksiyonda filtreye basınca arayüz takılıyor | Filtreleme sırasında çalışan tema/uygulama kodu | Gecikmeye neden olduğu gösterilen işi azaltın veya yalnız gerektiğinde çalıştırın | Etkileşim daha çabuk; filtre sonuçları doğru |
| Üründe yorum alanı gelirken satın alma bölümü aşağı kayıyor | Sonradan eklenen içerik için ayrılmayan alan | Alanı önceden ayırın veya bileşenin yerleşimini düzenleyin | Kayma azalıyor; içerik ve düğmeler erişilebilir |
| Yalnız belirli ürün şablonu ağır | O şablondaki video, galeri ve uygulama blokları | İlgili bileşeni kontrollü örnekte sadeleştirin | Aynı şablondaki ürünlerde işlev ve görünüm doğru |
| Bütün sayfalar yeni uygulamadan sonra ağırlaştı | Uygulama varlıklarının gerçekten nerede yüklendiği | İzin verilen kapsamda tek bileşeni kapatıp karşılaştırın | İlgili kaynak/iş yükü azalmış; gerekli işlev korunmuş |
Zamanlama ipucu verir ama tek başına neden kanıtı değildir. Uygulama kurulumu ve kampanya görselleri aynı anda değiştiyse yalnız tarihe bakarak uygulamayı suçlamayın.
Görselleri incelerken hangi hatalara bakmalı?
Önce yavaşlık yaşanan sayfanın ilk büyük içeriğini bulun. Dosya gerçekten gereken boyutta mı geliyor? Telefonda küçük gösterilen görsel için gereksiz büyük kaynak mı indiriliyor? Görsel erken isteniyor ama başka işler yüzünden mi geç görünüyor?
Her görseli aynı anda ertelemek iyi bir kural değildir. İlk ekrandaki büyük görselin gecikmeli yüklenmesi onu daha da geç gösterebilir. Görünmeyen alt içerik için erteleme yararlı olabilirken ilk büyük görsel farklı öncelik ister. Google’ın LCP iyileştirme rehberi bu farkı açıklar.
Görseller için uygun alanın önceden ayrılması yerleşim kaymasını azaltmaya yardım eder. Kaynak boyutunu da ekranda gösterilen boyutla ilişkilendirin. Shopify tema performansı ilkeleri, doğru görsel boyutlarını ve yükleme davranışını ele alır.
Kaliteyi körlemesine düşürmeyin. Kumaş dokusu, etiket veya ürün ayrıntısı okunamaz hale geliyorsa daha küçük dosya elde etmek müşteri kararını zorlaştırabilir. Hedef, gerekli görseli doğru boyutta ve doğru sırada sunmaktır.
Uygulama kontrolünde sayıdan çok yüküne bakın
Beş uygulamalı mağazanın on uygulamalı mağazadan mutlaka hızlı olacağı söylenemez. Yönetim panelinde çalışan bir araçla her sayfaya kod ekleyen vitrin bileşeni aynı etkiye sahip değildir. Uygulamaları yalnız adetlerine göre sıralamak yerine nerede hangi kaynakları yüklediklerini inceleyin.
Uygulama bloğu, temaya gömülü bileşen, elle eklenen izleme kodu ve etiket yöneticisinden gelen kaynaklar farklı yerlerde olabilir. Aynı işlevin iki çözümle tekrar çalışması ihtimalini de kontrol edin. Shopify performans iyileştirme belgesinde tema, uygulama ve ek üçüncü taraf kodlarını başlıca etkenler olarak ayırır.
Bir uygulamayı kaldırmadan önce yaptığı işi, tuttuğu veriyi ve diğer bağlantılarını belirleyin. Uygun bir bileşeni deneme amacıyla devre dışı bırakmakla uygulamayı mağazadan kaldırmak aynı işlem değildir. Tema kopyası almak da uygulamanın mağaza genelindeki ayarlarını ve ürün verisini ayrı bir deneme ortamına dönüştürmez.
Shopify, bazı uygulamaların eklediği tema kodunun kaldırma sonrasında kalabileceğini belirtir. Ek temizleme gerekiyorsa uygulama geliştiricisinin yönergesini kullanın; dosya adında uygulama adı var diye kodu körlemesine silmeyin. Uygulama kaldırma belgesi bu koşulları açıklar. Uygulamanın gerekliliğini yeniden değerlendirmek için uygulama seçimi rehberine dönebilirsiniz.
Tema değişmeli mi?
Önce sorunun temanın ortak yapısında mı, belirli bir bölümde mi, yoksa dış bir bileşende mi olduğunu bulun. Yalnız ana sayfadaki ağır bir video nedeniyle bütün temayı değiştirmek kapsamı gereksiz büyütebilir. Tersine, pek çok sayfada tekrarlanan sorunlar varsa ortak geliştirme ihtiyacı doğabilir.
Yeni tema, aynı büyük medya ve uygulama yüküyle kurulduğunda sorunu otomatik çözmeyebilir. Mevcut temayı geliştirme, sürüm güncelleme ve yeni temaya geçme seçeneklerini tema yenileme karar rehberindeki koşullarla karşılaştırın. Güncelleme seçilirse tema güncelleme rehberi özel kod ve geri dönüş planını ele alır.
Shopify zaten barındırma ve içerik dağıtım ağı gibi altyapı hizmetlerini sağlar. Genel tarama aracında görülen her sunucu ayarını mağaza sahibinin değiştirebileceği varsayımıyla hareket etmeyin. Önce sizin denetiminizdeki sayfa, medya ve ek kod alanına odaklanın.
Değişikliğin işe yaradığını nasıl kontrol etmeli?
Tek bir hipotez seçin: “Ürün galerisinin ilk görseli geç isteniyor.” Başlangıçtaki sayfa, cihaz koşulu, ilgili ölçüm ve şüpheli kaynağı kaydedin. Düzeltmeden sonra aynı koşullarda birkaç tekrar yaparak tek denemenin oynaklığını görün. Farklı sayfa veya cihaz puanlarını önce/sonra sonucu gibi karşılaştırmayın.
Temsili bir iş kaydı şu kadar açık olabilir: “İlk ürün görselinin gereksiz ertelendiği doğrulandıysa bu davranış düzeltilecek. Kabulde aynı ürün ve cihaz koşulunda görselin istenme zamanı, LCP, galeri kullanımı ve doğru seçeneğin sepete gitmesi kontrol edilecek.” Bu bir ölçüm sonucu değil, sınanacak müdahale örneğidir.
Laboratuvar bulgusuna ek olarak yeterli gerçek kullanıcı verisi oluştukça aynı sayfa/cihaz grubunu izleyin. Hız değişimi ile satış etkisini ayrı değerlendirin; kampanya, fiyat ve ziyaretçi kaynağı değişmişse satış farkını tek başına performansa bağlamayın.
Sonraki iş “mağazayı hızlandır” gibi belirsiz kalmasın. Sayfa, belirti, kaynak, değişiklik ve kabul ölçütü belirginse bunu geliştirme öncelikleri listesine taşıyın. Tema veya sayfa geliştirmesi gereken noktaları Shopify tasarım ve geliştirme kapsamında bu kanıtlarla ele alabilirsiniz.
