CORE WEB VITALS LCP CLS INP İYİLEŞTİRMEK

Core Web Vitals, Google'ın sayfa hızını ölçtüğü üç metriktir: LCP yükleme süresini, CLS sayfanın oynamasını, INP etkileşim hızını ölçer ve üçü de doğrudan SEO sıralama faktörüdür. Bu yazıda her metriğin eşiklerini, kök nedenlerini ve birbirinden bağımsız iyileştirme adımlarını örneklerle öğreneceksiniz.

1. Core Web Vitals nedir?

Google'ın belirlediği üç ana kullanıcı deneyimi metriği. Hem laboratuvar testleriyle (PageSpeed Insights, Lighthouse) hem de gerçek kullanıcı verisiyle (Chrome User Experience Report, CrUX) ölçülür. Sıralama için gerçek kullanıcı verisi belirleyici.

İyi skor için tüm sayfalarda mobil ve masaüstü her üç metriğin de "iyi" alanda olması gerek. Genel skor: sayfaların yüzde 75'i "iyi" alanda olmalı.

2. LCP: en büyük öğenin yükleme süresi

LCP, sayfanın görünür alanındaki en büyük içerik elementinin (genelde hero görseli veya ana başlık) ne kadar sürede yüklendiğini ölçer; eşik değerleri ve ölçüm yöntemleri konusunda Google'ın web performans kaynakları ayrıntılı referans sunar. Kullanıcının "sayfa açıldı" hissi LCP ile belirlenir.

LCP'yi olumsuz etkileyen unsurlar

• Optimize edilmemiş büyük görsel (özellikle hero img)
• Yavaş sunucu yanıt süresi (TTFB)
• Render-blocking CSS ve JavaScript
• Client-side rendering (SPA) ile geç yüklenen ana içerik
• Web fontlarının geç yüklenmesi

LCP iyileştirme adımları

1. Hero görselini optimize et. WebP formatına çevir, doğru boyutta yükle, srcset ile responsive yap
2. loading="eager" + fetchpriority="high" kullan. Hero img'a; tarayıcı bunu öncelikli yükler
3. Preload kritik kaynakları. head içinde <link rel="preload" href="hero.webp" as="image">
4. CDN kullan. Cloudflare ücretsiz yeterli; coğrafi yakınlık LCP'yi 200-500ms düşürür
5. Sunucu yanıt süresini düşür. TTFB 200ms altı hedef; hosting kalitesi belirleyici
6. Render-blocking CSS'i azalt. Kritik CSS inline, geri kalan async
7. Üçüncü taraf script'leri ertele. Analytics, chat, social embed'ler defer/async

Hızlı kazanç

Çoğu WordPress sitesinde LCP iyileştirmesinin yüzde 60'ı tek bir adımla gelir: hero görselin WebP'ye dönüştürülmesi ve preload edilmesi. ShortPixel veya benzeri eklenti ile saatler değil dakikalar içinde fark görülür.

3. CLS: kümülatif düzen kayması

CLS, sayfa yüklenirken içeriğin ne kadar oynadığını ölçer. Kullanıcı bir butonun konumunu görür, tıklamak için fareyi getirir; o sırada üst tarafta görsel yüklenip buton aşağı kayar; kullanıcı yanlış yere tıklar. CLS bu deneyimi sayısallaştırır.

CLS'i olumsuz etkileyen unsurlar

• Boyut belirtilmemiş görseller (yüklenirken yer kaplamıyor, sonra patlama yapıyor)
• Boyut belirtilmemiş reklam slot'ları
• Web fontlarının geç yüklenmesi (FOIT/FOUT: yazı boyut değişimi)
• Üst kısma sonradan eklenen banner veya bildirim
• Dynamic content (oturum durumu, kullanıcı menüsü)

CLS iyileştirme adımları

1. Tüm görsellere width ve height ekle. Tarayıcı görsel yüklenmeden önce yer ayırır
2. Aspect-ratio CSS kullan. aspect-ratio: 16/9; görselin boyutu netleşir
3. Reklam slot'larına min-height ver. Slot dolmadan önce yer açık dursun
4. font-display: swap kullan. Yedek fontla görüntü; web fontu yüklenince geçiş
5. İçerik enjeksiyonunu üst kısımdan kaçın. Banner veya bildirim sayfanın altına; üstte ise yer önceden ayrılmış olmalı
6. Layout shifts'i Performance panelinde incele. Hangi element kaydı, hangi anda kaydı

4. INP: etkileşim yanıt süresi

INP, kullanıcı bir tıklama, dokunma veya klavye girişi yaptığında sayfanın ne kadar sürede yanıt verdiğini ölçer. Mart 2024'te FID metriğinin yerine geldi; daha kapsamlı ve daha gerçekçi.

INP'yi olumsuz etkileyen unsurlar

• Ağır JavaScript main thread'i bloke ediyor
• Uzun süren event handler'lar
• Sayfa yüklenirken büyük hesaplamalar
• Üçüncü taraf script'lerin engelleme yapması
• React veya benzeri framework'lerde yanlış rerender yönetimi

INP iyileştirme adımları

1. Long task'leri parçala. 50ms'i geçen task'leri requestIdleCallback veya scheduler.postTask ile böl
2. Event handler'ları optimize et. Throttle/debounce kullan; her tıklamada ağır iş yapma
3. Üçüncü taraf script'leri ertele. defer veya async ile yükle; sayfa interactive olduktan sonra başlatır
4. Web Worker kullan. Ağır hesaplamaları main thread'ten ayır
5. React optimize et. useMemo, useCallback, React.memo ile gereksiz rerender'ı engelle
6. Asenkron API çağrılarını yönet. Promise zincirleri main thread'i bloke ederse INP düşer

5. Ölçüm araçları

PageSpeed Insights

Tek sayfa için kapsamlı analiz. Hem laboratuvar testi (Lighthouse) hem gerçek kullanıcı verisi (CrUX) gösterir. Mobil ve masaüstü ayrı raporlar. Ücretsiz ve hızlı.

Chrome User Experience Report (CrUX)

Gerçek kullanıcı davranışından toplanan veri. Google sıralama için bu veriyi kullanır. Search Console'da Core Web Vitals raporu CrUX'tan beslenir.

Chrome DevTools Performance

F12 → Performance sekmesi → Record. Tarayıcı içinde detaylı zaman çizelgesi. Long task'ler, layout shifts, network bloklamaları görünür.

Web Vitals JavaScript kütüphanesi

Kendi sitenizde gerçek kullanıcı metriklerini toplayıp Analytics'e gönderebilirsiniz:

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));

6. Mobil vs masaüstü farkı

Core Web Vitals mobilde çoğunlukla daha kötü. Sebepleri:

• Mobil cihaz CPU'su daha yavaş (özellikle düşük seviye Android)
• Mobil ağ daha değişken (3G/4G dalgalanma)
• Mobil ekranda hero görsel daha büyük yer kaplar (LCP olarak)

Google sıralamada mobil-first indexing kullandığı için mobil skoru daha kritiktir. Masaüstü skoru iyi olsa bile mobil zayıfsa SEO kaybı vardır.

7. Sık Görülen Sorunlar hatalar

1. Sadece Lighthouse'a bakmak. Lab data tek nokta; gerçek kullanıcı verisi (CrUX) Google için daha belirleyici
2. Tek bir sayfayı optimize edip "site hızlandı" demek. Tüm sayfa tiplerinde (ana, kategori, ürün, blog) ayrı kontrol gerekir
3. WebP dönüşümünü atlamak. Hâlâ JPG hero kullanan siteler LCP'de büyük kayıp
4. Üçüncü taraf script'leri saymamak. Chat widget, social embed, A/B test scripti INP'yi gizlice düşürür
5. Görsel boyutu belirtmemek. CLS'in birinci numaralı sebebi
6. Mobil ölçümü atlamak. Masaüstüde iyi mobil kötü; SEO sıralamada mobil sayılır

8. Hedef skor

"Mükemmel skor" değil "iyi skor" hedef. PageSpeed Insights'ta 100/100 abartılı bir hedef; üretim sitelerinde gerçekçi değil. Pratik hedef:

• Mobil skor 75-85+
• Masaüstü skor 90+
• Üç Core Web Vitals metriği de "iyi" alanda
• Tüm önemli sayfa tiplerinde tutarlı performans

9. İlerleme Yönü

Core Web Vitals modern web geliştirmenin temel ölçütleri. Sistemli optimizasyon için teknik SEO eğitimi programları performans metrikleri ve crawl bütçesi konularını birlikte aktarır.

Özetle

Core Web Vitals; LCP yükleme, CLS düzen kayması ve INP etkileşim yanıt süresi olmak üzere üç metrikten oluşan modern performans standardıdır. Her birinin farklı kök nedenleri ve farklı çözüm yolları vardır. LCP için görsel optimizasyonu ve preload, CLS için boyut belirtimi ve font-display swap, INP için JavaScript optimizasyonu ana çözümlerdir. Mobil skor masaüstünden daha kritik; SEO için sıralama faktörü. Yıllık değil sürekli izlenen bir alan; her yeni feature performans testinden geçmeli.