Mit Spekulationsregeln können Sie die Navigation zur nächsten Seite vorab abrufen und vorrendern, wie im vorherigen Beitrag beschrieben. So können Seiten viel schneller oder sogar sofort geladen werden, was die Core Web Vitals für diese zusätzlichen Seitennavigationen erheblich verbessert.
Das Entfernen von Spekulationsregeln kann schwierig sein. Das gilt insbesondere für vorab gerenderte Seiten, da diese in einem separaten Renderer gerendert werden – ähnlich wie ein ausgeblendeter Hintergrundtab, der den aktuellen Tab ersetzt, wenn er aktiviert wird. Daher können die üblichen DevTools-Optionen nicht immer verwendet werden, um Probleme zu beheben.
Das Chrome-Team hat intensiv daran gearbeitet, die Unterstützung der DevTools für die Fehlerbehebung bei Spekulationsregeln zu verbessern. In diesem Beitrag erfahren Sie, wie Sie mit diesen Tools die Spekulationsregeln einer Seite verstehen, warum sie möglicherweise nicht funktionieren und wann Entwickler die vertrauteren DevTools-Optionen verwenden können – und wann nicht.
Erläuterung von Begriffen mit „vor-“
Es gibt viele verwirrende Begriffe, die mit „Pre-“ beginnen. Beginnen wir also mit einer Erklärung dieser Begriffe:
- Vorab-Abruf: Eine Ressource oder ein Dokument wird vorab abgerufen, um die zukünftige Leistung zu verbessern. In diesem Beitrag geht es um das Vorabladen von Dokumenten mit der Speculation Rules API und nicht um die ähnliche, aber ältere Option
<link rel="prefetch">, die häufig zum Vorabladen von Unterressourcen verwendet wird. - Vorab-Rendering: Dies geht noch einen Schritt weiter als das Vorab-Caching. Die gesamte Seite wird so gerendert, als hätte der Nutzer sie aufgerufen. Sie wird jedoch in einem ausgeblendeten Hintergrund-Rendering-Prozess aufbewahrt und kann verwendet werden, wenn der Nutzer sie tatsächlich aufruft. Auch in diesem Dokument geht es um die neuere Version der Speculation Rules API und nicht um die ältere
<link rel="prerender">-Option, bei der kein vollständiges Vorab-Rendering mehr erfolgt. - Spekulative Navigationen: Sammelbegriff für die neuen prefetch- und prerender-Optionen, die durch Spekulationsregeln ausgelöst werden.
- Preload: Ein überlasteter Begriff, der sich auf eine Reihe von Technologien und Prozessen beziehen kann, darunter
<link rel="preload">, der Preload-Scanner und Navigations-Preloads von Dienstmitarbeitern. Diese Elemente werden hier nicht behandelt, aber der Begriff wird aufgenommen, um sie klar von „spekulativen Navigationen“ abzugrenzen.
Spekulationsregeln für prefetch
Mit Spekulationsregeln kann das Dokument der nächsten Navigation vorab abgerufen werden. Wenn du beispielsweise die folgende JSON-Datei in eine Seite einfügst, werden next.html und next2.html vorab abgerufen:
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Die Verwendung von Spekulationsregeln für Navigationsvorabrufe hat einige Vorteile gegenüber der älteren <link rel="prefetch">-Syntax, z. B. eine ausdrucksstärkere API und die Speicherung der Ergebnisse im Arbeitsspeichercache anstelle des HTTP-Dateicaches.
prefetch-Spekulationsregeln beheben
Von Spekulationsregeln ausgelöste Vorab-Abrufe werden im Bereich Netzwerk wie andere Abrufe angezeigt:
Die beiden rot hervorgehobenen Anfragen sind die vorab abgerufenen Ressourcen, wie in der Spalte Typ zu sehen ist. Sie werden mit der Priorität Lowest abgerufen, da sie für zukünftige Navigationen bestimmt sind und Chrome die Ressourcen der aktuellen Seite priorisiert.
Wenn Sie auf eine der Zeilen klicken, wird auch der Sec-Purpose: prefetch-HTTP-Header angezeigt. So können diese Anfragen auf der Serverseite identifiziert werden:
prefetch mit den Tabs „Spekulatives Laden“ debuggen
Im Bereich Anwendung der Chrome DevTools wurde im Bereich Hintergrunddienste der neue Bereich Spekulative Ladevorgänge hinzugefügt, um beim Debuggen von Spekulationsregeln zu helfen:
In diesem Bereich sind drei Tabs verfügbar:
- Spekulatives Laden, das den Status der Vorabrenderings der aktuellen Seite auflistet.
- Regeln: Hier werden alle Regelsätze aufgelistet, die auf der aktuellen Seite gefunden wurden.
- Vorhersagen: Hier werden alle vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgeführt.
Auf dem Tab Vorhersagen im vorherigen Screenshot ist zu sehen, dass diese Beispielseite eine einzige Gruppe von Spekulationsregeln für das Vorabladen von drei Seiten hat. Zwei dieser Vorab-Ladevorgänge waren erfolgreich, einer fehlgeschlagen. Wenn Sie auf das Symbol neben Regelsatz klicken, gelangen Sie im Bereich Elemente zur Quelle des Regelsatzes. Alternativ können Sie auf den Link Status klicken, um den Tab Spekulationen aufzurufen, der nach dieser Regel gefiltert ist.
Auf dem Tab Vorhersagen sind alle Ziel-URLs aufgelistet. Außerdem sehen Sie die Aktion (prefetch oder prerender), aus welchem Regelsatz sie stammen (es kann mehrere auf einer Seite geben) und den Status der einzelnen Vorhersagen:
Über den URLs können Sie über ein Drop-down-Menü URLs aus allen oder nur aus einem bestimmten Regelsatz anzeigen lassen. Darunter werden alle URLs aufgeführt. Wenn Sie auf eine URL klicken, erhalten Sie weitere Informationen.
In diesem Screenshot sehen wir den Grund für den Fehler für die Seite next3.html. Da diese Seite nicht existiert, wird der HTTP-Statuscode 404 zurückgegeben, der nicht zu den 2xx-Statuscodes gehört.
Auf dem Tab „Zusammenfassung“ (Spekulatives Laden) sehen Sie den Bericht Status für spekulatives Laden für diese Seite, aus dem hervorgeht, ob für diese Seite ein Vorabladen oder eine Vorabrendering-Technologie verwendet wurde.
Wenn Sie eine vorab abgerufene Seite aufrufen, sollte eine Erfolgsmeldung angezeigt werden:
Nicht übereinstimmende Spekulationen
Wenn eine Navigation von einer Seite mit Spekulationsregeln erfolgt, die nicht zu einem Prefetch oder Prerender führt, werden auf dem Tab in einem zusätzlichen Bereich weitere Details dazu angezeigt, warum die URL nicht mit einer der Spekulations-URLs übereinstimmt. So können Sie Tippfehler in Ihren Spekulationsregeln leichter erkennen.
Hier wurde beispielsweise next4.html aufgerufen, aber nur next.html, next2.html oder next3.html sind Prefetches. Das entspricht also keiner dieser drei Regeln.
Die Tabs Spekulative Ladevorgänge sind sehr nützlich, um die Spekulationsregeln selbst zu debuggen und Syntaxfehler in der JSON-Datei zu finden.
Die Vorab-Dateien selbst finden Sie wahrscheinlich im Bereich Netzwerk. Im Beispiel für den prefetch-Fehler sehen Sie hier die 404-Antwort für den prefetch:
Die Tabs Spekulative Ladevorgänge sind jedoch viel nützlicher für Spekulationsregeln für das Pre-Rendering, die im Folgenden behandelt werden.
Spekulationsregeln für prerender
Für Prerender-Spekulationsregeln gilt dieselbe Syntax wie für Prefetch-Spekulationsregeln. Beispiel:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Dieser Regelsatz löst ein vollständiges Laden und Rendern der angegebenen Seiten aus (vorbehaltlich bestimmter Einschränkungen). Das kann zu einem sofortigen Laden führen, allerdings mit zusätzlichen Ressourcenkosten.
Im Gegensatz zu Prefetches sind diese jedoch nicht im Bereich Netzwerk zu sehen, da sie in Chrome in einem separaten Rendering-Prozess abgerufen und gerendert werden. Daher sind die Tabs Spekulative Ladevorgänge für die Fehlerbehebung von Regeln für die Pre-Render-Spekulation wichtiger.
prerender mit den Tabs „Spekulative Ladevorgänge“ debuggen
Dieselben Bildschirme für spekulative Ladevorgänge können für Regeln für die Vorab-Rendering-Spekulation verwendet werden, wie in einer ähnlichen Demoseite gezeigt, auf der versucht wird, die drei Seiten vorzurendern, anstatt sie vorab zu laden:
Hier sehen wir wieder, dass eine der drei URLs nicht vorgerendert wurde. Entwickler können die Details pro URL auf dem Tab Vermutungen abrufen, indem sie auf den Link 2 Bereit, 1 Fehler klicken.
In Chrome 121 haben wir die Unterstützung für Dokumentregeln eingeführt. So kann der Browser diese aus Links mit demselben Ursprung auf der Seite abrufen, anstatt eine bestimmte Gruppe von URLs aufzulisten:
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
In diesem Beispiel werden alle Links mit demselben Ursprung als Kandidaten für das Vorab-Rendering ausgewählt, mit Ausnahme derer, die mit /not-safe-to-prerender beginnen.
Außerdem wird die Vorabrendering-Option eagerness auf moderate gesetzt. Das bedeutet, dass die Navigationen vorab gerendert werden, wenn der Mauszeiger auf den Link bewegt oder darauf geklickt wird.
Auf der Demoseite für spekulative Regeln finden Sie ähnliche Regeln. Der neue Bereich Spekulative Ladevorgänge auf dieser Seite zeigt die Nützlichkeit dieses neuen Tabs, da alle infrage kommenden URLs aufgeführt sind, die der Browser auf der Seite gefunden hat:
Der Status ist Nicht ausgelöst, da der Pre-Render-Prozess für diese nicht gestartet wurde. Wenn wir den Mauszeiger jedoch auf die Links bewegen, sehen wir, dass sich der Status ändert, da jede URL vorab gerendert wird:
In Chrome gibt es Limits für Pre-Renderings, einschließlich maximal zwei Pre-Renderings für die moderate-Eagerness. Wenn Sie den Mauszeiger auf den dritten Link bewegen, sehen Sie den Grund für den Fehler für diese URL:
prerender mit den anderen Steuerfeldern der Entwicklertools debuggen
Im Gegensatz zu vorab geladenen Seiten werden Seiten, die vorab gerendert wurden, nicht in den aktuellen Rendering-Prozessen in DevTools-Bereichen wie dem Bereich Netzwerk angezeigt, da sie in einem eigenen Renderer im Hintergrund gerendert werden.
Es ist jedoch jetzt möglich, den von den DevTools-Bereichen verwendeten Renderer über das Drop-down-Menü oben rechts oder durch Auswahl einer URL im oberen Bereich des Bereichs und Auswahl von Inspect (Prüfen) zu wechseln:
Dieses Drop-down-Menü (und der ausgewählte Wert) ist auch in allen anderen Bereichen verfügbar, z. B. im Bereich Netzwerk, in dem Sie sehen können, dass die angeforderte Seite die vorab gerenderte ist:
Wenn wir uns die HTTP-Header für diese Ressourcen ansehen, sehen wir, dass sie alle mit dem Sec-Purpose: prefetch;prerender-Header festgelegt werden:
Oder im Bereich Elemente, in dem Sie den Seiteninhalt sehen. Im folgenden Screenshot sehen Sie, dass das Element <h1> für die vorab gerenderte Seite verwendet wird:
Oder im Console-Steuerfeld, in dem Sie Console-Protokolle sehen, die von der vorab gerenderten Seite generiert wurden:
Spekulationsregeln auf der vorab gerenderten Seite debuggen
In den vorherigen Abschnitten wurde beschrieben, wie Sie vorab gerenderte Seiten auf der Seite debuggen, auf der das Vorab-Rendering initiiert wird. Es ist jedoch auch möglich, dass die vorab gerenderten Seiten selbst Informationen zur Fehlerbehebung bereitstellen, entweder durch Analyseaufrufe oder durch Protokollierung in der Konsole, die wie im vorherigen Abschnitt beschrieben angezeigt werden kann.
Wenn eine vorab gerenderte Seite durch den Nutzer aktiviert wird, wird auf dem Tab Vorab-Ladevorgänge dieser Status und ob die Seite erfolgreich vorab gerendert wurde, angezeigt. Wenn das Video nicht vorab gerendert werden konnte, wird eine Erklärung dafür angezeigt:
Wie bei Prefetches wird beim Wechseln von einer Seite mit Spekulationsregeln, die nicht mit der aktuellen Seite übereinstimmen, auf dem Tab Spekulative Ladevorgänge versucht, zu ermitteln, warum die URLs nicht mit denjenigen übereinstimmen, die in den Spekulationsregeln der vorherigen Seite abgedeckt sind:
Fazit
In diesem Beitrag haben wir die verschiedenen Möglichkeiten gezeigt, wie Entwickler Speculative Prefetch- und Prerender-Regeln debuggen können. Das Team arbeitet weiter an Tools für Spekulationsregeln. Wir würden uns sehr über Vorschläge von Entwicklern freuen, wie diese spannende neue API noch besser für die Fehlerbehebung genutzt werden kann. Wir empfehlen Entwicklern, Funktionsanfragen oder Fehler im Chrome-Issue-Tracker zu melden.
Danksagungen
Miniaturansicht von Nubelson Fernandes auf Unsplash