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

Jeff Posnick

Sayfanın onload etkinliğini ertelemeden sayfa için gerekli olacak önemli bir yazı tipini, komut dosyasını veya başka bir kaynağı tarayıcıya bildirmek istediğiniz oldu mu? <link rel="preload">, tam davranışı belirlemek için birkaç temel özelliğe sahip, bilinen bir HTML öğesi söz dizimini kullanarak web geliştiricilerinin bunu yapmasına olanak tanır. Bu, Chrome 50 sürümünün bir parçası olarak gönderilen 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 başvuruda bulunulana kadar etkin şekilde etkisizdir. Örneğin, bir komut dosyası dosyasının önceden yüklendiği ancak DOM'ye bir <script> etiketi aracılığıyla dahil edilseydi olduğu gibi hemen yürütülmediği olası bir kullanım örneğini aşağıda görebilirsiniz.

<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>

Burada ne oluyor? Bu örnekte kullanılan href özelliği, herhangi bir bağlı kaynağın URL'sini belirtmek için kullanılan standart özellik olduğundan web geliştiricileri tarafından tanıdık olmalıdır.

Ancak as özelliği muhtemelen sizin için yenidir ve tarayıcıya yapılan önceden yükleme isteğinin hedefi hakkında daha fazla bağlam sağlamak için <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 edinin

Yoav Weiss, <link rel="preload"> kullanımıyla ilgili net bir rehber hazırladı. 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 uygulanmamış <link rel="subresource"> ürününün yerini alır. Bu nedenle Chrome 50, <link rel="subresource"> desteğini kaldırıyor.