📏 Layout Shift (CLS)

Resim yüklenirken sayfanın kaymasını önle. Core Web Vitals için kritik.

❌ Kötü: Boyut Belirtilmemiş

Resim yüklenene kadar yer ayrılmaz, sayfa kayar.

<NuxtImg src="..." />

✅ İyi: width + height

Tarayıcı önceden yer ayırır, kayma olmaz.

<NuxtImg src="..." width="400" height="300" />

✅ İyi: CSS aspect-ratio

Responsive resimlerde aspect-ratio kullan.

aspect-ratio: 4/3; width: 100%;

✅ En İyi: width + height + placeholder

Hem yer ayrılır hem bulanık geçiş olur.

<NuxtImg src="..." width="400" height="300" placeholder />

CLS Neden Önemli?

Google sıralamasını etkiler (Core Web Vitals)
Kullanıcı deneyimini bozar (yanlış yere tıklama)
Profesyonel görünümü engeller

<!-- Her zaman boyut ver -->
<NuxtImg src="..." width="800" height="600" />

<!-- Responsive için CSS -->
<NuxtImg src="..." class="responsive-img" sizes="100vw" />

<style>
.responsive-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
</style>