Mit den Chrome-Entwicklertools Fehler bei Spekulationsregeln beheben

Barry Pollard

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: