Wie können Sie Ihre langsamsten Seiten mit Prefetching beschleunigen?

03 Juni Wie können Sie Ihre langsamsten Seiten mit Prefetching beschleunigen?

Wenn Sie eine E-Commerce-Webseite betreiben, sollte Ihre allerwichtigste Aufgabe in diesem Jahr die Verbesserung der Geschwindigkeit sein. Leistungsverbesserungen können sehr zeitaufwändig und teuer sein, es gibt jedoch einige schnelle Lösungen, die einen großen Unterschied machen.

Die Seitengeschwindigkeit spielt als Rankingfaktor eine immer größere Rolle, insbesondere nachdem das Google Chrome-Team bekannt gegeben hat, dass es Webseiten mit langen Ladezeiten in diesem Jahr in eine peinliche Lage versetzen wird. In November 2019 schrieb Google in seinem Chromium Blog Folgendes:

Chrome plant, in Zukunft Webseiten zu identifizieren, die für Benutzer mit eindeutigem Badging typischerweise kurze oder lange Ladezeiten haben. Da dies unterschiedliche Formen annehmen kann, wollen wir mit verschiedenen Optionen experimentieren, um festzustellen, welche für unsere Nutzer den größten Nutzen bringt. 

Die Hauptaufgabe von Badging besteht darin, zu ermitteln, wann Webseiten auf eine Art und Weise erstellt werden, die sie im Allgemeinen langsam macht, indem die historischen Ladelatenzen näher betrachtet werden. Beim nächsten Schritt könnte dies erweitert werden, um zu ermitteln, wann eine Webseite für einen Benutzer aufgrund seiner Geräte- und Netzwerkbedingungen wahrscheinlich langsam ist.

Google beabsichtigt, langsam ladende Webseiten zu identifizieren. Quelle: Chromium Blog.

Dieser Beitrag verschafft einen kurzen Überblick darüber, wie die langsamsten Seiten ermittelt und mithilfe einer einfachen Korrektur beschleunigt werden können. 

In Google Analytics gibt es einen Bericht über die langsamsten Seiten einer Webseite und wie Nutzer zu ihnen gelangen. Nachfolgend wird betrachtet, wie man Webbrowser anweisen kann, solche Seiten vorab abzurufen, so dass sie, wenn Benutzer darauf klicken, wirklich sehr schnell geladen werden. 

Langsam ladende Webseiten

Gehen Sie in Ihrem Account in Google Analytics zu Behavior > Site Speed > Page Timing, wählen die passende Datenansicht (Rasteransicht) aus und sortieren die Spalten nach “Avg. Page Load Time”. 

Zur Ermittlung der langsam ladenden Seiten gehen Sie in Google Analytics zu Behavior > Site Speed > Page Timings. 

Dabei werden die langsamsten Seiten zuerst angezeigt. Wenn der erweiterte E-Commerce aktiviert ist, wird in der letzten Spalte „Page Value“ der Umsatz für jede einzelne Seite normalisiert. Es ist eine gute Metrik, mit der Händler die Seiten priorisieren können, auf die sie sich konzentrieren sollen. 

Beim nächsten Schritt muss der interne Pfad festgestellt werden, der die Besucher zu den langsamsten Seiten führt. Bevor dafür ein benutzerdefinierter Bericht erstellt wird, betrachten wir zunächst typische Benutzerpfade unter Behavior > Behavior Flow.

 Dieser Bericht stellt die beliebtesten Wege der Besucher dar und hilft Ihnen zu verstehen, welche Seiten zu den größten Besucherabbrüchen führen.

Der Bericht unter Behavior > Behavior Flow gibt einen Überblick über typische Benutzerpfade. 

Als nächstes erstellen Sie einen benutzerdefinierten Bericht. Dazu gehen Sie zu Customization > Custom Reports > New Custom Report. Benennen Sie den Bericht – im nachfolgenden Screenshot wurde der Titel “Slow Page Paths” verwendet. Als Dimensionen wählen Sie “Previous Page Path”, “Page” und “Exit Page” und für Metriken “Page Value” und “Avg. Page Load Time” aus. 

Erstellung eines benutzerdefinierten Berichts unter Customization > Custom Reports > New Custom Report. 

Dieser Bericht ähnelt dem obigen Bericht unter Behavior > Site Speed > Page Timings, unterscheidet sich jedoch dadurch, dass er die vorherige Seite in einer typischen Benutzersitzung enthält.

In den benutzerdefinierten Bericht in Google Analytics ist die vorherige Seite in einer typischen Benutzersitzung eingeschlossen. 

Der nächste Schritt ist die Anwendung eines leistungsfähigen Konzepts: Hinweise für Webbrowser.

Hinweise für Webbrowser

Bei „Hinweisen“ handelt es sich um eine Art Anweisungen für Webbrowser, Seitenressourcen und Links im Voraus zu laden. Dieses Verfahren hilft Ihnen, die Seitengeschwindigkeit erheblich zu verbessern. Beachten Sie, dass nicht jeder Browser jeden Hinweis unterstützt. Betrachten wir die drei der beliebtesten: „Preloading“ (Vorladen), „Prefetching“ und „Prerendering“ (Vorrendern).

Beim Vorladen sieht Code im HEAD des HTML-Dokuments wie folgt aus: 

Das Vorladen ist eine Methode, bei der Ressourcen (z.B. Skriptdateien, Bilder, Stylesheets) im Voraus geladen werden, indem sie im lokalen Cache des Browsers gespeichert werden. Schriftarten sind ein hervorragendes Beispiel für spät entdeckte Ressourcen, die abgerufen werden müssen. Sie stehen häufig am Ende einer von mehreren CSS-Dateien, die von einer Seite geladen werden. Bei dieser Methode lädt der Browser weder CSS-Dateien und dann Schriftarten herunter, sondern lädt die Schriftart im Hintergrund herunter und stellt sie bei Bedarf zur Verfügung. 

Auf CanIUse.com können Sie weitere Informationen zum Vorladen und zu den Browsern finden, die diese Methode unterstützen.

Beim Prefetching sieht Code im HEAD des HTML-Dokuments wie folgt aus: 

Dieser Hinweis informiert den Webbrowser über Ressourcen, die möglicherweise im Rahmen einer zukünftigen Navigation oder Benutzerinteraktion benötigt werden. Diese Ressourcen werden mit der niedrigsten Priorität in Chrome abgerufen, wenn die aktuelle Seite geladen ist und Bandbreite zur Verfügung steht. 

In diesem Beitrag wird nachfolgend gezeigt, wie mit dem Prefetching langsame Seiten beschleunigt werden können. 

Hier können Sie mehr über das Prefetching und die Browser, die es unterstützen, erfahren.

 Die Technik Prerendering (etwa Vorrendern) war früher sehr mächtig, gilt jedoch heutzutage als veraltet. Es ermöglichte, Ressourcen auf einer Zielseite vorab abzurufen und zu rendern. Beim Prerendering sieht Code im HEAD des HTML-Dokuments wie folgt aus: 

Beachten Sie, dass das Vorrendern zum hohen Ressourcenaufwand führen kann, wenn Chrome beispielsweise auf einer Seite auf einen Hinweis zum Vorrendern stößt und einen „No State Prefetch“ ausführt. Er ist zwar ähnlich, führt jedoch kein JavaScript oder verwandtes Rendering aus. 

Hier können Sie mehr über das Vorrendern und die Browser, die es noch unterstützen, erfahren.

Sequenzvorhersagen schnell machen

Die Anweisung kann manuell eingefügt werden, um den Browser aufzufordern, die langsamsten bestehenden Seiten vorab abzurufen. Die oben beschriebenen Google Analytics-Berichte liefern notwendige Informationen, welche Seiten diesen Link setzen sollen. 

In unserem Beispielbericht wurden jedoch etwa 20.000 mögliche Sequenzen bestimmt. Es könnte sehr aufwendig sein, die Anweisungen in alle einzufügen! 

Um diesen Aufwand zu vermeiden, kann ein Modell mit der vorherigen Seite und der aktuellen Seite erstellt werden, das die nächste Seite vorhersagt, zu der der Benutzer wahrscheinlich übergeht. Dann kann diese Seite vorab abgerufen werden. 

Um genaue Sequenzenvorhersagen zu machen, können Sie ein hochentwickeltes neuronales Netzwerk trainieren, was sehr kompliziert ist, oder eine schnellere und einfachere Methode wie ein Compact Prediction Tree (CPT) anwenden. Dieses Konzept wurde von drei Informatikprofessoren entwickelt und kann kurz wie folgt beschrieben werden: 

Bei einer Reihe von Trainingssequenzen besteht die Aufgabe der Sequenzvorhersage darin, die vorherigen Elemente einer Zielsequenz zu beobachten, um ihr nächstes Element zu finden. Es gibt eine Unmenge an Anwendungen, die mit dieser Aufgabe verbunden sind. Dies sind Anwendungen wie das Vorabrufen von Webseiten, Börsenvorhersagen, Empfehlungen für Verbraucherprodukte und Wettervorhersagen. 

Ein JavaScript zur Implementierung des CPT-Algorithmus finden Sie in einem Github-Repository.

Dies wird relativ leicht ausgeführt: Man fügt die Trainingsdaten ein, gibt ein Ziel für die Vorhersage an und bekommt die besten Ergebnisse zurück.

Betrachten Sie nachfolgend ein Beispiel für Trainingsdaten aus unserem benutzerdefinierten Google Analytics-Bericht: 

Eine Zielseite könnte wie folgt getestet werden:

Und eine Vorhersage würde auf folgende Art und Weise aussehen:

Alles zusammensetzen

Um diese Aufgabe zu vereinfachen, sollte man in alle Seiten eine JavaScript-Datei einfügen (oder die Seiten, die zu denjenigen führen, die verbessert werden sollen). Im Skript würde der aktuelle Seitenverweispfad, der Pfad der aktuellen URL, ermittelt und die nächste Seite vorhergesagt, zu der der Benutzer am wahrscheinlichsten übergehen wird. 

Danach wird einfach ein oder mehrere Browser-Hinweise mit den Vorhersagen eingefügt. 

Code, mit dem dies getan wird, kann man auch auf Github finden.

Mit dieser Zeile wird die Bibliotheksdatei importiert. 

Es gibt einige Probleme mit dem Originalcode im Repository, aber dank einer index.js Datei von David Sottimano, einem Berater für digitales Marketing, können die Dateien so geändert werden, dass sie als ein einzelnes Skript funktionieren.