E-ticarette site hızı: Core Web Vitals'ı düşüren yaygın sebepler

E-ticaret sitelerinde Core Web Vitals değerlerini en çok bozan şeyler, sitenin altyapısından çok sonradan eklenenlerdir: optimize edilmemiş büyük görseller, ana sayfadaki sliderlar, canlı destek ve takip scriptleri, kampanya pop-up’ları ve boyutu belirtilmemiş banner alanları. Bunların çoğu teknik ekibe ihtiyaç duymadan, mağaza panelinden düzeltilebilir.

Core Web Vitals, Google’ın bir sayfanın kullanıcıya nasıl bir deneyim sunduğunu ölçtüğü üç değerden oluşur. Bu değerleri ve onları bozan yaygın sebepleri tek tek ele alalım.

Üç değer, üç soru

LCP: Sayfa ne zaman işe yarar hale geldi?

LCP (Largest Contentful Paint), sayfanın ana içeriğinin ne kadar sürede göründüğünü ölçer. Ürün sayfasında bu genellikle ürün görselidir, ana sayfada ilk banner. İyi değer 2,5 saniye ve altıdır.

INP: Sepete ekle düğmesine basınca bir şey oldu mu?

INP (Interaction to Next Paint), ziyaretçi bir şeye tıkladığında ya da dokunduğunda sayfanın ne kadar hızlı tepki verdiğini ölçer. İyi değer 200 milisaniye ve altıdır.

CLS: Tam tıklayacakken düğme kaydı mı?

CLS (Cumulative Layout Shift), sayfa yüklenirken öğelerin ne kadar kaydığını ölçer. İyi değer 0,1 ve altıdır.

Google bu değerleri gerçek kullanıcılardan toplar ve son 28 günün verisine bakar. Search Console’daki Önemli Web Verileri raporu bu gerçek kullanıcı verisini gösterir.

LCP’yi bozan sebepler

Büyük ve optimize edilmemiş görseller

En yaygın sebep bu. Fotoğrafçıdan gelen 4.000 piksellik, birkaç megabaytlık bir görsel olduğu gibi siteye yüklenir. Telefon ekranında 400 piksel genişliğinde gösterilecek bir görsel için bu, gereğinden kat kat büyük bir dosya demek. Görselleri yüklemeden önce boyutlandırmak ve WebP gibi modern formatlara çevirmek LCP’yi çoğu zaman tek başına iyileştirir. Görsellerle ilgili ayrıntıları ürün görselleri ve SEO yazısında anlattım.

Ana sayfadaki sliderlar

Ana sayfada dönen beş banner’lık bir slider, ziyaretçi yalnızca ilkini görecek olsa bile çoğu zaman beşinin birden yüklenmesine yol açar. Üstelik slider’ın çalışması için bir script daha gerekir. Tek ve iyi optimize edilmiş bir banner, beş banner’lık bir slider’dan hem daha hızlı hem de çoğu zaman daha etkilidir.

Ana görselin geç yüklenmesi

Sayfanın altındaki görsellerin ziyaretçi aşağı kaydırınca yüklenmesi (lazy loading) iyi bir uygulamadır. Ama aynı ayar ürün sayfasının ana görseline ya da ilk banner’a da uygulanırsa, sayfanın en önemli görseli en son yüklenir. Ekranda ilk görünen görselin geciktirilmemesi gerekir.

INP’yi bozan sebepler

Üçüncü parti scriptler

Canlı destek araçları, reklam ve analiz kodları, ürün öneri sistemleri, yorum widget’ları ve sosyal medya pikselleri. Her biri tek başına küçük görünür, ama hepsi aynı anda tarayıcının işlemcisini meşgul eder. Ziyaretçi bir düğmeye bastığında tarayıcı önce bu scriptlerin işini bitirmek zorunda kalır, tepki gecikir.

Yılda bir kez, sitede yüklü olan scriptlerin listesini çıkarın. Her biri için şu soruyu sorun: Bu hâlâ kullanılıyor mu ve getirdiği fayda, yavaşlattığı süreye değiyor mu? Kampanya bittiği halde kaldırılmamış takip kodları ve denenip vazgeçilmiş uygulamalar bu listede sık çıkar.

Ağır menüler ve filtreler

Yüzlerce kategori içeren açılır menüler ve her tıklamada sayfayı baştan hesaplayan filtreler, özellikle orta seviye telefonlarda tepki süresini uzatır.

CLS’yi bozan sebepler

Boyutu belirtilmemiş görseller ve banner’lar

Tarayıcı bir görselin boyutunu bilmiyorsa, görsel yüklenene kadar ona yer ayıramaz. Görsel geldiğinde altındaki her şey aşağı kayar. Görsellere genişlik ve yükseklik bilgisi vermek bu sorunu çözer.

Sonradan eklenen duyuru çubukları ve pop-up’lar

Sayfa açıldıktan bir saniye sonra en üste eklenen “Ücretsiz kargo” çubuğu, sayfanın tamamını aşağı iter. Ziyaretçi tam o anda bir ürüne tıklamak üzereyse yanlış yere tıklar. Duyuru çubuğuna baştan yer ayırmak ya da sayfa yapısının bir parçası olarak yüklemek gerekir.

Web fontları

Özel bir yazı tipi yüklenirken tarayıcı önce yedek bir fontla metni gösterir, asıl font gelince metin yeniden çizilir. Harf genişlikleri farklıysa satırlar kayar. Font sayısını ve ağırlığını azaltmak bu etkiyi küçültür.

Nereden başlamalı?

Search Console’da Önemli Web Verileri raporunu açın ve mobil sonuçlara bakın. Rapor sorunlu sayfaları gruplar halinde gösterir. Aynı gruptaki sayfalar genellikle aynı şablonu kullanır, yani tek bir şablon düzeltmesi yüzlerce sayfayı birden iyileştirir. Ardından o gruptan bir sayfayı PageSpeed Insights’ta test edip sorunun kaynağını bulun.

Görsel boyutları, scriptler ve pop-up’lar gibi kontrolünüzdeki işlerle başlayın. Tema ya da altyapı tarafında değişiklik gerekiyorsa, sorunu net tarif eden bir talimatla yazılım ekibinize ya da platform desteğine gidin. Hız sorunları şablonlara yayılmışsa ya da nereden başlayacağınızı bilmiyorsanız, bir teknik SEO denetimi hangi işin ne kadar etki edeceğini sıraya koyar. Altyapınıza özel öneriler için e-ticaret SEO danışmanlığı sayfasındaki platform sayfalarına da göz atabilirsiniz.