Chrome DevTools: Soft-Navigation-Analyse für SPAs komplett, dazu eine CPU-Tier-Überschreibung
Die Geschwindigkeit der „Seitenwechsel” einer SPA lässt sich jetzt direkt in DevTools analysieren, und Leistungstests für verschiedene Hardwarestufen lassen sich per Code reproduzieren.
Chrome DevTools hat für Entwickler von SPAs (Web-Apps, die den Bildschirm ohne vollständiges Neuladen der Seite wechseln) zwei Performance-Funktionen ergänzt. Die eine ist die Analyse von Soft Navigations in den Insights des Performance-Panels. Die andere ist ein Befehl im Chrome DevTools Protocol (CDP, der Schnittstelle zur Steuerung von DevTools per Code), der eine CPU-Leistungsstufe setzt. Beides steht im DevTools-Update-Beitrag von Chrome for Developers (zu Chrome 153 und 154, veröffentlicht am 22. September).
Was eine Soft Navigation ist
Normalerweise lädt der Browser beim Klick auf einen Link eine neue Seite vom Server. Eine SPA funktioniert anders: JavaScript ändert nur die URL in der Adresszeile und tauscht einen Teil des Bildschirms aus. Für Nutzer sieht das wie ein Seitenwechsel aus, aber der Browser weiß nicht, dass „eine neue Seite geöffnet wurde”.
Deshalb wurde die Ladekennzahl (LCP) nur einmal beim ersten Laden gemessen, spätere Bildschirmwechsel fielen aus der Messung heraus. Die Soft Navigations API soll solche Wechsel als Navigation behandeln und ihre Leistung getrennt messen.
- In Chrome 152 kam die Unterstützung für Soft Navigations in die Live Metrics und die Trace-Ansichten von DevTools.
- Jetzt wurde die Analyse in den Insights des Performance-Panels ergänzt, was Chrome als „vollständige Unterstützung von der Messung bis zur Analyse” beschreibt.
CPU-Leistungsstufe per Code setzen
- Der neue CDP-Befehl heißt
Emulation.setCPUPerformanceOverride. Er setzt eine kalibrierte CPU-Leistungsstufe, was laut Chrome „reproduzierbare Leistungstests über Hardwarestufen hinweg” ermöglicht. - Der ältere Ansatz (
Emulation.setCPUThrottlingRate) bremste die CPU um einen festen Faktor wie „4-mal langsamer”. Der neue Ansatz misst Berichten zufolge zuerst die tatsächliche Leistung des eigenen PCs, erzeugt daraus Referenzwerte wie „Mobil, untere Klasse” und „Mobil, mittlere Klasse” und richtet sich nach diesen Stufen.
Die Details (welche Stufen es gibt, wie die Kalibrierung funktioniert) werden im Chrome-Beitrag nicht ausführlich erklärt. Die Kalibrierungs-Voreinstellungen sind nach der DevTools-Dokumentation zum Throttling beschrieben.
Angaben, die wir nicht bestätigen konnten
- „Integrierte Überwachung mit der Soft Navigation Timing API wird bereitgestellt”: Die Analyseunterstützung in DevTools und die vollständige Veröffentlichung der API sind zwei verschiedene Dinge. In einem Beitrag vom 20. April eröffnete Chrome einen letzten Origin Trial (eine Testphase, in der ausgewählte Websites eine Funktion vorab nutzen können) für Chrome 147 bis 149 und sagte nur, die API solle später in diesem Jahr starten. Ob sie inzwischen vollständig veröffentlicht ist, konnten wir nicht bestätigen. Einige externe Artikel schreiben, sie sei bereits ausgeliefert, doch aus Chromes eigenem Material ließ sich das nicht bestätigen.
- „Zielt auf Frameworks wie React und Next.js”: Eine Erwähnung von Frameworks im Chrome-Beitrag haben wir nicht gefunden. Gemeint sind offenbar Bildschirmwechsel nach SPA-Art im Allgemeinen, nicht bestimmte Frameworks.
- „Ein Satz von Befehlen”: Der einzige im Chrome-Beitrag bestätigte neue CDP-Befehl ist
Emulation.setCPUPerformanceOverride. - Datum: Chromes Beitrag erschien am 22. September (der Seitentitel lautet „October 2026”).
Was sich für Entwickler ändern könnte
Das Folgende ist unsere Einschätzung und unser Rat auf Grundlage des offiziellen Beitrags.
- Was man sofort ausprobieren kann. In Chrome 153 oder neuer zeigen die Insights des Performance-Panels Engpässe pro Bildschirmwechsel einer SPA. Das hilft, herauszufinden, „was beim Wechsel zwischen Routen langsam ist”, statt nur den ersten Ladevorgang zu betrachten.
- Echtnutzerdaten zu sammeln ist noch früh. Die Soft Navigations API ist nicht vollständig veröffentlicht; die Browserunterstützung sollte man vor dem Einsatz zur Erfassung der Wechselleistung echter Besucher separat prüfen.
- Gleiche Bedingungen in automatisierten Tests. In CI (Prüfungen, die bei jedem Code-Upload automatisch laufen) oder End-to-End-Tests (mit Werkzeugen, die einen Browser automatisch steuern, etwa Puppeteer und Playwright) lässt sich mit einer festen CPU-Stufe leichter gegen dieselbe Basis vergleichen, ob eine Änderung etwas verlangsamt hat.
- Auf derselben Maschine vergleichen. Die Stufen entstehen durch Kalibrierung der Leistung des jeweiligen PCs. Die Basis kann sich zwischen Teammitgliedern und CI-Maschinen unterscheiden, daher ist es sicherer, in derselben Umgebung zu vergleichen.
Was man beobachten sollte
Den Termin der vollständigen Veröffentlichung der Soft Navigations API und die Unterstützung in anderen Browsern, die offizielle Dokumentation und die Parameter von Emulation.setCPUPerformanceOverride sowie die Frage, wie Frameworks wie Next.js Soft Navigations anbinden.
Quellen
Quelle: developer.chrome.com