Web Sitesi Performans Rehberi: Core Web Vitals ve Hız Optimizasyonu

Core Web Vitals, Google’ın kullanıcı deneyimini ölçmek için öne çıkardığı metrik setidir. Pratikte size şunu söyler: sayfa ne kadar hızlı “anlamlı” yükleniyor (LCP), arayüz zıplıyor mu (CLS), kullanıcı tıkladığında site ne kadar çabuk tepki veriyor (INP). CWV tek başına “sıralama garantisi” değildir; ama hız kötü ise SEO, UX ve reklam verimi aynı anda yara alır.

LCP (Largest Contentful Paint) – “Sayfanın en büyük öğesi ne zaman geliyor?”

LCP genelde hero görsel, büyük başlık alanı veya üst banner’dan gelir. Otel sitelerinde LCP çoğunlukla dev bir görsel/slider; B2B’de ise büyük bir hero + video veya ağır bir UI bileşeni olabilir.

Buraya: LCP “en büyük öğe” örnekleri (hero görsel / slider / video poster)

CLS (Cumulative Layout Shift) – “Sayfa zıplıyor mu?”

CLS, kullanıcı daha tıklamadan sayfanın yer değiştirmesidir. En sık neden: boyutu tanımlanmamış görseller, geç yüklenen fontlar, sonradan giren banner’lar (cookie bar / promo).

INP (Interaction to Next Paint) – “Tıklayınca gecikiyor mu?”

INP, ağır JS ve main thread bloklarıyla bozulur. Üçüncü taraf script’ler (tag/ads/chat), büyük bundle’lar, kötü event handler’lar INP’yi aşağı çeker.

☑ Mini Check

• •LCP öğesi (hero/üst alan) net mi?
• •Görsellerin boyutları (width/height) tanımlı mı?
• •Sayfada ağır JS/3rd-party script’ler var mı?

Performans işini “her şeye dokunayım” diye yapmak en hızlı yolu kaybettirir. Doğru sıra: LCP → CLS → INP. Çünkü kullanıcı önce “sayfa geldi mi?” der, sonra “sayfa sabit mi?” der, sonra “site tepki veriyor mu?” der.

LCP, CLS ve INP değerlerimi nasıl iyileştiririm?

LCP için hero görselini küçültün, doğru format (WebP/AVIF) kullanın ve caching/CDN’den servis edin. CLS için görsel ölçülerini sabitleyin, font yüklemeyi optimize edin ve geç gelen banner’ları kontrollü yerleştirin. INP için JS yükünü azaltın, code splitting uygulayın ve üçüncü taraf script’leri disipline edin.

Buraya: Optimizasyon akış diyagramı (Ölç → LCP düzelt → CLS düzelt → INP düzelt → tekrar ölç)

Kurumsal sitelerde performansın %60’ı çoğu zaman görsel + font katmanında çözülür. Otel siteleri yoğun fotoğraf taşır; B2B siteleri ise daha “UI ağırlıklı” olsa bile font ve ikon yükleri ağırlaşabilir.

Görsel boyutu ve formatları (WebP, responsive images)

• Görselleri doğru formatta servis edin (WebP/AVIF). • Responsive images kullanın: mobilde 2000px görsel göndermeyin. • Hero görseline özel yaklaşım: tek, optimize, cache’li.

☑ Mini Check

• •Hero görseli gerçekten “tek ve optimize” mi?
• •Galeri görselleri lazy-load mu?
• •Görsellerin boyutları CSS ile değil kaynakta doğru mu?

Font optimizasyonu (FOIT/FOUT kontrolü)

CLS’nin gizli faili fontlardır. Fontlar geç gelince sayfa zıplar. Çözüm: font sayısını azaltma, doğru preload ve fallback stratejisi. Varsayım: Kurumsal projede 2 font ailesi + 2–3 weight üstüne çıkmamak hedeflenir.

Buraya: Font yükleme şeması (preload → swap → fallback)

Next.js size performans için güçlü araçlar verir; ama yanlış kullanım “kolay yavaşlık” üretir.

Lazy-loading, code splitting, caching

• Component bazlı bölme (route bazlı code splitting zaten var; ağır componentleri ayrıca böl) • ISR/SSG ile static hızını kullan (uygun sayfalarda) • SSR gereken yerlerde caching stratejisi (Varsayım) planla

Next/Image kullanımı

Next/Image doğru kullanıldığında LCP’ye büyük katkı sağlar; yanlış kullanıldığında (oversized, yanlış priority) LCP’yi boğar.

☑ Mini Check

• •LCP öğesi olan görselde “priority” mantıklı mı?
• •Görsellerde doğru width/height var mı?
• •Placeholder/blur stratejisi UX’i bozuyor mu?

Performans standartlarını “sektöre göre” daraltmak işleri kolaylaştırır.

Otel siteleri (yüksek görsel yük)

• Hero/slider sadeleştirme • Galeri ve oda görselleri lazy-load • Rezervasyon akışı ayrı performans test seti • Destinasyon sayfalarında (Antalya/Belek/Side/Kemer/Bodrum) görsel boyut disiplini

B2B siteleri (UI + script yükü)

• Üçüncü taraf script’leri azaltma • Demo/dashboard sayfalarını ayrı optimize etme • Form dönüşüm akışında gecikmeleri temizleme

Core Web Vitals nedir, web sitesi performansını nasıl etkiler?

Core Web Vitals; sayfanın hızlı yüklenip yüklenmediğini (LCP), arayüzün stabil olup olmadığını (CLS) ve etkileşime hızlı yanıt verip vermediğini (INP) ölçer. Bu metrikler kötü olduğunda kullanıcı daha içerik görmeden çıkar; SEO ve reklam landing verimi de birlikte düşer. Bu yüzden CWV iyileştirmesi, performans çalışmalarının “ölçülebilir omurgasıdır”.

CWV optimizasyonu bir kere yapılınca bitmez; tasarım güncellemeleri, yeni içerik ve üçüncü taraf script’ler performansı tekrar aşağı çekebilir. Bu yüzden hedef: ölç–iyileştir–koru döngüsünü kurmak ve 180 günlük refresh ile eşikleri güncel tutmaktır.