Site Hızı ve Dönüşüm: Her Saniyenin Bir Bedeli Var

Bir e-ticaret sitesinde hız, görünmez ama belirleyici bir tasarım öğesidir. Kullanıcı yavaşlığı bilinçli olarak "yavaş" diye tanımlamasa bile, bekleme süresi arttıkça sabırsızlanır, dikkati dağılır ve çoğu zaman sayfa açılmadan vazgeçer. Hız, aynı zamanda arama motoru sıralamasını da etkilediğinden, hem dönüşümü hem de trafiği ilgilendirir. Bu yazıda hızı neden ve nasıl iyileştireceğinizi ele alıyoruz.

Neden hız doğrudan paraya dönüşür?

Ziyaretçi bir sayfanın açılmasını beklediği her saniye, satın alma niyetinin bir kısmını yitirir. Özellikle mobilde ve reklamla gelen trafikte sabır çok daha kısadır. Yavaş açılan ürün ve ödeme sayfaları, tam da satışın kazanılacağı anda kullanıcıyı kaçırır. Bu yüzden hız, "teknik bir detay" değil doğrudan bir iş metriğidir.

Kullanıcı için en iyi yükleme süresi, fark etmediği yükleme süresidir.

Core Web Vitals'ı anlayın

Google'ın kullanıcı deneyimini ölçtüğü üç temel gösterge, hız çalışmalarında iyi bir yol haritasıdır:

• LCP (En Büyük İçerikli Boyama): Ana içeriğin ne kadar sürede göründüğü. Genellikle en büyük görsel ya da başlık bloğu belirler.
• INP (Etkileşimden Sonraki Boyama): Kullanıcı bir öğeye dokunduğunda arayüzün ne kadar hızlı tepki verdiği.
• CLS (Kümülatif Düzen Kayması): Sayfa yüklenirken öğelerin zıplayıp yer değiştirmesi. Yanlış butona basmanın baş nedenidir.

Görselleri optimize edin

E-ticaret sitelerinde ağırlığın büyük kısmını görseller oluşturur. En kolay ve etkili kazanım genellikle buradadır.

1. Modern formatlar (WebP/AVIF) kullanın; aynı kalitede çok daha küçük dosya.
2. Görselleri gösterildiği boyutta sunun; 3000 piksellik fotoğrafı 400 piksellik alana yüklemeyin.
3. Ekran dışındaki görseller için tembel yükleme (lazy load) uygulayın.
4. Görsellere genişlik/yükseklik verin ki düzen kayması olmasın.

Önbellekleme ve sunucu tarafı

Aynı içeriği her istekte sıfırdan üretmek kaynak israfıdır. Sayfa ve sorgu önbellekleme, bir CDN kullanımı ve sunucu yanıt süresini (TTFB) düşürmek, tüm siteyi topyekûn hızlandırır. PHP tabanlı bir altyapıda gereksiz veritabanı sorgularını azaltmak ve tekrar eden sorguları önbelleğe almak belirgin fark yaratır.

Kodu hafifletin

Her eklenti, her üçüncü taraf betiği bir maliyettir. Kullanılmayan CSS/JS'i temizleyin, betikleri birleştirip küçültün ve kritik olmayan kaynakları ertelenmiş (defer) yükleyin. Özellikle reklam ve analiz betikleri hızın sessiz katilidir; gerçekten gerekenleri tutun.

Önce ölçün, sonra iyileştirin

Hız çalışması, tahminle değil ölçümle yapılır. Gerçek kullanıcı verisiyle (saha verisi) ve laboratuvar testleriyle darboğazları belirleyin. En çok trafik alan sayfalardan başlayın; ana sayfa, kategori, ürün ve ödeme sayfaları önceliklidir.

Algılanan hız da gerçek hız kadar önemli

Sayfanın teknik olarak ne kadar hızlı yüklendiği kadar, kullanıcının onu ne kadar hızlı algıladığı da önemlidir. Kullanıcı bir şeylerin ilerlediğini gördüğünde beklemeye daha çok tahammül eder.

• İskelet ekranlar: İçerik gelene kadar gri bloklarla yapıyı göstermek, boş beyaz ekrandan çok daha az sabırsızlık yaratır.
• Aşamalı yükleme: Önce metin ve temel yapı, sonra görseller gelsin; kullanıcı beklerken okumaya başlayabilsin.
• Anında geri bildirim: Kullanıcı bir butona bastığında hemen görsel tepki verin, arka planda işlem sürerken bile.

Kullanıcı için hız bir histir; gerçek milisaniyeler kadar, o milisaniyelerin nasıl doldurulduğu da önemlidir.

Üçüncü taraf betikleri kontrol altında tutun

Analiz araçları, reklam pikselleri, canlı destek widget'ları, sosyal medya gömülü içerikleri — her biri sayfaya dışarıdan yük bindirir ve çoğu zaman kendi hızınızın kontrolü dışındadır. Bir üçüncü taraf betiği yavaşladığında tüm sayfanız onunla birlikte yavaşlar. Düzenli olarak "bu betik gerçekten gerekli mi, getirdiği değer maliyetini karşılıyor mu?" sorusunu sorun. Gerekli olanları ise ertelenmiş (defer/async) biçimde yükleyerek ana içeriğin önünü kapatmalarını engelleyin.

Hız kültürünü ekibe yayın

Hız yalnızca bir teknik ekip meselesi değildir. Pazarlama yeni bir izleme kodu eklemek, içerik ekibi büyük bir görsel yüklemek, tasarım ise ağır bir animasyon istemek isteyebilir. Her karar hıza dokunur. Bu yüzden bir performans bütçesi belirleyin: sayfa ağırlığı, istek sayısı ve yükleme süresi için üst sınırlar koyun. Her yeni özellik bu bütçeye göre değerlendirilsin. Böylece hız, sonradan telafi edilen bir sorun değil, baştan gözetilen bir tasarım ilkesi olur.

Hız iyileştirme kontrol listesi

• Görseller modern formatta ve doğru boyutta mı?
• Tembel yükleme uygulanıyor mu?
• Önbellekleme ve/veya CDN devrede mi?
• Kullanılmayan betikler temizlendi mi?
• Üçüncü taraf betikleri ertelenmiş yükleniyor mu?
• Düzen kayması (CLS) engellendi mi?
• İskelet ekran gibi algılanan hız teknikleri var mı?
• Ödeme ve ürün sayfaları öncelikli olarak optimize edildi mi?

Hız, bir kez yapılıp bırakılan bir iş değildir; her yeni özellik ve içerik onu tekrar tehdit eder. Bu yüzden hızı düzenli olarak ölçün ve bir performans bütçesi belirleyin. Hızlı bir site, kullanıcıya saygının en somut göstergesidir ve bu saygı doğrudan dönüşüme yansır. Yavaşlık ise en iyi ürünü, en cazip kampanyayı bile görünmez kılar çünkü kullanıcı onları görmeden çıkar.