Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Derpreload-Wert desrel-Attributs des<link>-Elements ermöglicht es Ihnen, Abrufe im HTML-<head> zu deklarieren. Hierbei werden Ressourcen angegeben, die Ihre Seite sehr bald benötigt, die Sie früh im Lebenszyklus der Seite laden möchten, noch bevor das Haupt-Rendering des Browsers beginnt. Dies stellt sicher, dass sie früher verfügbar sind und weniger wahrscheinlich den Seitenaufbau blockieren, was die Leistung verbessert. Obwohl der Name den Begriffload (laden) enthält, wird das Skript nicht geladen und ausgeführt, sondern nur zum Download und zur Prioritätenspeicherung geplant.
Die Grundlagen
In der Regel verwenden Sie<link>, um eine CSS-Datei zu laden und Ihre Seite zu stylen:
<link rel="stylesheet" href="styles/main.css" />Hier jedoch werden wir einenrel-Wert vonpreload verwenden, der<link> in einen Preloader für jede gewünschte Ressource verwandelt. Sie müssen außerdem angeben:
Ein Beispiel könnte so aussehen (siehe unserJS und CSS Beispiel, undauch 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 vor, sodass sie verfügbar sind, sobald sie für das Rendern der Seite später benötigt werden. Dieses Beispiel ist trivial, da der Browser wahrscheinlich die<link rel="stylesheet"> und<script>-Elemente im selben HTML-Abschnitt wie die Preloads entdeckt, aber die Vorteile werden viel klarer, je später Ressourcen entdeckt werden und je größer sie sind. Zum Beispiel:
- Ressourcen, die aus CSS heraus referenziert werden, wie Schriften oder Bilder.
- Ressourcen, die von JavaScript angefordert werden können, wie importierte Skripte.
preload hat auch andere Vorteile. Durch die Verwendung vonas, um den zu preladenden Inhaltstyp zu spezifizieren, kann der Browser:
- Die Ressource im Cache für zukünftige Anfragen speichern und bei Bedarf wiederverwenden.
- Die korrekteContent Security Policy auf die Ressource anwenden.
- Die richtigen
Accept-Request-Header für die Ressource setzen.
Welche Inhaltsarten können vorgeladen werden?
Viele Inhaltstypen können vorgeladen werden. Die möglichenas-Attributwerte sind:
fetch: Ressource, die durch einen Fetch- oder XHR-Request abgerufen wird, wie ein ArrayBuffer, WebAssembly-Binärdatei oder JSON-Datei.font: Schriftdatei.image: Bilddatei.script: JavaScript-Datei.style: CSS-Stylesheet.track: WebVTT-Datei.
Hinweis:Das Preloading vonfont undfetch erfordert, dass dascrossorigin-Attribut gesetzt wird; sieheCORS-enabled fetches weiter unten.
Hinweis:Mehr Details zu diesen Werten und den Web-Features, für die sie vorgesehen sind, finden Sie in der HTML-Spezifikation — sieheLink-Typ "preload". Beachten Sie auch, dass die vollständige Liste der Werte, die dasas-Attribut annehmen kann, durch die Fetch-Spezifikation geregelt wird — sieherequest destinations.
Einschluss eines MIME-Typs
<link>-Elemente können eintype-Attribut annehmen, das den MIME-Typ der Ressource enthält, auf den das Element verweist. Dies ist besonders nützlich beim Preloading von Ressourcen — der Browser verwendet dentype-Attributwert, um herauszufinden, ob er diese Ressource unterstützt, und wird sie nur dann herunterladen, wenn dies der Fall ist, andernfalls wird sie ignoriert.
<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 dasimage/avif-Bild nur in unterstützenden Browsern vorgeladen wird — und für Nutzer, dieimage/avif-Unterstützung in ihren Browsern haben, dass dasimage/avif-Bild tatsächlich verwendet wird (da es das erste angegebene<source> ist). Dadurch wird der Bild-Download hoffentlich kleiner für Nutzer, dieimage/avif-Unterstützung in ihren Browsern haben.
Beachten Sie, dass für Nutzer, deren Browser sowohlimage/avif als auchimage/webp unterstützen, wenn im Code auch ein<link rel="preload" href="flower.webp" as="image" type="image/webp">-Element spezifiziert wäre, dannbeide dieimage/avif- undimage/webp-Bilder vorgeladen würden — obwohl tatsächlich nur eines von ihnen verwendet werden würde.
Daher wird das Preloading mehrerer Typen derselben Ressource nicht empfohlen. Stattdessen ist die beste Praxis, das Preloading nur für den Typ zu spezifizieren, den die Mehrheit Ihrer Nutzer wahrscheinlich tatsächlich verwenden wird. Deshalb spezifiziert der Code im obigen Beispiel kein Preloading für dasimage/webp-Bild.
Das Fehlen von Preloads verhindert jedoch nicht, dass dasimage/webp-Bild tatsächlich von denjenigen verwendet wird, die es benötigen: Für Nutzer, deren Browserimage/avif-Unterstützung nicht hat, aberimage/webp-Unterstützung hat, wird im obigen Beispielcode dennoch dasimage/webp-Bild verwendet — aber ohne es auch für die Mehrheit der anderen Nutzer unnötig vorzulegen.
CORS-fähige Fetches
Beim Preloading von Ressourcen, die mit aktiviertenCORS abgerufen werden (z.B.fetch(),XMLHttpRequest oderFonts), müssen besondere Vorsichtsmaßnahmen getroffen werden, um dascrossorigin-Attribut in Ihr<link>-Element aufzunehmen. Das Attribut muss so eingestellt werden, dass es dem CORS- und Anmelde-Modus der Ressource entspricht, selbst wenn der Abruf nicht websiteübergreifend erfolgt.
Wie oben erwähnt, ist ein interessanter Fall, in dem dies zutrifft, die Schriftdaten. Aus verschiedenen Gründen müssen diese im anonymen CORS-Modus abgerufen werden (sieheAnforderungen beim Schriftenabruf).
Lassen Sie uns diesen Fall als Beispiel verwenden. Der vollständige Quellenkode ist aufGitHub verfügbar (live Beispiel 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 dentype-Attributen an, sondern stellen auch dascrossorigin-Attribut bereit, um sicherzustellen, dass der Preload-CORS-Modus dem endgültigen Schriftressourcen-Abruf entspricht.
Einschluss von Medien
Eine schöne Funktion von<link>-Elementen ist deren Fähigkeit,media-Attribute anzunehmen. Diese könnenMedientypen oder vollständigeMedia Queries akzeptieren, was Ihnen ermöglicht, responsives Preloading durchzuführen!
Schauen wir uns ein Beispiel an (siehe 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ügenmedia-Attribute in unsere<link>-Elemente ein, sodass ein schmales Bild vorgeladen wird, wenn der Nutzer ein schmales Viewport hat, und ein breiteres Bild, wenn sie ein weites Viewport haben. Wir verwendenWindow.matchMedia /MediaQueryList, um dies durchzuführen (sieheTesten von Media Queries für mehr Informationen).
Diese Technik kann auch auf andere Ressourcentypen angewendet werden. Beispielsweise sorgt Preloading bei Schriften dafür, dass die Schrift mit größerer Wahrscheinlichkeit zur Renderzeit verfügbar ist, wodurch die Chance eines Flashs von ungestyltem Text (FOUT) reduziert wird.
Dies muss nicht auf Bilder oder sogar Dateien desselben Typs beschränkt sein — denken Sie groß! Vielleicht könnten Sie ein vereinfachtes SVG-Diagramm preladen und anzeigen, wenn der Nutzer einen schmalen Bildschirm hat, wo Bandbreite und CPU potenziell begrenzter sind, oder ein komplexes Stück JavaScript preladen und verwenden, um ein interaktives 3D-Modell darzustellen, wenn die Ressourcen des Nutzers reichlicher sind.
Skripting und Preloads
Hinweis:Verwenden Sie<link rel="modulepreload">, wenn Sie mitJavaScript-Modulen arbeiten.
Ein weiterer Vorteil dieser Preloads ist, dass Sie sie mit einem Skript ausführen können. Zum Beispiel, erstellen wir eine Instanz vonHTMLLinkElement 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);Das bedeutet, dass der Browser die Dateimyscript.js vorlädt, aber noch nicht tatsächlich verwendet. Um sie zu verwenden, könnten Sie Folgendes 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, aber die Ausführung bis genau zu dem Zeitpunkt verzögern möchten, an dem Sie es benötigen.
Spezifikationen
| Specification |
|---|
| HTML # link-type-preload |
Browser-Kompatibilität
Siehe auch
- Speculative loading für einen Vergleich von
<link rel="preload">und anderen ähnlichen Leistungsverbesserungsfunktionen. - Preload: What Is It Good For? von Yoav Weiss