Core Web Vitals Nedir? Site Hızını Artırmanın Pratik Rehberi

Core Web Vitals, Google’ın bir web sayfasının kullanıcıya sunduğu deneyimi ölçmek için kullandığı üç temel ölçüttür: sayfanın ne kadar hızlı yüklendiği, tıklamalara ne kadar çabuk tepki verdiği ve yüklenirken içeriğin yerinden kayıp kaymadığı. Bu ölçütler Google’ın sayfa deneyimi değerlendirmesinin parçasıdır ve daha da önemlisi, ziyaretçinin sitede kalıp kalmayacağını doğrudan etkiler. Bu rehberde üç ölçütün ne anlama geldiğini, nasıl ölçüleceğini ve kurumsal sitelerde en çok işe yarayan iyileştirmeleri anlatıyoruz.

Core Web Vitals’ı oluşturan üç ölçüt

LCP: En büyük içeriğin yüklenme süresi

Largest Contentful Paint, sayfadaki en büyük görselin ya da metin bloğunun ekranda göründüğü andır. Ziyaretçi için “sayfa açıldı” hissinin karşılığıdır. İyi bir değer 2,5 saniyenin altıdır.

INP: Etkileşime tepki süresi

Interaction to Next Paint, ziyaretçinin bir butona tıklaması, menüyü açması ya da forma yazması ile ekranın buna tepki vermesi arasında geçen süreyi ölçer. Mart 2024’te eski FID ölçütünün yerini almıştır. İyi bir değer 200 milisaniyenin altıdır.

CLS: Görsel kararlılık

Cumulative Layout Shift, sayfa yüklenirken içeriğin ne kadar yer değiştirdiğini ölçer. Okumaya başladığınız metnin, üstüne sonradan yüklenen bir görsel yüzünden aşağı kaydığı durumları hepimiz yaşadık. İyi bir değer 0,1’in altıdır.

Önemli bir ayrıntı: Google bu değerleri laboratuvar testinden değil, gerçek Chrome kullanıcılarından toplanan veriden hesaplar ve ziyaretçilerin yüzde 75’inin yaşadığı değere bakar. Yani yalnızca sizin hızlı bilgisayarınızda değil, ortalama bir telefonda ve mobil bağlantıda da iyi sonuç almanız gerekir. Ölçütlerin teknik tanımları web.dev üzerinde ayrıntılı anlatılır.

Core Web Vitals sıralamayı ne kadar etkiler?

Dürüst cevap şu: içeriğin alaka düzeyi her zaman önce gelir. Yavaş ama aranan soruya en iyi cevabı veren bir sayfa, hızlı ama yetersiz bir sayfanın önüne geçebilir. Ancak benzer kalitedeki sayfalar arasında sayfa deneyimi fark yaratabilir. Asıl etki ise kullanıcı tarafındadır: yavaş açılan sayfalardan ziyaretçiler daha sık geri döner, formlar daha az doldurulur, sepetler daha sık terk edilir. Hız, reklam ve SEO bütçenizin verimini doğrudan belirler.

Nasıl ölçülür?

• PageSpeed Insights: pagespeed.web.dev adresine sayfanızı yazın. Üstte gerçek kullanıcı verisi (yeterli trafik varsa), altta laboratuvar testi ve öneriler görünür.
• Search Console: “Core Web Vitals” raporu, sitenizdeki sorunlu sayfa gruplarını mobil ve masaüstü için ayrı ayrı listeler. Kullanımı için Search Console rehberimize bakabilirsiniz.
• Chrome geliştirici araçları: Performans panelinde sayfa yüklenirken hangi kaynağın ne kadar sürdüğünü ayrıntılı görebilirsiniz.

LCP’yi iyileştirmek için

• Ana görseli küçültün: Sayfanın üstündeki büyük görseli WebP ya da AVIF biçiminde, gösterildiği boyuta yakın ölçülerde sunun.
• Öncelik verin: İlk ekrandaki görsele tembel yükleme uygulamayın; tarayıcıya öncelikli yüklenmesi gerektiğini belirtin.
• Sunucu cevabını hızlandırın: Önbellekleme, güncel PHP sürümü ve yeterli kaynağa sahip bir barındırma, ilk baytın gelme süresini kısaltır. Barındırma seçimini alan adı ve hosting seçimi yazımızda anlattık.
• Kayan görsellerden (slider) vazgeçin: Hem yavaşlatır hem de ziyaretçilerin çoğu ilk görselden sonrasını görmez.
• Yazı tiplerini kendi sunucunuzdan yükleyin: Dış sunuculara giden istekler ilk görüntülemeyi geciktirir.

INP’yi iyileştirmek için

• JavaScript’i azaltın: Kullanılmayan kütüphaneleri, ağır animasyon eklentilerini ve gereksiz kodları kaldırın.
• Üçüncü parti kodları erteleyin: Canlı destek, sosyal medya eklentileri ve reklam etiketleri çoğu zaman en büyük suçludur; bunları sayfa yüklendikten sonra ya da etkileşimle yükleyin.
• Uzun görevleri bölün: Tarayıcıyı yarım saniyeden uzun meşgul eden işlemler tıklamaların geç cevaplanmasına yol açar.

CLS’yi iyileştirmek için

• Görsellere boyut verin: Her görselin genişlik ve yükseklik değerini belirtin; tarayıcı yerini baştan ayırır.
• Sonradan eklenen alanlara yer ayırın: Reklam, harita ya da video gömme alanlarının yüksekliğini önceden tanımlayın.
• İçeriğin üstüne sonradan bir şey eklemeyin: Çerez bildirimi ya da duyuru şeridi içeriği aşağı itmemeli, üzerine açılmalıdır.
• Yazı tipi geçişini yumuşatın: Yedek yazı tipinin ölçülerini asıl yazı tipine yakın tutmak kaymayı azaltır.

Sık görülen durum: eklentiyle şişmiş siteler

Hazır temalı sitelerde her ihtiyaç için bir eklenti yüklemek zamanla onlarca betik ve stil dosyasının her sayfada yüklenmesine yol açar. Önbellek eklentileri belirtileri hafifletse de kök neden ortadan kalkmaz. Bu durumda çoğu zaman en kalıcı çözüm, gereksiz eklentileri temizlemek ya da siteyi yalın bir altyapıyla yeniden kurmaktır. Farkları WordPress mi, özel yazılım mı? yazımızda karşılaştırdık.

Hız bir kez değil, sürekli korunur

Yeni eklenen bir kampanya görseli, bir takip kodu ya da sıkıştırılmadan yüklenen fotoğraflar, iyi durumdaki bir siteyi birkaç hafta içinde yavaşlatabilir. Search Console’daki Core Web Vitals raporunu ayda bir kontrol etmek ve büyük değişikliklerden sonra PageSpeed testini tekrarlamak iyi bir alışkanlıktır. Teknik SEO’nun diğer maddeleri için teknik SEO kontrol listemize göz atabilirsiniz.

Geliştirdiğimiz kurumsal sitelerde hız tasarım aşamasından itibaren hedeflenir: görseller otomatik sıkıştırılır, yazı tipleri kendi sunucumuzdan yüklenir ve gereksiz betiklerden kaçınılır. Ayrıntılar kurumsal web sitesi sayfamızda; mevcut sitenizin durumunu görmek için ücretsiz SEO analiz aracımızı da kullanabilirsiniz.