İletişim

Preload (Önden Yükleme) Nedir?

Kısa tanım

Preload, rel="preload" değerli bir link etiketiyle tarayıcıya mevcut sayfada kesin olarak gerekecek bir kaynağı (font, görsel, stil dosyası, script) erkenden ve yüksek öncelikle indirmesini söyleyen bildirimdir. Kaynak çalıştırılmaz, yalnızca indirilip önbelleğe alınır. Tarayıcının geç keşfedeceği kritik dosyalar için kullanılır; gereksiz preload ise diğer kaynaklarla bant genişliği için yarışır.

Diğer adları: rel=preload, link preload, önden yükleme, ön yükleme

Yayınlandı
Önce yalnızca CSS içinde geç keşfedilen fontu, sonra preload ile HTML'den hemen ve paralel indirilen fontu gösteren karşılaştırma

Geç keşfedilen kaynak sorunu

Tarayıcı HTML'i okurken içindeki <img>, <script> ve stil bağlantılarını hızlıca fark edip indirmeye başlar. Sorun, HTML'de doğrudan görünmeyen kaynaklardır: CSS dosyasının içinde tanımlanan bir web fontu, CSS ile verilen bir arka plan görseli ya da başka bir script'in yüklediği modül. Tarayıcı bunları ancak ilgili CSS veya JavaScript indirilip işlendikten sonra öğrenir; bu da kritik bir dosyanın birkaç yüz milisaniye geç istenmesi demektir.

Preload bu zinciri kısaltır: kaynağı daha baştan bildirir, tarayıcı da onu yüksek öncelikle indirip önbellekte hazır tutar. Önemli bir fark: preload bir ipucu değil, zorunlu bir istektir. Tarayıcı preload edilen her dosyayı indirir.

Doğru yazım: as, type ve crossorigin

<!-- Değişken font: CSS'te tanımlı, HTML'de görünmüyor -->
<link rel="preload" href="/fonts/inter-var.woff2"
      as="font" type="font/woff2" crossorigin>

<!-- CSS arka planı olarak gelen LCP görseli -->
<link rel="preload" href="/img/hero-1200.avif"
      as="image" type="image/avif" fetchpriority="high">
  • as zorunludur. Önceliği, gönderilecek Accept başlığını, içerik güvenlik politikası kontrolünü ve önbellekte eşleştirmeyi bu değer belirler. Yanlış ya da eksik as kullanıldığında preload edilen dosya sonradan tanınmaz ve aynı kaynak iki kez indirilebilir.
  • Fontlarda crossorigin şarttır, font aynı alan adından gelse bile. Fontlar CORS modunda istendiği için bu öznitelik yoksa preload kopyası kullanılmaz ve dosya ikinci kez indirilir.
  • type, tarayıcının desteklemediği formatı (örneğin AVIF) hiç indirmemesini sağlar.
  • Duyarlı görsellerde imagesrcset ve imagesizes, arka plan varyasyonlarında media özniteliği doğru boyutun seçilmesini sağlar.

Aynı bildirim sunucudan HTTP başlığı olarak da gönderilebilir: Link: </fonts/inter-var.woff2>; rel=preload; as=font; crossorigin. Özniteliklerin tam listesi MDN üzerinde yer alır.

Preload mu, fetchpriority mi?

İkisi farklı sorunları çözer. Preload keşif sorununu, fetchpriority ise öncelik sorununu çözer. LCP görseli zaten HTML'de bir <img> olarak duruyorsa preload eklemek yerine o etikete fetchpriority="high" vermek çoğu zaman yeterlidir; tarayıcı görseli zaten bulmuştur, sadece önemini bilmiyordur. Görsel CSS ya da JavaScript üzerinden geliyorsa preload gerekir. fetchpriority güncel Chrome, Edge, Firefox ve Safari sürümlerinde desteklenir; desteklemeyen tarayıcı yalnızca yok sayar.

Preload'un ters teptiği durumlar

  • Her şeyi preload etmek: Yüksek öncelikli istek sayısı arttıkça gerçekten kritik olan CSS ve HTML ile bant genişliği paylaşılır; "her şey öncelikliyse hiçbir şey öncelikli değildir".
  • Kullanılmayan preload: Sayfada hiç kullanılmayan bir dosya boşuna indirilir; Chrome bu durumda konsolda uyarı verir.
  • Sonraki sayfanın dosyaları: Başka bir sayfada gerekecek kaynaklar için preload değil, düşük öncelikli prefetch uygundur.
  • Tüm font ağırlıklarını yüklemek: Genellikle ilk ekranda kullanılan bir veya iki web fontu dosyası yeterlidir.

Kaynak başka bir alan adındaysa ve tam URL'si önceden bilinmiyorsa, preload yerine yalnızca bağlantıyı hazırlayan preconnect daha uygun bir araçtır.

İlgili terimler

← Sözlüğe dön