E-ticarette site hızı ve Core Web Vitals

Bir müşteri ürün sayfanıza geldiğinde, ürünü görmeden önce sayfanın yüklenmesini bekler. Bu bekleme süresi kısa olduğunda fark edilmez; uzadığında ise müşteri geri tuşuna basar. Site hızı bu yüzden yalnızca teknik bir konu değil, doğrudan satışla ilgili bir konudur. Google da sayfa deneyimini değerlendirirken Core Web Vitals adını verdiği üç metriği kullanır. Bu yazıda bu metriklerin ne olduğunu, online mağazanızda nasıl ölçüleceğini ve en sık görülen sorunların nasıl çözüleceğini anlatıyoruz.

Core Web Vitals nedir?

Core Web Vitals, bir sayfanın kullanıcıya nasıl hissettirdiğini ölçen üç metrikten oluşur. Google her biri için "iyi", "iyileştirme gerekli" ve "kötü" aralıkları tanımlar.

Google bu değerleri sayfa ziyaretlerinin yüzde 75'lik dilimine göre değerlendirmeyi önerir. Yani ziyaretlerin büyük çoğunluğunda eşiğin altında kalmanız gerekir; yalnızca hızlı bir bilgisayarda yaptığınız tek bir testte iyi sonuç almak yeterli değildir.

INP, 2024'te önceki etkileşim metriği FID'nin yerini aldı. FID yalnızca ilk etkileşimin gecikmesine bakarken INP sayfadaki tüm etkileşimleri değerlendirir. Bu, filtreleme, varyant seçme ve sepete ekleme gibi çok tıklamalı mağaza sayfaları için daha gerçekçi bir ölçümdür.

E-ticarette neden bu kadar önemli?

Bir haber sitesinde yavaş sayfa can sıkıcıdır; bir mağazada ise doğrudan kayıptır. Online alışveriş birden fazla sayfadan oluşan bir yolculuktur: kategori, ürün, sepet, ödeme. Her adımdaki gecikme birikir ve müşterinin sabrını azaltır.

• Mobil trafik: Alışverişin önemli bir kısmı telefondan ve değişken kalitedeki mobil bağlantılardan yapılır. Masaüstünde hızlı görünen bir sayfa, telefonda çok farklı davranabilir.
• Reklam maliyeti: Ücretli reklamla gelen bir ziyaretçi sayfa yüklenmeden çıkarsa, o tıklama için ödediğiniz para boşa gider.
• Arama görünürlüğü: Sayfa deneyimi, Google'ın değerlendirdiği sinyallerden biridir. İçerik kalitesinin yerini tutmaz, ama benzer içerikler arasında fark yaratabilir.
• Güven: Kayan butonlar ve geç tepki veren formlar, özellikle ödeme adımında güvensizlik hissi yaratır.

Nasıl ölçülür: saha verisi ve laboratuvar verisi

Hız ölçümünde iki tür veri vardır ve ikisinin amacı farklıdır.

Saha verisi (gerçek kullanıcılar)

Gerçek ziyaretçilerin tarayıcılarından toplanan verilerdir. Google'ın değerlendirmesinde esas alınan budur. Google Search Console'daki Core Web Vitals raporu ve PageSpeed Insights'ın üst bölümü, yeterli trafiği olan siteler için bu veriyi gösterir. Yeni bir mağazada trafik az olduğu için saha verisi bir süre görünmeyebilir.

Laboratuvar verisi (test ortamı)

Lighthouse ya da tarayıcının geliştirici araçlarıyla yapılan, belirli bir cihaz ve bağlantı hızını taklit eden testlerdir. Sonuçlar her çalıştırmada biraz değişebilir. Laboratuvar verisi, bir sorunun nedenini bulmak ve yaptığınız değişikliğin etkisini hemen görmek için idealdir.

Hangi sayfaları ölçmeli?

Yalnızca ana sayfayı ölçmek yanıltıcıdır. Her sayfa türünden en az bir örnek seçin:

1. Ana sayfa
2. Çok ürünlü bir kategori sayfası
3. Çok görselli ve varyantlı bir ürün sayfası
4. Sepet sayfası
5. Ödeme sayfası
6. Bir blog yazısı ya da içerik sayfası

Her ölçümü mobil ayarla yapın ve sonuçları bir tabloya kaydedin. Değişiklik yaptıktan sonra aynı sayfaları yeniden ölçerek karşılaştırın.

LCP'yi iyileştirmek: görseller ve sunucu

Ürün sayfalarında LCP öğesi neredeyse her zaman ana ürün görselidir. Bu yüzden ilk yapılacak iş görsellerdir.

• Doğru boyut: Telefonda 400 piksel genişliğinde görünecek bir görsel için 3000 piksellik bir dosya göndermeyin. Farklı ekran genişlikleri için farklı boyutlar sunulmalıdır.
• Modern format: WebP ya da AVIF gibi formatlar, aynı görsel kalite için genellikle daha küçük dosya üretir.
• Öncelik: Ana ürün görseli ve ana sayfadaki ilk slider görseli öncelikli yüklenmeli, tembel yükleme (lazy loading) ise yalnızca ekranın altında kalan görsellere uygulanmalıdır. İlk görseli tembel yüklemek, LCP'yi bozan yaygın bir hatadır.
• Sunucu yanıt süresi: Sayfanın ilk baytı geç geliyorsa görseller ne kadar küçük olursa olsun LCP uzar. Önbellekleme ve bir içerik dağıtım ağı (CDN) bu süreyi kısaltır.
• Yazı tipleri: Çok sayıda yazı tipi ağırlığı yüklemek başlık metninin geç görünmesine yol açar. İki ağırlık çoğu tasarım için yeterlidir.

Ana sayfada büyük ve çok görselli slider'lar LCP'yi en çok etkileyen öğelerdir. Slider kullanacaksanız ilk görseli optimize edin, diğer görselleri sonradan yükleyin ve slider sayısını sınırlı tutun.

INP'yi iyileştirmek: etiketler ve betikler

INP sorunları genellikle tarayıcının ana iş parçacığını meşgul eden JavaScript kodlarından kaynaklanır. Müşteri "Sepete ekle"ye bastığında tarayıcı başka bir işle meşgulse tepki gecikir.

• Üçüncü taraf etiketlerini sayın. Analitik, reklam pikselleri, ısı haritası, canlı destek, yorum widget'ı... Her biri ayrı kod yükler. Kullanmadığınız ya da verisine bakmadığınız etiketleri kaldırın.
• Etiketleri çerez onayına bağlayın. Pazarlama etiketlerinin yalnızca kullanıcı izin verdikten sonra yüklenmesi hem yasal açıdan hem performans açısından doğru yaklaşımdır.
• Eklenti sayısını azaltın. Eklentili sistemlerde her eklenti kendi betik ve stil dosyasını ekleyebilir. Aynı işi yapan iki eklenti, gereksiz kodu iki katına çıkarır.
• Filtreleme ve varyant seçimini test edin. Kategori sayfasında bir filtreye tıkladığınızda ya da ürün sayfasında renk değiştirdiğinizde gecikme hissediyorsanız, geliştirici araçlarındaki performans kaydıyla hangi işlemin uzun sürdüğünü bulun.

CLS'yi iyileştirmek: kayan öğeler

Bir butona basmak üzereyken sayfanın aşağı kayması ve yanlış yere tıklamak, CLS sorununun en tanıdık örneğidir. Mağazalarda en yaygın nedenler şunlardır:

1. Boyutu belirtilmemiş görseller: Görselin genişlik ve yükseklik oranı önceden belirtilmezse tarayıcı yer ayıramaz ve görsel yüklendiğinde içerik aşağı itilir.
2. Sonradan eklenen bantlar: Sayfa yüklendikten sonra en üste eklenen duyuru barları, kampanya bantları ya da çerez bildirimleri tüm içeriği kaydırır. Bu öğeler için baştan yer ayrılmalı ya da sayfanın üzerine binecek şekilde konumlandırılmalıdır.
3. Geç yüklenen yazı tipleri: Yazı tipi değiştiğinde metin genişliği değişir ve satırlar kayar.
4. Dinamik içerik blokları: "Bunlar da ilginizi çekebilir" gibi sonradan yüklenen ürün listeleri için sabit yükseklikte yer tutucu kullanın.

Sepet ve ödeme adımında hız

Ürün sayfaları genellikle en çok ölçülen sayfalardır, ama satışın gerçekleştiği yer sepet ve ödeme adımıdır. Bu sayfalarda yaşanan bir gecikme, müşteri satın almaya karar verdikten sonra kaybedilmesi anlamına gelir.

• Adım sayısını azaltın. Her yeni sayfa yüklemesi ek bekleme demektir. Adres, kargo ve ödeme bilgilerini mümkün olduğunca az adımda toplayın; misafir alışverişine izin vermek zorunlu üyelik formunu ortadan kaldırır.
• Kargo ücretini erken gösterin. Müşteri ücreti son adımda gördüğünde geri dönüp seçenekleri karşılaştırır; bu da gereksiz sayfa geçişleri ve terk edilen sepet demektir.
• Ödeme sayfasından pazarlama etiketlerini çıkarın. Isı haritası, sohbet balonu ve ürün öneri widget'larının ödeme formunda işi yoktur. Bu sayfada yalnızca ödeme için gereken kod çalışmalıdır.
• Form alanlarını mobil klavyeye uygun ayarlayın. Telefon alanında sayı klavyesi, e-posta alanında e-posta klavyesi açılması, yazma süresini ve hataları azaltır.
• Ödeme sağlayıcısının sayfasını test edin. Kart bilgileri sağlayıcının güvenli ekranında ya da çerçevesinde alınıyorsa, bu bölümün yüklenme süresini de ölçün; yavaşlık varsa sağlayıcınızla paylaşın.

Sepet ve ödeme sayfalarında yapılan her iyileştirmeyi, terk edilen sepet oranındaki değişimle birlikte takip edin. Hız ölçümleri neyin değiştiğini, sepet verisi ise bunun satışa etkisini gösterir.

Mağazanız için hız kontrol listesi

Aşağıdaki listeyi üç ayda bir ve her büyük tasarım değişikliğinden sonra uygulayın:

• Ürün görselleri yüklenmeden önce küçültülüyor ve modern formatta sunuluyor mu?
• Ekranın üstündeki ilk görsel öncelikli, alttakiler tembel yükleniyor mu?
• Tüm görsellerin boyut oranı belirtilmiş mi?
• Kullanılmayan üçüncü taraf etiketleri kaldırıldı mı, kalanlar çerez onayına bağlı mı?
• Ana sayfadaki slider ve bant sayısı makul mü?
• Mobil ölçümde altı sayfa türünün her biri "iyi" aralıkta mı?
• Search Console'daki Core Web Vitals raporunda kötü URL grubu var mı?

Hazır bir altyapıda bu işlerin bir kısmı sizin yerinize yapılır. Origela'da örneğin barındırma, güncellemeler ve tema kodu merkezi olarak yönetilir, pazarlama ve analitik entegrasyonları çerez onayının arkasında çalışır, eklenti olmadığı için sayfaya rastgele betik eklenmez. Yine de yüklediğiniz görsellerin boyutu ve eklediğiniz bantların sayısı sizin elinizdedir. Hız, iyi bir arama görünürlüğünün yalnızca bir parçasıdır; yapılandırılmış veri ve site haritası gibi diğer başlıkları özellikler sayfasında özetledik. Tema seçerken hız açısından sade tasarımları temalar sayfasında inceleyebilir, mağaza kurulumunun genel adımları için kurulum rehberimize göz atabilirsiniz.