Core Web Vitals ve dönüşüm oranı ilişkisi

Core Web Vitals dönüşüm oranını nasıl etkiler?

Core Web Vitals, kullanıcının sayfayı ne kadar hızlı gördüğünü (LCP), etkileşimlere ne kadar hızlı yanıt aldığını (INP) ve sayfanın ne kadar kararlı durduğunu (CLS) ölçer. Bu üç sorun da satın alma yolculuğunda doğrudan sürtünme yaratır. web.dev'de yayımlanan bir A/B testinde Vodafone, LCP'yi %31 iyileştirerek %8 daha fazla satış elde etti.

Hız, tek başına bir dönüşüm stratejisi değildir. Ancak yavaş yüklenen bir ürün görseli, filtreye tıklandıktan sonra donan bir liste ya da tam butona basarken kayan bir banner, en iyi teklifin bile önüne geçer. Bu yazıda metrikleri, ölçüm yöntemlerini ve e-ticaret sitelerinde en sık görülen sorunların çözümlerini ele alıyoruz.

LCP, INP ve CLS nedir? Google'ın "iyi" eşikleri neler?

Google'ın web.dev üzerindeki tanımlarına göre üç temel metrik ve iyi deneyim eşikleri şöyledir:

Metrik	Ne ölçer?	"İyi" eşik
LCP (Largest Contentful Paint)	Ana içeriğin yüklenme hızı	2,5 saniye veya daha kısa
INP (Interaction to Next Paint)	Tıklama ve dokunmalara yanıt hızı	200 milisaniye veya daha kısa
CLS (Cumulative Layout Shift)	Sayfadaki beklenmedik kaymalar	0,1 veya daha düşük

Google, bu hedefleri kullanıcıların çoğu için tutturup tutturmadığınızı anlamak üzere sayfa yüklemelerinin 75. yüzdelik dilimine, mobil ve masaüstü ayrı ayrı bakılmasını öneriyor. Yani ortalamanız iyi olsa bile ziyaretçilerin dörtte birinden fazlası yavaş bir deneyim yaşıyorsa sayfa eşiği geçemez. INP için 200 ile 500 milisaniye arası "iyileştirme gerekli", 500 milisaniyenin üzeri "zayıf" kabul edilir. CLS için ise 0,25'in üzeri zayıftır.

Bu metrikler e-ticarette neye karşılık gelir?

• LCP: Ana sayfadaki kampanya görseli, kategori sayfasındaki ilk ürün kartları ya da ürün sayfasındaki ana ürün fotoğrafı.
• INP: Filtreye tıklama, beden seçme, sepete ekleme butonu, mobil menünün açılması.
• CLS: Geç yüklenen kampanya şeridi, çerez bildirimi, boyutu tanımlanmamış görseller, sonradan yerleşen yorum widget'ı.

Core Web Vitals nasıl ölçülür?

İki tür veri vardır ve ikisini karıştırmamak gerekir. Alan verisi gerçek kullanıcılardan gelir ve asıl hedefinizdir. Laboratuvar verisi kontrollü bir testten gelir ve sorunun nedenini bulmanıza yardım eder.

1. PageSpeed Insights ile başlayın. Bir URL girdiğinizde sayfa yeterli trafiğe sahipse üst bölümde gerçek kullanıcı verisi, altta Lighthouse laboratuvar testi ve iyileştirme önerileri görünür.
2. Search Console'daki Core Web Vitals raporunu açın. Rapor, benzer URL'leri gruplayarak hangi sayfa şablonlarının (ürün, kategori, blog gibi) sorunlu olduğunu gösterir.
3. CrUX verisine bakın. Chrome UX Report, gerçek Chrome kullanıcılarının deneyimini yansıtan Google veri setidir. Rakiplerinizle kıyaslama yapmak için de kullanılabilir.
4. Kendi gerçek kullanıcı ölçümünüzü kurun. Google'ın açık kaynaklı web-vitals kütüphanesiyle metrikleri analitik aracınıza gönderirseniz, hızı dönüşüm oranıyla aynı raporda segmentleyebilirsiniz.
5. Sorunu laboratuvarda tekrar üretin. Chrome DevTools Performance paneliyle yavaş etkileşimi veya geç yüklenen LCP öğesini adım adım inceleyin.

E-ticaret sitelerinde Core Web Vitals sorunları nasıl düzeltilir?

Aşağıdaki tablo, e-ticaret denetimlerinde en sık karşılaştığımız nedenleri ve ilk denenecek çözümleri özetliyor:

Metrik	Yaygın neden	Çözüm
LCP	Büyük, sıkıştırılmamış hero görseli	Doğru boyutlandırın, WebP veya AVIF kullanın, srcset ile cihaza uygun sürüm sunun
LCP	LCP görseline lazy loading uygulanması	Ekranın üst kısmındaki görselde lazy loading kullanmayın, fetchpriority="high" ekleyin
LCP	Yavaş sunucu yanıtı	Önbellekleme, CDN ve sunucu tarafı oluşturma ile ilk yanıt süresini kısaltın
INP	Fazla üçüncü taraf script (sohbet, pop-up, etiketler)	Etiketleri denetleyin, kullanılmayanları kaldırın, kritik olmayanları erteleyin
INP	Filtre tıklamasında tüm listenin yeniden çizilmesi	Uzun görevleri bölün, önce görsel geri bildirim verin, ağır işi sonra yapın
CLS	Boyutu tanımsız görseller ve videolar	width ve height öznitelikleri veya aspect-ratio ile yer ayırın
CLS	Geç eklenen banner ve çerez bildirimi	Alanı baştan rezerve edin ya da içeriği itmeyen bir katman olarak gösterin
CLS	Web fontu yüklenince metnin kayması	Fontları önceden yükleyin, font-display ve uyumlu yedek font ölçüleri kullanın

Hero görselleri

E-ticaret sitelerinde LCP öğesi çoğu zaman bir görseldir. web.dev, LCP öğesi olması muhtemel görsele fetchpriority="high" eklemeyi öneriyor, ancak bunu bir ya da iki görselden fazlasına uygulamanın önceliklendirmeyi işe yaramaz hale getireceği konusunda uyarıyor. Görselin HTML içinde doğrudan keşfedilebilir olması da önemlidir; JavaScript ile sonradan eklenen bir slider görseli geç başlar.

Üçüncü taraf scriptler

Analitik, reklam pikselleri, canlı sohbet, yorum ve kişiselleştirme araçları zamanla birikir. Her biri ana iş parçacığını meşgul eder ve INP'yi kötüleştirir. Etiket yöneticinizi üç ayda bir gözden geçirin: kimin sahibi olduğu belli olmayan, raporu okunmayan veya biten bir kampanyaya ait etiketleri kaldırın.

Fontlar

Marka fontları değerlidir ama dört farklı ağırlık ve iki aileyi her sayfada yüklemek gereksizdir. Kullandığınız ağırlıklarla sınırlayın, yalnızca gereken karakter setini sunun ve ilk ekranda görünen fontu önceden yükleyin.

Mobil öncelik

Mobil cihazlar hem işlemci gücü hem de bağlantı kalitesi açısından masaüstü bilgisayarlara göre genellikle daha kısıtlıdır; üstelik kullanıcılarınızın bir kısmı hareket halindeyken ve zayıf bir mobil bağlantıyla alışveriş yapar. Bu yüzden testlerinizi önce mobil için yapın, Search Console raporunda mobil ve masaüstü sonuçlarını ayrı okuyun. Masaüstünde sorunsuz görünen bir filtre etkileşimi, orta segment bir Android telefonda belirgin bir gecikmeye dönüşebilir. Ekip içi testlerde de yalnızca güçlü cihazlara güvenmeyin.

Hız iyileştirmesinin dönüşüme etkisi nasıl kanıtlanır?

Vodafone örneği burada iyi bir model sunuyor: şirket, Web Vitals optimizasyonunu A/B testiyle ölçtü ve LCP'deki %31 iyileşmenin %8 daha fazla satış, sepete ulaşan ziyaretlerde ise %11 iyileşme getirdiğini gördü. Kendi sitenizde de önce ve sonra karşılaştırması yerine mümkünse sunucu taraflı bir test kurun; mevsimsellik ve kampanyalar sonuçları kolayca bozabilir.

Test kuramıyorsanız örnek bir yaklaşım şudur: gerçek kullanıcı ölçümünden gelen LCP değerine göre oturumları "iyi" ve "zayıf" diye ayırın ve iki grubun dönüşüm oranını karşılaştırın. Bu, nedensellik kanıtlamaz ama yatırımı önceliklendirmek için güçlü bir sinyal verir.

Performetic'te hız iyileştirmelerini her zaman dönüşüm verisiyle birlikte raporluyoruz; benzer projelerin sonuçlarını başarı hikayeleri sayfamızda, tasarım yaklaşımımızı ise dönüşüm odaklı tasarım sayfasında bulabilirsiniz.

Özet

• Core Web Vitals üç metrikten oluşur: LCP (2,5 sn), INP (200 ms) ve CLS (0,1) için iyi eşikler bunlardır.
• Değerlendirme 75. yüzdelik dilimde, mobil ve masaüstü ayrı yapılır.
• Ölçüm için PageSpeed Insights, Search Console raporu, CrUX ve kendi gerçek kullanıcı verinizi birlikte kullanın.
• E-ticarette en büyük kazanımlar genellikle hero görseli, üçüncü taraf scriptler ve fontlardan gelir.
• Hızın dönüşüme etkisini mümkünse A/B testiyle kanıtlayın.