Schnellere Webnavigation mit vorausschauendem Vorabruf

Hier finden Sie weitere Informationen zum vorausschauenden Prefetching und zur Implementierung in Guess.js.

Minko Gechev

In meinem Vortrag Schnellere Webnavigation mit Predictive Prefetching auf der Google I/O 2019 habe ich damit begonnen, über die Optimierung von Webanwendungen mit Code Splitting und die potenziellen Leistungsauswirkungen auf die nachfolgende Seitennavigation zu sprechen. Im zweiten Teil des Vortrags habe ich erläutert, wie Sie die Navigationsgeschwindigkeit verbessern können, indem Sie mit Guess.js ein vorausschauendes Prefetching einrichten:

Codesplitting für schnellere Webanwendungen

Web-Apps sind langsam und JavaScript gehört zu den teuersten Ressourcen, die Sie bereitstellen. Wenn Nutzer auf das Laden einer langsamen Webanwendung warten müssen, kann das zu Frustration und weniger Conversions führen.

Langsame Web-Apps sind frustrierend.

Das Lazy-Loading ist eine effiziente Methode, um die Anzahl der JavaScript-Bytes zu reduzieren, die über die Leitung übertragen werden. Es gibt mehrere Möglichkeiten, JavaScript per Lazy Load zu laden, darunter:

  • Codesplitting auf Komponentenebene
  • Codeaufteilung auf Routing-Ebene

Mit dem Code-Splitting auf Komponentenebene können Sie einzelne Komponenten in separate JavaScript-Chunks verschieben. Bei bestimmten Ereignissen kannst du die entsprechenden Scripts laden und die Komponenten rendern.

Beim Code-Splitting auf Routenebene verschieben Sie jedoch ganze Routen in unabhängige Code-Chunks. Wenn Nutzer von einer Route zu einer anderen wechseln, müssen sie das zugehörige JavaScript herunterladen und die angeforderte Seite bootstrappen. Diese Vorgänge können zu erheblichen Verzögerungen führen, insbesondere in langsamen Netzwerken.

JavaScript-Vorab-Caching

Durch das Vorabladen 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:

  • Wenn zu viele Ressourcen vorab abgerufen werden (Overfetching), werden viele Daten verbraucht.
  • Einige Ressourcen, die der Nutzer benötigt, werden möglicherweise nie vorab abgerufen.

Mit der vorausschauenden Vorab-Datenübertragung werden diese Probleme gelöst, indem anhand eines Berichts zu den Navigationsmustern der Nutzer ermittelt wird, welche Assets vorab heruntergeladen werden sollen.

Beispiel für Vorab-Caching

Vorhersagebasiertes Prefetching mit Guess.js

Guess.js ist eine JavaScript-Bibliothek, die eine Funktion für die vorausschauende Vorab-Datenübertragung bietet. Guess.js verwendet einen Bericht aus Google Analytics oder einem anderen Analyseanbieter, um ein Prognosemodell zu erstellen, mit dem nur das vorab abgerufen werden kann, was der Nutzer wahrscheinlich benötigt.

Guess.js bietet Integrationen für Angular, Next.js, Nuxt.js und Gatsby. Wenn Sie es in Ihrer Anwendung verwenden möchten, fügen Sie Ihrer 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 Einbindung von Guess.js in Ihr bevorzugtes Framework finden Sie in den folgenden Ressourcen:

In diesem Video finden Sie eine kurze Anleitung zur Integration mit Angular:

Wie funktioniert Guess.js?

So implementiert Guess.js die vorausschauende Vorab-Datenübertragung:

  1. Zuerst werden Daten zu den Navigationsmustern der Nutzer von Ihrem bevorzugten Analyseanbieter extrahiert.
  2. Anschließend werden die URLs aus dem Bericht den von webpack generierten JavaScript-Chunks zugeordnet.
  3. Anhand der extrahierten Daten wird ein einfaches Prognosemodell erstellt, das vorhersagt, auf welche Seiten ein Nutzer von einer bestimmten Seite aus wahrscheinlich weitergeleitet wird.
  4. Es ruft das Modell für jeden JavaScript-Chunk auf und prognostiziert die anderen Chunks, die wahrscheinlich als Nächstes benötigt werden.
  5. Es fügt jedem Chunk Anweisungen für das Vorabladen hinzu.

Wenn Guess.js fertig ist, enthält jeder Block Anweisungen zum Vorabladen, die in etwa so aussehen:

__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 zu laden.

Sobald der Browser den Code ausgeführt hat, 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 der Nutzer ein Hochgeschwindigkeitsnetzwerk nutzt, werden beide Chunks von Guess.js vorab abgerufen. Wenn der Nutzer eine schlechte Netzwerkverbindung hat, wird mit Guess.js nur Chunk b.js vorab abgerufen, da mit hoher Wahrscheinlichkeit davon auszugehen ist, dass er benötigt wird.

Weitere Informationen

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