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.

Güncelleme (Kasım 2026): Bu yazıyı 2021'de yazmıştım. Preload'un ne zaman işe yarayıp ne zaman zarar verdiğini, fontlarda çok sık yapılan bir hatayı ve tarayıcıların artık desteklemediği değerleri ekleyerek güncelledim.

<link rel="preload"> tarayıcıya "bu dosyaya birazdan ihtiyacın olacak, şimdiden indirmeye başla" der. Tarayıcı dosyayı mümkün olan en kısa sürede indirip önbelleğe alır. Sayfa o dosyayı kullanmak istediğinde dosya çoktan inmiş olur ve beklemeden kullanılır.

Tarayıcınız hedef kaynağı indirdikten sonra kaynakla hiçbir şey yapmaz. Komut dosyaları çalıştırılmaz, stil dosyası sayfaya uygulanmaz. Yalnızca önbelleğe alınır, ihtiyaç duyulduğunda hemen kullanılabilir olur.

Neden işe yarıyor?

Bunu anlamak için tarayıcının bir sayfayı nasıl açtığına kısaca bakalım. Tarayıcı HTML'i yukarıdan aşağıya okur ve gördüğü dosyaları indirmeye başlar. Fakat bazı dosyaları HTML'i okurken göremez, çünkü onlar başka bir dosyanın içinde yazıyordur. Örneğin bir fontu genelde CSS dosyasının içinde tanımlarız. Tarayıcı önce HTML'i indirir, sonra CSS'i indirir, CSS'i okuyunca fontu fark eder ve ancak o zaman fontu indirmeye başlar. Bu sırada sayfa ya fontsuz görünür ya da yazılar hiç görünmez.

Preload ile tarayıcıya bu dosyayı en baştan, HTML'in head kısmında söylüyoruz. Böylece font CSS'i beklemeden, onunla aynı anda inmeye başlıyor.

Yani preload en çok geç fark edilen dosyalarda işe yarıyor:

• CSS içinde tanımlanan fontlar
• CSS içinde arka plan olarak verilen görseller (background-image)
• JavaScript tarafından sonradan yüklenen dosyalar

HTML'de zaten <link rel="stylesheet"> ya da <script src> ile çağırdığınız dosyaları preload etmenize gerek yok. Tarayıcı onları zaten ilk okumada görüp hemen indiriyor.

Örnek kullanım

<link rel="preload" href="/arkaplan.webp" as="image">

Burada önemli nokta as değeri. Tarayıcıya indireceği dosyanın ne olduğunu söylüyoruz. Tarayıcı bu bilgiye göre dosyaya öncelik veriyor ve doğru şekilde önbelleğe alıyor. as değerini yanlış yazarsanız tarayıcı dosyayı indirir ama sayfa kullanmak istediğinde eşleştiremez ve aynı dosyayı ikinci kez indirir. Kullanabileceğiniz değerler şunlar:

style CSS stil dosyaları için
script JavaScript dosyaları için
font Web fontları için
image Görsel dosyaları için
fetch JavaScript'te fetch() ya da XMLHttpRequest ile çekeceğiniz dosyalar için, örneğin bir JSON dosyası
track Videolardaki altyazı dosyaları (WebVTT) için

Eski yazıda audio ve video değerlerini de yazmıştım. Bunlar standartta geçse de tarayıcılar desteklemiyor, o yüzden listeden çıkardım.

Fontlarda en sık yapılan hata

Preload en sık web fontları için kullanılıyor. Kendi sunucunuzda duran bir fontu aşağıdaki kodla önden yükleyebilirsiniz:

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

Burada crossorigin kısmı çok önemli. Font kendi sitenizde dursa bile tarayıcılar fontları farklı bir şekilde (CORS ile) indiriyor. Preload satırına crossorigin yazmazsanız tarayıcı preload ile indirdiği fontu kullanamıyor ve fontu ikinci kez indiriyor. Yani hızlandırmak isterken sayfayı yavaşlatmış oluyorsunuz. Bunu kendim de denedim: crossorigin olmadan font iki kez indirildi ve Chrome konsola şu uyarıyı yazdı:

A preload for '.../font.woff2' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

type kısmı da tarayıcıya dosyanın biçimini söylüyor. Tarayıcı bu biçimi desteklemiyorsa dosyayı hiç indirmiyor, boşuna indirme yapılmamış oluyor.

Preload ettiğiniz fontu CSS'te normal şekilde tanımlamaya devam ediyorsunuz. Preload CSS'teki @font-face tanımının yerine geçmiyor, sadece fontun daha erken inmesini sağlıyor.

Dikkat edilmesi gerekenler

Preload'u her dosyaya koymayın. Preload ettiğiniz her dosya tarayıcının ilk açılışta indirmesi gereken işlerin önüne geçiyor. Gereksiz şeyleri preload ederseniz asıl önemli dosyaların inmesini geciktirip sayfayı yavaşlatırsınız. Genelde 1-2 font ve sayfanın en üstündeki büyük görsel yeterli oluyor.

Preload ettiğiniz bir dosyayı sayfa birkaç saniye içinde kullanmazsa Chrome konsola şuna benzer bir uyarı yazıyor:

The resource ... was preloaded using link preload but not used within a few seconds from the window's load event.

Bu uyarıyı görüyorsanız ya o dosyaya o sayfada gerek yok ya da as değeri yanlış yazılmış. Sitenize preload ekledikten sonra tarayıcıda F12 ile geliştirici araçlarını açıp Console sekmesine bir göz atmanızı tavsiye ederim.

Telefonda ve bilgisayarda farklı görsel gösteriyorsanız media ile sadece o ekrana uygun görseli preload edebilirsiniz. Böylece telefon kullanıcısı bilgisayar görselini boşuna indirmez:

<link rel="preload" href="/arkaplan-mobil.webp" as="image" media="(max-width: 600px)">
<link rel="preload" href="/arkaplan-genis.webp" as="image" media="(min-width: 601px)">

Preload'a benzeyen diğer komutlar

Preload ile karıştırılan ama farklı işler yapan iki komut daha var, kısaca bahsedeyim:

preconnect: Dosya indirmez, sadece başka bir sunucuyla bağlantıyı önceden kurar. Google Fonts gibi dışarıdan dosya çektiğiniz bir yer varsa ve tam olarak hangi dosyanın geleceğini bilmiyorsanız işe yarar.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

modulepreload: JavaScript modülleri (type="module" ile çağırdığınız dosyalar) için preload'un özel hali. Modül kullanıyorsanız preload yerine bunu kullanın.

<link rel="modulepreload" href="/js/uygulama.js">

SEO ile ilgisi

Google, sitelerin hızını ölçerken sayfadaki en büyük öğenin (genelde en üstteki görsel ya da başlık) ne kadar sürede göründüğüne bakıyor. Bu ölçüm Core Web Vitals içindeki LCP değeri ve arama sıralamasını etkileyen sinyallerden biri. Bu en büyük öğe CSS'te tanımlanmış bir arka plan görseliyse ya da sayfa fontu geç geliyor diye başlık geç görünüyorsa, preload bu değeri belirgin şekilde iyileştirebilir. Sitenizin LCP değerini Google'ın PageSpeed Insights aracından ölçebilir, preload ekledikten sonra tekrar ölçüp farkı görebilirsiniz.