Frontend için Core Web Vitals: LCP, INP ve CLS rehberi

Core Web Vitals; yükleme, etkileşim ve görsel stabiliteyi ölçen gerçek kullanıcı metrikleridir. Google bunları sayfa deneyimi sinyallerinin parçası olarak değerlendirir; özellikle içerik kalitesi birbirine yakın sayfalarda rekabet gücünü etkileyebilir.

Frontend geliştirici için bu metrikler yalnızca SEO konusu değildir. Kullanıcı içeriği ne kadar hızlı görüyor, etkileşimlere ne kadar çabuk yanıt alıyor ve sayfa okunurken düzen zıplıyor mu sorularını ölçer. Tasarım güçlü olsa bile bu testlerden kalan portfolio veya dashboard yavaş hissedilir.

Güncel üç metrik Largest Contentful Paint (LCP), Interaction to Next Paint (INP) ve Cumulative Layout Shift (CLS)'dir. web.dev resmi dokümantasyonu, eşiklerin gerçek kullanıcı ziyaretlerinin 75. yüzdelik diliminde karşılanması gerektiğini vurgular.

LCP, viewport'taki en büyük içerik öğesinin ne zaman render edildiğini ölçer. Çoğu sayfada bu öğe hero görseli, başlık bloğu veya ürün ekran görüntüsüdür. Yavaş LCP genelde büyük görseller, render'ı bloke eden kaynaklar, yavaş sunucu yanıtı veya anlamlı içeriği geciktiren client-side rendering kaynaklıdır.

React ve Next.js projelerinde LCP'yi iyileştirmek için hero görseline priority verin, modern görsel formatları kullanın, kritik CSS'i küçük tutun ve fold üstü içerik için mümkünse statik veya sunucu tarafı HTML tercih edin. Kullanıcı başlığı görmeden tüm uygulama bundle'ını yüklemeyin.

Pratik LCP kontrol listesi: hero medyayı sıkıştırın, gerektiğinde LCP görselini preload edin, landing route'taki üçüncü parti scriptleri azaltın ve yalnızca yerel Lighthouse sonuçlarına değil Search Console veya analitik field verisine güvenin.

INP, First Input Delay (FID) yerine geçen duyarlılık metriğidir. Yalnızca ilk etkileşimi değil; tıklama, dokunma ve klavye girdilerine sayfa genelinde ne kadar hızlı yanıt verildiğini ölçer.

React uygulamalarında en yaygın INP sorunu ana iş parçacığında ağır JavaScript'tir. Büyük bundle'lar, optimize edilmemiş effect'ler, pahalı re-render'lar ve üçüncü parti widget'lar girdiyi geciktirebilir. Route bazlı bölme, kritik olmayan scriptleri erteleme ve Chrome DevTools Performance profili kullanın.

Next.js App Router sitelerinde statik içerik için server component, ağır client widget'lar için lazy loading ve hemen gerekmeyen bölümlerde hydration'ı bloklamama INP'yi iyileştirir. Çoğu kazanç daha az JavaScript ve daha akıllı zamanlama ile gelir.

CLS, sayfa açıkken beklenmeyen düzen kaymalarını ölçer. Sık nedenler: boyutsuz görseller, geç yüklenen fontlar, enjekte edilen banner'lar ve mevcut içeriğin üstüne mount olan bileşenlerdir.

Çoğu CLS sorunu disiplinli layout kurallarıyla önlenir: medya için alan ayırın, aspect-ratio kullanın, kullanıcı tetiklemedikçe scroll konumunun üstüne içerik eklemeyin ve font yükleme stratejisini test edin.

Yaratıcı portfolio sitelerinde hero görselleri, tema anahtarları veya çerez banner'ları ilk boyamadan sonra içeriği aşağı iterek CLS'i bozar. CLS düzeltmeleri sayfanın daha güvenilir ve kasıtlı hissettirdiği an fark edilir.

Mümkün olduğunda field verisi kullanın. Lighthouse debug için değerlidir; fakat SEO ve ürün kararları gerçek cihaz ve ağlardaki kullanıcıları dikkate almalıdır. Lab ve field sonuçlarını karşılaştırarak neyi önce optimize edeceğinize karar verin.

LCP öğesini etkileyen, yaygın etkileşimlerde ana iş parçacığı yükünü azaltan ve fold üstü düzeni stabilize eden düzeltmelere öncelik verin. Önce/sonra metriklerini vaka çalışmalarında belgeleyin; performans işi portfolio kanıtına dönüşür.

Core Web Vitals tek seferlik lansman öncesi denetim değil, süreç parçası olmalıdır. Pull request'lere performans bütçesi ekleyin, regresyonları izleyin ve ürün büyüdükçe hero route'ları sade tutun.