Core Web Vitals Nedir? LCP, CLS, INP Rehberi

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimini ölçmek için kullandığı 3 temel metriktir. 2021'den bu yana sıralama faktörü olan bu metrikler, sitenizin gerçek kullanıcılar tarafından nasıl deneyimlendiğini ölçer. Kötü skorlar hem sıralamanızı düşürür hem de ziyaretçilerinizi kaçırır.

LCP (Largest Contentful Paint): Yüklenme Hızı

LCP, sayfanın en büyük görsel içeriğinin (genellikle hero görseli veya ana başlık) ne kadar sürede yüklendiğini ölçer. İyi skor: 2.5 saniyenin altı. Kötü skor: 4 saniyenin üstü. LCP'yi iyileştirmek için: görselleri optimize edin (WebP/AVIF), kritik CSS'i inline yapın, sunucu yanıt süresini düşürün ve CDN kullanın.

CLS (Cumulative Layout Shift): Görsel Kararlılık

CLS, sayfa yüklenirken içeriklerin beklenmedik şekilde kaymasını ölçer. Bir butona tıklamak üzereyken sayfanın kayması ve yanlış yere tıklamanız — işte CLS bu durumu ölçer. İyi skor: 0.1'in altı. Bunu düzeltmek için: görsellere boyut tanımlayın, fontları önceden yükleyin (font-display: swap) ve dinamik içeriklere alan ayırın.

INP (Interaction to Next Paint): Etkileşim Hızı

INP (FID'nin yerini aldı), kullanıcının sayfayla etkileşime girdiğinde (tıklama, dokunma, yazma) sayfanın ne kadar hızlı yanıt verdiğini ölçer. İyi skor: 200ms'nin altı. INP'yi iyileştirmek için: ağır JavaScript'leri parçalayın, ana thread'i bloke eden uzun görevleri kısaltın ve gereksiz üçüncü parti script'leri kaldırın.

Core Web Vitals Nasıl Ölçülür?

Next.js ile Core Web Vitals Optimizasyonu

Next.js, Core Web Vitals optimizasyonu için mükemmel bir framework'tür. next/image ile otomatik görsel optimizasyonu, next/font ile CLS-sız font yükleme, automatic code splitting ve SSG/SSR desteği ile varsayılan olarak yüksek performans sunar. Bu yüzden projelerimizde Next.js tercih ediyoruz.