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.

Bu yüzden web ve yazılım hizmetlerinde performans optimizasyonu, yalnızca puan yükseltmeye çalışan teknik bir iş değil; ürün deneyimi, içerik yapısı ve geliştirme kalitesini birlikte etkileyen temel bir yazılım disiplini olarak görülmelidir.

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.

Özellikle teknik SEO için Core Web Vitals, sayfa deneyimi, crawl verimliliği ve indexlenebilirlik açısından performans sorunlarının arama görünürlüğünü nasıl etkilediğini daha net okumayı sağlar.

☑ 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.

Bu kontrolleri yayına almadan önce sistematik hâle getirmek için web launch QA performans kontrolleri yaklaşımı, staging ve go-live sürecinde hız problemlerinin canlıya taşınmasını azaltır.

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.

Buradaki en kritik nokta, Next.js mimari kararlarında performans etkisini render stratejisi, cache yapısı, image optimization ve route tasarımıyla birlikte değerlendirmektir.

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

Ayrıca deployment sonrası performans kontrolü, release sonrasında oluşan performans regresyonlarını staging, test ve CI/CD adımlarında yakalayarak hız kazanımlarının korunmasına yardımcı olur.

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

Turizm tarafında otel web sitesi hız optimizasyonu, mobil rezervasyon deneyimi, landing page kalitesi ve kampanya trafiğinin verimli kullanılması açısından doğrudan gelir etkisi yaratır.

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”.

Bu etkinin iş sonucuna yansımasını okumak için web sitesi hızının dönüşüm etkisi, form gönderimi, rezervasyon, lead ve satış tarafında performans kaybının nasıl ölçülebileceğini gösterir.

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.

Bu döngüyü proje ölçeğinde kurmak için performans odaklı web sitesi geliştirme desteği alabilir, süreç ve teknik detayların kapsamını görmek için de Web sitesi geliştirme hakkında sık sorulan sorular sayfasını inceleyebilirsiniz.