Mit Spekulationsregeln können Sie die Navigation zur nächsten Seite vorab abrufen und vorrendern, wie im vorherigen Beitrag beschrieben. Dadurch können Seiten viel schneller oder sogar sofort geladen werden, wodurch die Core Web Vitals für diese zusätzlichen Seitennavigationen erheblich verbessert werden.
Das Entfernen von Spekulationsregeln kann schwierig sein. Dies gilt insbesondere für vorab gerenderte Seiten, da diese Seiten in einem separaten Renderer gerendert werden. Eine Art verborgener 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 hier geht es um die neuere Speculation Rules API-Version davon und nicht um die ältere
<link rel="prerender">-Option, die kein vollständiges Pre-Rendering mehr durchführt. - Navigationsvorhersagen: 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, einschließlich
<link rel="preload">, dem Preload-Scanner und Service Worker-Navigations-Preloads. Diese Themen werden hier nicht behandelt, aber der Begriff wird erwähnt, um sie klar von „Navigationsspekulationen“ abzugrenzen.
Spekulationsregeln für prefetch
Mit Spekulationsregeln kann das Dokument der nächsten Navigation vorab abgerufen werden. Wenn Sie beispielsweise die folgende JSON-Datei in eine Seite einfügen, 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 Prefetch-Ressourcen, wie Sie der Spalte Type entnehmen können. 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-Entwicklertools wurde im Bereich Hintergrunddienste der neue Abschnitt Spekulative Ladevorgänge hinzugefügt, der Sie bei der Fehlerbehebung für Spekulationsregeln unterstützt:
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 Vorausberechnungen 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 detailliertere 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 Fehler in den Spekulationsregeln selbst zu beheben und Syntaxfehler im JSON-Format 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 vorab abgerufenen Daten sind diese jedoch nicht im Bereich Netzwerk zu sehen, da sie in Chrome in einem separaten Rendering-Prozess abgerufen und gerendert werden. Aus diesem Grund sind die Tabs Spekulative Ladevorgänge bei der Fehlerbehebung von Pre-Rendering-Spekulationsregeln wichtiger.
Fehler in prerender mit dem Tab „Spekulative Ladevorgänge“ beheben
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 Spekulationen abrufen, indem sie auf den Link 2 Bereit, 1 Fehler klicken.
In Chrome 121 haben wir die Unterstützung für Dokumentenregeln 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 gleichen Ursprungslinks als Kandidaten für das Pre-Rendering ausgewählt, mit Ausnahme derjenigen, 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 Demowebsite zu spekulativen Regeln gibt es ähnliche Regeln. Der neue Abschnitt Spekulative Ladevorgänge auf dieser Website zeigt, wie nützlich dieser neue Tab ist, da alle zulässigen URLs aufgeführt sind, die der Browser auf der Seite gefunden hat:
Der Status lautet Nicht ausgelöst, weil der Pre-Rendering-Prozess dafür noch nicht gestartet wurde. Wenn wir den Mauszeiger jedoch über die Links bewegen, ändert sich der Status, wenn 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:
Außerdem wird wie bei Prefetches auch versucht, wenn Sie von einer Seite mit Spekulationsregeln, die nicht mit der aktuellen Seite übereinstimmen, herausfinden, warum die URLs nicht mit denen übereinstimmten, die in den Spekulationsregeln der vorherigen Seite auf dem Tab Spekulative Ladevorgänge behandelt wurden:
Fazit
In diesem Beitrag haben wir verschiedene Möglichkeiten für Entwickler aufgezeigt, wie sie Spekulationsregeln für Prefetch und Pre-Rendering 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 debuggt werden könnte. Wir empfehlen Entwicklern, Funktionsanfragen oder Fehler im Chrome-Issue-Tracker zu melden.
Danksagungen
Miniaturansicht von Nubelson Fernandes auf Unsplash