{"id":69954,"date":"2024-05-07T11:45:58","date_gmt":"2024-05-07T10:45:58","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=69954&preview=true&preview_id=69954"},"modified":"2024-05-10T09:17:51","modified_gmt":"2024-05-10T08:17:51","slug":"speculative-loading","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/speculative-loading\/","title":{"rendered":"Wie Speculative Loading die Seitengeschwindigkeit deiner WordPress-Website erh\u00f6hen kann"},"content":{"rendered":"

Heutzutage sind Webseiten voll mit Bildern, Videos und interaktiven Elementen, die das Nutzererlebnis verbessern sollen. Diese Elemente k\u00f6nnen jedoch die Ladezeit deiner Seite verlangsamen.<\/p>\n

W\u00e4hrend sich die Technologie weiterentwickelt, bleibt ein Ziel konstant: die Leistung<\/em>. Jeder hofft, dass seine Webseiten blitzschnell geladen werden<\/a>.<\/p>\n

Eine M\u00f6glichkeit, Webseiten schneller zu laden, ist, sie vorzuladen, bevor ein Nutzer sie ansteuert.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Eine kurze Geschichte des Prerendering<\/h2>\n

2011 f\u00fchrte das Chromium-Team mit dem <link rel=\"prerender\" \u2026 ><\/code>-Tag eine fr\u00fche Form des Prerenderings<\/a> in den Chrome-Browser ein.<\/p>\n

Damit konnten Entwickler<\/a> den Browsern<\/a> mitteilen, welche Seite(n) ein Nutzer als N\u00e4chstes besuchen k\u00f6nnte. Der Browser holte und renderte diese Seiten dann im Hintergrund und verk\u00fcrzte so<\/em> die Ladezeit, wenn der Nutzer zu diesen Seiten navigierte.<\/p>\n

Trotz ihrer Vorteile verbrauchte diese fr\u00fche Implementierung des Prerendering viel Bandbreite und CPU-Ressourcen und konnte zu Datenschutzproblemen f\u00fchren, wenn die Nutzer\/innen die vorberechneten Seiten nicht besuchten. Au\u00dferdem musstest du manuell ausw\u00e4hlen, welche Links vorberechnet werden sollten, was nicht immer effektiv oder praktikabel war.<\/p>\n

Um einige dieser Bedenken auszur\u00e4umen, hat Chrome das Prerendering mit dem Link rel=prerender<\/code> zugunsten der NoState Prefetch-Methode<\/a> abgeschafft, bei der Ressourcen f\u00fcr eine Seite abgerufen werden, ohne dass JavaScript oder andere potenziell in die Privatsph\u00e4re eingreifende Aktionen ausgef\u00fchrt werden.<\/p>\n

Die NoState Prefetch-Methode verbesserte das Laden von Ressourcen, konnte aber nicht wie ein vollst\u00e4ndiger Prerender ein sofortiges Laden der Seite bewirken.<\/p>\n

Einf\u00fchrung der Spekulationsregeln-API<\/h2>\n

Die Speculation Rules API<\/a> ist eine neue experimentelle JSON-definierte API, die URLs spekulativ vorl\u00e4dt, bevor sie angesteuert werden, was zu schnelleren Rendering-Zeiten und einem besseren Nutzererlebnis f\u00fchrt.<\/p>\n

Die API erm\u00f6glicht es Entwicklern, Regeln mit einer im JSON-Format definierten Struktur innerhalb einer script type=\"speculationrules\"<\/code> zu konfigurieren, anhand derer der Browser entscheiden kann, welche URLs vorgerendert werden sollen.<\/p>\n

<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"list\",\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Das Gleiche gilt f\u00fcr das Prefetching, das oft ein guter erster Schritt auf dem Weg zum Prerendering sein kann:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prefetch\": [\n    {\n      \"urls\": [\"firstpage.html\", \"secondpage.html\"]\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
Die obigen Codeschnipsel zeigen, wie die Speculation Rules API funktioniert, indem eine Liste von URLs angegeben wird, die vorabgerufen oder vorgerendert werden sollen.<\/p>\n
K\u00fcrzlich k\u00fcndigte Google neue Verbesserungen an der Speculation Rules API<\/a> an, die nun die M\u00f6glichkeit der automatischen Linkfindung mithilfe von Dokumentenregeln<\/em> bietet. Dabei werden URLs auf der Grundlage einer where<\/code> Bedingung aus dem Dokument abgerufen.<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [\n    {\n      \"source\": \"document\",\n      \"where\": {\n        \"and\": [\n          {\n            \"href_matches\": \"\/*\"\n          },\n          {\n            \"not\": {\n              \"href_matches\": [\n                \"\/wp-login.php\",\n                \"\/wp-admin\/*\"\n              ]\n            }\n          }\n        ]\n      },\n      \"eagerness\": \"moderate\"\n    }\n  ]\n}\n<\/script><\/code><\/pre>\n
In diesem Codeschnipsel werden alle URLs auf der Seite f\u00fcr das Prerendering ber\u00fccksichtigt, mit Ausnahme derer, die zu den WordPress Login-<\/a> und Admin-Seiten f\u00fchren. Au\u00dferdem legst du eine Stufe von eagerness<\/code> fest – eager<\/code> (sofort), moderate<\/code> (bei einem Hover von 200ms) und conservative<\/code> (bei Mausber\u00fchrung oder Touchdown).<\/p>\n
Alternativ oder in Verbindung mit href<\/code> k\u00f6nnen auch CSS-Selektoren<\/a> verwendet werden, um Links auf der aktuellen Seite zu finden:<\/p>\n
<script type=\"speculationrules\">\n{\n  \"prerender\": [{\n    \"source\": \"document\",\n    \"where\": {\n      \"and\": [\n        { \"selector_matches\": \".prerender\" },\n        { \"not\": {\"selector_matches\": \".do-not-prerender\"}}\n      ]\n    },\n    \"eagerness\": \"moderate\"\n  }]\n}\n<\/script><\/code><\/pre>\n
Wenn du die Speculation Rules API verwendest, kannst du sie mit den Hintergrunddiensten f\u00fcr spekulative Lasten<\/strong> in der Chrome-Anwendungsregisterkarte<\/strong> \u00fcberpr\u00fcfen, wenn du die Seite inspizierst.<\/p>\n
\"Inspiziere
Inspiziere die Speculation Rules API mit den Hintergrunddiensten f\u00fcr spekulative Ladungen in der Registerkarte Chrome-Anwendung<\/figcaption><\/figure>\n
Es gibt noch mehr davon – wir werden sie im Abschnitt Debugging untersuchen.<\/p>\n
Browser-Unterst\u00fctzung<\/h3>\n
Die Speculation Rules API<\/a>\u00a0wird in modernen Chromium-basierten Browsern<\/a>, einschlie\u00dflich Chrome und Edge, ab bestimmten Versionen unterst\u00fctzt.<\/p>\n
\"Browserunterst\u00fctzung
Browserunterst\u00fctzung f\u00fcr die Speculation Rules API (Quelle: Mozilla<\/a>).<\/figcaption><\/figure>\n
Dadurch wird sichergestellt, dass Nutzer\/innen mit unterst\u00fctzten Browsern von schnelleren Ladezeiten profitieren k\u00f6nnen, w\u00e4hrend Nutzer\/innen anderer Browser keine negativen Auswirkungen zu sp\u00fcren bekommen, da die API ein progressives Verbesserungswerkzeug ist.<\/p>\n
Das Speculative Loading WordPress Plugin<\/h2>\n
Um die Vorteile der Speculation Rules API in WordPress zu nutzen, hat das WordPress Performance Team<\/a> (zu dem auch Entwickler von Google geh\u00f6ren) k\u00fcrzlich das Speculative Loading Plugin<\/a> ver\u00f6ffentlicht. Dieses Plugin erm\u00f6glicht das spekulative Laden von auf der Seite verlinkten Frontend-URLs.<\/p>\n
Bisher wurde das Plugin nur wenig genutzt, da sich die API noch in der Anfangsphase befindet, aber es gab bereits einige positive Bewertungen.<\/p>\n
\"Bewertungen
Bewertungen aus der WordPress-Community f\u00fcr das Speculative Loading Plugin<\/figcaption><\/figure>\n
Standardm\u00e4\u00dfig ist das Plugin so konfiguriert, dass es WordPress-Frontend-URLs vorl\u00e4dt, wenn der Nutzer mit dem Mauszeiger \u00fcber einen relevanten Link f\u00e4hrt. Dies kann \u00fcber den Abschnitt Speculative Loading<\/strong> unter Einstellungen<\/strong> > Lesen<\/strong> angepasst werden.<\/p>\n
\"Passe
Passe das Speculative Loading Plugin in den WordPress Admin-Einstellungen an<\/figcaption><\/figure>\n
Das bedeutet, dass alle URLs, die auf der Seite verlinkt sind, mit einer eagerness<\/code> Konfiguration von moderate<\/code> vorgeladen werden, die normalerweise ausgel\u00f6st wird, wenn der Nutzer mit dem Mauszeiger \u00fcber einen Link f\u00e4hrt. Du musst also nach der Aktivierung des Plugins nichts weiter tun; es funktioniert einfach von<\/em> Haus aus.<\/p>\n
Wenn du zum Beispiel das Plugin Speculative Loading<\/strong> bereits auf einer WordPress-Website installiert hast. Verwende die Chrome DevTools<\/a>, um die Seite zu untersuchen, und klicke auf die Registerkarte Elemente<\/strong>. Wenn du nach unten scrollst, wirst du feststellen, dass script type=\"speculationrules\"<\/code> bereits mit den verschiedenen Spekulationsregeln f\u00fcr dich angelegt wurde.<\/p>\n
\"Inspiziere
Inspiziere die WordPress-Website, um zu sehen, dass die Spekulationsregeln automatisch mit dem Speculative Loading Plugin hinzugef\u00fcgt werden<\/figcaption><\/figure>\n
Es verwendet eine Regex, um Links festzulegen, die vorgeladen werden sollen, legt Links fest, die nicht vorgeladen werden sollen, und legt die Eile fest. In den folgenden Abschnitten werden diese Regeln im Detail erkl\u00e4rt.<\/p>\n
Limits zur Vermeidung von \u00dcberbeanspruchung<\/h3>\n
Chrome hat Beschr\u00e4nkungen eingef\u00fchrt, um eine \u00fcberm\u00e4\u00dfige Nutzung der API zu verhindern:<\/p>\n\n\n\n\n\n
Eifrigkeit<\/strong><\/td>\nPrefetch<\/strong><\/td>\nPrerender<\/strong><\/td>\n<\/tr>\n
sofort\/eifrig<\/td>\n50<\/td>\n10<\/td>\n<\/tr>\n
gem\u00e4\u00dfigt\/konservativ<\/td>\n2 (FIFO)<\/td>\n2 (FIFO)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Sie verhindern eine \u00dcberbeanspruchung durch verschiedene Einstellungen, die auf Dringlichkeit und Benutzerinteraktion basieren.<\/p>\n