Core Web Vitals Nedir? Otel ve Next.js Siteleri İçin Teknik Rehber

Core Web Vitals’ı doğru iyileştirmek için önce metriklerin ne ölçtüğünü ve “lab vs field” farkını netleştirmek gerekir. Lighthouse/PageSpeed gibi araçlar size bir laboratuvar simülasyonu verir; CrUX ve RUM ise gerçek kullanıcı verisini gösterir. Otel sitelerinde karar verici hatası genelde şudur: “Skor düşük → her şeyi aynı anda düzelt” yaklaşımı. Doğrusu: en büyük etkiyi veren kök nedeni bulup sırayla çözmektir.

LCP nedir ve otel sitesinde neden düşer?

LCP (Largest Contentful Paint), kullanıcı ekranda “asıl içerik” olarak algıladığı en büyük öğenin (genellikle hero görsel, büyük başlık alanı veya ana kart) ne kadar sürede göründüğünü ölçer. Otel sayfalarında LCP’yi bozan klasik sebepler: büyük WebP/JPG’ler, yanlış responsive kırılımlar, render-blocking CSS/JS ve CDN/cache eksikleri.

CLS nedir ve hangi kaymalar tehlikeli?

CLS (Cumulative Layout Shift), sayfa yüklenirken öğelerin zıplamasını ölçer. Sticky header, geç yüklenen fontlar, sonradan açılan banner’lar, dinamik rezervasyon kutuları ve ölçüsüz görseller CLS’yi yükseltir. Otelde CLS sadece skor değil, “rezervasyon formu alanı kaydı” gibi dönüşüm kıran bir problemdir.

INP nedir, neden FID yerine kritik oldu?

INP (Interaction to Next Paint), kullanıcı tıklayıp etkileşime geçtiğinde sayfanın gerçekten tepki verme hızını ölçer. Menü açılışları, takvim seçimi, filtreler ve modal’lar INP’nin ana sahasıdır. Otel sitelerinde 3. parti script’ler ve ağır JS bundle, INP’yi görünmez şekilde bozar.

Otel web sitesi, sadece bir vitrin değil; rezervasyon yolculuğunun başladığı ve çoğu zaman “OTA yerine direct booking” kararının verildiği yerdir. CWV burada iki katmanlı etki üretir: 1. SEO görünürlüğü: Google, benzer içerik kalitesinde sayfalar arasında “daha iyi deneyimi” avantajlı konumlayabilir. 2. Dönüşüm: Sayfa geç açılırsa kullanıcı “fiyat/oda görmeden” çıkar; layout kayarsa form doldurmaz; etkileşim gecikirse güven kaybeder.

Varsayım : Antalya, Belek, Side, Kemer gibi destinasyon sorgularında rekabet yoğun olduğu için performans farkı, aynı kalitede içerikler arasında belirleyici olabilir.

CWV SEO’yu gerçekten etkiler mi?

Evet, CWV doğrudan “tek başına sıralama garantisi” değildir; ancak içerik ve otorite benzerken daha iyi deneyim sunan sayfalar avantaj yakalayabilir. Ayrıca CWV iyileştirmesi çoğu zaman daha hızlı gezinme ve daha yüksek dönüşüm getirerek dolaylı SEO sinyallerini de güçlendirir (daha uzun oturum, daha fazla sayfa, daha az terk).

Otel sitesinde “kök neden” nerede saklanır?

• •Hero ve slider görselleri (LCP)
• •Sticky header + dinamik banner (CLS)
• •Rezervasyon modülü JS yükü (INP)
• •GTM/analytics/chat/heatmap script’leri (INP + LCP)
• •Font yükleme ve fallback stratejisi (CLS)

LCP’de amaç: kullanıcı ilk ekranda “asıl içeriği” mümkün olan en kısa sürede görsün. Otel sitelerinde LCP çoğunlukla hero görsel ve üst bloktaki büyük bileşenlerdir. Next.js tarafında doğru stratejiyle LCP’yi iyileştirmek genelde en hızlı kazanım sağlar.

Hero görsel stratejisi: doğru dosya, doğru boyut, doğru öncelik

• •Görseli “tek büyük dosya” yerine responsive kırılımlara uygun üretin (mobil/desktop).
• •Hero için modern format (WebP/AVIF) ve sıkıştırma şart.
• •Next.js’te hero görselinde öncelik mantığı (priority) ve doğru sizes yaklaşımı kritik.
• •CDN üzerinde cache (immutable) ve doğru TTL ile servis edin.

Görsel yükleme yapısı LCP’yi nasıl bozar?

Slider üstüne slider, overlay’li video, üstte büyük JS ile render edilen hero; hepsi LCP’yi geciktirir. Özellikle otel sitelerinde “ilk ekranda 3 farklı görsel + animasyon + rezervasyon kutusu” LCP’yi çökertir.

Render-blocking kaynakları azaltma

• •Kritik CSS’i küçült; gereksiz global CSS’i parçala.
• •Üçüncü parti script’leri (chat, heatmap, ekstra pixel’ler) “kritik yol”dan çıkar.
• •Fontları optimize et (aşağıda CLS bölümünde detay).

CDN + cache + preconnect mantığı

Otel sitelerinde görsel/asset yoğunluğu yüksek olduğu için CDN ve caching LCP’yi dramatik etkiler. • Statik asset’leri CDN’e koy • Uzun cache + fingerprint kullan • Gerekli origin’lere preconnect (abartmadan)

CLS, özellikle otel sitelerinde “kullanıcı güveni” ve “form doldurma” davranışını doğrudan etkiler. CLS’yi düşürmenin temel prensibi: Yüklenmeden önce her şeyin alanını rezerve et. Görsel, font, banner, rezervasyon kutusu… Hepsi.

Sticky header ve dinamik üst bantlar

Sticky header açılıp kapanırken yükseklik değiştiriyorsa veya sonradan promosyon bandı ekleniyorsa CLS artar. • Header yüksekliğini sabitleyin • Promosyon bandına önceden yer ayırın (boşluk dahil) • “Scroll ile büyüyen header” animasyonlarını ölçülü kullanın

Rezervasyon kutuları ve dinamik modüller

Takvim, fiyat widget’ı, oda seçimi gibi modüller sonradan DOM’a ekleniyorsa veya yükseklikleri değişiyorsa CLS üretir. • Skeleton kullanın (yükseklik sabit) • “Sonradan içerik ekleme” yerine placeholder alanı baştan koyun • Modal/popup’ları layout dışı yönetin (fixed/overlay)

Font yükleme (CLS’nin gizli faili)

Web font geç yüklenince metin genişliği değişir ve layout zıplar. • font-display: swap • Kritik fontları preload • Fallback font metrik uyumunu iyileştir (benzer x-height)

INP, otel sitelerinde “menü açılmıyor”, “takvim geç tepki veriyor”, “CTA tıklandı ama bir şey olmuyor” hissini yaratır. Bu his, özellikle mobilde rezervasyon niyeti yüksek kullanıcıyı kaybettirir. INP’yi iyileştirmek çoğu zaman “daha az JS, daha doğru öncelik” demektir.

Ağır JS bundle ve gereksiz hydration

Modern framework’lerde en sık hata: her şeyi client-side yapmak. • Gereksiz state ve büyük UI kütüphanelerini azaltın • Kritik etkileşim dışındaki bileşenleri server/partial yapın • Tek sayfada 6 farklı slider/animasyon aynı anda çalışmasın

Üçüncü parti script’ler ve GTM yönetimi

Analytics, remarketing, chat, heatmap… INP’yi öldüren klasikler. • Önce kritik içerik, sonra tracking • GTM’de gereksiz tag’leri temizle • “Her sayfada her script” yaklaşımını bırak

Buton/menü etkileşimleri için pratik iyileştirmeler

• Tıklama sonrası hızlı görsel geri bildirim (loading state) • Ağır işlemleri main thread’den ayırma (mümkünse) • Erişilebilir, basit DOM yapısı

Next.js, doğru kullanıldığında CWV için güçlü avantajlar sunar; yanlış kullanıldığında da “her şey JS, her şey client” ile performansı hızla bozar. Bu bölümde otel sitelerinde en çok işe yarayan pratik yaklaşımı topluyoruz.

Next.js Image Component ve görsel pipeline

• •Doğru sizes ve responsive strateji
• •Hero görselinde öncelik (first paint odaklı)
• •Lazy-load: içerik altı görsellerde
• •CDN: görsel servisinde kritik

Lazy load, prefetch ve CDN ayarları

• •Prefetch her zaman iyi değildir; kritik rotaları seçin
• •Lazy-load ile “aşırı tembellik” yapmayın (önemli içerik gecikmesin)
• •CDN caching kurgusu: statik asset + görsel + font

Otel rezervasyon modüllerinin CWV’ye etkisi

Rezervasyon modülü genelde dış servis, widget veya ağır JS taşır. • Widget’ı kritik yol dışına çıkarın • Önce “kullanıcı görsün”, sonra “detay yükle” yaklaşımı • Modülün açılışını hızlı geri bildirimle yönet

Otel sitesi için örnek “CWV iyileştirme sırası”

Önce LCP (hero/görsel), sonra CLS (rezervasyon kutusu + font + header), en son INP (script/bundle + etkileşimler). Çünkü LCP ve CLS çoğu otel sitesinde hızlı kazanım sağlar; INP ise genelde daha teknik refactor gerektirir.

Core Web Vitals, otel sitelerinde “görsel kalite” ile “performans” arasında doğru denge kurmayı zorunlu kılar. LCP için hero ve üst alanı, CLS için rezervasyon kutusu/header/font stabilitesini, INP için de etkileşimleri ve script yükünü yönetmek gerekir. En iyi sonuç, tek seferde “her şeyi düzeltmek” değil; ölç → teşhis et → önceliklendir → sprint ile uygula döngüsünü kalıcı hale getirmektir.