← 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"
/>