Ressourcen vorabrufen, um zukünftige Navigationen zu beschleunigen

Informationen zum Ressourcenhinweis „rel=prefetch“ und zur Verwendung

Demián Renzulli
Demián Renzulli
X GitHub
Jeremy Wagner

Veröffentlicht: 12. September 2019, zuletzt aktualisiert: 8. Februar 2025

Studien haben gezeigt, dass schnellere Ladezeiten zu höheren Conversion-Raten und einer besseren Nutzererfahrung führen. Wenn Sie wissen, wie Nutzer Ihre Website durchlaufen und welche Seiten sie wahrscheinlich als Nächstes besuchen werden, können Sie die Ladezeiten zukünftiger Navigationsvorgänge verbessern, indem Sie die Ressourcen für diese Seiten vorab herunterladen.

In diesem Leitfaden wird beschrieben, wie Sie das mit <link rel=prefetch> erreichen können, mit dem sich das Prefetching effizient implementieren lässt.

Websiteleistung mit rel=prefetch verbessern

Wenn Sie einer Webseite <link rel=prefetch> hinzufügen, wird der Browser angewiesen, einige der Ressourcen (z. B. Skripts oder CSS-Dateien) herunterzuladen, die der Nutzer möglicherweise in Zukunft benötigt:

<link rel="prefetch" href="/https/web.developers.google.cn/css/styles.css">

Der prefetch-Hinweis verbraucht zusätzliche Byte für Ressourcen, die nicht sofort benötigt werden. Diese Technik sollte daher mit Bedacht eingesetzt werden. Prefetching sollte nur für Ressourcen erfolgen, die Nutzer mit hoher Wahrscheinlichkeit benötigen. Bei langsamen Verbindungen sollten Sie das Prefetching nicht in Betracht ziehen. Sie können dies mit der Network Information API erkennen.

Anwendungsfälle

Prefetch hat viele Anwendungsfälle, um Webseiten zu beschleunigen, indem Ressourcen im Voraus heruntergeladen werden.

Nachfolgende Seiten vorab abrufen

HTML-Dokumente vorab abrufen, wenn nachfolgende Seiten vorhersehbar sind. Wenn ein Link angeklickt wird, wird die Seite dann sofort geladen.

Auf einer Produktlistenseite können Sie beispielsweise die Seite für das beliebteste Produkt in der Liste vorab abrufen. In einigen Fällen lässt sich die nächste Navigation sogar noch einfacher vorhersagen. Auf einer Warenkorbseite ist die Wahrscheinlichkeit, dass ein Nutzer die Checkout-Seite aufruft, in der Regel hoch. Daher ist sie ein guter Kandidat für das Prefetching.

Das Vorabrufen von Ressourcen verbraucht 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 der TTFB-Wert niedriger ist, sind auch die nachfolgenden zeitbasierten Messwerte oft niedriger, einschließlich Largest Contentful Paint (LCP) und First Contentful Paint (FCP).

Statische Assets vorab abrufen

Statische Assets wie Scripts oder Stylesheets vorab abrufen, wenn vorhergesagt werden kann, welche nachfolgenden Abschnitte der Nutzer besuchen wird. 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 abzurufen, das verwendet wird, sobald sich Nutzer anmelden. Dadurch konnte die Zeit bis zur Interaktivität bei zukünftigen Navigationsvorgängen um 30% verkürzt werden.

Die Auswirkungen des Prefetching statischer Assets auf Leistungsmesswerte hängen von der Ressource ab, die per Prefetching abgerufen wird:

  • Durch das Prefetching von Bildern kann die LCP-Zeit für LCP-Bildelemente erheblich verkürzt werden.
  • Durch das Vorabrufen von Stylesheets können sowohl FCP als auch LCP verbessert werden, da die Netzwerkzeit zum Herunterladen des Stylesheets entfällt. Da Stylesheets das Rendern blockieren, kann der LCP durch das Vorabrufen reduziert werden. Wenn das LCP-Element der nachfolgenden Seite ein CSS-Hintergrundbild ist, das mit der Eigenschaft background-image angefordert wird, wird das Bild auch als abhängige Ressource des vorab abgerufenen Stylesheets vorab abgerufen.
  • Wenn JavaScript vorab abgerufen wird, kann das vorab abgerufene Skript viel früher verarbeitet werden, als wenn es erst während der Navigation vom Netzwerk abgerufen werden müsste. Dies kann sich auf den INP-Wert (Interaction to Next Paint) einer Seite auswirken. Wenn Markup auf dem Client mit JavaScript gerendert wird, kann der LCP durch eine geringere Verzögerung beim Laden von Ressourcen verbessert werden. Außerdem kann das clientseitige Rendering von Markup, das das LCP-Element einer Seite enthält, früher erfolgen.
  • Wenn Sie Webfonts vorab abrufen, die noch nicht von der aktuellen Seite verwendet werden, können Sie Layoutverschiebungen vermeiden. Wenn font-display: swap; verwendet wird, entfällt der Zeitraum für den Schriftartentausch, was zu einem schnelleren Rendern des Texts und dem Eliminieren von Layout Shifts führt. Wenn auf einer zukünftigen Seite die vorab abgerufene Schriftart verwendet wird und das LCP-Element der Seite ein Textblock mit einer Webfont ist, wird auch die LCP-Zeit für dieses Element verkürzt.

On-Demand-JavaScript-Chunks vorab abrufen

Durch Codeaufteilung Ihrer JavaScript-Bundles können Sie anfangs nur Teile einer App laden und den Rest verzögert laden. Wenn Sie diese Technik verwenden, können Sie das Prefetching auf Routen oder Komponenten anwenden, die nicht sofort erforderlich sind, aber wahrscheinlich bald angefordert werden.

Wenn Sie beispielsweise eine Seite mit einer Schaltfläche haben, über die ein Dialogfeld mit einer Emoji-Auswahl geöffnet wird, können Sie sie in drei JavaScript-Chunks aufteilen: „home“, „dialog“ und „picker“. Das Zuhause und das Dialogfeld könnten anfangs geladen werden, während die Auswahl bei Bedarf geladen werden könnte. Mit Tools wie webpack können Sie den Browser anweisen, diese On-Demand-Chunks vorab abzurufen.

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 Prefetching 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-Magic-Kommentaren vorab abrufen

Mit webpack können Sie Scripts für Routen oder Funktionen vorab abrufen, die Nutzer wahrscheinlich bald aufrufen oder verwenden werden.

Im folgenden Code-Snippet wird eine Sortierfunktion aus der lodash-Bibliothek verzögert 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 darauf zu warten, dass das Ereignis „submit“ eintritt, um diese Funktion zu laden, können Sie diese Ressource vorab abrufen, um die Wahrscheinlichkeit zu erhöhen, dass sie im Cache verfügbar ist, wenn der Nutzer das Formular sendet. Mit webpack ist das mithilfe der Magic Comments 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 einzufügen:

<link rel="prefetch" href="1.bundle.js">

Die Leistungsvorteile des Vorabrufens von On-Demand-Chunks sind etwas komplexer, aber im Allgemeinen können Sie mit schnelleren Reaktionen 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 Prefetching wird auch in die allgemeine Ressourcenpriorisierung einbezogen. Wenn eine Ressource vorab abgerufen wird, geschieht dies mit der niedrigstmöglichen Priorität. Vorabgerufene Ressourcen konkurrieren also nicht mit Ressourcen, die für die aktuelle Seite benötigt werden.

Sie können auch intelligenteres Prefetching mit Bibliotheken implementieren, die prefetch im Hintergrund verwenden:

  • quicklink verwendet die Intersection Observer API, um zu erkennen, wann Links in den Darstellungsbereich gelangen, und ruft verknüpfte Ressourcen während der Leerlaufzeit ab. Bonus: Der Quicklink wiegt weniger als 1 KB.
  • Mit Guess.js werden Analysenberichte verwendet, um ein Prognosemodell zu erstellen, mit dem nur die Inhalte intelligent vorab abgerufen werden, die der Nutzer wahrscheinlich benötigt.

Sowohl Quicklink als auch Guess.js verwenden die Network Information API, um das Vorabrufen zu vermeiden, wenn ein Nutzer ein langsames Netzwerk verwendet oder Save-Data aktiviert hat.

Prefetch-Funktion im Detail

Ressourcenhinweise sind keine obligatorischen Anweisungen. Es liegt im Ermessen des Browsers, ob und wann sie ausgeführt werden.

Sie können „prefetch“ 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 nicht vollständig geladen wurde und der Nutzer zur entsprechenden Prefetch-Ressource navigiert, wird der laufende Ladevorgang vom Browser als Navigation erkannt (andere Browseranbieter implementieren dies möglicherweise anders).

Das Vorabrufen erfolgt mit der niedrigsten Priorität. Vorabgerufene Ressourcen konkurrieren also nicht mit den Ressourcen, die auf der aktuellen Seite benötigt werden.

Vorgeholte Dateien werden im HTTP-Cache gespeichert, wenn die Ressource im Cache gespeichert werden kann. Andernfalls wird sie verworfen und nicht verwendet.

Fazit

Mit prefetch lässt sich die Webleistung einer Website erheblich verbessern, da zukünftig benötigte Ressourcen im Voraus heruntergeladen werden. prefetch wird von den meisten modernen Browsern unterstützt. Bei dieser Technik müssen zusätzliche Bytes geladen werden, die möglicherweise nicht verwendet werden. Sie sollten sie daher nur bei Bedarf und idealerweise nur in schnellen Netzwerken einsetzen.