E-ticaret sitesinde Core Web Vitals'ı iyileştirmenin en hızlı yolu sayfaları tek tek değil şablon şablon ele almaktır, çünkü bir ürün şablonundaki tek bir düzeltme binlerce ürün sayfasının LCP, INP ve CLS değerini aynı anda iyileştirir. E-ticaret sitelerinde yavaşlığın kaynağı genellikle aynı birkaç yerdir. Büyük ürün görselleri, kaydırıcılar, filtre menüleri, yorum ve sohbet eklentileri, reklam pikselleri ve kampanya açılır pencereleri.
Hızın sıralamaya etkisini ve Core Web Vitals'ın ne olduğunu site hızı ve SEO yazısında genel olarak anlattım. Burada e-ticarete özgü şablonlara odaklanıyorum. Her şablon için en sık gördüğüm sorunu ve çözümünü sırayla veriyorum. Sıralama, ziyaretçinin siteyle karşılaştığı sırayı izliyor. Ana sayfa, kategori, ürün ve en sonda sepet.
Ana sayfa neden genellikle en yavaş sayfadır?
Çünkü ana sayfa, herkesin bir şey eklemek istediği sayfadır. Tam ekran kaydırıcı, kampanya bannerları, video, Instagram akışı, çok satanlar, yeni gelenler, marka logoları. Her blok kendi görselini ve kodunu getirir. LCP genellikle kaydırıcının ilk görselidir ve bu görsel çoğu zaman masaüstü için hazırlanmış, megabaytlarca büyüklükte bir dosyadır.
- Kaydırıcı yerine tek ve güçlü bir ana görsel kullanmayı düşünün. Kaydırıcının ikinci ve üçüncü görselini kullanıcıların çok azı görür.
- Ana görseli mobil ve masaüstü için ayrı boyutlarda hazırlayın ve modern formatta sunun.
- Ana görselin geç yüklenmesini kapatın, hatta önceden yüklenmesini tarayıcıya bildirin.
- Ekranın altında kalan blokları kullanıcı aşağı kaydırdığında yükleyin.
Kategori sayfalarında hangi sorunlar öne çıkar?
Kategori sayfası onlarca ürün kartı, bir filtre menüsü ve sayfalama içerir. En sık sorun, bütün ürün görsellerinin tam boyutta yüklenmesi. Kart küçük görünür ama arka planda ürün sayfasındaki büyük görsel indirilir. İkinci sorun, filtre menüsünün sayfa yüklendikten sonra JavaScript ile oluşması ve ürün listesini aşağı itmesi. Bu durum CLS değerini bozar.
- Ürün kartları için kart boyutuna uygun küçük görseller üretin.
- İlk birkaç satırdaki ürün görsellerini hemen, geri kalanları kaydırdıkça yükleyin.
- Filtre menüsüne ve ürün ızgarasına baştan yer ayırın, sonradan eklenen öğeler içeriği kaydırmasın.
- Sonsuz kaydırma kullanıyorsanız, yeni yüklenen ürünlerin sayfa düzenini sarsmadığından emin olun.
Kategori sayfalarının içerik tarafını kategori SEO yazısında anlattım.
Ürün sayfasında LCP neden uzar?
Ürün sayfasında LCP neredeyse her zaman ana ürün görselidir. Bu görsel çoğu zaman bir galeri bileşeninin içinde yer alır ve galeri kendi kodu yüklenene kadar görseli göstermez. Kullanıcı ürünü görmek için galeri kodunun yüklenmesini bekler. Çözüm, ana görselin galeri kodundan bağımsız olarak HTML içinde hemen gösterilmesi ve galerinin etkileşim özelliklerinin sonradan devreye girmesi.
Ürün sayfasında INP'yi bozan ise genellikle varyant seçimi ve sepete ekle düğmesidir. Kullanıcı bir beden seçtiğinde fiyat, stok ve görsel güncellenir. Bu işlem ağır bir kodla yapılıyorsa düğme tepki vermekte gecikir. Sepete ekle düğmesine dokunduktan sonra yarım saniye boyunca hiçbir şey olmaması, kullanıcıya bozuk bir site izlenimi verir ve dönüşümü doğrudan etkiler. Ürün sayfasının hız tarafını dönüşüm açısından ürün sayfası hızı yazısında ayrıntılı ele aldım.
Sepet ve ödeme sayfaları neden ayrı izlenmeli?
Sepet ve ödeme sayfaları arama sonuçlarında görünmez, bu yüzden SEO ekipleri genellikle onlara bakmaz. Ama bu sayfalardaki yavaşlık doğrudan satış kaybıdır. Ödeme sayfasında adres formu, kargo hesaplama ve ödeme sağlayıcısının kodu birlikte yüklenir. Her biri ayrı bir gecikme kaynağıdır. Kendi analitiğinizde ödeme adımlarının yüklenme sürelerini ve terk oranlarını birlikte izlemek, hangi adımın müşteri kaybettirdiğini gösterir. Ödeme formunun kullanılabilirliğiyle ilgili önerileri web.dev'in form rehberi iyi özetliyor.
Üçüncü taraf uygulamalar ne kadar yük getirir?
Hazır e-ticaret altyapılarında çalışan sitelerde yavaşlığın en büyük kaynağı çoğu zaman kurulan uygulamalardır. Yorum widget'ı, canlı sohbet, sadakat programı, ürün önerisi, açılır pencere, geri sayım sayacı ve her reklam platformunun pikseli. Her biri tek başına küçük görünür ama birlikte ana iş parçacığını meşgul eder ve INP'yi bozar.
| Uygulama türü | Etkilediği metrik | Öneri |
|---|---|---|
| Canlı sohbet | INP | Kullanıcı etkileşimden sonra ya da birkaç saniye gecikmeyle yükleyin |
| Yorum widget'ı | CLS ve INP | Yer ayırın, yorum özetini sunucu tarafında basın |
| Açılır pencere | CLS ve INP | İlk yüklemede değil, kullanıcı etkileşiminden sonra gösterin |
| Reklam pikselleri | INP | Etiket yöneticisi üzerinden toplayın, gereksizleri kaldırın, mümkünse sunucu taraflı ölçüme geçin |
| Geri sayım ve stok uyarıları | CLS | Sabit alan ayırın, içerik değiştiğinde düzen kaymasın |
Pikselleri azaltmanın en etkili yolu sunucu taraflı ölçümdür. Meta Conversions API ve benzeri çözümler, tarayıcı yükünü azaltırken ölçüm kalitesini de artırır. Bunu sunucu taraflı izleme yazısında anlattım.
Hazır altyapılarda neyi kontrol edebilirsiniz?
ikas, Ticimax, IdeaSoft, T-Soft ya da Shopify gibi hazır altyapılarda sunucu tarafına ve tema koduna erişiminiz sınırlıdır. Ama kontrol edebileceğiniz alanlar düşündüğünüzden fazla. Yüklenen görsellerin boyutu ve formatı, temaya eklenen bölümlerin sayısı, kurulu uygulamalar ve açılır pencereler tamamen sizin elinizde. Benim önerim, her yeni uygulamayı kurmadan önce bir test ürün sayfasında hız ölçümü yapmak ve kurduktan sonra tekrar ölçmek. Fark büyükse uygulamanın getirdiği satış katkısıyla karşılaştırın. Bazı uygulamalar hız kaybına değmez.
Ürün görselleri hangi formatta ve boyutta yüklenmeli?
E-ticaret sitelerinde sayfa ağırlığının büyük kısmı görsellerden gelir. Fotoğraf stüdyosundan gelen görseller genellikle birkaç bin piksel genişliğinde ve birkaç megabayt büyüklüktedir. Bunları doğrudan siteye yüklemek, telefonda ürün kartı gibi küçük bir alanda bile bu büyüklüğün indirilmesi demektir. Benim önerim, her görsel için kullanım yerine göre birkaç boyut üretmek. Kategori kartı için küçük, ürün sayfası için orta, yakınlaştırma için büyük. Formatta ise WebP ya da AVIF gibi modern formatlar, aynı görüntü kalitesinde çok daha küçük dosya sağlar. Çoğu hazır altyapı bu dönüşümü otomatik yapıyor ama yüklediğiniz kaynak dosyanın gereksiz büyük olmaması yine sizin elinizde. Kavramlar için WebP ve görsel optimizasyonu maddelerine bakabilirsiniz.
Yazı tipleri ve ikonlar hızı nasıl etkiler?
Özel yazı tipleri marka kimliği için önemlidir ama her ağırlık ve stil ayrı bir dosyadır. Dört beş farklı yazı tipi dosyası yüklenen bir sayfada metin, yazı tipleri gelene kadar görünmeyebilir ya da yazı tipi değiştiğinde düzen kayar. Kullandığınız yazı tipi ağırlıklarını ikiye üçe indirmek ve metnin yazı tipi yüklenirken de görünmesini sağlamak hem LCP'yi hem CLS'i iyileştirir. İkon kütüphanelerinin tamamını yüklemek yerine sadece kullanılan ikonları eklemek de benzer bir kazanç sağlar. Düzen kaymasının ne olduğunu sözlükteki CLS maddesinde anlattım.
Filtre sayfaları hızı da etkiler mi?
Etkiler, hem kullanıcı hem tarama tarafında. Her filtre tıklamasında sayfanın tamamen yeniden yüklenmesi, kullanıcı için yavaş bir deneyimdir. Filtreleri sayfa yenilemeden uygulamak deneyimi hızlandırır ama bu durumda dizine açmak istediğiniz filtre sayfalarının da gerçek adreslere sahip olduğundan emin olmak gerekir. Tarama tarafında ise sınırsız filtre kombinasyonu, Googlebot'un sitede geçirdiği zamanı tüketir. Bu dengeyi faceted navigation sorunları yazısında anlattım.
Mobil kullanıcılar neden önceliklidir?
Türkiye'de e-ticaret trafiğinin büyük çoğunluğu mobilden geliyor ve reklam trafiği bu oranı daha da artırıyor. Mobilde işlemci daha zayıf, bağlantı daha değişken. Masaüstünde iyi görünen bir ürün sayfası, orta segment bir telefonda çok daha yavaş açılabilir. Bu yüzden ölçümleri mobil verisiyle yapın ve iyileştirme önceliğini mobil değerlere göre belirleyin. Mobil ürün sayfası tasarımının dönüşüm tarafını mobil ürün sayfası yazısında anlattım.
Kampanya dönemlerinde hız nasıl korunur?
Efsane Cuma ve yılbaşı gibi yoğun dönemlerde iki şey birden olur. Trafik katlanır ve siteye kampanya için yeni öğeler eklenir. Geri sayım sayaçları, kampanya bannerları, açılır pencereler. Sunucu yükü artarken sayfalar da ağırlaşır. Kampanyadan iki hafta önce bir hız kontrolü yapın, kampanya öğelerinin hafif olduğundan emin olun ve barındırma sağlayıcınızla yoğun dönem kapasitesini konuşun. Kampanya döneminde yaşanan her saniyelik gecikme, yılın en değerli trafiğini kaybettirir.
İyileştirmenin satışa etkisi nasıl ölçülür?
Hız çalışmasından sonra iki şeye bakıyorum. Search Console'daki Core Web Vitals raporunda iyi durumdaki ürün ve kategori sayfalarının oranı ve GA4'te aynı şablonların dönüşüm oranı. Gerçek kullanıcı verisi yaklaşık bir ayda güncellendiği için karşılaştırmayı en az dört haftalık dönemlerle yapın ve kampanya dönemleriyle karıştırmayın. Hız iyileşirken dönüşüm oranı yükselmiyorsa, sorun hızdan çok sayfanın içeriğinde ya da teklifte olabilir.
E-ticaret danışmanlığı yaparken hız konusuna her zaman satış verisiyle bakıyorum. Bir şablonu iyileştirmeye karar vermeden önce o şablonun cirodaki payını, iyileştirmeden sonra da dönüşümdeki değişimi ölçüyorum. Adem Demir olarak benim için iyi bir hız çalışması, skoru değil sepeti büyüten çalışmadır. E-ticaret SEO'nun bütününü e-ticaret SEO rehberinde bulabilir, sitenizin şablonlarını birlikte incelemek için e-ticaret SEO danışmanlığı sayfasına bakabilirsiniz. Kavramların kısa tanımları sözlükte, LCP ve INP maddelerinde.
Kaynaklar
Reklamların satış getirmiyor mu?
Reklam hesabını birlikte inceleyelim, nerede bütçe kaybettiğini netçe görelim.
Ücretsiz Ön Görüşme