Mit den Chrome-Entwicklertools Fehler bei Spekulationsregeln beheben

Barry Pollard

Spekulationsregeln können verwendet werden, um Navigationen für die nächste Seite vorab abzurufen und vorab zu rendern, wie im vorherigen Post 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 Debugging von Spekulationsregeln kann kompliziert 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 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 erfährst du, wie du mit diesen Tools die Spekulationsregeln einer Seite verstehen kannst, warum sie möglicherweise nicht funktionieren und wann Entwickler die vertrauteren Entwicklertools nutzen können – und wann nicht.

Erläuterung Nutzungsbedingungen

Es gibt viele „vor-“ Begriffe zu verstehen, die verwirrend sind. Daher beginnen wir mit einer Erklärung:

• Prefetch: Ressourcen oder Dokumente im Voraus abrufen, um die künftige Leistung zu verbessern. In diesem Beitrag geht es um den Vorabruf von Dokumenten mit der Speculation Rules API anstelle der ähnlichen, aber älteren <link rel="prefetch">-Option, die häufig zum Vorabruf von Unterressourcen verwendet wird.
• Pre-Rendering: Hierbei wird die gesamte Seite über den Vorabruf hinaus gerendert, als ob der Nutzer sie aufgerufen hätte. Sie bleibt jedoch in einem verborgenen Hintergrund-Renderer-Prozess bereit, den Sie verwenden können, wenn der Nutzer tatsächlich dorthin navigiert. 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.
• Navigationsspekulationen: Der Sammelbegriff für die neuen Prefetch- und Pre-Rendering-Optionen, die durch Spekulationsregeln ausgelöst werden.
• Vorabladen: ein Begriff mit Überlastung, der sich auf verschiedene Technologien und Prozesse wie <link rel="preload">, den Vorabladescanner und Vorabladevorgänge für Service Worker beziehen kann. Diese Punkte werden hier nicht behandelt, aber der Begriff wird verwendet, um sie 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-Prefetches 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 und nicht im HTTP-Laufwerks-Cache.

prefetch-Spekulationsregeln debuggen

Prefetches, die durch Spekulationsregeln ausgelöst werden, werden im Bereich Netzwerk genauso angezeigt wie andere Abrufe:

</ph>

Die beiden rot hervorgehobenen Anfragen sind die Prefetch-Ressourcen, wie Sie der Spalte Type entnehmen können. Diese werden mit der Priorität Lowest abgerufen, wie sie bei künftigen Navigationen der Fall sind. Chrome priorisiert die Ressourcen der aktuellen Seite.

Wenn Sie auf eine der Zeilen klicken, wird auch der Sec-Purpose: prefetch-HTTP-Header angezeigt. So können diese Anfragen serverseitig identifiziert werden:

</ph>

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

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:

</ph>

In diesem Abschnitt sind drei Registerkarten verfügbar:

• Spekulative Ladevorgänge: Zeigt den vorab gerenderten Status der aktuellen Seite an.
• Regeln: Hier werden alle Regelsätze aufgelistet, die auf der aktuellen Seite gefunden wurden.
• Spekulationen: Eine Liste aller vorabgerufenen und vorab gerenderten URLs aus den Regelsätzen.

Der Tab Spekulationen ist im vorherigen Screenshot zu sehen. Diese Beispielseite enthält einen einzelnen Satz von Spekulationsregeln für den Vorabruf von drei Seiten. Zwei dieser Prefetches waren erfolgreich, einer fehlgeschlagen. Durch Klicken auf das Symbol neben dem Regelsatz gelangen Sie zur Quelle des Regelsatzes im Steuerfeld Elemente. 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), aus welchem Regelsatz sie stammen (da es mehrere auf einer Seite gibt) und dem Status der einzelnen Spekulationen aufgeführt:

</ph>

Mit einem Dropdown-Menü über den URLs können Sie die URLs aus allen Regelsätzen oder nur die URLs aus einem bestimmten Regelsatz anzeigen. Darunter sind alle URLs aufgeführt. Wenn Sie auf eine URL klicken, erhalten Sie detailliertere Informationen.

Auf diesem Screenshot sehen Sie die Fehlerursache für die Seite next3.html. Diese gibt es nicht und gibt den HTTP-Statuscode 404 zurück.

Der Tab „Zusammenfassung“, Spekulative Ladevorgänge, enthält den Bericht Status des spekulativen Ladens für diese Seite. Dieser gibt an, ob für diese Seite ein Prefetch oder ein Pre-Rendering verwendet wurde.

Bei einer vorabgerufenen Seite sollte eine erfolgreiche Meldung angezeigt werden, wenn die entsprechende Seite aufgerufen wird:

</ph>

Spekulationen, die unübertroffen wurden

Wenn eine Navigation von einer Seite mit Spekulationsregeln erfolgt, die nicht dazu führt, dass ein Prefetch oder Pre-Rendering verwendet wird, werden in einem zusätzlichen Bereich auf dem Tab weitere Details dazu angezeigt, warum die URL mit keiner der Spekulations-URLs übereinstimmt. Dies ist hilfreich, um Tippfehler in Ihren Spekulationsregeln zu erkennen.

</ph>

Hier haben wir beispielsweise next4.html aufgerufen, aber nur next.html, next2.html oder next3.html sind Prefetches. Wir sehen also, dass dies keine Übereinstimmung mit einer dieser drei Regeln gibt.

Die Tabs Spekulative Ladevorgänge sind sehr nützlich, um Fehler in den Spekulationsregeln selbst zu beheben und Syntaxfehler im JSON-Format zu finden.

Was die Prefetches selbst betrifft, ist Ihnen wahrscheinlich der Bereich Network vertraut. Für das Beispiel für einen Prefetch-Fehler können Sie den 404-Fehler für den Prefetch hier sehen:

</ph>

Die Tabs Spekulative Ladevorgänge sind jedoch viel nützlicher für das Pre-Rendering von Spekulationsregeln, die im Folgenden behandelt werden.

Spekulationsregeln für prerender

Spekulationsregeln für das Pre-Rendering folgen derselben Syntax wie Prefetch-Spekulationsregeln. Beispiel:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

Dieser Regelsatz löst das vollständige Laden und Rendern der angegebenen Seiten aus (vorbehaltlich bestimmter Einschränkungen). Dies kann den Ladevorgang beschleunigen – allerdings mit zusätzlichen Ressourcenkosten.

Anders als Prefetch-Vorgänge sind diese jedoch nicht im Steuerfeld Netzwerk verfügbar, da sie in einem separaten Renderingprozess in Chrome 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

Die gleichen Bildschirme für Spekulatives Laden können für Pre-Rendering-Spekulationsregeln verwendet werden, wie mit einer ähnlichen Demoseite gezeigt, die versucht, das Pre-Rendering durchzuführen, anstatt die drei Seiten vorab abzurufen:

</ph>

Hier sehen wir wieder, dass eine der drei URLs nicht vorab gerendert werden konnte. Entwickler können die Details der einzelnen URLs 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 Dokumentregeln eingeführt. So kann der Browser diese 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 gleichen Ursprungslinks als Kandidaten für das Pre-Rendering ausgewählt, mit Ausnahme derjenigen, die mit /not-safe-to-prerender beginnen.

Außerdem wird der Pre-Rendering-eagerness auf moderate gesetzt. Das bedeutet, dass die Aufrufe vorab gerendert werden, wenn der Nutzer den Mauszeiger auf den Link bewegt oder darauf klickt.

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:

</ph>

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:

</ph>

Chrome hat Limits für Pre-Renderings festgelegt, einschließlich maximal zwei Pre-Renderings, um die moderate-Effizienz zu steigern. Wenn du den Mauszeiger auf den dritten Link bewegst, wird also der Grund für den Fehler für diese URL angezeigt:

</ph>

Fehler in prerender mit den anderen Entwicklertools-Bereichen beheben

Im Gegensatz zu Prefetches werden vorab gerenderte Seiten nicht in den aktuellen Renderingprozessen in Entwicklertools-Bereichen wie dem Steuerfeld Network (Netzwerk) angezeigt, da sie in einem eigenen Renderer im Hintergrund gerendert werden.

Es ist jetzt jedoch möglich, den in den Entwicklertools-Bereichen verwendeten Renderer über das Drop-down-Menü oben rechts oder durch Auswahl einer URL im oberen Teil des Bereichs und Auswahl von Prüfen zu ändern:

</ph>

Dieses Drop-down-Menü und der ausgewählte Wert werden auch in allen anderen Bereichen verwendet, z. B. im Bereich Netzwerk. Hier sehen Sie, dass die angeforderte Seite die vorab gerenderte Seite ist:

</ph>

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

</ph>

Oder im Bereich Elements, in dem Sie den Seiteninhalt sehen können, wie im folgenden Screenshot zu sehen, in dem sich das Element <h1> für die vorab gerenderte Seite bezieht:

</ph>

Oder im Steuerfeld der Konsole: Hier sehen Sie die Konsolenprotokolle, die von der vorab gerenderten Seite ausgegeben wurden:

</ph>

Spekulationsregeln auf der vorab gerenderten Seite debuggen

In den vorherigen Abschnitten wurde erläutert, wie Sie Fehler bei 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 bereitstellen, entweder durch Analytics-Aufrufe oder Protokollierung in der Konsole (wie im vorherigen Abschnitt beschrieben).

Sobald eine vorab gerenderte Seite durch den Nutzer aktiviert wird, der sie aufruft, wird auf dem Tab Spekulative Ladevorgänge dieser Status angezeigt und es wird angegeben, ob das Pre-Rendering erfolgreich war oder nicht. Wenn es nicht vorab gerendert werden konnte, wird eine Erklärung dazu angezeigt, warum das der Fall war:

</ph>

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:

</ph>

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 weiterhin an Tools für Spekulationsregeln und wir würden uns über Vorschläge von den Entwicklern freuen, welche anderen Möglichkeiten zur Fehlerbehebung bei dieser spannenden neuen API hilfreich wären. Wir empfehlen Entwicklern, im Chrome Issue Tracker ein Problem zu melden, wenn Funktionsanfragen gestellt oder Fehler entdeckt werden.

Danksagungen

Thumbail-Bild von Nubelson Fernandes auf Unsplash