Ressourcen mit link rel='preload' priorisieren

Jan Posnick
Jeff Posnick

Wollten Sie den Browser schon einmal über eine wichtige Schriftart, ein Skript oder eine andere Ressource informieren, die für die Seite benötigt wird, ohne dass das onload-Ereignis der Seite verzögert wird? Mit <link rel="preload"> können Webentwickler genau das tun. Dazu verwenden sie eine vertraute HTML-Elementsyntax mit einigen Schlüsselattributen, um das genaue Verhalten zu bestimmen. Dabei handelt es sich um einen Standardentwurf, der im Rahmen der Chrome 50-Version veröffentlicht wird.

Über <link rel="preload"> geladene Ressourcen werden lokal im Browser gespeichert und sind so lange inaktiv, bis sie im DOM, JavaScript oder CSS referenziert werden. Hier ist ein möglicher Anwendungsfall, bei dem eine Skriptdatei vorab geladen, aber nicht sofort ausgeführt wird, wie es der Fall gewesen wäre, wenn sie über ein <script>-Tag im DOM enthalten wäre.

<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 href-Attribut sollte Webentwicklern vertraut sein, da es das Standardattribut ist, mit dem die URL von verknüpften Ressourcen angegeben wird.

Das Attribut as ist Ihnen jedoch wahrscheinlich neu und wird im Kontext eines <link>-Elements verwendet, um dem Browser mehr Kontext zum Ziel der Anfrage zum Vorabladen zu liefern. Mit diesen zusätzlichen Informationen wird sichergestellt, dass der Browser die entsprechenden Anfrageheader und die Anfragepriorität festlegt und alle relevanten Anweisungen der Content Security Policy anwendet, die möglicherweise für den richtigen Ressourcenkontext vorhanden sind.

(Viel) mehr erfahren

Yoav Weiss hat den maßgeblichen Leitfaden zur Verwendung von <link rel="preload"> verfasst. Wenn Sie das Programm auf Ihren eigenen Seiten verwenden möchten, sollten Sie seinen Artikel 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 <link rel="subresource"> in Chrome 50 nicht mehr unterstützt.