Mobil e-ticaret sitesi nasıl hızlandırılır?

Mobil e-ticaret sitenizi hızlandırmak için en çok ziyaret alan kategori ve ürün sayfalarını telefonda ölçün. İlk ekranda geç görünen ürün fotoğraflarını, kullanımı geciktiren eklentileri ve kayarak düğmelerin yerini değiştiren alanları belirleyin. Her düzeltmeden sonra sayfanın açılışını ve ürünün sepete eklenmesini aynı koşullarda yeniden deneyin.

Önce test edilecek sayfaları seçin. Ardından görselleri hafifletin, eklentilerin yükleme sırasını kontrol edin ve sepete ekleme verisini açılış hızıyla birlikte değerlendirin. Ajansbox mağazanız için de aynı ölçüm düzenini kullanabilirsiniz.

Kategori ve ürün sayfalarını gerçek telefonda deneyin

Mobil ziyaretlerin sık başladığı bir kategori ile reklam veya arama üzerinden açılan bir ürün sayfası seçin. Giyim mağazasında görsel sayısı fazla olan bir koleksiyon, petshop e-ticaret sitesinde çok sayıda gramaj seçeneği bulunan bir ürün iyi birer örnektir. Hem kategori kartlarının hem ürün görseli ve seçeneklerinin yüklenmesini inceleyin.

Sayfayı müşterinin kullandığı bağlantıdan açın. İlk fotoğrafın görünmesini, listeye dokunabilmeyi, beden veya gramaj seçebilmeyi ve sepetin güncellenmesini sırayla deneyin. Ekran kaydı alırsanız gecikmenin hangi adımda ortaya çıktığını ekip arkadaşınıza gösterebilirsiniz. İlk yüklemede açılan pencere veya bildirimlerin ürün seçimini kapatıp kapatmadığına da bakın.

Her testte telefon, tarayıcı, bağlantı türü ve açılan adresi kaydedin. İlk ziyaret ile daha önce açılmış sayfanın tekrar yüklenmesi farklı sonuç verebilir. Önce ve sonra karşılaştırırken aynı koşulu kullanın. Birkaç deneme yapıp ortanca değeri almak, tek bir bağlantı dalgalanmasının sonucu belirlemesini önlemeye yardımcı olur.

Saha verisini ve laboratuvar ölçümünü birlikte okuyun

Google PageSpeed Insights, yeterli ölçüm olduğunda gerçek kullanıcı deneyimini gösteren saha verisini ve belirli koşullarda yapılan laboratuvar testini sunar. Mobil sonuçları seçip saha verisinin ilgili sayfaya mı yoksa daha geniş site kapsamına mı ait olduğuna bakın. Tek bir ürün adresi için yeterli saha verisi bulunmayabilir. Bu durumda laboratuvar ölçümü ve telefonla yapılan denemeler, olası sorunu daraltmaya yardımcı olur.

Saha verisindeki 75. yüzdelik değeri eşiklerle karşılaştırın. Ölçülen ziyaretlerin yaklaşık dörtte üçünde, bu değere eşit veya daha iyi bir performans kaydedilmiştir. Laboratuvar testindeki LCP ve CLS, tek denemenin koşullarını yansıtır. Örneğin engellenme süresi yüksekse uzun süren komut dosyalarını inceleyebilirsiniz. Bu bulguyu gerçek kullanıcıların INP değeriyle ayrı ayrı okuyun.

Saha ölçümü yakın geçmişteki ziyaretleri bir araya getirdiğinden yeni bir iyileştirme orada zaman içinde görünür. İlk günde telefonla alışveriş yolunu ve laboratuvar sonucunu yeniden kontrol edin. Sonraki dönemde aynı mobil kapsam için saha verisini tekrar inceleyin.

Gecikmenin hangi yükleme adımında oluştuğunu bulun

Sayfa geç açıldığında önce tarayıcının HTML yanıtını ne zaman aldığını inceleyin. İlk yanıt gecikiyorsa ürün fotoğrafının dosya boyutunu azaltmak gecikmenin tamamını çözmez. HTML hızlı geldiyse ana görselin isteğinin ne zaman başladığına, indirme süresine ve dosya indikten sonra ekranda ne zaman göründüğüne bakın.

Örneğin ana görsel 180 KB olduğu halde galeri kodu çalışana kadar tarayıcıya bildirilmemiş olabilir. Bu durumda dosyanın daha da sıkıştırılması yerine görsel isteğinin nasıl başlatıldığı incelenir. Tersine istek erken başlıyor ve dosyanın indirilmesi uzun sürüyorsa doğru görsel boyutuna geçmek daha somut bir ilk adımdır.

Ekip notuna geciken öğenin adını ve gözlenen yükleme sırasını yazın. Kategori sayfasında ilk kart, ürün sayfasında ana fotoğraf veya büyük bir metin alanı öne çıkabilir. Her sayfada ölçülen öğeyi ayrı tanımlamak, bir sayfanın sonucunu diğerine genellemeyi önler.

Kategori kartlarını ve ürün görsellerini uygun boyutta sunun

Bir kategori kartı ekranda küçük görünse de tarayıcıya yüksek çözünürlüklü bir dosya indiriliyor olabilir. Mobil görünümde kullanılan dosyayı kontrol edin. Kart, ürün galerisi ve yakınlaştırma için gereken boyutları ayrı düşünün. Listeye daha küçük bir görsel sunarken ürün detayında kumaş dokusu veya ambalaj bilgisi okunacak kadar ayrıntı bırakın.

Görselleri gereksinime göre yeniden boyutlandırıp sıkıştırın. Uygun destek bulunduğunda WebP veya AVIF gibi biçimleri test edin. Sonucu aynı telefonda açarak ürün rengini, kenarları ve detayları kontrol edin. Responsive görsel desteği kullanılıyorsa tarayıcının ekran genişliğine uygun dosyayı seçtiğini ağ isteklerinden doğrulayın.

İlk ekranda LCP öğesi olan ana ürün görselinin yüklenmesini öne alın. Bu görsel gecikmeli yükleniyorsa tarayıcının dosyayı ne zaman istemeye başladığını inceleyin. Aşağıdaki kartlarda ve görünüm dışındaki galeri fotoğraflarında gecikmeli yükleme kullanarak ilk ekranın ihtiyaç duyduğu kaynaklara öncelik verebilirsiniz. Yakınlaştırma için gereken büyük dosyayı da müşteri bu özelliği açtığında getirmeyi değerlendirin.

Fotoğraf ve video alanları yüklenmeden önce uygun en ve boy oranıyla yer ayırın. Örneğin kategori kartının görseli sonradan genişliyorsa altındaki ürün adı veya sepete ekleme düğmesi hareket edebilir. Yer ayırdıktan sonra uzun ürün adlarını ve farklı en boy oranlarına sahip fotoğrafları telefon ekranında deneyin.

Kategori sayfasında ilk yüklenen kart adedini de gözden geçirin. Listeye çok sayıda kartın fotoğrafı ve stok verisi birlikte yükleniyorsa ilk ekranda gereken alanı ayrı değerlendirin. Daha az kartla başlayıp kalan ürünlere sayfalama veya devam düğmesiyle erişilen bir deneme hazırlayabilirsiniz. Filtre ve sıralamayı kullandıktan sonra listeye geri dönüldüğünde seçimin korunup korunmadığını kontrol edin.

Ürün galerisinde her varyantın bütün fotoğrafları aynı anda isteniyorsa müşterinin açılışta göreceği fotoğrafları belirleyin. Diğer fotoğrafları ilgili renk veya gramaj seçildiğinde getirmeyi deneyin. Seçim değiştiğinde görselin doğru ürüne ait olduğunu ve ekranda boş bir alan kalmadığını doğrulayın.

Eklentileri ve takip kodlarını yükleme sırasına göre inceleyin

Canlı destek, ürün yorumları, video oynatıcılar ve reklam etiketleri sayfaya ek dosyalar getirebilir. Kategori ve ürün sayfasında hangilerinin çalıştığını listeleyin. Her birinin amacını ve hangi anda gerekli olduğunu belirleyin. Örneğin video oynatıcısı için önizleme göstermek ve oynatıcıyı kullanıcı dokunduğunda yüklemek ilk açılıştaki işi azaltabilir.

Bir eklentinin gecikmeye yol açtığını düşünüyorsanız değişikliği deneme ortamında tek başına uygulayın. Aynı sayfayı yeniden ölçün ve eklentinin görevini test edin. Yorum bölümü daha sonra yükleniyorsa müşteri oraya kaydırdığında içerik açılmalıdır. Reklam veya analiz etiketlerinde değişiklik yaptıysanız ürün görüntüleme ve sepete ekleme kayıtlarının doğru oluştuğunu da doğrulayın.

Satın alma için gerekli seçim, güvenlik ve ödeme bileşenlerini senaryolarıyla birlikte değerlendirin. Bir komut dosyasının yükleme sırası değiştiğinde başka bir işlevin ona bağlı olabileceğini hesaba katın. Örneğin beden seçeneklerini açan kod geç çalışırsa sayfanın ilk görüntüsü hızlı gelse bile satın alma adımı gecikebilir.

İki ölçümü karşılaştırırken ziyaretçinin seçim yaptığı pencerelerin durumunu aynı tutun. İlk denemede bazı etiketler yüklenirken diğerinde farklı tercih yüzünden çalışmıyorsa ölçülen süre farkının kaynağı belirsiz kalır. İlk ziyaret ve tekrar ziyaret senaryolarını ayrı kaydedin. Böylece bir eklenti kaldırılmadan veya geciktirilmeden önce hangi dosyaları getirdiğini karşılaştırabilirsiniz.

Dokunma tepkisini ve ekrandaki kaymaları kontrol edin

Mobilde filtreyi açmayı, ürün seçeneğini değiştirmeyi ve sepete eklemeyi sayfa henüz yüklenirken de deneyin. Geç gelen bir kampanya bandı veya yorum alanı, müşterinin dokunacağı düğmeyi hareket ettirebilir. Böyle bir alan için önceden yer ayırın veya görünümünü alışveriş düğmelerini itmeyecek şekilde düzenleyin.

Sepete ekleme isteği sürerken müşterinin işlemin başladığını anlamasını sağlayın. Düğmeye art arda dokunulduğunda sepetin istenmeyen biçimde artıp artmadığını kontrol edin. İşlem tamamlanınca güncel ürün adedi ve seçilen varyant görünmelidir. Test, hem tepki süresini hem alışveriş işleminin doğru sonuçlanmasını kapsamalıdır.

Önbellek ayarlarını içerik türüne göre yapın

Görsel, yazı tipi ve değişmeyen tema dosyaları uygun önbellek ayarlarıyla tekrar ziyaretlerde yeniden indirilmeyebilir. Güncellenen dosyalara sürüm içeren adres kullanılması, tarayıcının yeni dosyayı almasını kolaylaştırır. Görsel dağıtım hizmeti kullanılıyorsa müşterinin açtığı kategoride uygun boyutların gerçekten teslim edildiğini kontrol edin.

Stok, fiyat, hesap ve sepet bilgileri için farklı kurallar gerekir. Özellikle kullanıcıya özel yanıtların ortak önbellekten sunulmaması gerekir. Bir ürünün stoğunu güncellediğinizde müşterinin hangi miktarı gördüğünü ve sepet toplamının doğru hesaplandığını deneyin. Hız çalışmasından sonra farklı bir tarayıcıdan ve giriş yapılmış bir hesaptan aynı yolu yeniden kontrol edin.

Açılış hızını ve sepete ekleme oranını birlikte karşılaştırın

Sepete ekleme oranı için iyileştirdiğiniz sayfalardan geçen mobil oturumları seçin. En az bir başarılı ekleme olan oturumları sayın, seçilen oturumların toplamına bölün ve yüzle çarpın. Aynı ziyaret içinde birden çok ürün eklenirse oturumu bir kez sayın. Önceki ve sonraki dönemlerde aynı sayfaları, cihaz kapsamını ve olay tanımını kullanın.

Örnekte ilk ekrandaki büyük içerik öğesinin görünme süresi 1,3 saniye kısalmış, sepete ekleme oranı 1 yüzde puan artmıştır. Bu sonuç iki değişimi birlikte gösterir. Fiyat, reklam hedeflemesi ve stok gibi koşullar da değiştiyse hızın etkisini tek başına ayırmak güçleşir. Karşılaştırma tarihlerini ve diğer değişiklikleri test notuna yazın.

Hız artarken sepet oranı düşerse etkilenen telefonlarda seçimi ve ekleme kaydını tekrar kontrol edin. Ürün geç yükleniyor, eklenti ertelendiği için düğme çalışmıyor veya sepete ekleme etkinliği kaydedilmiyor olabilir. Sayfa açılışında elde edilen iyileştirmeyi değerlendirirken bu adımların doğru çalışmasını da doğrulayın.

Yeterli trafik varsa iyileştirmeyi benzer oturumları iki sürüme ayıran kontrollü bir denemeyle inceleyin. Ziyaretçilerin aynı ürünlere ve fiyatlara ulaştığından emin olun. Daha az trafiği olan mağazalarda benzer günleri ve kampanyaları karşılaştırarak başlangıç verisi oluşturun. Sepet oranı ile birlikte mobil satın alma sayısını ve varsa ekleme hatalarını da kaydedin. Böylece hızlanan sayfadan başlayan alışverişin siparişe kadar nasıl ilerlediğini görebilirsiniz.

Yayın sonrası kontrol için farklı bir ağda ürün seçimini, sepete eklemeyi ve satın alma yolunu yeniden deneyin. Örneğin yeni görsel dosyaları ürün kartlarında hız kazanımı sağlarken eski dosyaya bağlı bir renk seçeneği boş kalabilir. Böyle bir sorun görülürse etkilenen sayfaları ve varyantları belirleyip önce ürünün doğru gösterilmesini sağlayın. Sonra hız ve sepet ölçümlerini güncelleyin.

Ajansbox mağazasında önceliği örnek sayfayla belirleyin

Konya’da e-ticaret sitesi hazırlayan bir mağaza, demo görüşmesine bir kategori ve gerçek bir ürün örneğiyle gidebilir. Görselleri, varyantları ve kullanılacak eklentileri aynı senaryoda açın. MiniBox, SmartBox, ProBox ve PrimeBox seçenekleri için tema düzenleme, görsel yönetimi ve teknik destek kapsamını güncel teklif ve demo üzerinden doğrulayın.

Ajansbox mağazanızda görsel değişikliğini önce en yoğun mobil giriş sayfasında deneyin. Açılış, filtre, ürün seçimi, sepet ve ölçüm kayıtları beklendiği gibi çalışıyorsa düzeni benzer sayfalara uygulayın. Hangi dosyanın veya ayarın değiştiğini, ölçüm tarihini ve sorumlu kişiyi kısa bir kayda ekleyin.

İyileştirmeyi düzenli bir içerik kontrolüne dönüştürün. Örneğin kategoriye yeni bir kampanya görseli yüklendiğinde önce mobilde hangi dosyanın indirildiğine bakın. Mağazanın mevcut görsel ağırlığına ve bağlantı koşullarına göre kabul edilebilir bir boyut hedefi belirleyin. Kategori kartı ve yakınlaştırma görseli için ayrı hedefler kullanın. Görseli yükleyen ekibe bu iki hedefi örnek dosyalar üzerinden önceden gösterin. Bir sonraki tema güncellemesinde seçtiğiniz sayfaları yeniden ölçün. Ölçüm kaydına kampanya görselinin veya tema dosyasının değiştiği tarihi eklerseniz gecikmenin hangi güncellemeyle başladığını araştırabilirsiniz.

Sık sorulan sorular

Ana sayfa hızlıysa ürün sayfalarını ayrıca ölçmeli miyim?

Evet. Ürün galerisi, seçenekler ve eklentiler farklı dosyalar yükleyebilir. Özellikle reklamların açtığı ürün sayfasını ve çok ziyaret alan kategorileri ayrı ayrı deneyin.

PageSpeed puanı yükselirse sepete ekleme de artar mı?

Puan laboratuvar koşullarındaki performansı özetler. Gerçek ziyaretlerde sepete eklemeyi görmek için aynı mobil kapsamda önceki ve sonraki oturumları karşılaştırın. Ürün, fiyat ve trafik koşullarını da kaydedin.

İlk olarak görselleri mi eklentileri mi düzenlemeliyim?

Testte görülen gecikmeye göre başlayın. Ana fotoğraf geç geliyorsa dosya boyutunu ve istek sırasını kontrol edin. Düğmeler geç yanıt veriyorsa ilgili kodu ve bağlı eklentileri inceleyin.