Foto: Pixabay (Symbolbild)
Hast du schon einmal auf einen Link geklickt und die nächste Seite wurde fast sofort angezeigt? Dank der Chrome Speculation Rules API wird dieses Erlebnis jetzt noch einfacher. Diese neue Browserfunktion ermöglicht eine sofortige Navigation mit nur wenigen Zeilen HTML-Quellcode.
Sie müssen angemeldet sein um diesen Inhalt sehen zu können.
Wie funktioniert die Speculation Rules API?
Mit der Chrome Speculation Rules API können Entwickler dem Browser deklarativ mitteilen, welche Seiten vorab geladen und vorgerendert werden sollen, wodurch ein nahezu sofortiges Ladeerlebnis gewährleistet wird:
- prefetch weist den Browser an, dass HTML-Dokument der obersten Ebene einer verlinkten Seite herunterzuladen. Dabei wird die Seite nicht gerendert und ihre untergeordneten Ressourcen werden nicht abgerufen. Dies ist weniger Ressourcenintensiv als das des Vorrenderns, spart aber dennoch Zeit, da das HTML im Cache des Browsers bereit gestellt wird.
- prerender weist den Browser an, eine Seite nicht nur herunterzuladen, sondern sie auch vollständig im Hintergrund zu rendern. Dazu gehört das Abrufen aller Unterressourcen wie CSS, JavaScript und Bilder sowie die Ausführung des JavaScripts. Wenn der Benutzer auf den Link klickt, wird die Seite nahezu Zeitgleich angezeigt.
- eagerness: moderate wird von Browsern wie folgt interpretiert: "Starte die Aktion 200 ms, nachdem der Benutzer mit dem Mauszeiger über einen Link fährt."
Beispiel der Funktionsweise
- Ein Benutzer liest eine Seite auf deiner Website.
- Der Benutzer bewegrt den Mauszeiger und lässt ihn über einem Link (z. B. "Forum") verweilen.
- Der Browser interpretiert das Mouseover (hover) als Zeichen der Absicht, dass der Benutzer den Link aufrufen möchte oder zumindest Interesse daran besteht diesen zu öffnen. Nach einer sehr kurzen Verzögerung wird die Prerender- oder Prefetch-Aktion für die Seite ausgelöst.
- Wenn der Benutzer nun auf den Link klickt, wird die Seite bereits im Hintergrund geladen, was zu einer Zeitgleichen Navigation führt.
Browser-Kompatibilität
Die Speculation Rules API wird nur in Chrome 121 und späteren Versionen unterstützt. Firefox und Safari unterstützt die Speculation Rules API bisher noch nicht.
Quelle: MDN
Mit folgenden Script kann dies aber dennoch genutzt werden.
Sie müssen angemeldet sein um diesen Inhalt sehen zu können.
Was haltet ihr von der Chrome Speculation Rules API?
Schreibt es uns in den Kommentaren oder diskutiert darüber mit anderen in unserem Forum.
