Mit Spekulationsregeln können die nächsten Seitennavigationen vorab abgerufen und gerendert werden, 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 deutlich verbessert werden.
Das Debugging von Spekulationsregeln kann schwierig sein. Dies gilt insbesondere für vorab gerenderte Seiten, da diese Seiten in einem separaten Renderer gerendert werden, ähnlich wie ein ausgeblendeter Hintergrund-Tab, der bei Aktivierung den aktuellen Tab ersetzt. Daher können die üblichen Optionen der Entwicklertools nicht immer zum Beheben von Problemen verwendet werden.
Das Chrome-Team hat hart daran gearbeitet, die Unterstützung der Entwicklertools für das Debugging von Spekulationsregeln zu verbessern. In diesem Beitrag erfährst du mehr über die verschiedenen Möglichkeiten, wie du diese Tools nutzen kannst, um die Spekulationsregeln auf einer Seite zu verstehen, warum sie möglicherweise nicht funktionieren und wann Entwickler die vertrauten Entwicklertools-Optionen nutzen können – und wann nicht.
Erläuterung von vorab verwendeten Begriffen
Es gibt viele „Vor“-Begriffe, die leicht verwechselt werden können. Beginnen wir also mit einer Erklärung:
- Prefetch: Hiermit wird eine Ressource oder ein Dokument im Voraus abgerufen, um die zukünftige Leistung zu verbessern. In diesem Beitrag geht es um den Vorabruf von Dokumenten mithilfe der Speculation Rules API und nicht um die ähnliche, aber ältere Option
<link rel="prefetch">, die häufig für den Vorabruf von Unterressourcen verwendet wird. - Pre-Rendering: Damit wird die gesamte Seite gerendert, als ob der Nutzer sie aufgerufen hätte. Die Seite wird jedoch in einem ausgeblendeten Hintergrund-Renderer-Prozess angezeigt, der verwendet werden kann, wenn der Nutzer tatsächlich dorthin navigiert. Auch hier geht es um die neuere Version der Speculation Rules API und nicht um die ältere
<link rel="prerender">-Option, bei der kein vollständiges Pre-Rendering mehr durchgeführt wird. - Navigationsspekulationen: Der Sammelbegriff für die neuen Prefetch- und Pre-Rendering-Optionen, die durch Spekulationsregeln ausgelöst werden.
- Vorabladen: Ein überladener Begriff, der sich auf eine Reihe von Technologien und Prozessen bezieht, einschließlich
<link rel="preload">, Preload Scanner und Service Worker Navigations-Preloads. Diese Punkte werden an dieser Stelle nicht behandelt, aber der Begriff wird aufgenommen, um die Begriffe klar von den "Navigationsspekulationen" zu unterscheiden.
Spekulationsregeln für prefetch
Spekulationsregeln können verwendet werden, um das Dokument der nächsten Navigation vorab abzurufen. 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 Navigations-Vorabrufe hat einige Vorteile gegenüber der älteren <link rel="prefetch">-Syntax, z. B. eine ausdrucksstärkere API und die Speicherung der Ergebnisse im Arbeitsspeicher-Cache statt im HTTP-Datenträgercache.
Fehlerbehebung bei prefetch-Spekulationsregeln
Prefetches, die durch Spekulationsregeln ausgelöst werden, sind im Bereich Netzwerk genauso zu sehen wie andere Abrufe:
Die beiden rot hervorgehobenen Anfragen sind die vorabgerufenen Ressourcen, wie in der Spalte Type (Typ) zu sehen. Sie werden mit der Priorität Lowest abgerufen, da sie für zukünftige Navigationen verwendet werden 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 serverseitig identifiziert werden:
Fehler in prefetch mit den Tabs für spekulatives Laden beheben
Das Steuerfeld Anwendung der Chrome-Entwicklertools wurde im Abschnitt Hintergrunddienste um den neuen Abschnitt Spekulative Ladevorgänge erweitert. Das erleichtert die Fehlerbehebung bei Spekulationsregeln:
In diesem Abschnitt gibt es drei Registerkarten:
- Spekulative Ladevorgänge: Zeigt den Pre-Rendering-Status der aktuellen Seite an.
- Regeln: Hier werden alle Regelsätze aufgelistet, die auf der aktuellen Seite gefunden werden.
- Spekulationen, in denen alle vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgelistet sind.
Im Screenshot oben ist der Tab Spekulationen zu sehen. Diese Beispielseite enthält einen Satz von Spekulationsregeln für den Vorabruf von drei Seiten. Zwei dieser Prefetches waren erfolgreich, einer ist fehlgeschlagen. Klicken Sie auf das Symbol neben dem Regelsatz, um zur Quelle des Regelsatzes im Bereich Elemente zu gelangen. Alternativ können Sie auf den Link Status klicken, um zum Tab Spekulationen zu gelangen, der nach diesem Regelsatz gefiltert ist.
Auf dem Tab Spekulationen werden alle Ziel-URLs zusammen mit der Aktion (Prefetch oder Pre-Rendering), von welchem Regelsatz sie stammen (da es auf einer Seite mehrere gibt) und dem Status der einzelnen Spekulationen angezeigt:
Über den URLs können Sie in einem Dropdown-Menü URLs aus allen Regelsätzen oder nur URLs aus einem bestimmten Regelsatz anzeigen. Darunter sind alle URLs aufgeführt. Wenn Sie auf eine URL klicken, erhalten Sie ausführlichere Informationen.
In diesem Screenshot sehen wir den Grund für den Fehler für die Seite next3.html. Diese Seite existiert nicht und gibt daher einen 404-Statuscode zurück, also einen Nicht-2xx-HTTP-Statuscode.
Auf dem Tab Spekulative Ladevorgänge sehen Sie den Bericht Status des spekulativen Ladens für diese Seite, aus dem hervorgeht, ob für diese Seite ein Prefetch oder Pre-Rendering verwendet wurde.
Bei einer vorab abgerufenen Seite sollte eine erfolgreiche Meldung angezeigt werden, wenn zu dieser Seite gewechselt wird:
Unübertroffene Spekulationen
Wenn eine Navigation von einer Seite aus mit Spekulationsregeln erfolgt, die nicht dazu führen, dass ein Prefetch oder Pre-Rendering verwendet wird, werden in einem zusätzlichen Bereich des Tabs weitere Details dazu angezeigt, warum die URL mit keiner der Spekulations-URLs übereinstimmt. Dies ist hilfreich, um Tippfehler in Ihren Spekulationsregeln zu erkennen.
Hier haben wir beispielsweise next4.html aufgerufen, aber nur next.html, next2.html oder next3.html sind Prefetches. Wir sehen also, dass dies mit keiner dieser drei Regeln übereinstimmt.
Die Tabs Spekulative Ladevorgänge sind sehr nützlich, um die Spekulationsregeln selbst zu debuggen und Syntaxfehler im JSON-Format zu finden.
Für die Prefetches selbst ist das Steuerfeld Netzwerk wahrscheinlich besser bekannt. Das Beispiel für einen Prefetch-Fehler können Sie hier sehen:
Die Tabs Spekulative Ladevorgänge sind jedoch weitaus nützlicher für das Pre-Rendering von Spekulationsregeln. Diese werden als Nächstes behandelt.
Spekulationsregeln für prerender
Pre-Rendering-Spekulationsregeln folgen derselben Syntax wie Prefetch-Spekulationsregeln. Beispiel:
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
Dieser Regelsatz löst (vorbehaltlich bestimmter Einschränkungen) das vollständige Laden und Rendern der angegebenen Seiten aus. Dadurch kann der Ladevorgang sofort durchgeführt werden, 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 Renderingprozess abgerufen und gerendert werden. Die Tabs Spekulative Ladevorgänge werden daher für das Debuggen von Spekulationsregeln vor dem Rendering wichtiger.
Debugging von prerender mit den Tabs für spekulative Ladevorgänge
Für Pre-Rendering-Spekulationsregeln können dieselben Bildschirme für spekulative Ladevorgänge verwendet werden, wie mit einer ähnlichen Demoseite, die versucht, ein Pre-Rendering zu erzielen, anstatt die drei Seiten vorab abzurufen:
Hier sehen wir wieder, dass eine der drei URLs nicht vorab gerendert werden konnte. Entwickler können die Details zu jeder URL auf dem Tab Spekulationen abrufen, indem sie auf den Link 2 Bereit, 1 Fehler klicken.
In Chrome 121 werden die Unterstützung für Dokumentregeln eingeführt. So kann der Browser diese Links von denselben Ursprungslinks auf der Seite erfassen, 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 Ursprungslinks ausgewählt, mit Ausnahme der Links, die mit /not-safe-to-prerender als Pre-Rendering-Kandidaten beginnen.
Außerdem wird die Pre-Rendering-eagerness auf moderate gesetzt. Das bedeutet, dass die Navigationen vorab gerendert werden, wenn der Mauszeiger auf den Link bewegt oder darauf geklickt wird.
Ähnliche Regeln wie diese finden Sie auf dieser Demowebsite. Die Verwendung des neuen Abschnitts Spekulative Ladevorgänge auf dieser Website zeigt die Nützlichkeit dieses neuen Tabs, da alle zulässigen URLs aufgelistet sind, die der Browser auf der Seite gefunden hat:
Der Status lautet Nicht ausgelöst, da der Pre-Rendering-Prozess für diese Elemente noch nicht gestartet wurde. Wenn wir jedoch den Mauszeiger auf die Links bewegen, ändert sich der Status, da jede URL vorab gerendert wird:
Chrome hat Beschränkungen für Pre-Renderings festgelegt, darunter maximal zwei Pre-Renderings für den eagerness moderate-Status. Wenn du den Mauszeiger auf den dritten Link bewegst, wird daher der Grund für das Fehlschlagen dieser URL angezeigt:
Fehler in prerender mit den anderen Entwicklertools-Bereichen beheben
Im Gegensatz zu Prefetches werden vorab gerenderte Seiten nicht in den aktuellen Rendering-Prozessen in den Entwicklertools wie dem Bereich Netzwerk angezeigt, da sie in ihrem eigenen Renderer im Hintergrund gerendert werden.
Es ist jetzt jedoch möglich, den Renderer, der in den Entwicklertools-Bereichen verwendet wird, über das Drop-down-Menü oben rechts oder durch Auswahl einer URL im oberen Bereich und Untersuchen zu wechseln:
Dieses Drop-down-Menü (und der ausgewählte Wert) wird auch in allen anderen Bereichen wie dem Steuerfeld Netzwerk verwendet. Hier sehen Sie, dass die angeforderte Seite die vorab gerenderte Seite ist:
In den HTTP-Headern dieser Ressourcen sehen wir, dass sie alle mit dem Sec-Purpose: prefetch;prerender-Header festgelegt sind:
Oder den Bereich Elemente, in dem Sie den Seiteninhalt sehen, wie im folgenden Screenshot, in dem das <h1>-Element für die vorab gerenderte Seite vorgesehen ist:
Im Konsolenbereich können Sie sich auch die Konsolenprotokolle ansehen, die von der vorab gerenderten Seite ausgegeben werden:
Fehler bei Spekulationsregeln auf der vorab gerenderten Seite beheben
In den vorherigen Abschnitten wird beschrieben, wie Sie Fehler auf vorab gerenderten Seiten auf der Seite beheben, die das Pre-Rendering initiiert. Es ist jedoch auch möglich, dass die vorab gerenderten Seiten selbst Debugging-Informationen zur Verfügung stellen. Dies geschieht entweder über Analyseaufrufe oder durch Protokollierung in der Konsole, die wie im vorherigen Abschnitt beschrieben aufgerufen werden kann.
Sobald eine vorab gerenderte Seite durch den Nutzer aktiviert wird, der sie aufruft, wird auf dem Tab Spekulative Ladevorgänge dieser Status angezeigt. Außerdem wird angegeben, ob die Seite erfolgreich vorab gerendert wurde. Wenn es nicht vorab gerendert werden konnte, wird eine Begründung dafür angegeben:
Außerdem wird – wie bei Prefetches – von einer Seite mit Spekulationsregeln, die nicht mit der aktuellen Seite übereinstimmen, versucht zu sehen, warum die URLs nicht mit denen übereinstimmen, die in den Spekulationsregeln der vorherigen Seite auf dem Tab Spekulative Ladevorgänge behandelt wurden:
Fazit
In diesem Beitrag haben wir die verschiedenen Möglichkeiten vorgestellt, wie Entwickler Prefetch- und Pre-Rendering-Spekulationsregeln debuggen können. Das Team arbeitet weiter an Tools für Spekulationsregeln und wir würden uns über Vorschläge von den Entwicklern freuen, wenn es darum geht, welche anderen Möglichkeiten zum Debuggen dieser spannenden neuen API hilfreich wären. Wir empfehlen Entwicklern, Probleme mit Funktionsanfragen oder erkannten Fehlern im Chrome Issue Tracker zu melden.
Danksagungen
Thumbail-Bild von Nubelson Fernandes auf Unsplash