Google, 2021'den bu yana web sitelerini sıralama algoritmasında Core Web Vitals metriklerini aktif olarak kullanıyor. 2024 itibarıyla FID (First Input Delay) yerini INP (Interaction to Next Paint) metriğine bıraktı. Artık sadece ilk etkileşim değil, sayfadaki tüm etkileşimlerin yanıt süresi ölçülüyor.
LCP — Largest Contentful Paint
LCP, sayfanın görünür alanındaki en büyük içerik öğesinin (genellikle hero görseli veya başlık bloğu) ne kadar sürede render edildiğini ölçer. Google'ın "iyi" kabul ettiği eşik 2.5 saniyenin altıdır, ancak premium bir deneyim için hedefimiz her zaman 1.2 saniyenin altı olmalıdır.
/* LCP Optimizasyon Stratejileri */
1. Hero görselleri için <link rel="preload"> kullanın
2. Kritik CSS'i inline edin (render-blocking'i önleyin)
3. Font yüklemeyi display:swap ile optimize edin
4. Lazy loading'i sadece fold altı görsellere uygulayın
5. CDN ile TTFB süresini 200ms altına çekinINP — Interaction to Next Paint
INP, kullanıcının sayfayla herhangi bir etkileşiminden (tıklama, dokunma, klavye girişi) sonra tarayıcının bir sonraki kareyi ne kadar sürede çizdiğini ölçer. 200ms altı "iyi", 200-500ms arası "iyileştirme gerekiyor" olarak değerlendirilir.
"Kullanıcı bir butona tıkladığında 200ms içinde görsel geri bildirim alamazsa, arayüzün 'kırık' olduğunu düşünür — bu bir algı meselesidir, teknik bir sorun değil."
INP'yi optimize etmenin en etkili yolu, ana thread'i bloke eden uzun JavaScript görevlerini parçalamaktır. requestIdleCallback, scheduler.yield() ve Web Worker kullanımı bu noktada kritik araçlardır.
CLS — Cumulative Layout Shift
CLS, sayfadaki beklenmeyen yerleşim kaymalarını ölçer. Bir görsel geç yüklendiğinde altındaki metnin kayması, bir font yüklendiğinde başlıkların zıplaması — bunların tümü CLS puanını olumsuz etkiler. Google'ın eşiği 0.1 altıdır.
Pratik çözümler:
- Tüm görsellere
widthveheightattribute'u ekleyin - Web fontları için
font-display: optionalveyaswapkullanın - Dinamik içeriklere (reklamlar, iframe'ler) sabit yükseklik alanı ayırın
contain: layoutCSS özelliği ile bileşen izolasyonu sağlayın
Webify'da Biz Ne Yapıyoruz?
Bu sitede kullandığımız Astro framework'ü, varsayılan olarak sıfır JavaScript politikasıyla LCP'yi minimumda tutar. Fontlarımızı display: block stratejisiyle yüklüyor, tüm görselleri optimize edilmiş formatlarla sunuyor ve layout shift'i sıfıra yakın tutuyoruz. Sonuç: Lighthouse 100/100.