Ressourcen mit link rel='preload' priorisieren

Jeff Posnick

Wollten Sie den Browser schon einmal über eine wichtige Schriftart, ein Skript oder eine andere Ressource informieren, die von der Seite benötigt wird, ohne das onload-Ereignis der Seite zu verzögern? <link rel="preload"> bietet Webentwicklern die Möglichkeit, mithilfe einer vertrauten HTML-Elementsyntax mit einigen Schlüsselattributen das genaue Verhalten zu bestimmen. Es ist ein Standardentwurf, der im Rahmen der Version von Chrome 50 veröffentlicht wird.

Über <link rel="preload"> geladene Ressourcen werden lokal im Browser gespeichert und sind so lange inaktiv, bis im DOM, JavaScript oder CSS auf sie verwiesen wird. Im Folgenden sehen Sie beispielsweise einen möglichen Anwendungsfall, bei dem eine Skriptdatei vorab geladen, aber nicht sofort ausgeführt wird, als wäre sie über ein <script>-Tag im DOM enthalten.

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

Was passiert hier also? Das in diesem Beispiel verwendete Attribut href sollte Webentwicklern bekannt sein, da es sich um das Standardattribut handelt, mit dem die URL einer verknüpften Ressource angegeben wird.

Das Attribut as ist dir wahrscheinlich neu. Es wird im Kontext eines <link>-Elements verwendet, um dem Browser mehr Kontext zum Ziel der Vorabladeanfrage bereitzustellen. Durch diese zusätzlichen Informationen wird sichergestellt, dass der Browser geeignete Anfrageheader und die Anfragepriorität festlegt und alle relevanten Content Security Policy-Anweisungen anwendet, die für den richtigen Ressourcenkontext vorhanden sind.

Weitere Informationen

Yoav Weiss hat den endgültigen Leitfaden zur Verwendung von <link rel="preload"> verfasst. Wenn Sie ihn auf Ihren eigenen Seiten einsetzen möchten, empfehle ich Ihnen, seinen Artikel zu lesen, um mehr über die Vorteile und kreativen Anwendungsfälle zu erfahren.

<link rel="preload"> ersetzt <link rel="subresource">, das erhebliche Fehler und Nachteile hat und nie in anderen Browsern als Chrome implementiert wurde. Daher wird in Chrome 50 die Unterstützung für <link rel="subresource"> eingestellt.