Keine Ladezeiten mehr: So nutzt Du die Speculation Rules API

Die in diesem Jahr vorgestellte Speculation Rules API bietet hier extremen Mehrwert bei minimalem Aufwand. Ein Traum für jeden Webseitenbetreiber. Im folgenden Beitrag erfährst Du mehr.

Die Speculation Rules ermöglichen es, Browseraktivitäten vorauszusehen und ganze Seiten im Voraus zu laden, um sie dann bei Bedarf blitzschnell anzuzeigen. Dadurch verbessern sich die Ladegeschwindigkeiten erheblich. Dies hat nicht nur einen positiven Einfluss auf die Benutzererfahrung, sondern trägt auch maßgeblich zur Verbesserung der Core Web Vitals bei, einem Schlüsselindikator für die Leistungsfähigkeit von Websites.

Wir werden Dir alles Wissenswerte über die Speculation Rules API näherbringen, von den grundlegenden Konzepten bis hin zu deren Anwendung, um die Ladegeschwindigkeit Deiner Webpräsenz zu optimieren. Du erfährst, warum die Verwendung dieser API in der modernen Webentwicklung unverzichtbar geworden ist, wie Du mit der Implementierung beginnst und Speculation Rules effektiv erstellen. Darüber hinaus geben wir Dir Einblicke in die Einstellungen für Prerendering und Prefetching und teilen Beispiele sowie Tipps für die Fehlerbehebung. Ziel ist es, Dir die Mittel an die Hand zu geben, damit Du die Vorteile der Speculation voll ausschöpfen kannst, um die Leistung und Benutzererfahrung Deiner Website zu verbessern – auch ganz ohne Entwickler.

Was ist die Speculation Rules API?

Die Speculation Rules API ist eine von Google entwickelte Browser API, die es ermöglicht, regelbasierte Annahmen zu treffen und vermeintliche Zielseiten bereits vor dem Aufruf zu laden. Ruft der User dann eine solche Seite auf, wird sie sofort dargestellt und muss nicht mehr geladen werden.

Die Speculation Rules API führt eine ausdrucksstärkere und konfigurierbarere Syntax ein, um anzugeben, welche Dokumente vorab abgerufen oder vorgerendert werden sollen. Mit einer in JSON-Format definierten Struktur innerhalb eines script type="speculationrules" können Entwickler Regeln sowohl für das Prerendering als auch für das Prefetching formulieren.

Die Speculation Rules selbst können im HEAD oder Body Bereich der jeweiligen Seite platziert werden. Die Regeln selbst können entweder statisch oder dynamisch eingebunden werden.

Warum die Speculation Rules API verwenden?

Die Verwendung der Speculation Rules API bietet zahlreiche Vorteile für Websites und Webanwendungen, um die Ladezeit und das Nutzererlebnis zu verbessern.

Durch das proaktive Laden von Inhalten auf der Grundlage des Nutzerverhaltens können Websites ihre Reaktionsfähigkeit und Benutzerbindung auf ein neues Niveau heben. Die Integration von Speculation Rules sorgt für blitzschnelle Ladezeiten. Der Integrationsaufwand ist minimal und selbst bei Nutzern eines anderen Browsers kann es zu Verbesserungen kommen.

Erhöhte Ladegeschwindigkeit

Spekulatives Laden ist ein entscheidender Faktor bei der Verbesserung der Website-Leistung. Es ist wie ein intelligenter Assistent, der Deinen nächsten Schritt vorhersieht, um die Seiten schneller zu laden und auf Benutzer mit unterschiedlichen Internetgeschwindigkeiten einzugehen. Dieser proaktive Ansatz optimiert die Benutzererfahrung und die Seitenladezeiten und macht Inhalte auf verschiedenen Geräten leicht zugänglich. Das Besondere dabei ist, dass keinerlei komplizierte Caching-Logik angewendet werden muss. Die Speculation Rules sind ein reines Browserfeature und somit ein systemunabhängiger Gamechanger!

Kürzere Ladezeiten bedeuten geringere Absprungraten und eine höhere Verweildauer auf der Website. Darüber hinaus helfen schnelle Seiten bei der Erfüllung der Core Web Vitals. Gegenüber Suchmaschinen sind das natürlich tolle Benefits.

Verbesserte Benutzererfahrung

Die Speculation Rules können in dem sogenannten “eagerness”-Mode laufen. Dieser sorgt dafür, dass dynamisch Seiten vorgeladen werden, die der Nutzer vermutlich besuchen wird. Verweilt der Nutzer nur 300ms auf einem Link, sorgt diese Mikro-Interaktion dafür, dass die dahinterliegende Seite entsprechend vorgeladen wird. Der darauffolgende Klick auf den Link sorgt für das sofortige Anzeigen der Seite. Die Nutzer profitieren von schnelleren Ladezeiten und einer unterbrechungsfreien Navigation, was zu einem erhöhten Engagement führt.

Dieser proaktive Ansatz erhöht nicht nur die Benutzerzufriedenheit, sondern verbessert auch die Leistungskennzahlen einer Website. Gerade Online-Shops, die in der Regel viele Seiten haben und zum Stöbern einladen, profitieren enorm von dieser Dynamik.

Schnelle und günstige Implementierung

Obwohl die Speculation Rules API noch relativ neu und unbekannt ist, gibt es bereits eine große Auswahl an Best Practice Scripts für die meisten großen Systeme wie Magento 2, WordPress oder Shopware. Der Implementierungsaufwand ist im Verhältnis zu dem geschaffenen Business Value extrem gering und demnach allen zu empfehlen. Bevor die Implementierung startet, sollte man sich die eigene Seitenstruktur vor Augen führen. URLs, die relevanten Echtzeitdaten beinhalten oder prozessieren, sollten eher nicht vorgeladen werden. Einfache CMS oder Produktseiten jedoch schon.

Unsupported Browser und Human Cache Warmer

Eingangs wurde erwähnt, dass die Speculation Rules API ein Chrome-Feature ist. Derzeit versteckt sich dieses noch hinter einem “experiment”-Flag und muss aktiviert werden. Auch müssen Browser-Extensions wie uBlock Origin oder ähnliche Ad-Blocker das Vorladen von Seiten zulassen.

Obwohl das schon recht große Hürden sind und sich die Frage stellt, wie viel Auswirkung der Einsatz der Speculation Rules tatsächlich hat, macht es auch aus mindestens einem anderen Grund Sinn. Gerade bei Webseiten, die regelmäßig aktualisiert werden oder bei Shops, die viele Produkte haben, macht es Sinn, die Speculation Rules API zu nutzen. Denn jeder Nutzer mit aktivierten Speculation Rules sorgt automatisch dafür, dass auch nicht besuchte Seiten im Cache landen. Ein menschlicher Cache-Warmer sozusagen.

Erste Schritte mit der Speculation Rules API

Um mit der Speculation Rules API zu beginnen, musst Du zunächst ein script type="speculationrules"- Element erstellen und die Spekulationsregeln in einer JSON-Struktur darin definieren. Die Spekulationsregeln können entweder im Head- oder im Body-Bereich hinzugefügt werden.

Speculation Rules können entweder statisch oder dynamisch eingebunden werden.

Um den Browser darüber zu informieren, welche URLs vorgerendert werden sollen, kannst Du JSON-Anweisungen auf Deinen Seiten einfügen:

{
 "prerender": [
   {
     "source": "list",
     "urls": ["next.html", "next2.html"]
   }
 ]
}

Auf ähnliche Weise fügst Du die JSON-Anweisungen für das Prefetching ein.

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

Voraussetzungen

Bevor Du die Speculation Rules API nutzen kannst, stell’ sicher, dass Dein Browser diese unterstützt. Du kannst die Browserunterstützung mit dem folgenden Code überprüfen:

if (HTMLScriptElement.supports && HTMLScriptElement.supports('speculationrules')) {
  console.log('Your browser supports the Speculation Rules API.');
}

Aktueller Browsersupport

Derzeit wird die Speculation Rules API von den folgenden Browsern unterstützt:

Die Unterstützung in anderen Browsern wird in Zukunft erwartet, da die Speculation Rules API noch in Entwicklung ist und von den Browserherstellern nach und nach implementiert wird.

Erstellen von Speculation Rules

Um Speculation Rules zu erstellen, beginne damit, ein script type="speculationrules"-Element zu erstellen und die Spekulationsregeln in einer JSON-Struktur darin zu definieren. Die Spekulationsregeln können entweder im Head- oder im Body-Bereich des Mainframes hinzugefügt werden.

Es ist wichtig zu beachten, dass Spekulationsregeln in Subframes nicht und Spekulationsregeln in vorgerenderten Seiten erst dann berücksichtigt werden, wenn ein Benutzer zur Seite selbst navigiert.

Spekulationsregeln können entweder statisch oder dynamisch eingebunden werden. Beim dynamischen Setup solltest Du immer auf die Supportdokumentation für zukünftige Entwicklungen und Anwendungsfälle verweisen, die in Zukunft verfügbar werden könnten.

Um den Browser darüber zu informieren, welche URLs vorgerendert werden sollen, kannst Du JSON-Anweisungen auf Deine Seiten einfügen:

{
 "prerender": [
   {
     "source": "list",
     "urls": ["next.html", "next2.html"]
   }
 ]
}

Auf ähnliche Weise fügst Du die JSON-Anweisungen für das Prefetching ein.

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

Definition von Regeln

Die Speculation Rules API ermöglicht es Entwicklern, Regeln mit einer im JSON-Format definierten Struktur innerhalb einer script type="speculationrules" zu konfigurieren, anhand derer der Browser entscheiden kann, welche URLs vorgerendert werden sollen (Mozilla).

Hier ist ein Beispiel, wie die Speculation Rules API funktioniert, indem eine Liste von URLs angegeben wird, die vorabgerufen oder vorgerendert werden sollen:

{
 "prerender": [
   {
     "source": "list",
     "urls": ["https://example.com/page1.html", "https://example.com/page2.html"]
   }
 ]
}

Das Gleiche gilt für das Prefetching, das oft ein guter erster Schritt auf dem Weg zum Prerendering sein kann:

{
 "prefetch": [
   {
     "source": "list",
     "urls": ["https://example.com/script.js", "https://example.com/styles.css"] 
   }
 ]
}

Kürzlich kündigte Google neue Verbesserungen an der Speculation Rules API an, die nun die Möglichkeit der automatischen Linkfindung mithilfe von Dokumentenregeln bietet. Dabei werden URLs auf der Grundlage einer where Bedingung aus dem Dokument abgerufen:

{
 "prerender": [
   {
     "source": "document",
     "where": {
       "href_matches": ["https://example.com/*"],
       "href_excludes": ["https://example.com/login", "https://example.com/admin"]
     },
     "eagerness": "eager"
   }
 ]
}

In diesem Codeschnipsel werden alle URLs auf der Seite für das Prerendering berücksichtigt, mit Ausnahme derer, die zu den Login- und Admin-Seiten führen. Außerdem legst Du eine Stufe von eagerness fest – eager (sofort), moderate (bei einem Hover von 200ms) und conservative (bei Mausberührung oder Touchdown) (Kinsta).

Alternativ oder in Verbindung mit href können auch CSS-Selektoren verwendet werden, um Links auf der aktuellen Seite zu finden:

{
 "prefetch": [
   {
     "source": "document",
     "where": {
       "selectors": ["a[rel=prefetch]"]
     }
   }
 ]
}

Wenn Du die Speculation Rules API verwendest, kannst Du sie mit den Hintergrunddiensten für spekulative Lasten in der Chrome-Anwendungsregisterkarte überprüfen, wenn Du die Seite inspizierst.

Einstellungen für Prerendering und Prefetching

Die Speculation Rules API bietet verschiedene Einstellungen für das Prerendering und Prefetching, die es Entwicklern ermöglichen, das spekulative Laden auf Deine spezifischen Anforderungen abzustimmen. Diese Einstellungen basieren auf der Dringlichkeit und der Benutzerinteraktion und helfen dabei, eine Überbeanspruchung der Ressourcen zu vermeiden.

Sofortige Spekulation (Immediate)

Die Einstellung "immediate" ist nicht von Benutzeraktionen abhängig und hat daher höhere Grenzen. Sie ermöglicht eine dynamische Kapazitätsanpassung, indem ältere Spekulationen entfernt werden. Mit dieser Einstellung können bis zu 50 Prefetch- und 10 Prerender-Anfragen durchgeführt werden.

Eifrige Spekulation (Eager)

Ähnlich wie "immediate" ist auch die Einstellung "eager" nicht von Benutzeraktionen abhängig und bietet höhere Grenzen. Sie ermöglicht ebenfalls eine dynamische Kapazitätsanpassung durch das Entfernen älterer Spekulationen. Mit "eager" können bis zu 50 Prefetch- und 10 Prerender-Anfragen durchgeführt werden.

Moderate Speculations

Im Gegensatz zu "immediate" und "eager" sind die Einstellungen "moderate" und "conservative" benutzergesteuert und folgen einem First-In-First-Out (FIFO)-Prinzip mit einer Obergrenze von 2. Bei diesen Einstellungen werden die ältesten Spekulationen durch neue ersetzt, um Speicherplatz zu sparen.

Konservative Speculations

Wie bei "moderate" sind auch bei der Einstellung "conservative" die Spekulationen benutzergesteuert und folgen dem FIFO-Prinzip mit einer Obergrenze von 2. Ältere Spekulationen werden durch neue ersetzt, um Ressourcen zu schonen.

Es ist wichtig, die richtigen Einstellungen für das spekulative Laden zu wählen, um eine optimale Leistung zu erzielen und gleichzeitig eine Überbeanspruchung der Ressourcen zu vermeiden. Entwickler sollten die Benutzerinteraktion und das Verhalten auf ihrer Website analysieren, um die am besten geeigneten Einstellungen für Prerendering und Prefetching zu ermitteln.

Beispiele für die Implementierung

Hier sind einige Beispiele, wie Du die Speculation Rules API in der Praxis implementieren kannst:

Beispielcode

Um den Browser darüber zu informieren, welche URLs vorgerendert werden sollen, kannst Du JSON-Anweisungen auf Deine Seiten einfügen:

{
 "prerender": [
   {
     "source": "list",
     "urls": ["next.html", "next2.html"]
   }
 ]
}

Auf ähnliche Weise fügst Du die folgenden JSON-Anweisungen für das Prefetching ein.

Es ist möglich, mehrere Spekulationsregeln zu einer Seite hinzuzufügen, in diesem Fall würdest Du den Browser auf einer der folgenden Ebenen anweisen.

Praxisbeispiel Magento 2

In Magento 2 kann die Speculation Rules API in wenigen Handgriffen und ohne zusätzliches Modul eingeführt werden. Diese Anleitung zeigt, wie Du die angegebenen Speculation Rules in einem Magento CMS Block erstellst und diesen per Widget in den Head-Bereich jeder Seite einbindest.

1. CMS-Block erstellen

• a. Melde Dich im Magento Admin Panel an.
• b. Gehe zu Inhalt > Blöcke.
• c. Klicke auf Neuen Block hinzufügen.
• d. Fülle die Details aus:
  • i.Blocktitel:Speculation Rules Script
  • ii.Identifikator:speculation_rules_script
  • iii.Store View: Wähle die Store-Views aus, in denen der Block verfügbar sein soll.
  • iv. Im Blockinhalt füge den folgenden Code ein:

<script>
if (HTMLScriptElement.supports &&
    HTMLScriptElement.supports('speculationrules')) {
    const specScript = document.createElement('script');
    specScript.type = 'speculationrules';
    // Correctly declare specRules as a constant within the block scope
    const specRules = {
        "prerender": [{
            "source": "document",
            "where": {
                "and": [
                    {
                        "href_matches": "/*"
                    },
                    {"not": {"href_matches": "/*(customer|login|logout|auth|cart|checkout|search|download|redirect|rewrite|store|productalert)/*"}},
                    {"not": {"href_matches": "*.pdf"}},
                    {"not": {"selector_matches": ".do-not-prerender"}},
                    {"not": {"selector_matches": "[rel=nofollow]"}},
                    {"not": {"selector_matches": "[target=_blank]"}},
                    {"not": {"selector_matches": "[target=_parent]"}},
                    {"not": {"selector_matches": "[target=_top]"}}
                ]
            },
            "eagerness": "moderate"
        }]
    };
    specScript.textContent = JSON.stringify(specRules);
    document.body.append(specScript);
}
</script>

• v. Klicke auf Speichern.

2. Widget erstellen

• a. Gehe zu Inhalt > Widgets.
• b. Klicke auf Widget hinzufügen.
• c. Konfiguriere die folgenden Einstellungen:
  • i.Widgettyp: CMS Block
  • ii.Designpaket/Design-Thema: Wähle Dein aktuelles Theme aus.
• d. Klicke auf Weiter.

3. Widget-Optionen konfigurieren

• a.Widget-Titel: Speculation Rules Script Widget
• b.Unter Widget-Einstellungen:
  • i.CMS Block: Wähle den Block Speculation Rules Script aus.
• c.Unter Layout-Aktualisierungen:
  • i. Klicke auf Layout-Aktualisierung hinzufügen.
  • ii.Display on: Alle Seiten
  • iii.Container: Before Body End (oder Head je nach Theme-Anpassung).
• d. Klicke auf Speichern und Cache leeren.

4. Caches leeren

• a. Gehe zu System > Tools > Cache-Verwaltung.
• b. Wähle alle Caches aus und klicke auf Cache leeren.

Die Einführung dieses abgestimmten Magento 2 Rules-Sets greift unmittelbar und zeigt direkten Einfluss auf die Core Web Vitals. Im folgenden Screenshot sind die Ergebnisse deutlich. Die Werte für TTFB, LCP und FCP sind alle deutlich gestiegen!

Fehlerbehebung und Tipps

Hier sind einige häufige Fehler und Best Practices bei der Verwendung der Speculation Rules API:

Häufige Fehler

1. Falsche Heuristiken für Prerendering – Wenn Seiten oder Ressourcen fälschlicherweise vorab geladen werden, obwohl der Nutzer sie wahrscheinlich nicht benötigt, kann dies unnötige Bandbreite verbrauchen und die Ladezeit für tatsächlich besuchte Seiten negativ beeinflussen.
2. Fehlende oder falsche eagerness-Werte – Die API erlaubt es, verschiedene Grade der Vorhersage (z. B. eager oder conservative) zu definieren. Ein zu aggressives Prerendering kann Ressourcen vergeuden, während eine zu vorsichtige Konfiguration das Potenzial der API nicht ausnutzt.
3. Sicherheits- und Datenschutzprobleme – Wenn eine Seite vertrauliche oder nutzerspezifische Inhalte enthält, sollte sie nicht ohne explizite Interaktion des Nutzers vorgeladen werden. Sonst könnten ungewollt persönliche Daten in den Cache geladen werden.
4. Fehlende Berücksichtigung von Netzwerk- und Gerätebedingungen – Das Vorladen von Seiten kann auf mobilen Geräten oder bei langsamen Verbindungen zu erhöhtem Datenverbrauch und verzögerten Ladezeiten führen. Adaptive Strategien sind notwendig, um solche Probleme zu vermeiden.

Best Practices

Die Speculation Rules API kann im eCommerce die Ladezeiten optimieren und die Conversion-Rate verbessern. Damit sie effizient und sicher eingesetzt wird, sollten folgende Best Practices beachtet werden:

1. Gezieltes Prerendering auf Basis des Nutzerverhaltens – Nutze Heatmaps oder Analytics-Daten, um die wahrscheinlichsten Klickziele vorherzusagen. Beispielsweise sind Produktdetailseiten aus Suchergebnissen oder beliebte Kategorien gute Kandidaten für das Prerendering.
2. Adaptive Strategien für mobile Nutzer – Auf mobilen Geräten oder bei langsamen Verbindungen sollte kein aggressives Prerendering erfolgen. Nutze eagerness: "conservative" und berücksichtige Netzwerkbedingungen, um Bandbreite zu schonen.
3. Checkout- und Login-Seiten ausschließen – Niemals Seiten mit personenbezogenen Daten (z. B. Checkout, Kundenkonto) prerendern, da dies Datenschutzrisiken birgt und Session-Probleme verursachen kann.
4. Prerendering an Promotions und Kampagnen anpassen – Während Marketing-Aktionen können spezifische Landingpages, Rabattaktionen oder Bestseller-Seiten priorisiert prerendert werden, um das Einkaufserlebnis zu optimieren.
5. A/B-Tests zur Performance-Messung durchführen – Teste, ob die API tatsächlich einen positiven Effekt auf die Ladezeiten und Conversion-Rate hat. Vergleiche CTRs, Bounce-Rates und Ladezeiten zwischen mit und ohne Speculation Rules API, bevor du es global ausrollst. Vorallem mit Tools wie RumVision ist das möglich.

Webinar-Empfehlung: Performance-Boost mit Speculation Rules

Wenn Du noch mehr über die Speculation Rules API, Real User Monitoring (RUM) und Core Web Vitals erfahren möchtest, schau Dir dieses Webinar an:
Performance-Optimierung mit Real User Monitoring, Core Web Vitals & der Speculation Rules API
Hier lernst Du, wie RUM, Core Web Vitals und die Speculation Rules API dazu beitragen können, die Performance Deiner Website langfristig zu verbessern.

Fazit

In diesem Artikel haben wir die grundlegenden Konzepte und Anwendungen der Speculation Rules API vorgestellt, einer wegweisenden Technologie, die das Potenzial hat, die Ladegeschwindigkeiten von Webseiten signifikant zu erhöhen. Durch die Implementierung dieser API können Entwickler die Nutzererfahrung verbessern und gleichzeitig ihre Website in den Suchmaschinenrankings nach vorn bringen. Die Flexibilität und Anpassungsfähigkeit der Speculation Rules bieten einen Vorteil im Bereich der Webentwicklung und ermöglichen eine proaktivere Gestaltung der Benutzerinteraktion.

Indem die Speculation Rules API genutzt wird, öffnen sich neue Türen in die Zukunft einer nahtlosen Web-Performance, wo lange Ladezeiten der Vergangenheit angehören. Entwickler werden dazu angehalten, die vorgestellten Strategien und Best Practices zu erkunden und in ihren Projekten zu implementieren, um die Vorteile des spekulativen Ladens vollständig auszuschöpfen. Die kontinuierliche Weiterentwicklung und Verbesserung dieser Technologie verspricht spannende Möglichkeiten für die Zukunft der Webentwicklung und stellt sicher, dass die digitalen Erfahrungen für Nutzer weltweit immer effizienter und angenehmer werden.

Über den Autor

David Lambauer ist ein angesehener Experte im Bereich E-Commerce und Gründer der Agentur run_as_root GmbH mit Sitz in Würzburg. Seit der Gründung im Jahr 2021 hat sich die Agentur als innovativer Partner für Magento 2-, Hyvä- und Shopware-Lösungen etabliert. Mit einem internationalen Team aus Spezialist:innen und einem hohen Anspruch an Codequalität setzt run_as_root Maßstäbe in der Entwicklung moderner und leistungsstarker Online-Shops.

Als Adobe Certified Master Architect und langjähriger Magento Association Contributor bringt David fundiertes Wissen und umfassende Erfahrung in jedes Projekt ein. Er ist zudem der Schöpfer der Mage-OS DevDocs und ein gefragter Speaker auf internationalen Konferenzen.

Mit einem starken Fokus auf Innovation, Qualität und Transparenz steht David Lambauer für dynamische und zukunftsorientierte Lösungen, die den Erfolg seiner Kunden nachhaltig fördern.

Veröffentlicht am 13.02.2025 | Keine Ladezeiten mehr: So nutzt Du die Speculation Rules API | KS