Schnellere Webnavigation mit vorausschauendem Vorabruf

Hier erfahren Sie mehr über den vorausschauenden Vorabruf und wie diese von Guess.js implementiert wird.

Minko Gechev

In meiner Sitzung Schnellere Webnavigation mit vorausschauendem Prefetching bei der Google I/O 2019 habe ich zunächst über die Optimierung von Webanwendungen mit Codeaufteilung und die möglichen Auswirkungen auf die Leistung bei der nachfolgenden Seitennavigation gesprochen. Im zweiten Teil des Vortrags habe ich erläutert, wie Sie die Navigationsgeschwindigkeit mithilfe von Guess.js zum Einrichten des vorausschauenden Vorabrufs verbessern können:

Codeaufteilung für schnellere Webanwendungen

Web-Apps sind langsam und JavaScript gehört zu den teuersten Ressourcen, die Sie versenden. Das Warten auf das Laden einer langsamen Web-App kann Nutzer frustrieren und die Zahl der Conversions verringern.

Langsame Webanwendungen sind stressig.

Lazy Loading ist eine effiziente Methode, um die Menge an JavaScript zu reduzieren, die übertragen werden soll. Sie können verschiedene Techniken für das Lazy Loading von JavaScript verwenden. Dazu gehören:

  • Codeaufteilung auf Komponentenebene
  • Codeaufteilung auf Routenebene

Mit der Codeaufteilung auf Komponentenebene können Sie einzelne Komponenten in separate JavaScript-Blöcke verschieben. Bei bestimmten Ereignissen können Sie die relevanten Skripts laden und die Komponenten rendern.

Bei der Codeaufteilung auf Routenebene verschieben Sie jedoch ganze Routen in unabhängige Blöcke. Wenn Nutzer von einer Route zu einer anderen wechseln, müssen sie das zugehörige JavaScript herunterladen und die angeforderte Seite bootstrappen. Dies kann insbesondere in langsamen Netzwerken zu erheblichen Verzögerungen führen.

JavaScript-Vorabruf

Über den Vorabruf kann der Browser Ressourcen herunterladen und im Cache speichern, die der Nutzer wahrscheinlich bald benötigt. Die übliche Methode ist die Verwendung von <link rel="prefetch">. Es gibt jedoch zwei häufige Fallstricke:

  • Der Vorabruf zu vieler Ressourcen (Überabrufen) verbraucht eine Menge Daten.
  • Einige Ressourcen, die der Nutzer benötigt, werden möglicherweise nie vorab abgerufen.

Der vorausschauende Vorabruf löst diese Probleme, indem er anhand eines Berichts zu den Navigationsmustern der Nutzer ermittelt, welche Assets vorab abgerufen werden sollen.

Beispiel für den Vorabruf

Vorausschauender Vorabruf mit Guess.js

Guess.js ist eine JavaScript-Bibliothek, die einen vorausschauenden Vorabruf ermöglicht. Guess.js verwendet einen Bericht von Google Analytics oder einem anderen Analyseanbieter, um ein Vorhersagemodell zu erstellen, mit dem sich nur die Informationen abrufen lassen, die der Nutzer wahrscheinlich benötigt.

Guess.js ist in Angular, Next.js, Nuxt.js und Gatsby eingebunden. Fügen Sie der Webpack-Konfiguration die folgenden Zeilen hinzu, um eine Google Analytics-Datenansicht-ID anzugeben, um sie in Ihrer Anwendung zu verwenden:

const { GuessPlugin } = require('guess-webpack');

// ...
plugins: [
   // ...
   new GuessPlugin({ GA: 'XXXXXX' })
]
// ...

Wenn Sie Google Analytics nicht verwenden, können Sie eine reportProvider angeben und Daten aus Ihrem bevorzugten Dienst herunterladen.

Einbindung in Frameworks

Weitere Informationen zur Integration von Guess.js in Ihr bevorzugtes Framework finden Sie in den folgenden Ressourcen:

Eine kurze Schritt-für-Schritt-Anleitung zur Integration mit Angular findest du in diesem Video:

Wie funktioniert Guess.js?

So implementiert Guess.js den vorausschauenden Vorabruf:

  1. Zuerst werden Daten für die Nutzernavigationsmuster Ihres bevorzugten Analyseanbieters extrahiert.
  2. Anschließend werden die URLs aus dem Bericht den von Webpack erstellten JavaScript-Blöcken zugeordnet.
  3. Anhand der extrahierten Daten wird ein einfaches Vorhersagemodell für die Seiten erstellt, zu denen Nutzer wahrscheinlich von einer bestimmten Seite aus gelangen.
  4. Er ruft das Modell für jeden JavaScript-Block auf und sagt die anderen Blöcke vorher, die wahrscheinlich als Nächstes benötigt werden.
  5. Jedem Block wird eine Vorabrufanleitung hinzugefügt.

Wenn Guess.js fertig ist, enthält jeder Block eine Vorabruf-Anleitung, die ungefähr so aussieht:

__GUESS__.p(
  ['a.js', 0.2],
  ['b.js', 0.8]
)

Dieser von Guess.js generierte Code weist den Browser an, den Block a.js mit der Wahrscheinlichkeit 0.2 und den Block b.js mit der Wahrscheinlichkeit 0.8 vorab abzurufen.

Sobald der Code im Browser ausgeführt wurde, prüft Guess.js die Verbindungsgeschwindigkeit des Nutzers. Wenn das ausreichend ist, fügt Guess.js zwei <link rel="prefetch">-Tags in den Header der Seite ein – eines für jeden Block. Wenn sich der Nutzer in einem Hochgeschwindigkeitsnetzwerk befindet, ruft Guess.js beide Blöcke vorab ab. Wenn der Nutzer eine schlechte Netzwerkverbindung hat, ruft Guess.js nur den Block b.js vorab ab, da die Wahrscheinlichkeit hoch ist, dass er benötigt wird.

Weitere Informationen

Weitere Informationen zu Guess.js finden Sie in den folgenden Ressourcen: