Hızlı site neden daha çok satar

Bir mağazanın kapısı sıkışıyorsa, raflar ne kadar iyi dizilmiş olursa olsun bazı müşteriler içeri hiç girmez. Web sitesinde o kapı hızdır: her fazladan saniye ziyaretçinin sabrından yer ve bu kayıp hiçbir raporda “kaçan satış” diye ayrı bir satır olarak görünmez. Bu yazıda Core Web Vitals’ı teknik bir karne olarak değil, satışa giden yolun ölçüsü olarak okumayı ve ilk nereye bakmanız gerektiğini anlatıyoruz.

Üç soru, üç ölçü

Google’ın Core Web Vitals dediği üç ölçü, ziyaretçinin aklından geçen üç basit soruya karşılık gelir:

• LCP (Largest Contentful Paint): Ana içerik ne zaman göründü? Sayfanın ilk görünen alanındaki en büyük öğenin (genellikle ürün fotoğrafı, kapak görseli ya da ana başlık bloğu) ekrana çizildiği an. İyi eşik 2,5 saniye ve altıdır.
• INP (Interaction to Next Paint): Tıklayınca ne kadar çabuk cevap verdi? Ziyaretçinin sayfadaki tıklama, dokunma ve tuş etkileşimlerinden sonra ekranın bir sonraki güncellemesine kadar geçen süre. Ziyaret boyunca bu etkileşimler izlenir ve en yavaşlarından biri sayfanın değeri olarak raporlanır. INP, Mart 2024’te yalnızca ilk etkileşimin gecikmesine bakan FID ölçüsünün yerini aldı. İyi eşik 200 milisaniye ve altıdır.
• CLS (Cumulative Layout Shift): Okurken içerik kaydı mı? Sayfa açılırken ve kullanılırken yaşanan beklenmedik yerleşim kaymalarının puanı. Birimi yoktur; iyi eşik 0,1 ve altıdır.

Bu eşiklerin nasıl değerlendirildiği de önemlidir. Ölçüt, gerçek kullanıcıların 75. yüzdelik dilimidir: ziyaretlerin en az dörtte üçü eşiğin altında kalıyorsa o ölçü “iyi” sayılır. Mobil ve masaüstü ayrı ayrı değerlendirilir.

Lighthouse ya da PageSpeed Insights’taki laboratuvar puanı, belirli bir cihaz ve bağlantı varsayımıyla yapılan tek bir denemedir. Sorunun nerede olduğunu bulmak için çok faydalıdır ama karar, gerçek ziyaretçi verisine göre verilir. Laboratuvar testleri INP’yi doğrudan ölçemez; onun yerine Total Blocking Time gibi yaklaşık bir gösterge sunar. Gerçek kullanıcı verisini Search Console’daki Core Web Vitals raporunda, PageSpeed Insights’ın üst bölümünde ya da sitenize ekleyeceğiniz bir gerçek kullanıcı ölçümüyle görebilirsiniz.

Hız neden satış kalemidir

Her ölçü, satış hunisinde belirli bir adıma dokunur. LCP geç geliyorsa reklamdan tıklayıp gelen ziyaretçi ürünü görmeden geri döner; tıklamanın parası ödenmiştir ama ziyaretçi mağazaya girmemiştir. INP yüksekse “Sepete ekle” düğmesine basıldığında bir an hiçbir şey olmuyormuş gibi görünür; kullanıcı ya iki kez basar ya da vazgeçer. Beden seçimi, filtreler ve adres formu da aynı gecikmeden etkilenir. CLS yüksekse okunan metin aşağı kayar, geç yüklenen bir afiş düğmeyi iter ve ziyaretçi istemediği yere dokunur; bunun en pahalı olduğu yer ödeme sayfasıdır.

Bu yüzden hızı tek bir site puanı olarak değil, sayfa türlerine bölerek okumak gerekir: ana sayfa, kategori, ürün, sepet ve ödeme. Bir e-ticaret sitesinde ürün sayfası şablonunun yavaş olması, tek bir yavaş blog yazısından çok daha pahalıdır. B2B bir üreticide teklif formunun bulunduğu sayfa, bir klinikte randevu sayfası, bir eğitim kurumunda kayıt sayfası aynı öneme sahiptir. Kendi analiz verinizde hızlı ve yavaş oturumların dönüşüm oranlarını karşılaştırmak, bu ilişkinin sizin sitenizde nasıl göründüğünü tahmin yerine veriyle gösterir.

Google, Core Web Vitals’ı arama sistemlerinde kullandığı sayfa deneyimi sinyalleri arasında sayıyor; yine de bu sinyal içeriğin alakalı olmasının önüne geçmez. Hızın asıl getirisi sıralamadan çok, zaten gelen ziyaretçinin kaçmamasıdır.

Yavaş bir sayfada reklam bütçesinin bir kısmı kapıda kalır.

Görseller ve fontlar

LCP sorunlarında ilk bakılacak yer çoğu zaman görsellerdir. Kontrol listemiz şöyle:

• Doğru boyut: Ekranda 600 piksel genişliğinde görünen bir fotoğraf için 3000 piksellik dosya göndermeyin. srcset ve sizes ile her cihaza kendi boyutunu verin.
• Doğru format: AVIF ya da WebP, aynı görüntü kalitesinde JPEG ve PNG’ye göre genellikle daha küçük dosya üretir. Eski tarayıcılar için <picture> etiketiyle yedek format sunulabilir.
• Boyut öznitelikleri: Her görsele width ve height yazın ya da CSS’te aspect-ratio tanımlayın. Tarayıcı yeri önceden ayırır, görsel geldiğinde metin kaymaz; bu doğrudan CLS’yi düzeltir.
• Tembel yükleme: İlk ekranın altındaki görsellere loading="lazy" ekleyin. LCP öğesi olan ana görsele ise eklemeyin; ona fetchpriority="high" verin.

Fontlar hem LCP’yi hem CLS’yi etkiler. Font geç gelirse metin ya bir süre görünmez kalır ya da sonradan başka bir fontla yer değiştirip satırları kaydırır. Yapılacaklar:

• font-display: swap ile metni yedek fontla hemen gösterin; yedek fontun ölçülerini size-adjust gibi ayarlarla asıl fonta yaklaştırarak kaymayı azaltın.
• Fontu üçüncü taraf bir servisten çekmek yerine kendi alan adınızdan servis edin; ayrı bir sunucuya bağlantı kurma maliyeti ortadan kalkar.
• Alt kümeleme yapın: kullanmadığınız alfabeleri ve glifleri dosyadan çıkarın, ama Türkçe karakterleri (ç, ğ, ı, İ, ö, ş, ü) içeren aralığı koruyun. WOFF2 biçimini kullanın.
• Ağırlık sayısını azaltın. Çoğu tasarım dört ağırlık ve iki italik yerine iki ağırlıkla çalışır. İlk ekranda kullanılan fontu preload ile önceden isteyin.

Üçüncü taraf kodlar

INP sorunlarının arkasında genellikle JavaScript vardır ve bu kodun bir kısmı çoğu zaman sitenin kendisine değil, sonradan eklenen araçlara aittir: canlı destek pencereleri, ısı haritaları, birden fazla reklam pikseli, A/B test araçları, kampanyası çoktan bitmiş etiketler. Her biri tek başına küçük görünür; birlikte tarayıcının ana iş parçacığını meşgul eder ve tıklamaya verilen cevabı geciktirir.

Bir denetim için şu sırayı izliyoruz:

1. Envanter çıkarın. Etiket yöneticisindeki ve şablona doğrudan gömülmüş tüm scriptleri listeleyin: kim ekledi, ne için, en son ne zaman kullanıldı.
2. Sahibi olmayanı kaldırın. Kimsenin raporuna bakmadığı bir araç yalnızca maliyettir.
3. Aynı işi yapanları teke indirin. İki ısı haritası ya da üç ayrı analiz aracı nadiren gerekir.
4. Kalanları erteleyin. defer veya async kullanın; canlı destek penceresi gibi araçları sayfa açılırken değil, kullanıcı ilgili düğmeye bastığında yükleyin.
5. Kendi kodunuza da bakın. Uzun süren görevleri bölün; bir etkileşimden sonra önce ekranda görünen değişikliği yapıp geri kalan işi sonraya bırakın.

Önbellek, CDN ve sunucu

LCP’nin ilk parçası, sunucunun ilk baytı ne kadar sürede gönderdiğidir. Sunucu yavaşsa görselleri ne kadar küçültseniz de bir sınıra takılırsınız. Burada temel adımlar şunlar: değişmeyen dosyaları (görseller, CSS, JavaScript, fontlar) içeriğe göre değişen dosya adlarıyla yayınlayıp uzun süreli önbelleğe almak, HTML sayfalarını mümkün olduğunda CDN’in uç sunucularında önbelleklemek, Brotli sıkıştırmasını açmak ve kategori ya da arama sayfalarındaki yavaş veritabanı sorgularını bulmak. Ziyaretçileriniz Türkiye ve KKTC’deyse, CDN sağlayıcınızın bu bölgeye yakın uç noktaları olup olmadığını kontrol etmek de faydalıdır.

Nereden başlamalı

Önce Search Console’da hangi sayfa grubunun hangi ölçüde, mobilde mi masaüstünde mi zayıf kaldığını bulun. Sonra en çok trafik alan zayıf şablonu seçin; e-ticarette bu çoğu zaman ürün sayfasıdır. İlk turda en büyük görseli, gereksiz scriptleri ve geç gelen fontları düzeltin. Search Console ve PageSpeed Insights’taki saha verisi son 28 günü kapsadığı için iyileşme bir gecede değil, birkaç hafta içinde görünür; bu sürede yeni bir değişiklik eklemeden sonucu okuyun. Hızı satış hunisiyle birlikte ele almak isterseniz web ve yazılım hizmetimizi inceleyebilirsiniz.