Core Web Vitals rehberi: LCP, INP ve CLS'yi anlamak ve iyileştirmek

Google, sayfa deneyimini ölçmek için üç metriği öne çıkarıyor: Core Web Vitals. Bu metrikler hem kullanıcının sitenizde ne yaşadığını özetliyor hem de arama sıralamasında dikkate alınan sinyaller arasında yer alıyor. Bu yazıda metriklerin ne anlama geldiğini, PageSpeed Insights raporunun nasıl okunacağını ve bu sitenin mobil hızını iyileştirirken uyguladığım somut adımları anlatıyorum.

Üç metrik

• LCP (Largest Contentful Paint): sayfadaki en büyük içerik öğesinin (çoğu zaman manşet başlığı ya da ana görsel) ekrana gelme süresi. İyi değer: 2,5 saniye ve altı.
• INP (Interaction to Next Paint): bir tıklama ya da dokunuşa sayfanın görsel olarak tepki verme süresi. İyi değer: 200 milisaniye ve altı. Mart 2024'te FID'nin yerini aldı.
• CLS (Cumulative Layout Shift): sayfa yüklenirken içeriğin beklenmedik şekilde kayma miktarı. İyi değer: 0,1 ve altı.

Bir sayfanın "iyi" sayılması için bu değerlerin gerçek ziyaretçilerin en az yüzde 75'inde sağlanması gerekiyor.

PageSpeed Insights nasıl okunur?

Raporun iki ayrı bölümü var ve sık karıştırılıyor:

• Saha verileri: Chrome kullanan gerçek ziyaretçilerden son 28 günde toplanan ölçümler. Sıralamada dikkate alınan bunlardır; ancak yeterli trafiği olmayan sitelerde bu bölüm boş görünür.
• Laboratuvar verileri: Lighthouse'un orta seviye bir telefonu ve yavaş bir 4G bağlantısını taklit ederek yaptığı tek seferlik ölçüm. 0–100 arasındaki performans puanı buradan gelir.

Performans puanı beş metriğin ağırlıklı ortalamasıdır: Total Blocking Time %30, LCP %25, CLS %25, First Contentful Paint ve Speed Index %10'ar. Laboratuvarda gerçek bir kullanıcı etkileşimi olmadığı için INP'nin yerini TBT tutar. Mobil ve masaüstü puanları ayrı hesaplanır; mobil ölçüm çok daha yavaş bir bağlantı ve işlemci varsaydığı için puanlar genellikle daha düşüktür.

Bu sitede yaptıklarım

Bu sitenin manşetinde gerçek zamanlı çizilen bir 3B prizma, kelime kelime beliren bir başlık ve kaydırmaya bağlı animasyonlar var. Görsel olarak iddialı bir sayfayı mobilde hızlı tutmak için şu adımları attım.

1. Manşet ilk karede görünsün

Başlığın kelimeleri önceden, kırpılmış bir alanın içinden alttan kayarak beliriyordu. Göz için hoş bir efekt; ama tarayıcı açısından başlık animasyon bitene kadar tam olarak ekranda değil ve bu da LCP'yi geciktiriyor. Animasyonu, metnin ilk karede yerinde durduğu ve yalnızca bulanıklıktan netleştiği bir geçişle değiştirdim. Görsel etki korunurken LCP, ilk boyamayla aynı ana çekildi.

2. Ağır işleri etkileşime bırakın

3B sahneyi çizen kütüphane, sıkıştırılmamış hâliyle yaklaşık 570 KB. Artık ziyaretçinin ilk hareketinde yükleniyor: masaüstünde fareyi kıpırdatmak, telefonda dokunmak ya da kaydırmak yetiyor. O ana kadar aynı sahnenin hafif bir çizimi görünüyor ve canlı sahne üzerine yumuşak bir geçişle geliyor. Spam koruması için kullanılan reCAPTCHA betiği de aynı mantıkla, yalnızca ilk etkileşimde yükleniyor.

Burada küçük ama öğretici bir hata da yakaladım: sitenin üst menüsü açılışta yapay bir scroll olayı yayıyordu ve bu olay "kullanıcı kaydırdı" sanılıp hem 3B sahneyi hem de reCAPTCHA'yı erkenden yüklüyordu. Çözüm, yalnızca gerçek kullanıcı olaylarını (event.isTrusted) dikkate almaktı.

3. Yalnızca gereken kodu gönderin

Kaydırmaya bağlı yatay vitrin ve yumuşak kaydırma yalnızca fareli masaüstü cihazlarda çalışıyor. Bunları sağlayan animasyon kütüphanesini sayfayla birlikte yüklemek yerine ihtiyaç anında yüklenecek şekilde değiştirdim; telefonlar bu kodu hiç indirmiyor.

4. Yazı tiplerini Türkçe'ye göre kırpın

Google Fonts, Türkçe karakterleri "latin-ext" adlı ayrı bir dosyada sunuyor. Bu dosya Lehçe'den Vietnamca'ya yüzlerce karakter içeriyor; Türkçe ise yalnızca beşini kullanıyor: Ğ, ğ, İ, Ş ve ş. Dört yazı tipinin dosyalarını bu beş harfe göre kırparak toplam boyutu 286 KB'tan 185 KB'a indirdim. Yavaş bir mobil bağlantıda bu, yarım saniyeye yakın bir kazanç demek.

5. Ölçümü doğru yerde yapın

En şaşırtıcı ders buydu: kendi bilgisayarımdaki ölçümler, sunucu sıkıştırılmış dosya gönderdiği hâlde HTML ve JavaScript dosyalarını olduğundan dört beş kat büyük görüyordu. Sebep, bilgisayardaki güvenlik yazılımının tarayıcı trafiğinin araya girip sıkıştırmayı açmasıydı. Yerel ölçümler önce–sonra karşılaştırması için işe yarar; ama yayımlanacak ya da müşteriye sunulacak rakamlar için PageSpeed Insights'ın kendi sunucularındaki ölçümü esas alın.

Sonuç

Bu adımlardan sonra ana sayfanın mobil PageSpeed ölçümünde performans puanı 92, erişilebilirlik ve SEO puanları 100 oldu (4 Ekim 2026, Lighthouse 13.5): LCP 3,2 saniye, TBT 40 milisaniye, CLS 0. 3B sahnesi ve animasyonlarıyla görsel olarak iddialı bir sayfa için, yavaş 4G ve orta seviye bir telefon varsayan bir ölçümde iyi bir sonuç.

Hız, tek seferlik bir iyileştirme değil; her yeni özellikte yeniden sorulması gereken bir soru. Sitenizin hızını ve Core Web Vitals durumunu birlikte değerlendirmek isterseniz yazın. İşletmeler için geliştirdiğim sitelerin ölçülmüş puanlarını Web Platformu sayfasında bulabilirsiniz.