Ressourcen vorabrufen, um zukünftige Navigationen zu beschleunigen

Hier erfahren Sie mehr über den Ressourcenhinweis „rel=prefetch“ und seine Verwendung.

Demián Renzulli

Jeremy Wagner

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

In diesem Leitfaden erfahren Sie, wie Sie dies mit <link rel=prefetch> erreichen, einem Ressourcenhinweis, mit dem Sie den Vorabruf auf einfache und effiziente Weise implementieren können.

Navigation mit rel=prefetch verbessern

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

<link rel="prefetch" href="/articles/" as="document">

Der Hinweis prefetch verbraucht zusätzliche Byte für Ressourcen, die nicht sofort benötigt werden. Daher muss diese Technik gut durchdacht angewendet werden. Rufen Sie Ressourcen nur dann vorab ab, wenn Sie davon ausgehen, dass die Nutzer sie benötigen. Ziehen Sie in Betracht, bei langsamen Verbindungen keinen Vorabruf durchzuführen. Sie können dies mit der Network Information API feststellen.

Es gibt verschiedene Möglichkeiten, um zu bestimmen, welche Links vorab abgerufen werden sollen. Die einfachste Methode besteht darin, den ersten Link oder die ersten Links auf der aktuellen Seite vorab abzurufen. Es gibt auch Bibliotheken, die komplexere Ansätze verwenden, wie weiter unten in diesem Beitrag erläutert wird.

Anwendungsfälle

Prefetching nachfolgender Seiten

Sie können HTML-Dokumente vorabrufen, wenn nachfolgende Seiten vorhersehbar sind. So wird die Seite sofort geladen, wenn auf einen Link geklickt wird.

Auf einer Seite mit Produkteinträgen 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 sogar noch leichter vorhersehbar: Auf einer Einkaufswagenseite ist die Wahrscheinlichkeit, dass ein Nutzer die Zahlungsseite besucht, in der Regel hoch, was sie zu einem guten Kandidaten für den Vorabruf macht.

Das Vorabrufen von Ressourcen erfordert zwar zusätzliche Bandbreite, kann jedoch die meisten Leistungsmesswerte verbessern. Time to First Byte (TTFB) ist häufig viel kürzer, da die Dokumentanfrage zu einem Cache-Treffer führt. Da die TTFB niedriger ist, sind auch nachfolgende zeitbasierte Messwerte häufig niedriger, z. B. Largest Contentful Paint (LCP) und First Contentful Paint (FCP).

Statische Assets vorabrufen

Sie können statische Assets wie Skripts oder Stylesheets vorabrufen, wenn nachfolgende Abschnitte, die ein Nutzer besuchen könnte, vorhergesagt werden können. Dies ist besonders nützlich, wenn diese Assets über viele Seiten hinweg verwendet werden.

Netflix nutzt die Zeit, die Nutzer auf nicht angemeldeten Seiten verbringen, zum Beispiel, um React abzurufen. Die App wird dann nach der Anmeldung verwendet. Dadurch konnte die Zeit bis zur interaktiven Interaktion bei zukünftigen Navigationen um 30% reduziert werden.

Die Auswirkung des Vorabrufs statischer Assets auf die Leistungsmesswerte hängt davon ab, welche Ressource vorab abgerufen wird:

• Das Vorabrufen von Bildern kann die LCP-Zeiten für LCP-Bildelemente erheblich verkürzen.
• Der Vorabruf von Stylesheets kann sowohl den FCP- als auch den LCP-Wert verbessern, da die Netzwerkzeit zum Herunterladen des Stylesheets entfällt. Da Stylesheets das Rendering blockieren, können sie den LCP verringern, wenn sie vorab abgerufen werden. Wenn das LCP-Element der nachfolgenden Seite ein CSS-Hintergrundbild ist, das über die Eigenschaft background-image angefordert wird, wird das Bild auch als abhängige Ressource des Prefetch-Stylesheets vorab abgerufen.
• Durch den Vorabruf von JavaScript erfolgt die Verarbeitung des Prefetch-Skripts viel schneller, als wenn es bei der Navigation zuerst vom Netzwerk abgerufen werden müsste. Dies kann sich auf die Interaction to Next Paint (INP) einer Seite auswirken. In Fällen, in denen Markup auf dem Client über JavaScript gerendert wird, kann der LCP durch geringere Verzögerungen beim Laden von Ressourcen verbessert werden. Außerdem kann das clientseitige Rendern von Markup mit dem LCP-Element einer Seite früher erfolgen.
• Durch den Vorabruf von Web-Schriftarten, die noch nicht von der aktuellen Seite verwendet werden, können Layout Shifts vermieden werden. Wenn font-display: swap; verwendet wird, wird der Tauschzeitraum für die Schriftart entfallen. Dadurch wird der Text schneller gerendert und Layoutverschiebungen werden vermieden. Wenn eine zukünftige Seite die vorabgerufene Schriftart verwendet und das LCP-Element der Seite ein Textblock in einer Webschriftart ist, ist der LCP-Wert für dieses Element ebenfalls schneller.

On-Demand-JavaScript-Chunks vorabrufen

Durch die Codeaufteilung Ihrer JavaScript-Bundles können Sie anfangs nur Teile einer App laden und den Rest per Lazy Loading. Wenn Sie diese Technik verwenden, können Sie einen Prefetch 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, die ein Dialogfeld mit einer Emoji-Auswahl öffnet, können Sie diese in drei JavaScript-Blöcke unterteilen: „Start“, „Dialogfeld“ und „Auswahl“. Die Startseite und das Dialogfeld können anfänglich und die Auswahl bei Bedarf geladen werden. Mit Tools wie Webpack können Sie den Browser anweisen, diese On-Demand-Blöcke vorab abzurufen.

rel=prefetch implementieren

Die einfachste Methode zur Implementierung von prefetch besteht darin, ein <link>-Tag zum <head> des Dokuments hinzuzufügen:

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

Das Attribut as hilft dem Browser, die richtigen Header festzulegen und festzustellen, ob sich die Ressource bereits im Cache befindet. Beispielwerte für dieses Attribut: document, script, style, font, image und andere.

Sie können den Vorabruf auch über den HTTP-Header Link 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 kleine Verbesserungen bieten.

JavaScript-Module mit magischen Webpack-Kommentaren vorabrufen

Webpack bietet Ihnen die Möglichkeit, Skripts für Routen oder Funktionen vorab abzurufen, die Sie mit hoher Wahrscheinlichkeit von Nutzern in Kürze besuchen oder verwenden werden.

Mit dem folgenden Code-Snippet wird eine Sortierfunktion aus der lodash-Bibliothek per Lazy Loading 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 „Senden“ zu warten, zum Laden dieser Funktion stattfinden soll, können Sie diese Ressource vorab abrufen, um die Chancen zu erhöhen, dass sie im Cache verfügbar ist, wenn der Nutzer das Formular sendet. Webpack ermöglicht die Verwendung der magischen Kommentare in import():

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" as="script" href="1.bundle.js">

Die Leistungsvorteile des Vorabrufs von On-Demand-Blöcken sind etwas nuanciert, aber im Allgemeinen können Sie davon ausgehen, schnellere Reaktionen auf Interaktionen zu erwarten, die von diesen On-Demand-Blöcken abhängen, da diese sofort verfügbar sind. Je nach Art der Interaktion könnte dies dem INP einer Seite einen Vorteil verschaffen.

Der Vorabruf im Allgemeinen berücksichtigt auch die allgemeine Ressourcenpriorisierung. Wenn eine Ressource per Prefetch abgerufen wird, erfolgt dies mit der niedrigsten Priorität. Auf diese Weise konkurrieren alle vorabgerufenen Ressourcen nicht um Bandbreite für Ressourcen, die von der aktuellen Seite benötigt werden.

Intelligenter Vorabruf mit Quicklink und Guess.js

Sie können auch einen intelligenteren Vorabruf mit Bibliotheken implementieren, die im Hintergrund prefetch verwenden:

• Quicklink erkennt mithilfe der Intersection Observer API, wenn Links in den Darstellungsbereich eintreffen, und ruft verknüpfte Ressourcen während der Leerlaufzeit vorab ab. Bonus: Der Quicklink wiegt weniger als 1 KB.
• Guess.js erstellt mithilfe von Analyseberichten ein Vorhersagemodell, mit dem nur die intelligenten Vorababrufe der Nutzer erfolgen.

Sowohl Quicklink als auch Guess.js verwenden die Network Information API, um einen Prefetch zu vermeiden, wenn der Nutzer sich in einem langsamen Netzwerk befindet oder Save-Data aktiviert ist.

Prefetching im Hintergrund

Ressourcenhinweise sind keine obligatorischen Anweisungen. Der Browser entscheidet selbst, ob und wann sie ausgeführt werden.

Sie können den Prefetch mehrmals auf derselben Seite verwenden. Der Browser stellt alle Hinweise in die Warteschlange und fordert jede Ressource an, wenn sie inaktiv ist. Wenn in Chrome ein Prefetch noch nicht abgeschlossen ist und der Nutzer zur gewünschten Prefetch-Ressource navigiert, wird die Inflight-Last als Navigation des Browsers erfasst. Andere Browser-Anbieter implementieren dies möglicherweise anders.

Der Vorabruf erfolgt auf Basis der niedrigsten Priorität, damit vorab abgerufene Ressourcen nicht mit den auf der aktuellen Seite erforderlichen Ressourcen um Bandbreite konkurrieren.

Im HTTP-Cache oder im Speichercache vorab vorab erstellte Dateien werden je nachdem, ob die Ressource im Cache speicherbar ist oder nicht, über einen Zeitraum gespeichert, der je nach Browser variiert. In Chrome werden Ressourcen beispielsweise fünf Minuten lang aufbewahrt. Anschließend gelten die normalen Cache-Control-Regeln für die Ressource.

Fazit

Die Verwendung von prefetch kann die Ladezeiten zukünftiger Navigation erheblich verkürzen und sogar dazu führen, dass die Seiten sofort geladen werden. prefetch wird in modernen Browsern weitgehend unterstützt. Daher ist diese Methode attraktiv, um die Navigation für viele Nutzer zu verbessern. Bei dieser Technik müssen zusätzliche Bytes geladen werden, die möglicherweise nicht verwendet werden. Seien Sie daher vorsichtig, wenn Sie sie verwenden: und im Idealfall nur in schnellen Netzwerken.