rel='preload' bağlantısıyla Kaynaklarınıza Öncelik Verme

Jeff Posnick

Sayfanın onload etkinliğini geciktirmeden sayfanın ihtiyaç duyacağı önemli bir yazı tipi, komut dosyası veya başka bir kaynak hakkında tarayıcıya bilgi vermek istediniz mi? <link rel="preload">, web geliştiricilerine tam olarak bunu yapma gücü verir. Bunun için, tam davranışı belirlemek üzere birkaç temel özellikle birlikte bilinen bir HTML öğesi söz dizimini kullanır. Bu, Chrome 50 sürümü kapsamında kullanıma sunulan bir taslak standarttır.

<link rel="preload"> aracılığıyla yüklenen kaynaklar tarayıcıda yerel olarak depolanır ve DOM, JavaScript veya CSS'de referans verilmeden etkin olmaz. Örneğin, bir komut dosyası dosyasının önceden yüklendiği ancak DOM'a bir <script> etiketi aracılığıyla dahil edilmiş olsaydı olduğu gibi hemen yürütülmediği olası bir kullanım alanı aşağıda verilmiştir.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

Peki, neler oluyor? Bu örnekte kullanılan href özelliği, bağlı kaynakların URL'sini belirtmek için kullanılan standart özellik olduğundan web geliştiricilerinin aşina olduğu bir özelliktir.

Ancak as özelliği muhtemelen sizin için yenidir. Bu özellik, tarayıcıya yapılan ön yükleme isteğinin hedefiyle ilgili daha fazla bağlam bilgisi vermek için bir <link> öğesi bağlamında kullanılır. Bu ek bilgiler, tarayıcının uygun istek üstbilgilerini ve istek önceliğini ayarlamasını, ayrıca doğru kaynak bağlamı için geçerli olabilecek tüm ilgili İçerik Güvenliği Politikası yönergelerini uygulamasını sağlar.

Daha fazla bilgi

<link rel="preload">'i kullanmayla ilgili kesin kılavuzu Yoav Weiss yazdı. Bu konu ilginizi çekiyorsa ve kendi sayfalarınızda kullanmaya başlamak istiyorsanız avantajları ve reklam öğesi kullanım alanları hakkında daha fazla bilgi edinmek için bu makaleyi okumanızı öneririm.

<link rel="preload">, önemli hata ve dezavantajları olan ve Chrome dışındaki tarayıcılarda hiçbir zaman uygulanmayan <link rel="subresource">'in yerini alır. Bu nedenle Chrome 50, <link rel="subresource"> için desteği kaldırır.