Core Web Vitals Rehberi: INP, LCP ve CLS ile Hızlı Web Sitesi

Ziyaretçi sitenize geldi, sayfa üç saniye boyunca beyaz kaldı ve geri tuşuna bastı. Bu kaybı ne reklam bütçesi ne de iyi içerik telafi edebilir. Google, bu deneyimi ölçmek için Core Web Vitals adını verdiği üç metriği kullanıyor ve bunları sıralama sinyallerinden biri olarak değerlendiriyor.

Core Web Vitals nedir?

Core Web Vitals, gerçek kullanıcıların sayfanızı nasıl deneyimlediğini ölçen üç metrikten oluşur: yüklenme hızı, etkileşime tepki süresi ve görsel kararlılık. Mart 2024’te etkileşim metriği FID’in yerini INP aldı; bu, özellikle JavaScript ağırlıklı siteler için çıtayı yükseltti.

LCP’yi ne yavaşlatır, nasıl hızlandırılır?

• Büyük görseller: Hero görselini WebP/AVIF formatında, ekran boyutuna uygun ölçülerde sunun ve fetchpriority="high" ile önceliklendirin.
• Engelleyici kaynaklar: Kritik CSS’i sayfaya gömün, geri kalan CSS ve JavaScript’i ilk boyamadan sonra yükleyin.
• Yavaş sunucu: Sayfanın ilk baytı (TTFB) geç geliyorsa CDN, önbellekleme ve sunucu tarafı render kullanın.
• Web fontları: Sadece kullanılan karakter setlerini barındırın, font-display: swap ve preload kullanın.

INP: Yeni çıta, en çok zorlanılan metrik

INP, kullanıcının sayfadaki tüm etkileşimlerinin en yavaşlarından birini ölçer. Bir menü butonuna basıldığında ana iş parçacığı (main thread) başka bir JavaScript göreviyle meşgulse, tepki gecikir. En sık nedenler:

• Çok sayıda üçüncü taraf betik (sohbet widget’ları, takip kodları, A/B test araçları).
• Sayfa yüklenirken tek seferde çalışan büyük JavaScript paketleri.
• Her tıklamada tüm sayfayı yeniden hesaplayan ağır bileşenler.

Çözüm; uzun görevleri bölmek, bileşenleri görünür olduklarında hydrate etmek (lazy hydration) ve üçüncü taraf betikleri kullanıcı etkileşiminden sonraya ertelemektir. Örneğin bu sitede Meta Pixel kütüphanesi, ilk etkileşimden ya da birkaç saniyeden sonra yükleniyor; olaylar ise kuyrukta bekletildiği için hiçbiri kaybolmuyor.

CLS: Kayan sayfaları durdurmak

• Tüm görsel ve videolara width ve height değerleri verin.
• Reklam, banner ve çerez bildirimi gibi sonradan gelen alanlar için yer ayırın.
• Web fontu yüklendiğinde metin boyutunun değişmemesi için metrikleri eşleştirilmiş yedek font tanımlayın.

Hazır tema mı, özel geliştirme mi?

Hazır temalar ve sayfa oluşturucular, ihtiyacınız olmayan onlarca özelliğin kodunu her sayfada yükler. Bu durum özellikle mobilde INP ve LCP’yi zorlar. Nuxt veya Next.js gibi modern framework’lerle özel geliştirilen sitelerde ise yalnızca gerekli kod yüklenir; sunucu tarafı render sayesinde içerik ilk yanıtta gelir. Bu web sitesi de Nuxt ile geliştirildi ve tüm animasyonlarına rağmen mobil PageSpeed’de 90’ın üzerinde puan alıyor.

Kendi sitenizi nasıl test edersiniz?

1. PageSpeed Insights’a adresinizi girin ve önce üstteki “gerçek kullanıcı deneyimi” bölümüne bakın.
2. Search Console’daki Core Web Vitals raporunda sorunlu URL gruplarını bulun.
3. Chrome DevTools’taki Performance panelinde yavaş etkileşimleri kaydedip uzun görevleri inceleyin.
4. Düzeltmelerden sonra saha verisinin güncellenmesi için yaklaşık 28 gün bekleyin.

Sonuç

Core Web Vitals yalnızca bir SEO maddesi değil; dönüşüm oranını, reklam maliyetini ve marka algısını doğrudan etkiler. Hızlı bir site, Google’ın yapay zeka aramasında da ziyaretçiyi kaybetmeden karşılar. Profesyonel web sitesi ve e-ticaret projelerimizde PageSpeed 90+ hedefiyle çalışıyoruz; mevcut sitenizin hız analizi için bize yazın.