rel=preload
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2021.
* Some parts of this feature may have varying levels of support.
Der preload-Wert des rel-Attributs des <link>-Elements ermöglicht es Ihnen, Abrufanforderungen im HTML-<head> zu deklarieren. Damit können Sie Ressourcen spezifizieren, die Ihre Seite sehr bald benötigt und die Sie frühzeitig im Seitenlebenszyklus laden möchten, bevor die Haupt-Rendering-Maschine des Browsers einsetzt. Dies stellt sicher, dass sie früher verfügbar sind und weniger wahrscheinlich das Rendern der Seite blockieren, was die Leistung verbessert. Obwohl der Name den Begriff load enthält, wird das Skript nicht geladen und ausgeführt; es wird nur zum Herunterladen und Zwischenspeichern mit höherer Priorität vorgemerkt.
Die Grundlagen
Am häufigsten verwenden Sie <link>, um eine CSS-Datei zu laden, um Ihre Seite zu gestalten:
<link rel="stylesheet" href="styles/main.css" />
Hier hingegen verwenden wir einen rel-Wert von preload, was <link> in einen Vorlader für jede gewünschte Ressource verwandelt. Sie müssen auch angeben:
Ein Beispiel könnte so aussehen (sehen Sie in unserem JS- und CSS-Beispielquellcode und auch live):
<head>
<meta charset="utf-8" />
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js" defer></script>
</body>
Hier laden wir unsere CSS- und JavaScript-Dateien im Voraus, sodass sie verfügbar sind, sobald sie später für das Rendering der Seite benötigt werden. Dieses Beispiel ist trivial, da der Browser die <link rel="stylesheet">- und <script>-Elemente wahrscheinlich im selben Abschnitt des HTMLs wie die Vorladungen entdeckt. Die Vorteile werden jedoch viel deutlicher, je später die Ressourcen entdeckt werden und je größer sie sind. Zum Beispiel:
- Ressourcen, die von innerhalb von CSS referenziert werden, wie Schriftarten oder Bilder.
- Ressourcen, die durch JavaScript angefordert werden können, wie importierte Skripte.
preload hat auch andere Vorteile. Die Verwendung von as, um den Typ des vorzuladenden Inhalts zu spezifizieren, ermöglicht es dem Browser:
- Ressourcen im Cache für zukünftige Anforderungen zu speichern und bei Bedarf wiederzuverwenden.
- Die richtige Content Security Policy auf die Ressource anzuwenden.
- Die korrekten
Accept-Request-Header dafür zu setzen.
Welche Arten von Inhalten können vorgeladen werden?
Viele Inhaltsarten können vorgeladen werden. Die möglichen as-Attributwerte sind:
fetch: Ressource, die mit einer Fetch- oder XHR-Anforderung abgerufen wird, z.B. ein ArrayBuffer, WebAssembly-Binärdatei oder JSON-Datei.font: Schriftartdatei.image: Bilddatei.script: JavaScript-Datei.style: CSS-Stylesheet.track: WebVTT-Datei.
Hinweis:
font und fetch Vorladungen erfordern, dass das crossorigin-Attribut gesetzt wird. Siehe CORS-aktivierte Abrufe unten.
Hinweis:
Es gibt detailliertere Informationen über diese Werte und die webbasierten Features, von denen sie erwartet werden, dass sie sie konsumieren, in der HTML-Spezifikation — siehe Link-Typ "preload". Beachten Sie auch, dass die vollständige Liste der Werte, die das as-Attribut annehmen kann, von der Fetch-Spezifikation geregelt wird — siehe Anfrageziele.
Einbindung eines MIME-Typs
<link>-Elemente können ein type-Attribut akzeptieren, das den MIME-Typ der Ressource enthält, auf die das Element verweist. Dies ist besonders nützlich, wenn Ressourcen vorgeladen werden — der Browser verwendet den Wert des type-Attributs, um herauszufinden, ob er diese Ressource unterstützt, und lädt sie nur herunter, wenn dies der Fall ist, und ignoriert sie, wenn nicht.
<head>
<meta charset="utf-8" />
<title>Image preload example</title>
<link rel="preload" href="flower.avif" as="image" type="image/avif" />
</head>
<body>
<picture>
<source src="flower.avif" type="image/avif" />
<source src="flower.webp" type="image/webp" />
<img src="flower.jpg" />
</picture>
</body>
Der Code im obigen Beispiel bewirkt, dass das image/avif-Bild nur in unterstützenden Browsern vorgeladen wird — und für Benutzer, die image/avif-Unterstützung in ihren Browsern haben, bewirkt, dass das image/avif-Bild tatsächlich verwendet wird (da es als erstes <source> angegeben ist). Das macht den Bild-Download hoffentlich kleiner für Benutzer, die image/avif-Unterstützung in ihren Browsern haben.
Beachten Sie, dass für Benutzer, deren Browser sowohl image/avif- als auch image/webp-Unterstützung haben, wenn in diesem Code ein <link rel="preload" href="flower.webp" as="image" type="image/webp">-Element ebenfalls angegeben wäre, beide image/avif- und image/webp-Bilder vorgeladen würden — obwohl nur eines davon tatsächlich verwendet würde.
Daher wird davon abgeraten, das Vorladen für mehrere Typen derselben Ressource zu spezifizieren. Stattdessen ist es am besten, das Vorladen nur für den Typ zu spezifizieren, den die Mehrheit Ihrer Benutzer wahrscheinlich tatsächlich verwenden wird. Aus diesem Grund spezifiziert der Code im obenstehenden Beispiel kein Vorladen für das image/webp-Bild.
Das Fehlen des Vorladens verhindert jedoch nicht, dass das image/webp-Bild tatsächlich von denjenigen verwendet wird, die es benötigen: Für Benutzer, deren Browser keine image/avif-Unterstützung haben, aber image/webp-Unterstützung, bewirkt der Code im obigen Beispiel dennoch, dass das image/webp-Bild verwendet wird — jedoch ohne es auch unnötigerweise für die Mehrheit der anderen Benutzer vorzulesen.
CORS-aktivierte Abrufe
Beim Vorladen von Ressourcen, die mit CORS aktiviert abgerufen werden (z. B. fetch(), XMLHttpRequest oder Schriftarten), müssen Sie das crossorigin-Attribut auf Ihrem <link>-Element setzen. Das Attribut muss so gesetzt werden, dass es dem CORS- und Anmeldemodus der Ressource entspricht, selbst wenn der Abruf nicht über die Ursprungsgrenze hinweg erfolgt.
Wie oben erwähnt, ist eine interessante Situation, auf die dies zutrifft, Schriftartdateien. Aus verschiedenen Gründen müssen diese mit CORS im anonymen Modus abgerufen werden (siehe Anforderungen an das Schriftabrufen).
Lassen Sie uns diesen Fall als Beispiel verwenden. Sie können den vollständigen Beispielquellcode auf GitHub sehen (auch live ansehen):
<head>
<meta charset="utf-8" />
<title>Web font example</title>
<link
rel="preload"
href="fonts/cicle_fina-webfont.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="fonts/zantroke-webfont.woff2"
as="font"
type="font/woff2"
crossorigin />
<link href="style.css" rel="stylesheet" />
</head>
<body>
…
</body>
Wir geben nicht nur MIME-Typ-Hinweise in den type-Attributen an, sondern auch das crossorigin-Attribut, um sicherzustellen, dass der CORS-Modus des Vorladens mit der letztlichen Schriftressourcennachfrage übereinstimmt.
Integration von Medien
Ein schönes Merkmal von <link>-Elementen ist ihre Fähigkeit, media-Attribute zu akzeptieren. Diese können Medientypen oder vollständige Media Queries akzeptieren, sodass Sie reaktionsfähiges Vorladen durchführen können!
Sehen wir uns ein Beispiel an (sehen Sie es auf GitHub — Quellcode, live Beispiel):
<head>
<meta charset="utf-8" />
<title>Responsive preload example</title>
<link
rel="preload"
href="bg-image-narrow.png"
as="image"
media="(width <= 600px)" />
<link
rel="preload"
href="bg-image-wide.png"
as="image"
media="(width > 600px)" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<h1>My site</h1>
</header>
<script>
const mediaQueryList = window.matchMedia("(width <= 600px)");
const header = document.querySelector("header");
if (mediaQueryList.matches) {
header.style.backgroundImage = 'url("bg-image-narrow.png")';
} else {
header.style.backgroundImage = 'url("bg-image-wide.png")';
}
</script>
</body>
Wir fügen media-Attribute zu unseren <link>-Elementen hinzu, sodass ein schmales Bild vorgeladen wird, wenn der Benutzer ein schmales Viewport hat, und ein breiteres Bild geladen wird, wenn er ein breites Viewport hat. Wir verwenden Window.matchMedia / MediaQueryList dafür (siehe Testing media queries für mehr).
Diese Technik gilt auch für andere Ressourcentypen. Zum Beispiel macht das Vorladen bei Schriftarten es wahrscheinlicher, dass die Schriftart zur Renderzeit verfügbar ist, wodurch die Chance eines unerwarteten Textflusses (FOUT) reduziert wird.
Dies muss sich jedoch nicht auf Bilder oder sogar Dateien desselben Typs beschränken — denken Sie groß! Vielleicht könnten Sie ein vereinfachtes SVG-Diagramm vorladen und anzeigen, wenn der Benutzer sich auf einem schmalen Bildschirm befindet, wo Bandbreite und CPU potenziell begrenzter sind, oder ein komplexes Stück JavaScript vorladen und es verwenden, um ein interaktives 3D-Modell zu rendern, wenn die Ressourcen des Benutzers reichlicher sind.
Skripting und Vorladungen
Hinweis:
Verwenden Sie <link rel="modulepreload"> statt dessen, wenn Sie mit JavaScript-Modulen arbeiten.
Ein weiterer Vorteil dieser Vorladungen ist, dass Sie sie mit Skript ausführen können. Zum Beispiel erstellen wir hier eine HTMLLinkElement-Instanz und fügen sie dann dem DOM hinzu:
const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
Dies bedeutet, dass der Browser die myscript.js-Datei vorlädt, sie aber noch nicht tatsächlich verwendet. Um sie zu verwenden, könnten Sie dies tun:
const preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
Dies ist nützlich, wenn Sie ein Skript vorladen möchten, die Ausführung jedoch aufschieben, bis Sie es genau benötigen.
Spezifikationen
| Specification |
|---|
| HTML # link-type-preload |
Browser-Kompatibilität
Loading…
Siehe auch
- Speculative loading für einen Vergleich von
<link rel="preload">und anderen ähnlichen Leistungsverbesserungsmerkmalen. - Preload: What Is It Good For? von Yoav Weiss