Spekulationsregeln können verwendet werden, um die Navigation zur nächsten Seite vorab abzurufen und vorab zu rendern, wie im vorherigen Beitrag beschrieben. Dadurch können Seiten viel schneller oder sogar sofort geladen werden, was die Core Web Vitals für diese zusätzlichen Seitennavigationen erheblich verbessert.
Das Debuggen 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 Hintergrund-Tab, der den aktuellen Tab ersetzt, wenn er aktiviert wird. Daher können die üblichen Entwicklertools-Optionen nicht immer zur Fehlerbehebung verwendet werden.
Das Chrome-Team hat intensiv daran gearbeitet, die Unterstützung der Entwicklertools für das Debugging von Spekulationsregeln zu verbessern. In diesem Beitrag werden die verschiedenen Möglichkeiten beschrieben, wie Sie mit diesen Tools die Spekulationsregeln einer Seite nachvollziehen können, warum sie möglicherweise nicht funktionieren und wann Entwickler die vertrauteren DevTools-Optionen verwenden können und wann nicht.
Erläuterung der Begriffe mit „Vor-“
Es gibt viele verwirrende Begriffe mit dem Präfix „Vor-“. Deshalb beginnen wir mit einer Erklärung dieser Begriffe:
- Prefetch: Eine Ressource oder ein Dokument wird im Voraus abgerufen, um die zukünftige Leistung zu verbessern. In diesem Beitrag wird das Prefetching von Dokumenten mit der Speculation Rules API behandelt, anstatt der ähnlichen, aber älteren Option
<link rel="prefetch">, die häufig für das Prefetching von Unterressourcen verwendet wird. - Prerender: Dieser Schritt geht über das Prefetching hinaus und rendert die gesamte Seite so, als hätte der Nutzer sie aufgerufen. Sie wird jedoch in einem ausgeblendeten Hintergrund-Renderer-Prozess bereitgehalten, falls der Nutzer sie tatsächlich aufruft. In diesem Dokument geht es um die neuere Version der Speculation Rules API und nicht um die ältere Option
<link rel="prerender">, die kein vollständiges Prerendering mehr durchführt. - Spekulative Navigation: Der Oberbegriff für die neuen Prefetch- und Prerender-Optionen, die durch Spekulationsregeln ausgelöst werden.
- Preload: Ein überladener Begriff, der sich auf eine Reihe von Technologien und Prozessen beziehen kann, darunter
<link rel="preload">, der Preload-Scanner und Service Worker-Navigations-Preloads. Diese Elemente werden hier nicht behandelt, aber der Begriff wird verwendet, um sie klar von „spekulativen Navigationen“ zu unterscheiden.
Spekulationsregeln für prefetch
Mit Spekulationsregeln kann das Dokument für die nächste Navigation vorab abgerufen werden. Wenn Sie beispielsweise den folgenden JSON-Code in eine Seite einfügen, werden next.html und next2.html vorab abgerufen:
<script type="speculationr>ules"
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
Die Verwendung von Spekulationsregeln für das Prefetching von Navigationen bietet einige Vorteile gegenüber der älteren <link rel="prefetch">-Syntax, z. B. eine aussagekräftigere API und die Speicherung der Ergebnisse im Speicher-Cache statt im HTTP-Datenträger-Cache.
prefetch Spekulationsregeln debuggen
Prefetches, die durch Spekulationsregeln ausgelöst werden, sind im Bereich Netzwerk wie andere Abrufe zu sehen:
Die beiden rot hervorgehobenen Anfragen sind die vorabgerufenen Ressourcen, wie in der Spalte Type (Typ) zu sehen ist. Diese 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 HTTP-Header Sec-Purpose: prefetch angezeigt. So können diese Anfragen serverseitig identifiziert werden:
prefetch mit den Tabs für spekulatives Laden debuggen
Im Bereich Anwendung der Chrome-Entwicklertools wurde unter Hintergrunddienste der neue Abschnitt Spekulatives Laden hinzugefügt, um das Debugging von Spekulationsregeln zu erleichtern:
In diesem Bereich sind drei Tabs verfügbar:
- Spekulatives Laden: Hier wird der Vorrendering-Status der aktuellen Seite aufgeführt.
- Regeln: Hier werden alle Regelsätze aufgeführt, die auf der aktuellen Seite gefunden wurden, sofern vorhanden. Sie sind als URLs oder Regel-Tags gekennzeichnet.
- Speculations: Hier werden alle vorabgerufenen und vorabgerenderten URLs aus den Regelsätzen aufgeführt.
Der Tab Speculations ist im vorherigen Screenshot zu sehen. Auf dieser Beispielseite gibt es einen einzigen Satz von Spekulationsregeln für das Prefetching von drei Seiten. Zwei dieser Prefetches waren erfolgreich und einer ist fehlgeschlagen. Wenn Sie auf das Symbol neben dem 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 diesem Regelsatz gefiltert ist.
Auf dem Tab Speculations werden alle Ziel-URLs zusammen mit der Aktion (Prefetch oder Prerender), dem Regelsatz, aus dem sie stammen (da es auf einer Seite mehrere geben kann), und dem Status der jeweiligen Spekulation aufgeführt:
Über den URLs können Sie ein Drop-down-Menü verwenden, um URLs aus allen Regelsätzen oder nur URLs aus einem bestimmten Regelsatz anzuzeigen. Darunter sind 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 auf der Seite next3.html, die nicht existiert und daher den HTTP-Statuscode 404 zurückgibt, der nicht im 2xx-Bereich liegt.
Auf dem Tab Spekulatives Laden finden Sie den Bericht Status für spekulatives Laden für diese Seite. Dort sehen Sie, ob für diese Seite Prefetching oder Pre-Rendering verwendet wurde.
Bei einer vorab abgerufenen Seite sollte eine Erfolgsmeldung angezeigt werden, wenn diese Seite aufgerufen wird:
Nicht übereinstimmende Spekulationen
Wenn eine Navigation von einer Seite mit Spekulationsregeln erfolgt, die nicht zu einem Prefetch oder Pre-Rendering führt, wird in einem zusätzlichen Abschnitt des Tabs genauer erläutert, warum die URL mit keiner der Spekulations-URLs übereinstimmt. Das ist hilfreich, um Tippfehler in Ihren Spekulationsregeln zu finden.
In diesem Beispiel haben wir next4.html aufgerufen, aber nur next.html, next2.html oder next3.html sind Prefetches. Wir sehen also, dass dies nicht ganz mit einer dieser drei Regeln übereinstimmt.
Die Tabs Spekulatives Laden sind sehr nützlich, um die Spekulationsregeln selbst zu debuggen und Syntaxfehler im JSON-Code zu finden.
Die Prefetches selbst sind im Bereich Netzwerk wahrscheinlich besser zu sehen. Im Beispiel für einen Prefetch-Fehler sehen Sie hier den 404-Fehler für den Prefetch:
Die Tabs Spekulatives Laden sind jedoch viel nützlicher für Spekulationsregeln für das Pre-Rendering, die als Nächstes behandelt werden.
Spekulationsregeln für prerender
Für Prerender-Spekulationsregeln gilt dieselbe Syntax wie für Prefetch-Spekulationsregeln. Beispiel:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "<;next2.>html"],
"tag": "rule-set-tag-1"
}
]
}
/script
Dieser Regelsatz löst ein vollständiges Laden und Rendern der angegebenen Seiten aus (vorbehaltlich bestimmter Einschränkungen). Dies kann zu einem sofortigen Ladevorgang führen, allerdings mit zusätzlichen Ressourcenkosten.
Im Gegensatz zu Prefetches sind diese jedoch nicht im Netzwerkbereich sichtbar, da sie in einem separaten Rendering-Prozess in Chrome abgerufen und gerendert werden. Daher sind die Tabs Spekulatives Laden für das Debugging von Prerender-Spekulationsregeln wichtiger.
prerender mit den Tabs für spekulatives Laden debuggen
Dieselben Bildschirme für spekulatives Laden können für Spekulationsregeln für das Pre-Rendering verwendet werden. Dies wird auf einer ähnlichen Demoseite gezeigt, auf der versucht wird, die drei Seiten vorab zu rendern, anstatt sie vorab abzurufen:
Hier sehen wir wieder, dass eine der drei URLs nicht vorgerendert werden konnte. Entwickler können die Details pro URL auf dem Tab Speculations abrufen, indem sie auf den Link 2 Ready, 1 Failure klicken.
In Chrome 121 haben wir die Unterstützung für Dokumentregeln eingeführt. So kann der Browser diese von Links mit demselben Ursprung auf der Seite abrufen, anstatt eine bestimmte Gruppe von URLs aufzulisten:
<script type="speculationr>ules"
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_match<es">;: "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
/script
In diesem Beispiel werden alle Links mit demselben Ursprung als Prerendering-Kandidaten ausgewählt, mit Ausnahme derer, die mit /not-safe-to-prerender beginnen.
Außerdem wird das Prerendering eagerness auf moderate gesetzt. Das bedeutet, dass die Navigationen vorab gerendert werden, wenn der Mauszeiger auf den Link bewegt wird (auf dem Computer), basierend auf dem Darstellungsbereich (auf dem Mobilgerät) oder wenn darauf geklickt wird.
Ähnliche Regeln finden Sie auf der Demoseite für Spekulationsregeln. Der neue Bereich Spekulatives Laden auf dieser Website zeigt, wie nützlich dieser neue Tab ist, da alle infrage kommenden URLs, die der Browser auf der Seite gefunden hat, aufgelistet werden:
Der Status lautet Nicht ausgelöst, da der Prerendering-Prozess für diese noch nicht gestartet wurde. Wenn wir den Mauszeiger über die Links bewegen, sehen wir jedoch, wie sich der Status ändert, während die einzelnen URLs vorgerendert werden:
In Chrome gibt es Limits für das Prerendering, darunter maximal 2 Prerenderings für die Eagerness moderate. Wenn Sie den Mauszeiger auf den dritten Link bewegen, wird der Grund für den Fehler für diese URL angezeigt:
prerender mit den anderen DevTools-Bereichen debuggen
Im Gegensatz zu Prefetches werden vorgerenderte Seiten nicht in den aktuellen Rendering-Prozessen in Entwicklertools-Bereichen wie dem Bereich Netzwerk angezeigt, da sie in einem eigenen Renderer im Hintergrund gerendert werden.
Es ist jetzt jedoch 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 Untersuchen zu wechseln:
Dieses Drop-down-Menü (und der ausgewählte Wert) wird auch in allen anderen Bereichen verwendet, z. B. im Bereich Netzwerk, wo Sie sehen können, dass die angeforderte Seite die vorgerenderte Seite ist:
Wenn wir uns die HTTP-Header für diese Ressourcen ansehen, sehen wir, dass sie alle mit dem Header Sec-Purpose: prefetch;prerender festgelegt werden:
Oder im Bereich Elemente, in dem Sie den Seiteninhalt sehen können, wie im folgenden Screenshot, in dem das <h1>-Element für die vorgerenderte Seite zu sehen ist:
Oder im Konsolenbereich, in dem Sie die von der vorab gerenderten Seite ausgegebenen Konsolenlogs sehen können:
Spekulationsregeln auf der vorab gerenderten Seite debuggen
In den vorherigen Abschnitten wurde erläutert, wie Sie vorab gerenderte Seiten auf der Seite debuggen, die das Vorab-Rendering initiiert. Es ist jedoch auch möglich, dass die vorab gerenderten Seiten selbst Debugging-Informationen bereitstellen, entweder durch Analyseaufrufe oder durch Logging in der Konsole (die wie im vorherigen Abschnitt beschrieben aufgerufen werden kann).
Sobald eine vorab gerenderte Seite vom Nutzer aktiviert wird, indem er sie aufruft, wird dieser Status auf dem Tab Spekulatives Laden angezeigt. Außerdem ist dort zu sehen, ob das Vorab-Rendering erfolgreich war oder nicht. Wenn das Prerendering nicht möglich war, wird eine Erklärung dafür angegeben:
Außerdem wird wie beim Prefetching beim Navigieren von einer Seite mit Spekulationsregeln, die nicht mit der aktuellen Seite übereinstimmen, auf dem Tab Spekulatives Laden angezeigt, warum die URLs nicht mit den Spekulationsregeln der vorherigen Seite übereinstimmen:
Fazit
In diesem Beitrag haben wir die verschiedenen Möglichkeiten aufgezeigt, wie Entwickler Spekulationsregeln für Prefetching und Pre-Rendering debuggen können. Das Team arbeitet weiterhin an Tools für Spekulationsregeln und wir freuen uns über Vorschläge von Entwicklern, wie wir das Debugging dieser spannenden neuen API noch weiter verbessern können. Wir empfehlen Entwicklern, Feature Requests oder Fehler in der Chrome-Problemverfolgung zu melden.
Danksagungen
Miniaturansicht von Nubelson Fernandes auf Unsplash.