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

Jeff Posnick

Sayfanın onload etkinliğini gecikmeden tarayıcının ihtiyaç duyacağı önemli bir yazı tipini, komut dosyasını veya başka bir kaynağı bilmesini istediğiniz oldu mu? <link rel="preload">, web geliştiricilerine tam olarak bu olanağı sunar. Tam davranışı belirlemek için 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 bir olası 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 başlıklarını ve istek önceliğini ayarlamasının yanı sıra doğru kaynak bağlamı için geçerli olabilecek 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 çekiyor ve kendi sayfalarınızda kullanmaya başlamak istiyorsanız, Google Ads'in faydaları ve yaratıcı kullanım alanları hakkında daha fazla bilgi edinmek için makalesini okumanızı öneririm.

<link rel="preload">, önemli hatalar ve dezavantajlar bulunan ve Chrome dışındaki tarayıcılarda hiçbir zaman uygulanmayan <link rel="subresource"> ürününün yerini alır. Bu nedenle Chrome 50, <link rel="subresource"> desteğini kaldırıyor.