Mit Spekulationsregeln lassen sich Seitennavigationen vorab abrufen und rendern, 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 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 Hintergrundtab, der den aktuellen Tab ersetzt, wenn er aktiviert wird. Daher können die üblichen Optionen der Entwicklertools nicht immer zur Fehlerbehebung 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 erfahren Sie, wie Sie diese Tools verwenden können, um die Spekulationsregeln einer Seite zu verstehen, warum sie möglicherweise nicht funktionieren und wann Entwickler die vertrauten DevTools-Optionen verwenden können und wann nicht.
Erklärung von Begriffen mit „Pre-“
Es gibt viele Begriffe, die mit „Pre-“ beginnen und für Verwirrung sorgen können. Deshalb erklären wir sie zuerst:
- Prefetch: Eine Ressource oder ein Dokument wird im Voraus abgerufen, um die zukünftige Leistung zu verbessern. In diesem Beitrag geht es um das Vorabrufen von Dokumenten mit der Speculation Rules API und nicht mit der ähnlichen, aber älteren
<link rel="prefetch">-Option, die häufig zum Vorabrufen von untergeordneten Ressourcen verwendet wird. - Vorrendern: Dies geht einen Schritt über das Prefetching hinaus. Die gesamte Seite wird so gerendert, als ob der Nutzer sie aufgerufen hätte. Sie wird jedoch in einem verborgenen Hintergrund-Renderer-Prozess gespeichert und kann verwendet werden, wenn der Nutzer tatsächlich dorthin navigiert. Auch hier geht es in diesem Dokument um die neuere Speculation Rules API-Version und nicht um die ältere
<link rel="prerender">-Option, bei der kein vollständiges Prerendering mehr erfolgt. - Spekulative Navigationsvorgänge: 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 Service Worker-Navigations-Preloads. Diese Elemente werden hier nicht behandelt, der Begriff wird jedoch 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="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Die Verwendung von Spekulationsregeln für Navigations-Prefetches hat einige Vorteile gegenüber der älteren <link rel="prefetch">-Syntax, z. B. eine ausdrucksstärkere API und die Ergebnisse werden im Arbeitsspeicher-Cache anstelle des HTTP-Festplatten-Cache gespeichert.
prefetch-Spekulationsregeln debuggen
Vorabrufe, die durch Spekulationsregeln ausgelöst werden, sind im Network-Bereich auf dieselbe Weise wie andere Abrufe zu sehen:
Die beiden rot markierten Anfragen sind die vorab abgerufenen Ressourcen, wie in der Spalte Type (Typ) zu sehen ist. Sie werden mit der Priorität Lowest abgerufen, da sie für zukünftige Navigationsvorgänge 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, mit dem diese Anfragen serverseitig identifiziert werden können:
Fehler bei prefetch mit den Tabs für spekulatives Laden beheben
Im Bereich Anwendung der Chrome-Entwicklertools wurde unter dem Bereich Hintergrunddienste ein neuer Abschnitt Spekulative Ladevorgänge hinzugefügt, um das Debuggen von Spekulationsregeln zu erleichtern:
Dieser Bereich enthält drei Tabs:
- Speculative loads (Spekulatives Laden) mit dem Vorrenderstatus der aktuellen Seite.
- Regeln: Hier werden alle Regelsätze auf der aktuellen Seite als URLs oder Regeltags aufgeführt, sofern vorhanden.
- Spekulationen: Hier werden alle vorab abgerufenen und vorab gerenderten URLs aus den Regelsätzen aufgeführt.
Der Tab Speculations ist im vorherigen Screenshot zu sehen. Auf dieser Beispielseite gibt es nur eine Gruppe von Spekulationsregeln für das Vorabrufen von drei Seiten. Zwei dieser Prefetch-Vorgänge waren erfolgreich, einer ist fehlgeschlagen. Wenn Sie auf das Symbol neben Regelsatz klicken, gelangen Sie zur Quelle des Regelsatzes im Steuerfeld Elemente. Alternativ kann auf den Link Status geklickt werden, um den Tab Spekulationen aufzurufen, der nach diesem Regelsatz gefiltert ist.
Auf dem Tab Speculations (Spekulationen) 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 jeder Spekulation aufgeführt:
Über dem Drop-down-Menü können Sie sich URLs aus allen Regelsätzen oder nur aus einem bestimmten Regelsatz anzeigen lassen. Darunter werden alle URLs aufgeführt. Wenn Sie auf eine URL klicken, erhalten Sie detailliertere Informationen.
Auf diesem Screenshot sehen wir den Grund für den Fehler auf der Seite next3.html, die nicht vorhanden ist und daher den HTTP-Statuscode „404“ (ein „non-2xx“-Statuscode) zurückgibt.
Auf dem Tab „Zusammenfassung“ (Speculative loads) wird der Bericht Status für spekulatives Laden für diese Seite angezeigt. Er gibt an, ob für diese Seite ein Prefetching oder Pre‑Rendering verwendet wurde.
Wenn Sie eine vorab abgerufene Seite aufrufen, sollte eine Erfolgsmeldung angezeigt werden:
Unbegründete 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 Bereich des Tabs genauer erläutert, warum die URL nicht mit einer der Spekulations-URLs übereinstimmt. Das ist nützlich, um Tippfehler in Ihren Spekulationsregeln zu erkennen.
In diesem Beispiel sind wir zu next4.html navigiert, aber nur next.html, next2.html oder next3.html sind Prefetches. Das entspricht also keiner dieser drei Regeln.
Die Tabs Speculative loads (Spekulative Ladevorgänge) sind sehr nützlich, um die Spekulationsregeln selbst zu debuggen und Syntaxfehler im JSON-Code zu finden.
Die Prefetch-Anfragen selbst finden Sie wahrscheinlich im Netzwerkbereich. Im Beispiel für den Prefetch-Fehler sehen Sie hier den 404-Fehler für den Prefetch:
Die Tabs Spekulative Ladevorgänge 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="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"],
"tag": "rule-set-tag-1"
}
]
}
</script>
Mit diesem Regelsatz wird ein vollständiges Laden und Rendern der angegebenen Seiten ausgelöst (vorbehaltlich bestimmter Einschränkungen). So können Sie für ein sofortiges Laden sorgen, allerdings mit zusätzlichen Ressourcenkosten.
Im Gegensatz zu Prefetching-Vorgängen sind diese jedoch nicht im Network-Bereich zu sehen, da sie in einem separaten Rendering-Prozess in Chrome abgerufen und gerendert werden. Daher sind die Tabs Speculative loads (Spekulative Ladevorgänge) wichtiger, um Prerender-Spekulationsregeln zu debuggen.
Fehlerbehebung für prerender mit den Tabs für spekulatives Laden
Die gleichen Speculative Loads-Bildschirme können für Prerender-Spekulationsregeln verwendet werden, wie in einer ähnlichen Demoseite gezeigt wird, auf der versucht wird, die drei Seiten vorab zu rendern, anstatt sie vorab abzurufen:
Hier sehen wir noch einmal, dass das Vorrendern einer der drei URLs fehlgeschlagen ist. Entwickler können sich die Details pro URL auf dem Tab Speculations (Spekulationen) ansehen, indem sie auf den Link 2 Ready, 1 Failure (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 Prerender-Kandidaten ausgewählt, mit Ausnahme der Links, die mit /not-safe-to-prerender beginnen.
Außerdem wird der Prerender-Wert eagerness auf moderate festgelegt. Das bedeutet, dass die Navigationen vorgerendert werden, wenn der Mauszeiger auf den Link bewegt wird (auf dem Computer), basierend auf dem Viewport (auf dem Mobilgerät) oder wenn auf den Link geklickt wird.
Auf der Demowebsite für spekulative Regeln gibt es ähnliche Regeln. Wenn Sie den neuen Bereich Spekulative Ladevorgänge auf dieser Website verwenden, wird die Nützlichkeit dieses neuen Tabs deutlich, da alle infrage kommenden URLs aufgeführt sind, die der Browser auf der Seite gefunden hat:
Der Status ist Nicht ausgelöst, da der Prerendering-Prozess für diese noch nicht gestartet wurde. Wenn wir den Mauszeiger jedoch auf die Links bewegen, sehen wir, wie sich der Status ändert, wenn die einzelnen URLs vorgerendert werden:
In Chrome gelten Limits für das Vorrendern, einschließlich eines Maximums von 2 Vorrenderings für die Dringlichkeit moderate. Nachdem wir also den Mauszeiger auf den dritten Link bewegt haben, sehen wir den Fehlergrund für diese URL:
prerender mit den anderen Entwicklertools-Bereichen debuggen
Im Gegensatz zu Prefetch-Vorgängen werden vorgerenderte Seiten nicht in den aktuellen Rendering-Prozessen in DevTools-Bereichen wie dem Bereich Netzwerk angezeigt, da sie in einem eigenen Renderer im Hintergrund gerendert werden.
Sie können den von den DevTools-Bereichen verwendeten Renderer jetzt jedoch über das Drop-down-Menü oben rechts oder durch Auswahl einer URL oben im Bereich und Auswahl von Untersuchen ändern:
Dieses Drop-down-Menü (und der ausgewählte Wert) wird auch in allen anderen Bereichen verwendet, z. B. im Bereich Netzwerk. Dort sehen Sie, dass die angeforderte Seite die vorgerenderte Seite ist:
Wenn wir uns die HTTP-Header für diese Ressourcen ansehen, stellen wir fest, dass sie alle mit dem Header Sec-Purpose: prefetch;prerender festgelegt werden:
Oder im Bereich Elemente, in dem Sie den Seiteninhalt sehen können. Im folgenden Screenshot ist das <h1>-Element für die vorgerenderte Seite zu sehen:
Oder im Console-Bereich, in dem Sie Konsolenlogs sehen können, die von der vorgerenderten Seite ausgegeben werden:
Spekulationsregeln auf der vorgerenderten Seite debuggen
In den vorherigen Abschnitten wurde beschrieben, wie Sie vorab gerenderte Seiten auf der Seite debuggen, auf der das Vorabrendern initiiert wird. Es ist jedoch auch möglich, dass die vorgerenderten Seiten selbst Debugging-Informationen liefern, indem sie Analytics-Aufrufe ausführen oder in der Konsole protokollieren (wie im vorherigen Abschnitt beschrieben).
Wenn eine vorgerenderte Seite aktiviert wird, weil der Nutzer sie aufruft, wird dieser Status auf dem Tab Speculative loads (Spekulative Ladevorgänge) angezeigt. Dort sehen Sie auch, ob das Vorrendern erfolgreich war. Wenn das nicht möglich war, wird eine Erklärung dafür angegeben:
Außerdem wird Ihnen beim Navigieren von einer Seite mit Spekulationsregeln, die nicht mit der aktuellen Seite übereinstimmen, im Tab Spekulative Ladevorgänge angezeigt, warum die URLs nicht mit den Spekulationsregeln der vorherigen Seite übereinstimmen. Das ist wie bei Prefetches der Fall.
Fazit
In diesem Beitrag haben wir die verschiedenen Möglichkeiten zum Debuggen von Prefetch- und Pre-Render-Spekulationsregeln für Entwickler vorgestellt. Das Team arbeitet weiterhin an Tools für Spekulationsregeln. Wir freuen uns über Vorschläge von Entwicklern, wie sich diese neue API noch besser debuggen lässt. Wir empfehlen Entwicklern, Funktionsanfragen oder entdeckte Fehler in der Chrome-Problemverfolgung zu melden.
Danksagungen
Miniaturbild von Nubelson Fernandes auf Unsplash.