Ressourcen vorabrufen, um zukünftige Navigationen zu beschleunigen

Weitere Informationen zum Ressourcenhinweis „rel=prefetch“ und seiner Verwendung

Demián Renzulli

Jeremy Wagner

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 werden, 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 dies mit <link rel=prefetch> erreichen, einem Ressourcenhinweis, mit dem Sie das Prefetching auf einfache und effiziente Weise implementieren können.

Navigation mit rel=prefetch verbessern

Wenn Sie einer Webseite <link rel=prefetch> hinzufügen, wird der Browser angewiesen, ganze Seiten oder einige der Ressourcen (z. B. Scripts 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 dann 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.

Es gibt verschiedene Möglichkeiten, zu bestimmen, welche Links vorab abgerufen werden sollen. Die einfachste Methode ist das Vorabladen des ersten oder der ersten paar Links auf der aktuellen Seite. 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.

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 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.

Hinweis : eBay hat das Prefetching für die ersten fünf Ergebnisse auf einer Suchergebnisseite implementiert, um das Laden zukünftiger Seiten zu beschleunigen. Dies hatte positive Auswirkungen auf die Conversion-Raten.

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 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 für zukünftige Navigationen um 30% reduziert werden.

Zum Zeitpunkt der Erstellung dieses Artikels ist es möglich, vorab abgerufene Ressourcen für Seiten zu teilen, die von verschiedenen Ursprüngen ausgeliefert werden. Wenn der HTTP-Cache mit doppeltem Schlüssel eingeführt wird, funktioniert er nur für Navigationen auf oberster Ebene und untergeordnete Ressourcen desselben Ursprungs. Es ist jedoch nicht möglich, vorab abgerufene untergeordnete Ressourcen für verschiedene Ursprünge wiederzuverwenden. Wenn also a.com die Ressource b.com/library.js im Voraus lädt, ist sie nicht im Cache von c.com verfügbar. Einige Browser, z. B. WebKit-basierte Browser, partitionieren bereits Caches und HTML5-Speicher für alle Drittanbieterdomains.

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 reduzieren, 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 den 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.
• Wenn Webschriften, die noch nicht von der aktuellen Seite verwendet werden, vorab abgerufen 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“. 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="/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. Beispiele für Werte dieses Attributs: 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

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.

Hinweis : prefetch wird in allen modernen Browsern außer Safari unterstützt. Sie können einen Fallback für Safari mit XHR-Anfragen oder der Fetch API implementieren.

JavaScript-Module mit webpack-Magiekommentaren vorab abrufen

Mit webpack können Sie Scripts für Pfade oder Funktionen vorab laden, von denen Sie mit hoher Wahrscheinlichkeit annehmen, 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 zu warten, bis das Ereignis „submit“ stattfindet, 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. 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.

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 Vorabladens

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 Niedrig. Daher konkurrieren die vorab geladenen Ressourcen nicht mit den für die aktuelle Seite erforderlichen Ressourcen um die Bandbreite.

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

Mit prefetch lassen sich die Ladezeiten bei zukünftigen Navigationen erheblich verbessern und Seiten sogar so darstellen, als würden sie sofort geladen. 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.