Ressourcen vorabrufen, um zukünftige Navigationen zu beschleunigen

Weitere Informationen zum Ressourcenhinweis „rel=prefetch“ und dessen Verwendung.

Demián Renzulli
Demián Renzulli
X GitHub Störung
Wagner

Studien zeigen, dass schnellere 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 besuchen werden, können Sie die Ladezeiten zukünftiger Navigationen verbessern, indem Sie die Ressourcen für diese Seiten vorab herunterladen.

In diesem Leitfaden wird erläutert, wie Sie dies mit <link rel=prefetch>, einem Ressourcenhinweis, erreichen können, mit dem Sie den Vorabruf einfach und effizient implementieren können.

Navigation verbessern mit rel=prefetch

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

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

Ein Diagramm, das die Funktionsweise des Link-Vorabrufs zeigt.

Der prefetch-Hinweis verbraucht zusätzliche Bytes für Ressourcen, die nicht sofort benötigt werden. Daher muss dieses Verfahren sorgfältig angewendet werden. Rufen Sie Ressourcen nur dann vorab ab, wenn Sie sicher sind, dass Nutzer sie benötigen. Vermeiden Sie den Vorabruf, wenn Nutzer eine langsame Verbindung haben. Mit der Network Information API können Sie dies feststellen.

Es gibt verschiedene Möglichkeiten, um zu bestimmen, welche Links vorab abgerufen werden sollen. Die einfachste Möglichkeit besteht darin, den ersten oder die ersten Links auf der aktuellen Seite vorab abzurufen. Es gibt auch Bibliotheken mit komplexeren Ansätzen, die später in diesem Post erläutert werden.

Anwendungsfälle

Vorabruf nachfolgender Seiten

Rufen Sie HTML-Dokumente vorab auf, 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 einfacher vorherzusehen – auf einer Einkaufswagenseite ist die Wahrscheinlichkeit, dass ein Nutzer die Zahlungsseite besucht, in der Regel hoch, was ein gutes Kandidat für einen Prefetch ist.

Der Vorabruf von Ressourcen benötigt zwar zusätzliche Bandbreite, kann aber die meisten Leistungsmesswerte verbessern. Time to First Byte (TTFB) ist oft viel kürzer, da die Dokumentanfrage zu einem Cache-Treffer führt. Da die TTFB niedriger sein wird, sind auch nachfolgende zeitbasierte Messwerte häufig niedriger, einschließlich Largest Contentful Paint (LCP) und First Contentful Paint (FCP).

Statische Assets vorabrufen

Rufen Sie statische Assets wie Skripts oder Stylesheets im Voraus auf, wenn nachfolgende Bereiche, die ein Nutzer möglicherweise besucht, vorhergesagt werden kann. Das ist besonders nützlich, wenn diese Assets auf vielen Seiten verwendet werden.

Netflix nutzt beispielsweise die Zeit, die Nutzer auf nicht angemeldeten Seiten verbringen, um React vorab abzurufen. Dieser wird nach der Anmeldung verwendet. So konnte die Zeit bis Interaktivität für zukünftige Navigationen um 30% reduziert werden.

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

  • Durch den Vorabruf von Bildern können die LCP-Zeiten für LCP-Bildelemente deutlich verkürzt werden.
  • Das Vorabrufen von Stylesheets kann sowohl FCP als auch LCP verbessern, da die Netzwerkzeit zum Herunterladen des Stylesheets entfällt. Da Stylesheets das Rendering blockieren, können sie den LCP-Wert beim Prefetch verringern. Falls 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 früher, als wenn es während der Navigation zuerst vom Netzwerk abgerufen werden müsste. Dies kann sich auf Reaktionsmesswerte wie First Input Delay (FID) und Interaction to Next Paint (INP) auswirken. Wenn Markups auf dem Client über JavaScript gerendert werden, kann der LCP durch geringere Verzögerungen beim Laden von Ressourcen verbessert werden. Außerdem kann das clientseitige Rendering von Markups, die das LCP-Element einer Seite enthalten, früher erfolgen.
  • Durch den Vorabruf von Webschriftarten, die noch nicht von der aktuellen Seite verwendet werden, können Layoutverschiebungen vermieden werden. In den Fällen, in denen font-display: swap; verwendet wird, wird der Austauschzeitraum für die Schriftart entfernt. 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 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 laden. Mit diesem Verfahren 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, über die ein Dialogfeld mit einer Emoji-Auswahl geöffnet wird, können Sie diese in drei JavaScript-Elemente unterteilen: „Start“, „Dialogfeld“ und „Auswahl“. Start und Dialog konnten anfangs geladen werden, während die Auswahl bei Bedarf geladen werden kann. Mit Tools wie Webpack können Sie den Browser anweisen, diese On-Demand-Blöcke 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="/articles/" as="document">
  ...
</head>

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

Sie können den Vorabruf auch über den Link-HTTP-Header initiieren:

Link: </css/style.css>; rel=prefetch

Die Angabe eines Prefetch-Hinweises im HTTP-Header hat den Vorteil, 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

Mit Webpack können Sie Skripts vorab für Routen oder Funktionen abrufen, von denen Sie anzunehmen, dass Sie sie mit hoher Wahrscheinlichkeit besuchen oder in naher Zukunft nutzen werden.

Mit dem folgenden Code-Snippet wird eine Sortierfunktion aus der Bibliothek lodash zum Sortieren einer Gruppe von Zahlen per Lazy-Loading geladen, die über ein Formular gesendet wird:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Anstatt mit dem Laden dieser Funktion auf das Ereignis „submit“ zu warten, können Sie diese Ressource auch vorab abrufen. Dadurch erhöht sich die Wahrscheinlichkeit, dass sie im Cache verfügbar ist, wenn der Nutzer das Formular absendet. Mit Webpack können die magischen Kommentare in import() verwendet werden:

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

Die Leistungsvorteile des Vorabrufs von On-Demand-Blöcken sind etwas differenziert, aber im Allgemeinen können Sie erwarten, dass auf Interaktionen, die von diesen On-Demand-Blöcken abhängig sind, schneller reagiert werden, da sie sofort verfügbar sind. Je nach Art der Interaktion kann dies den INP-Wert einer Seite positiv beeinflussen.

Der Prefetch wird im Allgemeinen auch bei der allgemeinen Ressourcenpriorisierung berücksichtigt. Wenn eine Ressource vorab abgerufen wird, geschieht dies mit der niedrigsten Priorität. Vorab abgerufene Ressourcen konkurrieren also nicht um die Bandbreite für Ressourcen, die von der aktuellen Seite benötigt werden.

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

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

Prefetching im Hintergrund

Ressourcenhinweise sind keine obligatorische Anleitung. Der Browser entscheidet, 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 ein Prefetch in Chrome noch nicht abgeschlossen ist und der Nutzer zur entsprechenden Prefetch-Ressource navigiert, wird die aktuelle Last als Navigation durch den Browser erfasst (andere Browseranbieter implementieren dies möglicherweise anders).

Der Prefetch erfolgt mit der niedrigsten Priorität. Vorabgerufene Ressourcen konkurrieren also nicht um die Bandbreite mit den auf der aktuellen Seite erforderlichen Ressourcen.

Vorabgerufene Dateien werden je nach Browser im HTTP-Cache oder im Arbeitsspeichercache gespeichert, je nachdem, ob die Ressource im Cache gespeichert werden kann oder nicht. In Chrome werden Ressourcen beispielsweise fünf Minuten lang aufbewahrt. Danach gelten die normalen Cache-Control-Regeln für die Ressource.

Fazit

Die Verwendung von prefetch kann die Ladezeiten zukünftiger Navigationen erheblich verbessern und dazu führen, dass Seiten so aussehen, als würden sie sofort geladen werden. prefetch wird in modernen Browsern weithin unterstützt und ist daher eine attraktive Methode, 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 also vorsichtig, wenn Sie sie verwenden. Tun Sie dies nur, wenn es notwendig ist, und idealerweise nur in schnellen Netzwerken.