So verwenden Sie die Spekulationsregel-API zum sofortigen Laden von Webseiten

Das Jahr 2024 zeichnet sich als die Zeit ab, in der das sofortige Laden zum neuen Standard für die Web-Performance wird und Online-Geschäftsinhaber aufmerksam sind.

Der Übergang von schnell zu sofort ist allerdings schon seit einiger Zeit in Arbeit.

Bereits 2009 führte das Streben nach schnellerem und effizienterem Laden von Seiten dazu, dass das Chromium-Team die ersten Ressourcenhinweise erstellte, zu denen später der Link rel=“prerender“ hinzugefügt wurde.

Es wurde erwartet, dass dies erhebliche Auswirkungen auf die Leistung haben würde, da nachfolgende Seiten im Hintergrund geladen werden mussten, bevor ein Benutzer zu ihnen navigiert, wodurch ein schnelleres Rendern beim Übergang gewährleistet wurde.

Diese Version des Vorrenderings erwies sich jedoch als nicht effizient genug und wurde 2017 eingestellt.

Heute hat Google vielversprechende Weiterentwicklungen seiner Speculation Rules API auf den Markt gebracht, die einen ausgefeilteren Ansatz für das vollständige Prerendering und die Ermöglichung eines wirklich nahtlosen Webbrowsings ermöglichen.

Was ist die Speculation Rules API von Google?

Die Speculation Rules API ist eine JSON-definierte API, die von Google entwickelt wurde, um die Leistung beim Laden von Webseiten durch spekulative Ladestrategien zu verbessern.

Beim spekulativen Laden werden Ressourcen für nachfolgende Seitennavigation vorhergesagt und vorab geladen, was zu schnelleren Renderzeiten und einer verbesserten Benutzererfahrung führt. Google hat diese API eingeführt, um Entwicklern eine flexiblere und aussagekräftigere Möglichkeit zu bieten, anzugeben, welche Dokumente vorab abgerufen oder vorgerendert werden sollen.

Wichtige Details zur Speculation Rules API:

• Ausrichtung auf Dokument-URLs: Im Gegensatz zu herkömmlichen Prefetching-Mechanismen, die auf bestimmte Ressourcendateien abzielen, konzentriert sich die Speculation Rules API auf Dokument-URLs. Dadurch eignet es sich besonders für mehrseitige Anwendungen (MPAs) statt für einseitige Anwendungen (SPAs).

• Prerendering und Prefetching: Die API unterstützt sowohl Prerendering- als auch Prefetching-Strategien. Beim Vorrendern werden Inhalte abgerufen, gerendert und in einen unsichtbaren Tab geladen, der nahezu sofort aktiviert werden kann, wenn der Benutzer zur Seite navigiert. Beim Prefetching hingegen werden die angegebenen Seitenressourcen (z. B. Dokument, Bild, Skript usw.) heruntergeladen und gespeichert, wodurch die Ladezeiten optimiert werden, wenn der Benutzer später zu diesen Seiten navigiert.

• Browserunterstützung: Die API ist derzeit mit allen Chromium-basierten Browsern kompatibel, einschließlich Chrome, Edge, Opera, Chrome Android, Opera Android und WebView Android. Eine vollständige Kompatibilitätsaufschlüsselung finden Sie in der Dokumentation von Mozilla:

Sie können auch mit dem folgenden Code überprüfen, ob die Browser die API unterstützen:

• Alternative zu veralteten Funktionen: Sie dient als Alternative zu älteren Technologien wie der veralteten Nur-Chrome- Funktion und bietet eine bessere Leistung und eine ausdrucksstärkere Syntax.
• Berücksichtigung der Sicherheit: Für standortübergreifende Vorabrufe gelten Einschränkungen zum Schutz der Privatsphäre der Benutzer. Cross-Site-Prefetching funktioniert nur, wenn der Benutzer keine Cookies für die Zielsite gesetzt hat, wodurch eine mögliche Nachverfolgung der Benutzeraktivität verhindert wird.
  

Warum sollten Sie die Speculation Rules API auf Ihrer Website verwenden?

Die Speculation Rules API ermöglichtnahezu sofortiges Laden von Seiten für ein nahtloses Surferlebnis.

Verbesserte Seitenladezeiten,höhere Benutzerzufriedenheit und potenzielle SEO-Vorteilesind überzeugende Gründe für Entwickler, diese Technologie zu nutzen.

Durch die Reduzierung der Latenz zwischen Seitennavigation empfinden Benutzer die Website als flüssiger und reaktionsschneller. Dies wird deutlich inden Core Web Vitals Ihrer Website sichtbar, wo Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP) drastisch abnehmen.

Mit sofortigen Browsing-Erlebnissen gehen niedrigere Absprungraten und eine höhere Benutzerbindungeinher – wichtige Kennzahlen für den Erfolg Ihrer Online-Plattform. Dies unterstreicht den strategischen Wert der Integration der Speculation Rules API.

Wie funktioniert die API für Spekulationsregeln?

Die Speculation Rules API von Google ist für die Ausrichtung auf Dokument-URLs und nicht für bestimmte Ressourcendateien konzipiert. Die Speculation Rules API führt eine aussagekräftigere und konfigurierbarere Syntax ein, um anzugeben, welche Dokumente vorab abgerufen oder vorgerendert werden sollen.

Mit einer im JSON-Format definierten Struktur innerhalb eines Skripts vom Typ „speculationrules“ können Entwickler Regeln sowohl für das Prerendering als auch für das Prefetching formulieren. Diese verbesserte Flexibilität ermöglicht eine Feinabstimmung des spekulativen Ladens.

Kürzlich hat Google eine neue Erweiterung der Speculation Rules API in Chrome 121 angekündigt, die nun die Option zur automatischen Linksuche bietet.

Dies geschieht durch:

• Angabe der Dokumentquelle
• Auswählen von Links auf der Seite basierend auf URLs oder CSS-Selektoren
• Angabe eines Grads an „Eifer“ – eifrig (sofort), mäßig (beim Schweben von 200 ms) und konservativ (beim Bewegen der Maus oder beim Aufsetzen)

Wenn Sie jedoch neu bei der Speculation Rules API sind, empfehlen wir Ihnen, zunächst die verschiedenen Setups unten zu testen.

So verwenden Sie die Speculation Rules API von Google

Mit der Speculation Rules API können Entwickler einen strukturierten Ansatz zur Optimierung der Prerendering- und Prefetching-Prozesse verfolgen.

Aufstellen

Es beginnt mit der Erstellung eines Skripttyps „speculationrules“-Elements und der Definition von Spekulationsregeln in einer darin enthaltenen JSON-Struktur.

Spekulationsregeln können entweder im Kopf oder im Körper des Hauptrahmens hinzugefügt werden.

Wichtig: Auf Spekulationsregeln in Subframes wird nicht reagiert, und auf Spekulationsregeln in vorgerenderten Seiten wird erst dann reagiert, wenn ein Benutzer zur Seite selbst navigiert.

Spekulationsregeln können entweder statisch oder dynamisch eingebunden werden.

• Die statische Einrichtung erfolgt im HTML der Seite (ideal für Websites, bei denen die nächste Aktion mit hoher Sicherheit erfolgt, z. B. möchte eine Nachrichten-Website möglicherweise das Highlight für den Tag vorab rendern).
• Die dynamische Einrichtung erfolgt über JavaScript (geeignet für Websites, auf denen personalisierte Benutzererlebnisse stark genutzt werden)

Wichtig: Wenn Sie sich für das dynamische Setup entscheiden, schauen Sie sich immer die Support-Dokumentation für zukünftige Entwicklungen und Anwendungsfälle an, die möglicherweise in der Zukunft verfügbar sein werden.

Um dem Browser mitzuteilen, welche URLsvorab gerendert werden sollen, können Sie JSON-Anweisungen in Ihre Seiten einfügen:

Fügen Sie auf ähnliche Weise die folgenden JSON-Anweisungen zum Vorabrufen ein:

Es ist möglich, einer Seite mehrere Spekulationsregeln hinzuzufügen. In diesem Fall würden Sie den Browser auf einer der folgenden Ebenen anweisen:

• Liste der URLs
• Mehrere Spekulationsregeln
• Mehrere Listen innerhalb eines Satzes von Spekulationsregeln
  

Angeben von Routen für Prerender/Prefetch

Die Feinabstimmung des spekulativen Ladens umfasst die Angabe von Routen für das Vorrendern und Vorabrufen. Durch die Kategorisierung von Seiten nach Bedeutung oder Wahrscheinlichkeit der Benutzernavigation können Entwickler die Strategie des spekulativen Ladens optimieren.

Es gibt jedoch einige Routen, die als unsicher gelten, wie zum Beispiel:

• Abmelde-URLs;
• URLs zur Sprachumschaltung;
• „In den Warenkorb“-URLs;
• Anmeldefluss-URLs, bei denen der Server den Versand einer SMS anfordert, z. B. wenn eine Zwei-Faktor-Authentifizierung (2FA) erforderlich ist;
• URLs, die das serverseitige Anzeigen-Conversion-Tracking initiieren;
• URLs, die die Nutzungsbeschränkungen eines Benutzers auslösen, beispielsweise durch Nutzung seines monatlichen Kontingents an kostenlosen Artikeln.

Ähnlich wie beim Ausschließen solcher Seiten aus dem Caching hängt der Grund dafür, das Vorabrufen und Vorrendern zu vermeiden, mit dynamischen Variablen zusammen.

Hierbei handelt es sich um inhaltsempfindliche Seiten, deren Werte auf der Grundlage von Benutzeraktionen aktualisiert werden. Durch das Vorabladen im Hintergrund ist das Risiko sehr hoch, dass ein veralteter Status der Seite angezeigt wird.

Genauigkeit und Kompromisse

Wie Barry Pollard in unserem Webinar zum Thema „Seiten sofort laden“ erwähnte:

Während Prefetching der sicherste Ansatz ist, den Sie auf vielen Ihrer Webseiten duplizieren können, bietet es auch den geringsten Nutzen, da es nur das Herunterladen bestimmter Ressourcen erfordert.

Ganzseitige Vorrenderer hingegen bieten höhere Vorteile, sollten jedoch sparsam eingesetzt werden, da sie Folgendes können:

• Überlasten Sie den Browser, da er nur eine begrenzte Anzahl von Aufgaben im Hintergrund ausführen kann.
• Verbrauchen Sie erhebliche Bandbreiten- und CPU-Ressourcen, was bei Benutzern in langsameren Netzwerken oder auf Geräten mit begrenzten Ressourcen zu Leistungseinbußen führen kann.
• Führt zu einer höheren Ressourcenverschwendung, wenn der Besucher nicht zur Seite navigiert.

Um das Vorrendering richtig einzurichten, sollten Sie das Verhalten Ihrer Benutzer berücksichtigen und gängige Navigationen auf Ihrer Website analysieren. Mithilfe von Heatmaps und Google Analytics-Flussdiagrammen können Sie wichtige Routen identifizieren und Ihre prädiktiven Ladeexperimente starten.

Um zu überprüfen, ob eine Seite vorgerendert wurde, verwenden Sie einen Aktivierungsstart-Eintrag ungleich Null von PerformanceNavigationTiming . Dies kann dann mithilfe einer benutzerdefinierten Dimension protokolliert werden:

Auf diese Weise können Sie das Verhältnis zwischen Prerender und anderen Navigationstypen abschätzen.

Darüber hinaus ist es wichtig, die Anzahl der vorab gerenderten Seiten zu messen, die anschließend nicht besucht werden, um Spekulationsregeln zu optimieren und höhere Trefferquoten sowie eine geringere Ressourcenverschwendung zu erreichen.

Sie können dies entweder tun, indem Sie ein Analyseereignis auslösen, wenn Spekulationsregeln eingefügt werden, um anzugeben, dass ein Vorrendering angefordert wurde. Vergleichen Sie dann die Anzahl dieser Ereignisse mit den tatsächlichen Seitenaufrufen vor dem Rendern.

Oder du kannst…

Erwägen Sie das automatisierte Seiten-Prerendering mit Navigation AI von NitroPack

Navigation AI ist der KI-gestützte Webbrowser-Optimierer von NitroPack, der das Benutzerverhalten aktiv vorhersagt und analysiert, um vollständige Seiten während der Customer Journey vorab anzuzeigen.

Navigation AI ermöglicht es Websitebesitzern, sofortige Browsing-Erlebnisse auf Desktop- und Mobilgeräten anzubieten, ohne eine einzige Codezeile schreiben zu müssen , was die Kundenbindung und Konversionsraten steigert.

Hinweis: Navigation AI ist ein separates Produkt, aber es ist zu 100 % mit NitroPack kompatibel und erweitert die Vorteile für Websitebesitzer noch weiter.

Tragen Sie sich auf die Warteliste für Navigation AI ein und schalten Sie sofortige Benutzererlebnisse auf Ihrer Website frei →

Navigation AI von NitroPack baut auf der Speculation Rules API auf und bietet eine automatisierte Lösung zur Erzielung einer hohen Trefferquote und Ressourceneffizienz in Pre-Rendering-Szenarien.

Durch die Anwendung KI-gestützter anfänglicher Vorhersagen zum Seitenaufruf auf der Grundlage von Daten und der Analyse des Benutzerverhaltens kann Navigation AI die Vorhersagen anpassen und die Speculation Rules API genau anweisen, Seiten, die tatsächlich besucht werden, vorab darzustellen.

Das Ergebnis ist ein sofortiges Laden der Seite, da diese Seite bereits im Hintergrund gezeichnet ist. Auf Mobilgeräten basiert die Navigations-KI darauf, zu erkennen, wo sich der Benutzer auf der Seite befindet, und kann aufgrund des kleinen Ansichtsfensters leicht vorhersagen, wo er tippen wird.

Basierend auf 1.200 Websites zeigt Navigation AI bereits spektakuläre Ergebnisse.

• Ergebnis Nr. 1: Webseiten mit Navigations-KI weisen durchweg eine Ladezeit von ~2,86 Sekunden gegenüber 6,12 Sekunden ohne Navigations-KI auf

• Ergebnis Nr. 2: Mit Navigation AI zeigen vorgerenderte Seiten eine LCP-Verbesserung von 85 % (von 3,1 s auf 0,4 s) und eine CLS-Verbesserung von 80 % (von 0,3 s auf 0,06 s).Bei vorab abgerufenen Seiten steigert Navigation AI den LCP um 52 % (von 3,1 s auf 1,5 s).

• Ergebnis Nr. 3: Mit Navigation AI verbessern sich die Leistungskennzahlen für die gesamte Website erheblich: LCP um 15 %, CLS um 8 % und TTFB um 26 %

Erhalten Sie Zugang zu Navigation AI, indem Sie sich auf unsere Warteliste eintragen →

Spekulationsregeln-API und WordPress

In unserem „Instant Page Loading“-Webinar verriet Adam Silverstein, Developer Relations Engineer bei Google, dass das WordPress Core Performance-Team an stabileren Implementierungen der neuen Speculation Rules API arbeitet.

Derzeit liegt der Schwerpunkt weiterhin darauf, Websitebesitzern und Entwicklern im Ökosystem einen kleinen Teil der API-Funktionalität zur Verfügung zu stellen, um die Effizienz und Akzeptanzrate zu testen, bevor sie zu einem Teil des Kerns wird. Folgendes können WordPress-Benutzer bisher nutzen:

• Ein Modul im Performance Lab-Plugin
• Ein eigenständiges Plugin, das nur das Speculation Rules API-Frontend implementiert (wendet die konservative Stufe „Eifrig“ an, aber Entwickler können das Verhalten frei ändern)

WP-Admin-Routen sind standardmäßig ausgeschlossen, aber es liegt an den WP-Entwicklern, die Routen festzulegen, die sie priorisieren möchten.

Das WordPress Core Performance-Team arbeitet auch an ausgefeilteren Implementierungen innerhalb von Plugins im Ökosystem. Dies soll den Entwicklern die schwere Arbeit erleichtern, herauszufinden, welche Routen höchste Priorität haben und welche nicht.

Welche Verbesserungen kommen bei den Spekulationsregeln?

Derzeit sind die Spekulationsregeln auf Seiten innerhalb derselben Registerkarte beschränkt, es werden jedoch Anstrengungen unternommen, diese Einschränkungen zu reduzieren.

Das Vorrendern ist standardmäßig auf Seiten mit demselben Ursprung beschränkt. Allerdings unterstützt ein aktuelles Update in Chrome 119 jetzt das Prerendering für Cross-Origin-Seiten auf derselben Website und erfordert eine Einwilligung über einen HTTP-Header.

Zukünftige Versionen werden das Vorrendern möglicherweise auf Cross-Origin-Seiten ausweiten und es in neuen Registerkarten ermöglichen. Die Spekulationsregel-API soll erweitert werden, um Punkte und Syntax für Dokumentregeln einzuführen und mehr Flexibilität zu bieten, z. B. das Vorrendern von Links beim Herunterfahren der Maus.

Laufende Experimente in Chrome erforschen zusätzliche Funktionen, und Websites können an einem Origin-Test teilnehmen, um potenzielle zukünftige Ergänzungen zu testen und Feedback zu geben.