Core Web Vitals Nedir? LCP, INP ve CLS'yi İyileştirme Rehberi

Web sitenizin hızlı "hissettirmesi", ziyaretçinin kalıp kalmayacağını belirleyen en önemli faktörlerden biridir. Google bu deneyimi ölçmek için Core Web Vitals adını verdiği üç metrik kullanır. Bu yazıda her metriğin ne anlama geldiğini, nasıl ölçüldüğünü ve nasıl iyileştirilebileceğini anlatıyorum.

#Üç metrik, üç soru

Google, bir sayfanın "iyi" sayılması için bu eşiklerin gerçek kullanıcı ziyaretlerinin en az %75'inde karşılanmasını esas alır. INP, Mart 2024'te FID (First Input Delay) metriğinin yerini almıştır.

#Nasıl ölçülür?

İki tür veri vardır:

• Saha verisi (field data): Gerçek kullanıcılardan toplanır. Google Search Console'daki "Core Web Vitals" raporu ve PageSpeed Insights'ın üst bölümü bu veriyi gösterir. Sıralamada esas alınan budur.
• Laboratuvar verisi (lab data): Lighthouse gibi araçlarla kontrollü ortamda ölçülür. Sorunları teşhis etmek için idealdir ama gerçek kullanıcı deneyimini birebir yansıtmaz.

Tarayıcınızın geliştirici araçlarındaki Performance paneli de LCP, INP ve CLS değerlerini canlı olarak gösterir.

#LCP'yi iyileştirmek

LCP genellikle sayfanın en büyük görseli veya ana başlığıdır. Gecikmenin dört kaynağı vardır: sunucu yanıt süresi, kaynağın keşfedilmesi, kaynağın indirilmesi ve ekrana çizilmesi.

1. Sunucu yanıtını hızlandırın. Sayfayı ziyaretçiye yakın bir noktadan sunan bir CDN veya edge altyapısı (örneğin Cloudflare) kullanın, gereksiz sunucu işlemlerini azaltın.
2. LCP görselini erken keşfettirin. Hero görselini CSS arka planı yerine <img> olarak kullanın ve fetchpriority="high" verin. Bu görsele asla loading="lazy" eklemeyin.
3. Görseli küçültün. WebP/AVIF formatı ve cihaza uygun boyut (srcset) indirme süresini ciddi ölçüde azaltır.
4. Render'ı engelleyen kaynakları azaltın. Kritik olmayan JavaScript'i erteleyin, kullanılmayan CSS'i temizleyin, fontları font-display: swap ile yükleyin.

#INP'yi iyileştirmek

INP, kullanıcı bir butona tıkladığında veya yazı yazdığında sayfanın bir sonraki kareyi ne kadar sürede çizdiğini ölçer. Kötü INP'nin ana sebebi ana iş parçacığını (main thread) uzun süre meşgul eden JavaScript'tir.

• Uzun görevleri bölün. 50 ms'yi aşan işleri küçük parçalara ayırın ve aralarında tarayıcıya nefes aldırın.
• Gereksiz JavaScript'i kaldırın. Kullanılmayan kütüphaneler, ağır üçüncü taraf scriptler (sohbet widget'ları, fazla sayıda takip kodu) INP'yi bozar.
• Sunucu bileşenlerinden yararlanın. React Server Components ve Next.js gibi yapılar, etkileşim gerektirmeyen kısımları tarayıcıya JavaScript olarak göndermez.
• Geri bildirimi hemen verin. Ağır bir işlem başlamadan önce butonun durumunu değiştirmek gibi görsel geri bildirimleri önce çizin.

#CLS'yi iyileştirmek

Okumaya başladığınız metnin aniden aşağı kayması, CLS'nin tipik örneğidir.

• Görsellere ve videolara boyut verin. width ve height öznitelikleri veya CSS aspect-ratio kullanın.
• Reklam ve gömülü içeriklere yer ayırın. Sonradan yüklenen alanlar için minimum yükseklik tanımlayın.
• Font değişiminden kaynaklı kaymaları azaltın. Yedek fontu ana fonta yakın metriklerle ayarlayın; Next.js'in next/font modülü bunu otomatik yapar.
• İçeriği mevcut içeriğin üstüne eklemeyin. Çerez bildirimleri ve duyuru çubukları sayfayı itmek yerine sabit konumda açılmalıdır.

#Hız neden sadece SEO meselesi değil?

Core Web Vitals sıralama sinyallerinden biridir, ama asıl etkisi kullanıcı üzerindedir. Hızlı açılan, tepki veren ve kaymayan bir site daha uzun süre gezilir, daha çok güven verir ve daha fazla dönüşüm getirir. Yani performansa yapılan yatırım, doğrudan işinize yapılan bir yatırımdır.

#Hızlı kontrol listesi

• Hero görseli <img> ve fetchpriority="high" ile yükleniyor
• Tüm görsellerin boyutları tanımlı
• Görseller WebP/AVIF formatında
• Kullanılmayan JavaScript ve CSS temizlendi
• Üçüncü taraf scriptler gözden geçirildi
• Site bir CDN/edge altyapısı üzerinden sunuluyor
• Search Console'daki Core Web Vitals raporu düzenli takip ediliyor

Sitenizin performans analizini birlikte yapmak isterseniz hizmetler sayfama göz atabilir ya da iletişim sayfasından bana yazabilirsiniz.