Speculation Rules API: Der Weg zu sofortigem Seitenladen

Das Speculation Rules API bietet uns die Möglichkeit, eine andere Seite vorzuladen oder sogar vorab zu rendern. Auf diese Weise können wir ein nahezu sofortiges Laden der Seite, zu der der Benutzer wechselt, erreichen und so das Gesamterlebnis auf der Website verbessern.

Einige von Ihnen erinnern sich vielleicht an das ältere prerender (<link rel="prerender">), das jedoch nicht allzu erfolgreich war. In Chrome Version 109 kommt das Speculation Rules API mit völlig neuen Möglichkeiten für das Seitenladen, gefolgt von weiteren Verbesserungen in Version 122. Der allgemeine Support ist recht gut.

Sofortiges Laden hat natürlich Auswirkungen auf alle Metriken der Core Web Vitals: durch die Zeitersparnis beim Laden auf die LCP-Metrik, durch das Halten der Seite im Speicher auf die Layout-Stabilität (CLS) und auch auf die Reaktionsgeschwindigkeit auf Interaktionen (INP).

Prerender unter der Lupe#

Die grundlegende Implementierung von Speculation Rules ist relativ einfach. Mit dem HTML-Tag <script type="speculationrules"> definieren Sie die Regeln für das vorab Rendern von Seiten in JSON. Wenn Sie nicht in das HTML eingreifen können, können Sie die Regeln auch mit JavaScript oder HTTP-Headern auf die Seite bringen.

Im folgenden Beispiel sehen Sie das Vorabrendern einer einfachen Seite mit bestimmten URL-Adressen:

<script type="speculationrules">
	{
		"prerender": [
			{
				"urls": ["next.html", "next2.html"]
			}
		]
	}
</script>

Die Möglichkeiten des Speculation Rules API sind jedoch weit flexibler; Sie können CSS-Selektoren verwenden oder die Bedingung where anwenden. Ein weiteres Beispiel nutzt dies und rendert URL-Adressen im Dokument vor, ohne sie explizit anzugeben, mit Ausnahme der Seiten /logout/*:

<script type="speculationrules">
	{
		"prerender": [
			{
				"source": "document",
				"where": {
					"and": [{ "href_matches": "/*" }, { "not": { "href_matches": "/logout/*" } }]
				},
				"eagerness": "moderate"
			}
		]
	}
</script>

Es ist jedenfalls keine gute Idee, sofortiges prerender für alle Links auf der Seite zu implementieren, da dies die Serverlast erhöht.

Auf Mobilgeräten kann es auch zu einer übermäßigen Belastung von CPU und Speicher kommen. Eine weitere Eigenschaft im Arsenal des Speculation Rules API, eagerness, kann uns helfen, eine ausgewogene Einstellung für das Vorabrendern zu finden.

Der Eagerness-Attribut#

Mit eagerness können Sie verschiedene Zeiträume festlegen, in denen spekulative Regeln angewendet werden.

Sie haben folgende Optionen:

• immediate – Sofortige Ausführung, wenn der Browser auf Ihre Regeln stößt.
• eager – Verhält sich derzeit wie immediate, aber in Zukunft erwarten wir Verbesserungen, sodass eager zwischen immediate und moderate liegen wird.
• moderate – Startet das Vorabrendern, wenn Sie mit der Maus mindestens 200 Millisekunden über einen Link fahren (oder bei einem pointer down-Ereignis, falls dies früher eintritt und auf mobilen Geräten, wo es kein hover-Ereignis gibt).
• conservative – Wird beim pointer down-Ereignis ausgelöst.

Es ist auch wichtig zu erwähnen, dass Chrome unter bestimmten Bedingungen das Ausführen des Speculation Rules API verhindert. Dies ist beispielsweise der Fall, wenn der Nutzer den Energiesparmodus, die Datennutzungssparfunktion, die Speichereinschränkung aktiviert hat oder bei Seiten, die in Hintergrund-Tabs geöffnet sind. Der Nutzer kann das Vorabrendern von Seiten auch explizit in den Browsereinstellungen deaktivieren.

Sie können die Implementierung Ihrer Regeln direkt in den DevTools im Tab Application überprüfen, indem Sie unter Background Services Speculation Loads auswählen:

Testen von Speculative Loads in den DevTools des Chrome-Browsers.

Speculation Rules und der Einfluss auf die Analytik#

Es ist wichtig zu beachten, dass vorab gerenderte Seiten die Messungen in Analysetools verfälschen können. Die Benutzerinteraktion wird möglicherweise nicht korrekt erfasst, wenn die Seite nicht geladen ist. Wir empfehlen, analytische Codes anzupassen, um die Aktivierung der Seite korrekt zu erkennen.

Die gängigsten Analysen wie GA messen Speculation Rules korrekt, aber ansonsten muss man überwachen, wann die Seite dem Benutzer tatsächlich angezeigt wird. Google schreibt mehr zu diesem Thema in seinem Artikel.

Für welche Websites eignet sich das Speculation Rules API?#

Ideale Kandidaten für den Einsatz spekulativer Regeln sind Content-Websites oder E-Commerce-Shops. Bei der Auswahl spezifischer Seiten für Spekulationen sollten Sie immer diejenigen wählen, auf die der Benutzer mit hoher Wahrscheinlichkeit klickt. Solche Daten finden Sie in Analysetools wie Hotjar usw.

Wir können ein paar Tipps anbieten, wo spekulative Regeln eingesetzt werden können:

• In einem E-Shop in den Kategorien für weitere Seiten in der Paginierung.
• Im E-Shop für die nächsten Schritte im Warenkorb.
• Auf einer Content-Website der neueste Artikel auf der Hauptseite.

Vergessen Sie nicht die Möglichkeit, eagerness einzustellen, und beginnen Sie lieber mit einer weniger „aggressiven“ Einstellung wie moderate. Generell empfehlen wir, mit spekulativen Regeln eher sparsam umzugehen, da sie zusätzliche Serverlast verursachen. Bei Nutzern auf Mobilgeräten kann es zu einer übermäßigen CPU- und Speicherauslastung kommen.

Navigation Types: Wie man den Anteil der Seiten mit Prerender misst#

Unser Monitoring PageSpeed.ONE PLUS nutzt Navigation Types, um Änderungen im Anteil der verschiedenen Navigationsarten zu verfolgen. Einer der Typen ist Prerender, in den wir auch das Vorabrendern mit dem Speculation Rules API einbeziehen.

Übersicht der Navigation Types im Monitoring von PageSpeed.ONE PLUS.