Preload özelliği ve kullanım alanları

Web site açılış hızı performansını artırmanın birçok yolu vardır. Bu yollardan biri, ihtiyaç duyduğunuz içeriği önden yüklemektir. Bunun için preload komutunu kullanacağız.

<link rel="preload"> tarayıcıya mümkün olan en hızlı sürede bir kaynağı indirip, onu önbelleğe almasını söyler. Bu sayede sayfa yüklediğinde daha önceden önbelleğe alınan kaynağı/komutu çoktan uygulamış olur.

Tarayıcınız hedef kaynağı indirdikten sonra kaynakla hiçbir şey yapmaz. Komut dosyaları yürütülmez, stil sayfası uygulanmaz. Yalnızca önbelleğe alınır. İhtiyaç duyulduğunda hemen kullanılabilir olur.

Örnek kullanım

 <link rel="preload" href="/stil.css" as="style" />

Burada önemli nokta as değeri yerine indirilebilecek herhangi bir kaynak olabilir. Kullanabileceğiniz birkaç değer aşağıda açıklamalarıyla birlikte yer almakta.

style CSS stil dosyalar için.
script Javascript komut dosyaları için
font Webfont yazı tipleri için
fetch İndirilen kaynakları getirmek için fetch() yada XMLHttpRequest
audio Ses dosyaları için
video Video dosyaları için
image Görüntü, resim, fotoğraf dosyaları için

Nasıl ve ne için kullanılır?

Komut dosyanızda head etiketi içerisine uygun yere yerleştirerek kullanabilirsiniz. Preload en sık kullanımı genelde webfontlar içindir. Kullanıcılar sayfanıza girdiğinde site fontunu önden yüklediği için sonradan fontlarda değişim, bozulma olmaz.

Webfont kullanımı için aşağıya örnek bırakıyorum. Kendi sunucunuz üzerinden çalıştırdığınız bir fontu aşağıdaki kodu kullanarak önden çağırabilirsiniz.

<link rel="preload" href="/font/font-adi.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>