Ressourcen vorabrufen, um zukünftige Navigationen zu beschleunigen

Weitere Informationen zum Ressourcenhinweis „rel=prefetch“ und seiner 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 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 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 prefetch-Hinweis belegt 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. Ziehen Sie in Betracht, bei langsamen Verbindungen keinen Vorabruf durchzuführen. Sie können das mit der Network Information API erkennen.

Es gibt verschiedene Möglichkeiten, 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 ausgefeiltere Ansätze verwenden. Diese werden später in diesem Artikel erläutert.

Anwendungsfälle

Nachfolgend werden Seiten vorab geladen.

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 Produktseite können Sie beispielsweise die Seite für das beliebteste Produkt in der Liste vorab laden. 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 vorabrufen

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 nicht angemeldeten 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.
• Durch das Vorabladen von Stylesheets können sowohl FCP als auch LCP verbessert werden, 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 über die Property background-image angefordertes CSS-Hintergrundbild ist, 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 die Interaction to Next Paint (INP) einer Seite auswirken. Wenn das Markup auf dem Client über JavaScript gerendert wird, kann das LCP durch reduzierte Verzögerungen 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.
• 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 Schriftart-Auslagerung, was zu einer schnelleren Textdarstellung und zur Vermeidung von Layoutverschiebungen führt. 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 laden

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“. Start und Dialog können anfänglich geladen werden, während die Auswahl bei Bedarf geladen werden kann. 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="/articles/" as="document">
  ...
</head>

Anhand des Attributs as kann der Browser die richtigen Header festlegen und ermitteln, ob sich die Ressource bereits im Cache befindet. Beispielwerte für dieses Attribut: document, script, style, font, image und andere.

Sie können das Vorabladen 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 webpack-Magiekommentaren vorab abrufen

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 Bibliothek lodash 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 Einsenden des Ereignisses zu warten, um diese Funktion zu laden, 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. Das Webpack ermöglicht dies mithilfe 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 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.

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.

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 einen Prefetch zu vermeiden, wenn sich ein Nutzer mit einem langsamen Netzwerk befindet oder Save-Data aktiviert ist.

Prefetching im Hintergrund

Ressourcenhinweise sind keine obligatorischen Anweisungen. Es liegt im Ermessen des Browsers, 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 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 die Ressourcen, die vorab abgerufen werden, nicht mit den Ressourcen konkurrieren, die auf der aktuellen Seite benötigt werden.

Vorab abgerufene Dateien werden je nach Browser für eine bestimmte Zeit im HTTP-Cache oder im Speichercache gespeichert. 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 Navigation erheblich verkürzen und sogar dazu führen, dass die Seiten sofort geladen werden. prefetch wird in modernen Browsern weithin unterstützt. Das macht es zu einer attraktiven Methode, die Navigation für viele Nutzer zu verbessern. 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.