← Geri

🚀 Preload

Kritik resimleri önceden yükle. LCP metriğini iyileştir.

Preload Kullanımı

preload yok

Normal yükleme sırası

preload ✅

Head'e link rel="preload" eklenir

Nasıl Çalışır?

1

<NuxtImg preload /> kullanılır

2

<head>'e preload link eklenir

3

Tarayıcı resmi erken indirir

Üretilen HTML:<link rel="preload" as="image" href="/_ipx/..." />

Ne Zaman Kullan?

Hero resmi (above-the-fold)
LCP resmi (en büyük görsel)
Banner / splash görsel
Scroll'da görünecek resimler
Thumbnail grid
Çok sayıda resim (1-2 tane seç)

⚠️ Dikkat

Preload'u sadece 1-2 kritik resim için kullan. Çok fazla preload network'ü tıkar ve ters etki yapar.

<!-- Hero resmi - preload + eager + high priority -->
<NuxtImg 
  src="/hero.jpg" 
  preload
  loading="eager"
  fetchpriority="high"
  width="1200"
  height="600"
/>

<!-- Diğer resimler - normal -->
<NuxtImg 
  src="/card.jpg" 
  loading="lazy"
/>