Core Web Vitals: Sayfa Hızının Satışa Etkisi ve Ölçüm Yöntemi

"Site yavaş" cümlesi tek başına bir teşhis değildir. Aynı sayfa, bir ziyaretçide anında açılırken diğerinde saniyelerce boş kalabilir; fark ağdan, cihazdan veya sayfanın hangi bölümünün beklendiğinden gelir. Bu belirsizliği ortadan kaldırmak için üç ölçülebilir metrik kullanılır.

Üç metrik ne anlatır?

LCP (Largest Contentful Paint) — En büyük içeriğin boyanma süresi. Ziyaretçinin "sayfa açıldı" dediği an budur: genellikle hero görseli veya ana başlık. İyi kabul edilen eşik 2,5 saniyedir.

INP (Interaction to Next Paint) — Etkileşimden sonraki boyamaya kadar geçen süre. Kullanıcı bir düğmeye bastığında arayüzün yanıt verme süresidir; sayfanın "takılma" hissini bu metrik ölçer. İyi kabul edilen eşik 200 milisaniyedir.

CLS (Cumulative Layout Shift) — Düzen kayması. Sayfa yüklenirken içeriğin yerinden oynaması. Ziyaretçinin basmak istediği düğme son anda kayarsa yanlış yere basar. İyi kabul edilen eşik 0,1'dir.

Bu üç metrik, arama motorlarının sayfa deneyimi değerlendirmesinde kullanılır; ancak asıl önemi sıralamada değil, dönüşümdedir. Yavaş açılan bir ürün listesi, ziyaretçinin geri tuşuna basma olasılığını doğrudan artırır.

Saha verisi ile laboratuvar verisi farkı

Ölçüm yaparken en sık düşülen hata, tek bir test sonucuna bakmaktır.

Laboratuvar verisi, belirli bir cihaz ve ağ profili varsayılarak yapılan sentetik ölçümdür. Tekrarlanabilir olduğu için geliştirme sırasında karşılaştırma yapmaya elverişlidir; gerçek kullanıcıların yaşadığını göstermez.

Saha verisi, gerçek ziyaretçilerin tarayıcılarından toplanan ölçümdür. Search Console'daki Core Web Vitals raporu ve CrUX veri seti bu veriyi kullanır. Yavaşlığın gerçekten yaşanıp yaşanmadığını yalnızca bu veri gösterir.

Doğru yöntem ikisini birlikte kullanmaktır: saha verisi sorunun var olup olmadığını, laboratuvar verisi nedenini söyler.

LCP'yi düşüren tipik nedenler

• Sıkıştırılmamış hero görseli. Sayfanın en üstündeki görsel çoğu zaman en büyük dosyadır. Modern biçimlere dönüştürülmesi ve ekran genişliğine göre farklı boyutların sunulması ilk yapılacak iştir.
• Görselin geç keşfedilmesi. Arka plan görseli olarak CSS içinde tanımlanan bir hero, tarayıcı tarafından geç fark edilir. En üstteki ana görsel işaretlenerek öncelikli yüklenmelidir.
• Yazı tipi bekleme süresi. Metin, yazı tipi inene kadar görünmüyorsa LCP gecikir. Yedek yazı tipiyle önce çizilmesi tercih edilir.
• Sunucu yanıt süresi. Sayfa istemciye geç ulaşıyorsa hiçbir görsel iyileştirme yetmez. Sunucu tarafında üretilen ve önbelleklenen sayfalar burada belirgin fark yaratır.
• Yükleme sırasını kilitleyen betikler. Sayfanın başında duran ve çizimi bekleten üçüncü taraf betikleri.

INP'yi düşüren tipik nedenler

• Ağır üçüncü taraf betikleri. Sohbet aracı, ısı haritası, çoklu ölçüm kodu. Her biri ana iş parçacığında zaman harcar.
• Aşırı büyük istemci taraflı uygulama. Basit bir tanıtım sayfası için yüklenen kapsamlı arayüz kütüphanesi.
• Uzun süren hesaplamalar. Büyük listelerin filtrelenmesi veya sıralamasının tarayıcıda yapılması.
• Gereksiz yeniden çizimler. Her tuş vuruşunda tüm listeyi yeniden oluşturan arayüzler.

Kurumsal sitelerde en etkili iyileştirme genellikle en yalın olanıdır: çalışma zamanı JavaScript'ini gerçekten gerekli olan yere sınırlamak.

CLS'yi düşüren tipik nedenler

• Boyutu belirtilmemiş görseller. Genişlik ve yükseklik yazılmadığında tarayıcı yer ayıramaz, görsel gelince içerik aşağı kayar.
• Sonradan eklenen bannerlar. Çerez bildirimi, kampanya şeridi, duyuru çubuğu. Yer önceden ayrılmalıdır.
• Web yazı tipi geçişi. Yedek yazı tipiyle asıl yazı tipinin ölçüleri farklıysa metin yerinden oynar. Ölçü uyumlu bir yedek tanımlanarak azaltılır.
• Reklam ve gömülü içerik. Video, harita ve benzeri gömülü öğeler için sabit oranlı bir kutu ayrılmalıdır.

Ölçümü doğru yapmak

Ölçümü anlamlı kılan üç kural vardır:

• Sayfa tipi bazında ölçün. Ana sayfa, ürün listesi ve ürün detayı farklı davranır. Tek bir ortalama, sorunlu sayfayı gizler.
• Mobil öncelikli bakın. Ziyaretin büyük bölümü mobil cihazdan gelir ve metrikler orada belirgin biçimde daha zayıftır.
• Değişiklik öncesi ve sonrası aynı koşulda ölçün. Aynı sayfa, aynı cihaz profili, aynı ağ profili. Aksi hâlde iyileşme mi gerileme mi olduğu anlaşılmaz.

Teslim koşulu olarak performans

Performans, yayına aldıktan sonra iyileştirilecek bir konu olarak bırakıldığında maliyeti yükselir; çünkü çoğu düzeltme yapısaldır. Görsel boyutlandırma stratejisi, yazı tipi yükleme yöntemi, sayfa üretim biçimi ve üçüncü taraf betiklerinin sayısı; hepsi mimari kararlardır.

Doğru yaklaşım, üç metriğin eşiklerini teslim koşulu olarak proje tanımına yazmaktır. Böylece ölçüm bir tartışma konusu değil, kabul kriteri hâline gelir.