Mit den Chrome-Entwicklertools Fehler bei Spekulationsregeln beheben

Mit Spekulationsregeln können Seitennavigationen, die als Nächstes erfolgen, vorab abgerufen und gerendert werden. Weitere Informationen 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 DevTools-Optionen 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 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.

Erläuterung von Begriffen mit „Pre-“

Es gibt viele verwirrende Begriffe, die mit „Pre-“ beginnen. Deshalb erklären wir sie zuerst:

  • Prefetching: 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 um die ähnliche, aber ältere <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 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 Version der Speculation Rules API und nicht um die ältere Option <link rel="prerender">, bei der kein vollständiges Prerendering mehr erfolgt.
  • Spekulative Navigationsvorgänge: Der 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 Navigationsvorgängen“ 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 das Vorabrufen von Navigationsressourcen 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 anstelle des HTTP-Festplatten-Cache.

prefetch-Spekulationsregeln debuggen

Vorabrufe, die durch Spekulationsregeln ausgelöst werden, sind im Bereich Network (Netzwerk) auf dieselbe Weise wie andere Abrufe zu sehen:

Bereich „Netzwerk“ in den Chrome-Entwicklertools mit vorab abgerufenen Dokumenten
Bereich „Netzwerk“ in den Chrome-Entwicklertools mit vorab abgerufenen Dokumenten

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, über den diese Anfragen serverseitig identifiziert werden können:

Prefetch-Header in Chrome-Entwicklertools mit „Sec-Purpose“ auf „prefetch“ gesetzt
Chrome-Entwicklertools: Prefetch-Header mit „Sec-Purpose“ auf „prefetch“ gesetzt

Fehler bei prefetch mit den Tabs für spekulatives Laden beheben

Im Bereich Anwendung der Chrome-Entwicklertools wurde unter dem Bereich Hintergrunddienste ein neuer Bereich Spekulative Ladevorgänge hinzugefügt, um das Debuggen von Spekulationsregeln zu erleichtern:

Chrome-Entwicklertools-Tabs für spekulatives Laden mit Prefetch-Regel
Chrome-Entwicklertools: Tabs für spekulatives Laden mit Prefetch-Regel

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 Bereich Elemente. Alternativ kann auf den Link Status geklickt werden, um den Tab Spekulationen aufzurufen, der nach diesem Regelsatz gefiltert ist.

Auf dem Tab 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:

Der Tab „Speculations“ in den Chrome-Entwicklertools mit vorab abgerufenen URLs und ihrem Status
Tab „Speculations“ in den Chrome-Entwicklertools mit vorab abgerufenen URLs und ihrem Status

Über den URLs befindet sich ein Drop-down-Menü, mit dem Sie URLs aus allen Regelsätzen oder nur aus einem bestimmten Regelsatz anzeigen lassen können. 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“ (non-2xx) 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 Prefetch oder Pre-Rendering verwendet wurde.

Wenn Sie eine vorab abgerufene Seite aufrufen, sollte eine Erfolgsmeldung angezeigt werden:

Tab „Speculative Loads“ (Spekulative Ladevorgänge) in den Chrome-Entwicklertools mit einem erfolgreichen Prefetch
Tab „Speculative Loads“ (Spekulative Ladevorgänge) in den Chrome-Entwicklertools mit erfolgreichem Prefetching

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.

Tab „Speculative Loads“ (Spekulative Ladevorgänge) in den Chrome-Entwicklertools. Hier ist zu sehen, dass die aktuelle URL nicht mit den URLs in den Spekulationsregeln der vorherigen Seite übereinstimmt.
Nicht übereinstimmende URLs werden in den Entwicklertools hervorgehoben

Hier haben wir beispielsweise next4.html aufgerufen. Da aber nur next.html, next2.html oder next3.html Prefetches sind, sehen wir, dass dies keiner dieser drei Regeln entspricht.

Die Tabs Speculative loads (Spekulative Ladevorgänge) sind sehr nützlich, um die Spekulationsregeln selbst zu debuggen und Syntaxfehler im JSON zu finden.

Die Prefetch-Anfragen selbst finden Sie wahrscheinlich im Netzwerk-Bereich. Im Beispiel für den Vorabruf-Fehler sehen Sie den 404-Fehler für den Vorabruf hier:

Der Bereich „Netzwerk“ in den Chrome-Entwicklertools zeigt einen fehlgeschlagenen Prefetch an.
Chrome-Entwicklertools: Feld „Netzwerk“ mit fehlgeschlagenem 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 dieser Regelgruppe wird ein vollständiges Laden und Rendern der angegebenen Seiten ausgelöst (vorbehaltlich bestimmter Einschränkungen). So kann die Seite sofort geladen werden, allerdings entstehen dadurch zusätzliche Ressourcenkosten.

Im Gegensatz zu Prefetching-Vorgängen sind diese jedoch nicht im Bereich Netzwerk sichtbar, 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.

Fehler bei prerender mit den Tabs für spekulative Ladevorgänge beheben

Dieselben 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:

Chrome-Entwicklertools: Spekulative Ladevorgänge für eine Seite mit Prerender-Spekulationsregeln
Chrome-Entwicklertools: Spekulative Ladevorgänge für Tabs für eine Seite mit Prerender-Spekulationsregeln

Hier sehen wir noch einmal, dass das Vorrendern einer der drei URLs fehlgeschlagen ist. Entwickler können die Details pro URL auf dem Tab Speculations (Spekulationen) abrufen, 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 gesetzt. Das bedeutet, dass die Navigationen vorgerendert werden, wenn der Mauszeiger auf den Link bewegt oder der Link angeklickt wird.

Auf der Demowebsite für spekulative Regeln gibt es ähnliche Regeln. Wenn Sie den neuen Bereich Speculative Loads (Spekulative Ladevorgänge) auf dieser Website verwenden, wird die Nützlichkeit dieses neuen Tabs deutlich, da alle infrage kommenden URLs aufgeführt werden, die der Browser auf der Seite gefunden hat:

Der Tab „Speculations“ in den Chrome-Entwicklertools mit einer Reihe von URLs, die nicht ausgelöst wurden
Tab „Speculations“ in den Chrome-Entwicklertools mit einer Reihe von URLs, die nicht ausgelöst wurden

Der Status ist Nicht ausgelöst, da der Prerender-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:

Der Tab „Speculations“ in den Chrome-Entwicklertools mit ausgelösten Vorrendering-Seiten
Tab „Speculations“ in den Chrome-Entwicklertools mit ausgelösten Prerender-Seiten

In Chrome wurden Limits für das Vorrendern festgelegt, einschließlich eines Maximums von 2 Vorrenderings für die Dringlichkeit moderate. Wenn wir also den Mauszeiger auf den dritten Link bewegen, sehen wir den Fehlergrund für diese URL:

Der Tab „Speculations“ in den Chrome-Entwicklertools mit fehlgeschlagenen Vorabläufen
Chrome-Entwicklertools: Tab „Speculations“ (Spekulationen) mit fehlgeschlagenen Vorabläufen

prerender mit den anderen Entwicklertools-Feldern debuggen

Im Gegensatz zu Prefetching-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 jedoch jetzt über das Drop-down-Menü oben rechts oder durch Auswahl einer URL im oberen Bereich des Bereichs und Auswahl von Inspect (Untersuchen) ändern:

In den Chrome-Entwicklertools können Sie jetzt den Renderer wechseln, für den Informationen angezeigt werden.
In den Chrome-Entwicklertools können Sie jetzt den Renderer wechseln, für den Informationen angezeigt werden.

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:

Chrome-Entwicklertools: Bereich „Netzwerk“ mit den Netzwerkanfragen für die vorgerenderte Seite
Bereich „Netzwerk“ der Chrome-Entwicklertools mit den Netzwerkanfragen für die vorgerenderte Seite

Wenn wir uns die HTTP-Header für diese Ressourcen ansehen, stellen wir fest, dass sie alle mit dem Sec-Purpose: prefetch;prerender-Header festgelegt werden:

Der Bereich „Netzwerk“ in den Chrome-Entwicklertools mit dem Header „Sec-Purpose“ für eine vorgerenderte Seite
Bereich „Netzwerk“ in den Chrome-Entwicklertools mit dem Header „Sec-Purpose“ für eine vorgerenderte Seite

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:

Bereich „Elemente“ in den Chrome-Entwicklertools für die vorgerenderte Seite
Bereich „Elemente“ in den Chrome-Entwicklertools für die vorgerenderte Seite

Oder das Console-Panel, in dem Sie Konsolenlogs sehen können, die von der vorgerenderten Seite ausgegeben werden:

Chrome-Entwicklertools: Bereich „Console“ mit der Konsolenausgabe einer vorgerenderten Seite
Chrome-Entwicklertools-Konsole mit der Konsolenausgabe einer vorgerenderten Seite

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 aber 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 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:

Der Tab „Speculative Loads“ (Spekulative Ladevorgänge) in den Chrome-Entwicklertools zeigt sowohl eine erfolgreich als auch eine nicht erfolgreich vorgerenderte Seite.
Tab „Spekulative Ladevorgänge“ in den Chrome-Entwicklertools mit einer erfolgreich und einer nicht erfolgreich vorgerenderten Seite

Außerdem wird Ihnen, wie bei Prefetches, beim Navigieren von einer Seite mit Spekulationsregeln, die nicht mit der aktuellen Seite übereinstimmen, auf dem Tab Spekulative Ladevorgänge angezeigt, warum die URLs nicht mit den Spekulationsregeln der vorherigen Seite übereinstimmen:

Der Tab „Speculative Loads“ (Spekulatives Laden) in den Chrome-Entwicklertools zeigt die URL-Abweichung zwischen der aktuellen URL und den URLs der vorherigen Seite.
Chrome-Entwicklertools mit den URL-Abweichungen

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 gefundene Fehler im Chrome-Fehler-Tracker zu melden.

Danksagungen

Miniaturbild von Nubelson Fernandes auf Unsplash.