Experimentieren mit dem Messen der weichen Navigation

Barry Pollard

Michal Mocny

Veröffentlicht am 1. Februar 2023, zuletzt aktualisiert am 31. Juli 2025

Seit dem Start der Core Web Vitals-Initiative geht es darum, die tatsächliche Nutzerfreundlichkeit einer Website zu messen und nicht die technischen Details, die hinter der Erstellung oder dem Laden einer Website stehen. Die drei Core Web Vitals-Messwerte wurden als nutzerorientierte Messwerte entwickelt. Sie sind eine Weiterentwicklung der vorhandenen technischen Messwerte wie DOMContentLoaded oder load, mit denen Zeitangaben gemessen wurden, die oft nicht damit zusammenhingen, wie Nutzer die Leistung der Seite wahrnahmen. Daher sollte die für die Website verwendete Technologie keinen Einfluss auf die Bewertung haben, sofern die Website eine gute Leistung erbringt.

Die Realität ist immer etwas komplizierter als das Ideal und die beliebte Architektur für Single-Page-Anwendungen wurde von den Core Web Vitals-Messwerten nie vollständig unterstützt. Anstatt einzelne Webseiten zu laden, wenn der Nutzer auf der Website navigiert, verwenden diese Webanwendungen sogenannte „Soft Navigations“. Dabei werden die Seiteninhalte stattdessen durch JavaScript geändert. In diesen Anwendungen wird die Illusion einer herkömmlichen Webseite aufrechterhalten, indem die URL geändert und vorherige URLs in den Browserverlauf aufgenommen werden, damit die Schaltflächen „Zurück“ und „Vor“ wie erwartet funktionieren.

Viele JavaScript-Frameworks verwenden dieses Modell, aber jedes auf eine andere Weise. Da dies nicht dem entspricht, was der Browser traditionell als „Seite“ versteht, war die Messung bisher schwierig. Wo soll die Grenze zwischen einer Interaktion auf der aktuellen Seite und einer neuen Seite gezogen werden?

Das Chrome-Team beschäftigt sich schon seit einiger Zeit mit dieser Herausforderung und möchte eine Definition für „Soft-Navigation“ standardisieren und festlegen, wie die Core Web Vitals dafür gemessen werden können – ähnlich wie bei Websites, die in der herkömmlichen Architektur mit mehreren Seiten (Multi-Page Architecture, MPA) implementiert sind.

Wir haben die API seit dem letzten Origin-Trial intensiv weiterentwickelt und bitten Entwickler nun, die neueste Version auszuprobieren und Feedback zum Ansatz zu geben, bevor sie eingeführt wird.

Was ist eine Soft-Navigation?

Wir haben die folgende Definition für eine weiche Navigation entwickelt:

• Die Navigation wird durch eine Nutzeraktion initiiert.
• Die Navigation führt zu einer sichtbaren URL-Änderung für den Nutzer und zu einer Änderung des Verlaufs.
• Die Navigation führt zu einer DOM-Änderung.

Bei einigen Websites können diese Heuristiken zu falsch positiven Ergebnissen führen (Nutzer würden nicht wirklich von einer „Navigation“ sprechen) oder zu falsch negativen Ergebnissen (Nutzer würden von einer „Navigation“ sprechen, obwohl die Kriterien nicht erfüllt sind). Wir freuen uns über Feedback zu den Heuristiken im Repository für die Soft Navigation-Spezifikation.

Wie werden Soft Navigations in Chrome implementiert?

Sobald die Heuristiken für Soft-Navigation aktiviert sind (weitere Informationen dazu finden Sie im nächsten Abschnitt), ändert Chrome die Art und Weise, wie einige Leistungsmesswerte erfasst werden:

• Nach jeder erkannten Soft Navigation wird ein soft-navigation-Ereignis PerformanceTiming ausgegeben.
• Ein neues interaction-contentful-paint wird nach Interaktionen ausgegeben, die ein sinnvolles Rendern verursachen. Damit lässt sich Largest Contentful Paint (LCP) für Soft Navigations messen, wenn ein solcher Paint eine Soft Navigation umfasst. Bei der ursprünglichen Implementierung wurde der Messwert largest-contentful-paint zurückgesetzt, sodass er noch einmal ausgegeben werden konnte. Wir haben uns jedoch für diesen alternativen Ansatz entschieden, da er einfacher ist und mehr Möglichkeiten für die Zukunft bietet.
• Jedem Leistungszeitpunkt (first-paint, first-contentful-paint, largest-contentful-paint, interaction-contentful-paint, first-input-delay, event und layout-shift) wird ein navigationId-Attribut hinzugefügt, das dem Navigations-Eintrag entspricht, auf den sich das Ereignis bezieht. So können Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP) berechnet und der richtigen URL zugeordnet werden.

Durch diese Änderungen können die Core Web Vitals und einige der zugehörigen Diagnosemesswerte pro Seitenaufruf gemessen werden. Es gibt jedoch einige Besonderheiten, die berücksichtigt werden müssen.

Welche Auswirkungen hat die Aktivierung von Soft Navigations in Chrome?

Im Folgenden sind einige der Änderungen aufgeführt, die Websiteinhaber nach der Aktivierung dieser Funktion berücksichtigen müssen:

• CLS- und INP-Messwerte können nach Soft-Navigation-URL aufgeschlüsselt werden, anstatt über die gesamte Lebensdauer der Seite gemessen zu werden.
• Der largest-contentul-paint-Eintrag wird bereits bei einer Interaktion abgeschlossen und wird daher nur verwendet, um den anfänglichen „harten“ Navigations-LCP zu messen. Es ist also keine zusätzliche Logik erforderlich, um die Messung zu ändern.
• Der neue Messwert interaction-contentful-paint wird aus Interaktionen ausgegeben, die zum Messen von LCP für Soft-Navigations verwendet werden können.
• Damit Soft-Navigationsvorgänge der richtigen URL zugeordnet werden, muss das neue Attribut navigationID in Ihren Leistungseinträgen möglicherweise in Ihrem Anwendungscode berücksichtigt werden, wenn Sie diese Einträge verwenden.
• Nicht alle Nutzer unterstützen diese Soft Navigation API, insbesondere bei älteren Chrome-Versionen und bei Nutzern anderer Browser. Einige Nutzer melden möglicherweise keine Messwerte für Soft-Navigation, auch wenn sie Messwerte für Core Web Vitals melden.
• Da es sich um eine neue experimentelle Funktion handelt, die nicht standardmäßig aktiviert ist, sollten Websites sie auf unbeabsichtigte Nebenwirkungen testen.

Erkundigen Sie sich bei Ihrem RUM-Anbieter, ob er die Messung von Core Web Vitals nach Soft Navigation unterstützt. Viele planen, diesen neuen Standard zu testen, und werden die bisherigen Überlegungen berücksichtigen. Inzwischen erlauben einige Anbieter auch eingeschränkte Messungen von Leistungsmesswerten auf Grundlage ihrer eigenen Heuristiken.

Weitere Informationen zum Messen der Messwerte für Soft Navigations finden Sie im Abschnitt „Core Web Vitals pro Soft Navigation messen“.

Wie aktiviere ich Soft Navigations in Chrome?

Soft Navigations sind in Chrome nicht standardmäßig aktiviert. Sie können jedoch durch explizites Aktivieren dieser Funktion getestet werden.

Entwickler können diese Funktion aktivieren, indem sie das Flag unter chrome://flags/#soft-navigation-heuristics aktivieren. Die Option „Enabled Advanced Paint Attribution (Eager Cached Pre-Paint Walk)“ wird empfohlen und ist bald die Standardeinstellung. Alternativ kann sie beim Starten von Chrome mit den Befehlszeilenargumenten --enable-features=SoftNavigationHeuristics:mode/advanced_paint_attribution aktiviert werden.

Für Websites, die diese Funktion für alle Besucher aktivieren möchten, um die Auswirkungen zu sehen, läuft ab Chrome 139 eine Origin Trial. Sie kann aktiviert werden, indem Sie sich für den Testzeitraum registrieren und ein Meta-Element mit dem Origin Trial-Token in den HTML- oder HTTP-Header einfügen. Weitere Informationen finden Sie im Beitrag Origin Trials.

Websiteinhaber können das Origin Trial auf ihren Seiten für alle oder nur für eine Teilmenge von Nutzern einbinden. Beachten Sie den Abschnitt zu den Auswirkungen oben, da sich dadurch die Art und Weise ändert, wie Ihre Messwerte erfasst werden. Das gilt insbesondere, wenn Sie diesen Origin Trial für einen großen Teil Ihrer Nutzer aktivieren. CrUX meldet die Messwerte weiterhin auf die bisherige Weise, unabhängig von dieser Einstellung für Soft-Navigation. Die Auswirkungen sind also nicht relevant. Außerdem ist zu beachten, dass Origin Trials auch darauf beschränkt sind, experimentelle Funktionen bei maximal 0,5% aller Chrome-Seitenaufrufe als Median über 14 Tage zu aktivieren.Dies sollte jedoch nur bei sehr großen Websites ein Problem darstellen.

Wie kann ich Soft Navigations messen?

Sobald der Test für Soft Navigations aktiviert ist, werden die Messwerte wie bei anderen Messwerten über die PerformanceObserver API gemeldet. Bei diesen Messwerten sind jedoch einige zusätzliche Aspekte zu berücksichtigen.

Soft Navigations melden

Sie können ein PerformanceObserver verwenden, um Soft-Navigations zu beobachten. Im Folgenden finden Sie ein Beispiel für einen Code-Snippet, mit dem Soft-Navigationseinträge in der Konsole protokolliert werden. Dazu gehören auch vorherige Soft-Navigationsvorgänge auf dieser Seite, die mit der Option buffered protokolliert wurden:

const observer = new PerformanceObserver(console.log); observer.observe({ type: "soft-navigation", buffered: true }); 

Damit können Seitenmesswerte für den gesamten Lebenszyklus für die vorherige Navigation fertiggestellt werden.

Messwerte für die entsprechende URL melden

Da Soft Navigations erst nach ihrem Eintreten sichtbar sind, müssen einige Messwerte bei diesem Ereignis abgeschlossen und dann für die vorherige URL gemeldet werden, da die aktuelle URL jetzt die aktualisierte URL für die neue Seite widerspiegelt.

Mit dem Attribut navigationId des entsprechenden PerformanceEntry lässt sich das Ereignis der richtigen URL zuordnen. Sie können mit der PerformanceEntry API nachgeschlagen werden:

const softNavEntry =   performance.getEntriesByType('soft-navigation').filter(     (entry) => entry.navigationId === navigationId   )[0]; const hardNavEntry = performance.getEntriesByType('navigation')[0]; const navEntry = softNavEntry || hardNavEntry; const pageUrl = navEntry?.name; 

Dieser pageUrl-Wert sollte verwendet werden, um die Messwerte für die richtige URL zu melden, anstatt für die aktuelle URL, die möglicherweise in der Vergangenheit verwendet wurde.

startTime von Soft-Navigationen abrufen

Die Startzeit der Navigation kann auf ähnliche Weise abgerufen werden:

const softNavEntry =   performance.getEntriesByType('soft-navigation').filter(     (entry) => entry.navigationId === navigationId   )[0]; const hardNavEntry = performance.getEntriesByType('navigation')[0]; const navEntry = softNavEntry || hardNavEntry; const startTime = navEntry?.startTime; 

startTime ist der Zeitpunkt der ersten Interaktion (z. B. ein Klick auf eine Schaltfläche), die die Soft-Navigation ausgelöst hat.

Alle Leistungszeitangaben, einschließlich derer für Soft-Navigations, werden als Zeit seit der ursprünglichen „harten“ Seitennavigation angegeben. Daher ist die Startzeit der Soft Navigation erforderlich, um die Ladezeiten von Messwerten für Soft Navigation (z. B. LCP) relativ zu dieser Zeit zu vergleichen.

Core Web Vitals pro Soft Navigation messen

Wenn Sie Messwerteinträge für Soft-Navigationen einbeziehen möchten, müssen Sie includeSoftNavigationObservations: true in den observe-Aufruf Ihres Performance-Observers aufnehmen.

new PerformanceObserver((entryList) => {   for (const entry of entryList.getEntries()) {     console.log('Layout Shift time:', entry);   } }).observe({type: 'layout-shift', buffered: true, includeSoftNavigationObservations: true}); 

Aufgrund der neuesten Änderungen an der API ist das Flag includeSoftNavigationObservations nicht mehr erforderlich und wird wahrscheinlich in Zukunft entfernt. Derzeit ist diese explizite Einwilligung auf der Ebene des Performance-Observers jedoch zusätzlich zur Aktivierung der Funktion für Soft-Navigation in Chrome erforderlich.

Die Zeitangaben werden weiterhin relativ zur ursprünglichen „harten“ Navigationsstartzeit zurückgegeben. Um beispielsweise den LCP für eine Soft-Navigation zu berechnen, müssen Sie den interaction-contentful-paint-Zeitpunkt nehmen und die entsprechende Startzeit für die Soft-Navigation subtrahieren, wie bereits beschrieben. So erhalten Sie einen Zeitpunkt relativ zur Soft-Navigation. Beispiel für LCP:

new PerformanceObserver((entryList) => {   for (const entry of entryList.getEntries()) {     const softNavEntry =       performance.getEntriesByType('soft-navigation').filter(         (navEntry) => navEntry.navigationId === entry.navigationId       )[0];     const hardNavEntry = performance.getEntriesByType('navigation')[0];     const navEntry = softNavEntry || hardNavEntry;     const startTime = navEntry?.startTime;     console.log('LCP time:', entry.startTime - startTime);   } }).observe({type: 'interaction-contentful-paint', buffered: true, includeSoftNavigationObservations: true}); 

Einige Messwerte wurden bisher während der gesamten Lebensdauer der Seite gemessen. LCP kann sich beispielsweise ändern, bis eine Interaktion erfolgt. CLS und INP können aktualisiert werden, bis die Seite verlassen wird. Daher müssen bei jeder „Navigation“ (einschließlich der ursprünglichen Navigation) die Messwerte der vorherigen Seite abgeschlossen werden, wenn eine neue Soft-Navigation erfolgt. Das bedeutet, dass die ersten „harten“ Navigationsmesswerte möglicherweise früher als gewöhnlich fertiggestellt werden.

Wenn Sie mit der Messung der Messwerte für die neue Soft Navigation dieser langlebigen Messwerte beginnen, müssen die Messwerte ebenfalls „zurückgesetzt“ oder „neu initialisiert“ und als neue Messwerte behandelt werden. Es gibt keine Erinnerung an die Werte, die für frühere „Seiten“ festgelegt wurden.

Wie soll mit Inhalten umgegangen werden, die sich zwischen den Navigationsvorgängen nicht ändern?

Der LCP für Soft-Navigations (berechnet aus interaction-contentful-paint) wird nur für neue Rendervorgänge gemessen. Das kann zu einem anderen LCP führen, z. B. von einem Kaltstart dieser Soft-Navigation zu einem Soft-Load.

Nehmen wir als Beispiel eine Seite mit einem großen Bannerbild, das das LCP-Element ist. Der Text darunter ändert sich jedoch bei jeder Soft-Navigation. Beim ersten Laden der Seite wird das Bannerbild als LCP-Element gekennzeichnet und die LCP-Zeit darauf basiert. Bei nachfolgenden Soft-Navigationen ist der Text darunter das größte Element, das nach der Soft-Navigation gerendert wird, und das neue LCP-Element. Wenn jedoch eine neue Seite mit einem Deeplink in die Soft-Navigation-URL geladen wird, wird das Bannerbild neu gerendert und kann daher als LCP-Element infrage kommen.

Wie dieses Beispiel zeigt, kann das LCP-Element für die Soft Navigation unterschiedlich gemeldet werden, je nachdem, wie die Seite geladen wird. Das ist vergleichbar mit dem Laden einer Seite mit einem Ankerlink weiter unten auf der Seite, was zu einem anderen LCP-Element führen kann.

TTFB messen

Die Zeit bis zum ersten Byte (TTFB) für einen herkömmlichen Seitenaufruf gibt die Zeit an, die benötigt wird, bis die ersten Bytes der ursprünglichen Anfrage zurückgegeben werden.

Bei einer Soft Navigation ist das schwieriger. Sollten wir die erste Anfrage für die neue Seite messen? Was passiert, wenn alle Inhalte bereits in der App vorhanden sind und keine zusätzlichen Anfragen gestellt werden? Was passiert, wenn diese Anfrage im Voraus mit einem Prefetch gestellt wird? Was passiert, wenn eine Anfrage aus Nutzersicht nicht mit der Soft Navigation zusammenhängt (z. B. eine Analyseanfrage)?

Eine einfachere Methode besteht darin, für Soft-Navigations TTFB = 0 zu melden, ähnlich wie wir es für Back-Forward-Cache-Wiederherstellungen empfehlen. Dies ist die Methode, die von der web-vitals-Bibliothek für Soft Navigations verwendet wird.

In Zukunft werden wir möglicherweise genauere Methoden unterstützen, um zu ermitteln, welche Anfrage die „Navigationsanfrage“ der Soft Navigation ist, und genauere TTFB-Messungen durchführen können. Das ist aber nicht Teil der aktuellen Implementierung.

Wie kann ich sowohl alte als auch neue Daten analysieren?

Während dieses Tests sollten Sie Ihre Core Web Vitals weiterhin auf die aktuelle Weise messen, basierend auf „harten“ Seitennavigationen. So entsprechen die Ergebnisse dem, was in CrUX als offizieller Datensatz der Core Web Vitals-Initiative gemessen und berichtet wird.

Soft Navigations sollten zusätzlich gemessen werden, damit Sie sehen können, wie sie in Zukunft gemessen werden könnten, und um dem Chrome-Team Feedback dazu zu geben, wie diese Implementierung in der Praxis funktioniert. So können Sie und das Chrome-Team die API weiterentwickeln.

Für LCP bedeutet das, dass für die alte Methode nur largest-contentful-paint-Einträge und für die neue Methode sowohl largest-contentful-paint- als auch interaction-contentful-paint-Einträge berücksichtigt werden.

Für CLS und INP bedeutet das, dass diese Werte wie bisher über den gesamten Seitenlebenszyklus hinweg gemessen werden. Außerdem wird die Zeitachse separat nach Soft-Navigations unterteilt, um separate CLS- und INP-Werte für die neue Methode zu messen.

web-vitals-Bibliothek zum Messen der Core Web Vitals für Soft-Navigations verwenden

Am einfachsten ist es, die web-vitals-JavaScript-Bibliothek zu verwenden, die experimentelle Unterstützung für Soft Navigations in einem separaten soft-navs branch bietet (das auch auf npm und unpkg verfügbar ist). Das lässt sich so messen (doTraditionalProcessing und doSoftNavProcessing entsprechend ersetzen):

import {   onTTFB,   onFCP,   onLCP,   onCLS,   onINP, } from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';  onTTFB(doTraditionalProcessing); onFCP(doTraditionalProcessing); onLCP(doTraditionalProcessing); onCLS(doTraditionalProcessing); onINP(doTraditionalProcessing);  onTTFB(doSoftNavProcessing, {reportSoftNavs: true}); onFCP(doSoftNavProcessing, {reportSoftNavs: true}); onLCP(doSoftNavProcessing, {reportSoftNavs: true}); onCLS(doSoftNavProcessing, {reportSoftNavs: true}); onINP(doSoftNavProcessing, {reportSoftNavs: true}); 

Achten Sie darauf, dass die Messwerte für die richtige URL erfasst werden (siehe oben).

Die web-vitals-Bibliothek meldet die folgenden Messwerte für Soft Navigations:

Werden diese Änderungen in die Core Web Vitals-Messungen einbezogen?

Dieser Test für die sanfte Navigation ist genau das: ein Test. Wir möchten die Heuristiken bewerten und sehen, ob sie die Nutzerfreundlichkeit genauer widerspiegeln, bevor wir entscheiden, ob sie in die Initiative „Core Web Vitals“ aufgenommen werden. Wir sind sehr gespannt auf die Ergebnisse dieses Tests, können aber nicht garantieren, ob und wann diese Methode die aktuellen Messungen ersetzen wird.

Wir freuen uns über das Feedback von Webentwicklern zum Test, zu den verwendeten Heuristiken und dazu, ob die Ergebnisse Ihrer Meinung nach die Nutzerfreundlichkeit genauer widerspiegeln. Das GitHub-Repository für Soft Navigation ist der beste Ort, um Feedback zu geben. Einzelne Fehler bei der Chrome-Implementierung sollten jedoch im Chrome-Issue-Tracker gemeldet werden.

Wie werden Soft-Navigations im CrUX-Bericht erfasst?

Wie genau Soft Navigations im CrUX-Bericht erfasst werden, wenn dieser Test erfolgreich ist, muss noch festgelegt werden. Es ist nicht unbedingt sicher, dass sie genauso behandelt werden wie aktuelle „harte“ Navigationsvorgänge.

Auf einigen Webseiten sind Soft Navigations für den Nutzer fast identisch mit vollständigen Seitenaufrufen. Die Verwendung der Single Page Application-Technologie ist nur ein Implementierungsdetail. In anderen Fällen kann es sich eher um das teilweise Laden zusätzlicher Inhalte handeln.

Daher werden diese Soft Navigations möglicherweise separat im CrUX-Bericht aufgeführt oder bei der Berechnung der Core Web Vitals für eine bestimmte Seite oder Gruppe von Seiten gewichtet. Möglicherweise können wir die Soft-Navigation bei Teillast auch vollständig ausschließen, wenn sich die Heuristik weiterentwickelt.

Das Team konzentriert sich auf die heuristische und technische Implementierung, die es uns ermöglicht, den Erfolg dieses Tests zu beurteilen. Daher wurde in diesen Bereichen noch keine Entscheidung getroffen.

Feedback

Wir freuen uns über Feedback zu diesem Test an den folgenden Stellen:

• Feedback zur API sollte als Problem auf GitHub eingereicht werden.
• Fehler in der Chromium-Implementierung sollten im Chrome-Issue-Tracker gemeldet werden, sofern es sich nicht um eines der bekannten Probleme handelt.
• Allgemeines Feedback zu Web-Vitals können Sie an [email protected] senden.

Wenn Sie sich nicht sicher sind, machen Sie sich keine Sorgen. Wir freuen uns über Feedback an beiden Stellen und leiten Probleme gern an den richtigen Ort weiter.

Änderungsprotokoll

Da sich diese API in der Testphase befindet, werden daran mehr Änderungen vorgenommen als an stabilen APIs. Weitere Informationen finden Sie im Änderungs-Log für Soft Navigation Heuristics.

Fazit

Das Soft Navigations-Experiment ist ein interessanter Ansatz, wie sich die Core Web Vitals-Initiative weiterentwickeln könnte, um ein häufiges Muster im modernen Web zu messen, das in unseren Messwerten fehlt. Dieser Test befindet sich noch in der Anfangsphase und es gibt noch viel zu tun. Es ist jedoch ein wichtiger Schritt, die bisherigen Fortschritte der breiteren Web-Community zur Verfügung zu stellen, damit sie damit experimentieren kann. Das Feedback aus diesem Test ist ein weiterer wichtiger Bestandteil des Tests. Wir empfehlen allen, die sich für diese Entwicklung interessieren, diese Gelegenheit zu nutzen, um die API mitzugestalten und sicherzustellen, dass sie repräsentativ für das ist, was wir damit messen möchten.

Danksagungen

Miniaturansicht von Jordan Madrid auf Unsplash

Diese Arbeit ist eine Fortsetzung der Arbeit, die Yoav Weiss bei Google begonnen hat. Wir danken Yoav für seine Bemühungen bei dieser API.