Schnellere Webnavigation mit vorausschauendem Vorabruf

Hier erfahren Sie mehr über vorausschauenden Prefetch und wie Guess.js ihn implementiert.

Minko Getschew

In meiner Sitzung Schnellere Webnavigation mit vorausschauendem Vorabruf auf der Google I/O 2019 sprach ich zuerst über die Optimierung von Webanwendungen mit Codeaufteilung und die potenziellen Auswirkungen auf die Leistung bei der nachfolgenden Seitennavigation. Im zweiten Teil des Vortrags habe ich besprochen, wie sich die Navigationsgeschwindigkeit mithilfe von Guess.js verbessern lässt, um den vorausschauenden Prefetch einzurichten:

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 Webanwendung kann die Nutzer verärgern und die Anzahl der Conversions verringern.

Langsame Web-Apps sind stressig.

Lazy Loading ist eine effiziente Technik, um die Anzahl der JavaScript-Byte zu reduzieren, die über die Leitung übertragen werden. Es gibt verschiedene Methoden für das Lazy Loading von JavaScript, z. B.:

  • Codeaufteilung auf Komponentenebene
  • Codeaufteilung auf Routenebene

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

Bei der Codeaufteilung auf Routenebene verschieben Sie dagegen ganze routes 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 per Bootstrapping übertragen. Diese Vorgänge können insbesondere in langsamen Netzwerken zu erheblichen Verzögerungen führen.

JavaScript-Prefetch

Durch 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 Probleme:

  • Der Vorabruf zu vieler Ressourcen (Overfetching) beansprucht viele Daten.
  • Einige Ressourcen, die der Nutzer benötigt, werden möglicherweise nie vorab abgerufen.

Der prädiktive Prefetch löst diese Probleme, indem ein Bericht zu den Navigationsmustern der Nutzer verwendet wird, um zu bestimmen, welche Assets vorab abgerufen werden sollen.

Beispiel für Prefetch

Vorausschauender Prefetch mit Guess.js

Guess.js ist eine JavaScript-Bibliothek, die vorausschauende Prefetch-Funktionen bereitstellt. Guess.js nutzt einen Bericht von Google Analytics oder einem anderen Analyseanbieter, um ein Prognosemodell zu erstellen, mit dem nur die wahrscheinlich benötigten Informationen des Nutzers vorab abgerufen werden können.

Guess.js ist mit Angular, Next.js, Nuxt.js und Gatsby kompatibel. Wenn Sie sie in Ihrer Anwendung verwenden möchten, fügen Sie der Webpack-Konfiguration die folgenden Zeilen hinzu, um eine Google Analytics-Datenansichts-ID anzugeben:

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 für die Integration mit Angular finden Sie in diesem Video:

Wie funktioniert Guess.js?

So implementiert Guess.js den vorausschauenden Vorabruf:

  1. Zuerst werden Daten für die Navigationsmuster der Nutzer von Ihrem bevorzugten Analyseanbieter extrahiert.
  2. Anschließend werden die URLs aus dem Bericht den von Webpack erstellten JavaScript-Chunks zugeordnet.
  3. Basierend auf den extrahierten Daten wird ein einfaches Vorhersagemodell erstellt, um zu ermitteln, zu welchen Seiten Nutzende wahrscheinlich von einer bestimmten Seite aus navigieren.
  4. Sie ruft das Modell für jeden JavaScript-Chunk auf und prognostiziert die anderen Blöcke, die wahrscheinlich als Nächstes benötigt werden.
  5. Jedem Block werden Vorabrufanweisungen hinzugefügt.

Wenn Guess.js fertig ist, enthält jeder Block eine Vorabrufanleitung ähnlich der folgenden:

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

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

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

Mehr dazu

Weitere Informationen zu Guess.js finden Sie in diesen Ressourcen: