Spekulatives Laden ist in WordPress verfügbar

Während unseres Webinars zum Thema „Seiten sofort laden“ Anfang 2024 erwähnte Adam Silverstein von Google, dass das WordPress Performance-Team an einem Plugin arbeitet, das die Speculation Rules API ermöglicht:

Spulen wir vor bis zum April 2024, als WordPress Speculative Loading offiziell veröffentlichte, ein Leistungs-Plugin, das die Speculation Rules API unterstützt.

Bevor wir jedoch darauf eingehen, finden Sie hier einen kurzen Überblick über die Speculation Rules API.

Spekulationsregeln-API erklärt

Die folgenden Absätze sind eine kurze Erläuterung der Speculation Rules API von Google. Wenn Sie tiefer eintauchen möchten,lesen Sie unseren speziellen Artikel.

Die Speculation Rules API ist eine experimentelle Technologie, die von Google entwickelt wurde, um die Leistung zukünftiger Seitennavigation zu verbessern. Aufbauend auf den allgemein verfügbaren Ressourcenhinweisen link rel=prefetchundl ink rel=prerenderbietet diese JSON-definierte API Entwicklern und Websitebesitzern eine flexiblere und aussagekräftigere Möglichkeit, anzugeben, welche Dokumente vorab abgerufen oder vorgerendert werden sollen.

Sie können den spekulativen Ladetyp (Prefetch oder Prerender) einfach in Inline festlegen Elemente und externe Textdateien, auf die im Speculation-Rules-Antwortheader verwiesen wird.

Sie haben zwei Möglichkeiten, die Speculation Rules API zu aktivieren:

1. URL-Muster verwenden: Definieren Sie, welche URLs für Prefetch oder Prerender in Frage kommen.
   
2. Geben Sie den Grad der „Eiferigkeit“ an: Verwenden Sie die Einstellung „Eiferigkeit“, um anzugeben, wann die Spekulationen ausgelöst werden sollen – „Eifrig“ löst die Spekulationsregeln aus, sobald sie beachtet werden; „moderat“ führt Spekulationen durch, wenn Sie 200 Millisekunden lang mit der Maus über einen Link fahren; „Konservativ“ spekuliert auf Pointer oder Touchdown

So geben Sie den Grad der „Eifrigkeit“ an

Ob Sie eine Seite vorab abrufen oder vorrendern, hängt von den Leistungsverbesserungen ab, die Sie erreichen möchten:

Prefetch weist den Browser an, den Antworttext der referenzierten Seiten herunterzuladen, nicht jedoch die von der Seite referenzierten Unterressourcen. Wenn ein Benutzer zu einer vorab abgerufenen Seite navigiert, wird diese schneller als gewöhnlich geladen.

Prerender hingegen weist den Browser an, den gesamten Inhalt, einschließlich Unterressourcen und JavaScript, abzurufen, zu rendern und in einen unsichtbaren Tab zu laden. Dieses Vorabladen von Ressourcen führt zu einem nahezu sofortigen Erlebnis, wenn der Benutzer zur Seite navigiert.

Obwohl die Leistungsvorteile von Prerender deutlicher sind, sollten Sie diese Ladetechnologie sparsam einsetzen. Das Vorrendern beansprucht viel Speicher und Netzwerkbandbreite, was zu einer Verschwendung von Ressourcen führen kann, wenn der Benutzer nicht zur Seite navigiert.

Umgekehrt sind die Vorabkosten eines Prefetch viel geringer als die eines Prerenders, sodass Sie Prefetch breiter einsetzen können.

Prerendering und Prefetching in WordPress

Dank der Resource Hints API können WordPress-Benutzer seit Jahren Link- Tags zum Vorabrufen oder Vorrendern von Ressourcen in HTML-Dokumenten einfügen.

Der Verwendung von Tags mangelt es jedoch an Flexibilität, da URLs frühzeitig angegeben werden müssen, was zu potenzieller Ressourcenverschwendung oder verpassten Leistungssteigerungen führt. Darüber hinaus bieten dynamische Lösungen, die Link- Tags basierend auf der Sichtbarkeit im Ansichtsfenster einfügen, mehr Flexibilität, können aber dennoch zu übermäßigem Prefetching führen.

Angesichts all dieser Einschränkungen war das Performance-Team hochmotiviert, eine bessere Lösung zu finden …

Spekulatives Laden: Das neue WordPress-Performance-Plugin

Speculative Loading ermöglicht das Vorabrendern oder Vorabrufen anderer auf der Seite verlinkter Frontend-URLs.

Sobald das Plugin aktiviert ist, fügt es automatisch ein JSON-Skript ein und rendert alle URLs auf der Seite mit einem „mäßigen“ Eifer vor.

Sie können dieses Standardverhalten ganz einfach ändern und über den Abschnitt „Spekulatives Laden“ im Bildschirm „Einstellungen > Lesen “ modifizieren:

Quelle:WordPress

Darüber hinaus können Sie mithilfe eines Filters namens „plsr_speculation_rules_href_exclude_paths“ anpassen, welche URLs spekulativ vorab geladen werden sollen. Beispielsweise können Seiten, die aufgrund von Benutzeraktionen (z. B. Warenkorb) geändert wurden, vom Vorabrendern oder Vorabrufen ausgeschlossen werden.

Hier ist ein Codebeispiel des Filters:

Quelle:WordPress

So testen und senden Sie Feedback

Das WordPress Performance-Team ermutigt mehr Menschen, das neue Plugin zu testen, da sie darüber nachdenken, die Funktion in Zukunft in den WordPress-Kern aufzunehmen.

So können Sie ihnen helfen:

• Installieren und aktivieren Sie das Speculative Loading-Plugin auf Ihrer Website über WP Admin oder das Performance Lab-Plugin.
• Probieren Sie verschiedene Konfigurationen über den Abschnitt „Spekulatives Laden“ unter Einstellungen > Lesen aus.
• Debuggen Sie, wie die vom Plugin hinzugefügten Regeln spekulatives Laden auslösen, um die Funktion besser zu verstehen und potenzielle Fehler zu finden.
• Melden Sie Feedback oder Fehler im GitHub-Repository oder in den Support-Foren des Plugins.
• Integrieren Sie Ihre Plugins mit dem Filter „plsr_speculation_rules_href_exclude_paths“, um bestimmte URLs vom Prefetching und/oder Prerendering auszuschließen.
  

Navigation AI von NitroPack: Die automatisierte Lösung für sofortige Seitenerlebnisse

Navigation AI von NitroPack ist ein KI-gestützter Web-Performance-Optimierer, der das Benutzerverhalten automatisch vorhersagt und analysiert, um ganze Seiten während der Customer Journey vorab darzustellen.

Aufbauend auf der Speculation Rules API ermöglicht die berührungslose Lösung Entwicklern und Websitebesitzern die Bereitstellung eines sofortigen Surferlebnisses durch:

1. Anwenden von KI-gestützten anfänglichen Vorhersagen zum Laden der Seite basierend auf Daten, ohne diese (noch) an die Speculation Rules API zu übergeben;
2. Analysieren des Benutzerverhaltens, Anpassen der Vorhersagen und Anweisen der Speculation Rules API, eine Seite vorab zu rendern (oder vorab abzurufen), sobald wir sicher sind, wie die folgende Aktion aussehen wird.

Diese Kombination aus künstlicher Intelligenz und der Speculation Rules API von Google führt zwangsläufig zu beeindruckenden Leistungsergebnissen:

• Ladezeiten unter 3 Sekunden.
• Massive Verbesserungen bei LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift)
• Bessere Core Web Vitals für die gesamte Website

Wenn Sie Ihre Besucher also davon beeindrucken möchten, wie schnell Ihre Seiten laden …

Tragen Sie sich auf die Warteliste für Navigation AI ein und bereiten Sie Ihre Website auf sofortige Benutzererlebnisse vor →

FAQs

Verwendet das Speculative Loading-Plugin in WordPress KI?

Nein, das Speculative Loading-Plugin basiert nicht auf künstlicher Intelligenz (KI). Es nutzt die Speculation Rules API von Google, fügt ein JSON-Skript in alle auf der Seite verlinkten URLs ein und rendert sie mit der Eiferigkeitskonfiguration „moderat“ vor.

Welche Seiten sind für spekulatives Laden geeignet?

Sie können spekulative Ladestrategien auf alle Seiten anwenden, die nicht durch Benutzeraktionen geändert werden. Eine gute Faustregel besteht darin, das Vorabrendern oder Vorabrufen von Checkout- und Warenkorbseiten zu vermeiden, da dies zu einer schlechten Benutzererfahrung führen kann. Darüber hinaus empfiehlt Google nur dann, Präventivseiten zu verwenden, wenn eine hohe Wahrscheinlichkeit besteht (mehr als 80 % der Zeit), dass Nutzer sie laden.

Welche Browser unterstützen die Speculation Rules API?

Während die Speculation Rules API in Chrome und Edge seit Version 109 verfügbar ist, ist die spezielle Unterfunktion „Dokumentregeln“, mit der der Browser die Liste der URLs zum spekulativen Laden von Elementen auf einer Seite abrufen kann, in Chrome 121 verfügbar. Mit anderen Worten: Benutzer müssen entweder Chrome 121+ oder Edge 121+ verwenden, um alle Vorteile der Speculation Rules API nutzen zu können.

Wie geht Google Analytics mit spekulativem Preloading um?

Wenn Sie Google Analytics verwenden, müssen Sie nichts tun, da GA das Prerender standardmäßig durch Verzögerung bis zur Aktivierung übernimmt. Bei anderen Tools können vorgerenderte Seiten jedoch Auswirkungen auf die Analyse haben, und Websitebesitzer müssen möglicherweise zusätzlichen Code hinzufügen, um bei der Aktivierung nur Analysen für vorgerenderte Seiten zu ermöglichen. Dies könnte durch die Verwendung eines Promise erreicht werden, das auf das prerenderingchange- Ereignis wartet, wenn ein Dokument vorab gerendert wird.