Weitere Informationen zum Ressourcenhinweis „rel=prefetch“ und zur Verwendung
Veröffentlicht: 12. September 2019, letzte Aktualisierung: 8. Februar 2025
Studien zeigen, dass kürzere Ladezeiten zu höheren Conversion-Raten und einer besseren Nutzererfahrung führen. Wenn Sie wissen, wie sich Nutzer auf Ihrer Website bewegen und welche Seiten sie wahrscheinlich als Nächstes aufrufen, können Sie die Ladezeiten bei zukünftigen Navigationen verbessern, indem Sie die Ressourcen für diese Seiten im Voraus herunterladen.
In diesem Leitfaden wird beschrieben, wie Sie das mit <link rel=prefetch> erreichen, mit dem Sie das Prefetching effizient implementieren können.
Websiteleistung mit rel=prefetch verbessern
Wenn Sie einer Webseite <link rel=prefetch> hinzufügen, wird der Browser angewiesen, einige der Ressourcen (z. B. Scripts oder CSS-Dateien) herunterzuladen, die der Nutzer möglicherweise in Zukunft benötigt:
<link rel="prefetch" href="/css/styles.css">
Der prefetch-Hinweis verbraucht zusätzliche Bytes für Ressourcen, die nicht sofort benötigt werden. Daher muss diese Technik mit Bedacht angewendet werden. Laden Sie Ressourcen nur vorab, wenn Sie sicher sind, dass Nutzer sie benötigen. Wenn Nutzer eine langsame Internetverbindung haben, sollten Sie kein Prefetching verwenden. Sie können das mit der Network Information API erkennen.
Anwendungsfälle
Das Vorabladen bietet viele Anwendungsfälle, um Webseiten zu beschleunigen, indem Ressourcen im Voraus heruntergeladen werden.
Nachfolgende Seiten vorab laden
HTML-Dokumente vorab abrufen, wenn nachfolgende Seiten vorhersehbar sind, damit die Seite sofort geladen wird, wenn ein Link angeklickt wird.
Auf einer Produktseite können Sie beispielsweise die Seite für das beliebteste Produkt in der Liste vorab abrufen. In einigen Fällen ist die nächste Navigation noch einfacher vorhersehbar. Auf einer Einkaufswagenseite ist die Wahrscheinlichkeit, dass ein Nutzer die Zahlungsseite aufruft, in der Regel hoch. Das macht sie zu einem guten Kandidaten für das Prefetching.
Das Vorabladen von Ressourcen beansprucht zwar zusätzliche Bandbreite, kann aber die meisten Leistungsmesswerte verbessern. Die Zeit bis zum ersten Byte (TTFB) ist oft viel kürzer, da die Dokumentanfrage zu einem Cache-Treffer führt. Da die TTFB niedriger ist, sind auch nachfolgende zeitbasierte Messwerte oft niedriger, darunter Largest Contentful Paint (LCP) und First Contentful Paint (FCP).
Statische Assets vorab abrufen
Statische Assets wie Scripts oder Stylesheets vorab abrufen, wenn nachfolgende Bereiche, die der Nutzer möglicherweise aufruft, vorhergesagt werden können. Das ist besonders nützlich, wenn diese Assets auf vielen Seiten verwendet werden.
Netflix nutzt beispielsweise die Zeit, die Nutzer auf abgemeldeten Seiten verbringen, um React vorab zu laden, das dann verwendet wird, sobald sich die Nutzer anmelden. So konnte die Zeit bis zur Interaktivität bei zukünftigen Navigationen um 30% reduziert werden.
Die Auswirkungen des Vorabladens statischer Assets auf die Leistungsmesswerte hängen von der jeweiligen Ressource ab:
- Durch das Vorabladen von Bildern können die LCP-Zeiten für LCP-Bildelemente erheblich verkürzt werden.
- Wenn Sie Stylesheets vorab abrufen, können Sie sowohl den FCP als auch den LCP verbessern, da die Netzwerkzeit für den Download des Stylesheets entfällt. Da Stylesheets das Rendering blockieren, können sie den LCP reduzieren, wenn sie vorab abgerufen werden. Wenn das LCP-Element der nachfolgenden Seite ein CSS-Hintergrundbild ist, das mit der Property
background-imageangefordert wird, wird das Bild auch als abhängige Ressource des vorab abgerufenen Stylesheets vorab abgerufen. - Durch das Vorabladen von JavaScript kann das vorab geladene Script viel schneller verarbeitet werden, als wenn es während der Navigation zuerst vom Netzwerk abgerufen werden müsste. Dies kann sich auf den Interaction to Next Paint (INP) einer Seite auswirken. Wenn das Markup auf dem Client mit JavaScript gerendert wird, kann das LCP durch geringere Verzögerungen beim Ressourcenladen verbessert werden. Außerdem kann das clientseitige Rendering von Markup, das das LCP-Element einer Seite enthält, früher erfolgen.
- Durch das Vorabladen von Webschriften, die noch nicht von der aktuellen Seite verwendet werden, können Layoutverschiebungen vermieden werden. Wenn
font-display: swap;verwendet wird, entfällt die Auslagerungszeit für die Schriftart. Dadurch wird der Text schneller gerendert und Layoutverschiebungen werden vermieden. Wenn eine zukünftige Seite die vorab abgerufene Schriftart verwendet und das LCP-Element der Seite ein Textblock mit einer Webschriftart ist, ist auch das LCP für dieses Element schneller.
On-Demand-JavaScript-Chunks vorab abrufen
Wenn Sie Ihre JavaScript-Bundles aufteilen, können Sie anfangs nur Teile einer App laden und den Rest per Lazy-Load nachladen. Wenn Sie diese Methode verwenden, können Sie das Prefetching auf Routen oder Komponenten anwenden, die nicht sofort erforderlich sind, aber wahrscheinlich bald angefordert werden.
Wenn eine Seite beispielsweise eine Schaltfläche enthält, über die ein Dialogfeld mit einer Emoji-Auswahl geöffnet wird, können Sie sie in drei JavaScript-Chunks unterteilen: „startseite“, „dialog“ und „auswahl“. Startseite und Dialogfeld könnten zuerst geladen werden, während die Auswahl auf Anfrage geladen werden könnte. Mit Tools wie webpack können Sie den Browser anweisen, diese On-Demand-Chunks vorab zu laden.
rel=prefetch implementieren
Die einfachste Möglichkeit, prefetch zu implementieren, besteht darin, dem <head> des Dokuments ein <link>-Tag hinzuzufügen:
<head>
...
<link rel="prefetch" href="//css/styles.css">
...
</head>
Sie können das Vorabladen auch mit dem Link-HTTP-Header initiieren:
Link: </css/style.css>; rel=prefetch
Ein Vorteil der Angabe eines prefetch-Hinweises im HTTP-Header besteht darin, dass der Browser das Dokument nicht parsen muss, um den Ressourcenhinweis zu finden. Dies kann in einigen Fällen zu kleinen Verbesserungen führen.
JavaScript-Module mit webpack-Magiekommentaren vorab abrufen
Mit webpack können Sie Scripts für Routen oder Funktionen vorab laden, von denen Sie mit ziemlicher Sicherheit ausgehen, dass sie von Nutzern bald besucht oder verwendet werden.
Im folgenden Code-Snippet wird eine Sortierfunktion aus der lodash-Bibliothek lazy-geladen, um eine Gruppe von Zahlen zu sortieren, die über ein Formular gesendet werden:
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Anstatt auf das Ereignis „submit“ zu warten, um diese Funktion zu laden, können Sie diese Ressource vorab abrufen, um die Wahrscheinlichkeit zu erhöhen, dass sie zum Zeitpunkt des Einreichens des Formulars im Cache verfügbar ist. In webpack ist das mithilfe der magischen Kommentare in import() möglich:
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
Dadurch wird webpack angewiesen, das <link rel="prefetch">-Tag in das HTML-Dokument einzuschleusen:
<link rel="prefetch" href="1.bundle.js">
Die Leistungsvorteile des Prefetching von On-Demand-Chunks sind etwas nuanciert. Im Allgemeinen können Sie jedoch mit schnelleren Antworten auf Interaktionen rechnen, die von diesen On-Demand-Chunks abhängen, da sie sofort verfügbar sind. Je nach Art der Interaktion kann dies sich positiv auf den INP einer Seite auswirken.
Das Vorabladen spielt im Allgemeinen auch bei der allgemeinen Ressourcenpriorisierung eine Rolle. Das Vorabladen einer Ressource erfolgt mit der niedrigsten Priorität. Daher konkurrieren vorab abgerufene Ressourcen nicht um die Bandbreite für Ressourcen, die für die aktuelle Seite benötigt werden.
Intelligentes Vorabladen mit Quicklink und Guess.js
Sie können auch intelligenteres Prefetching mit Bibliotheken implementieren, die prefetch verwenden:
- quicklink verwendet die Intersection Observer API, um zu erkennen, wann Links in den Viewport gelangen, und lädt verknüpfte Ressourcen während der Inaktivität vorab. Bonus: Der Quicklink wiegt weniger als 1 KB.
- Guess.js verwendet Analyseberichte, um ein Prognosemodell zu erstellen, mit dem nur das intelligent vorab geladen wird, was der Nutzer wahrscheinlich benötigt.
Sowohl Quicklink als auch Guess.js verwenden die Network Information API, um das Vorabladen zu vermeiden, wenn ein Nutzer mit einem langsamen Netzwerk verbunden ist oder Save-Data aktiviert hat.
Funktionsweise des Vorab-Caching
Ressourcenhinweise sind keine obligatorischen Anweisungen. Es liegt im Ermessen des Browsers, ob und wann sie ausgeführt werden.
Sie können das Prefetching mehrmals auf derselben Seite verwenden. Der Browser stellt alle Hinweise in die Warteschlange und fordert jede Ressource an, wenn er inaktiv ist. Wenn in Chrome ein Prefetch-Ladevorgang noch nicht abgeschlossen ist und der Nutzer zur Zielressource des Prefetch-Vorgangs wechselt, wird die laufende Ladung vom Browser als Navigation erkannt. Andere Browseranbieter implementieren dies möglicherweise anders.
Das Vorabladen erfolgt mit der Priorität Niedrigst, sodass vorabgeladene Ressourcen nicht mit den für die aktuelle Seite erforderlichen Ressourcen um Bandbreite konkurrieren.
Vorab abgerufene Dateien werden im HTTP-Cache gespeichert, wenn die Ressource im Cache gespeichert werden kann. Andernfalls werden sie verworfen und nicht verwendet.
Fazit
Mit prefetch lässt sich die Webleistung einer Website erheblich verbessern, da benötigte Ressourcen im Voraus heruntergeladen werden. prefetch wird von den meisten modernen Browsern unterstützt. Bei dieser Methode müssen zusätzliche Bytes geladen werden, die möglicherweise nicht verwendet werden. Verwenden Sie diese Methode daher nur, wenn es unbedingt erforderlich ist, und idealerweise nur in schnellen Netzwerken.