Google Chrome revolutioniert Web Vitals Messung für SPAs

Die neuen Fortschritte von Google Chrome bei Core Web Vitals

Google Chrome testet einen neuen Ansatz zur Verbesserung der Core Web Vitals-Messung speziell für Single Page Applications (SPAs). Diese Initiative zielt darauf ab, langjährige Herausforderungen in der Leistungsüberwachung zu lösen, die sowohl SEO-Audits als auch Ranking-Signale beeinflussen.

Mit der Einführung von Chrome 139 können Entwickler an einem Test der Soft Navigations API teilnehmen. Diese API ermöglicht es, Leistungsmetriken wie Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) und Interaction to Next Paint (INP) auch bei Aktualisierungen innerhalb der Seite zu messen, ohne dass ein vollständiger Seiten-Reload erfolgt.

Warum das für SEO wichtig ist

SPAs sind aufgrund ihrer Geschwindigkeit und Interaktivität beliebt. Allerdings bereiten sie bei der Messung von Core Web Vitals besondere Schwierigkeiten. Dies liegt daran, dass sie oft die Seite mit JavaScript aktualisieren, ohne eine traditionelle Navigation auszulösen. Dadurch fallen wichtige Updates bei Tools wie Lighthouse oder Google’s Feld-Datenmessungen unter den Tisch.

Die neue API soll diese Lücke schließen und bietet dir eine präzisere Einsicht in die reale Performance deiner Website – besonders nach Benutzeraktionen oder internen Navigationen.

Die Funktionsweise der neuen API

Die Soft Navigations API erkennt „weiche Navigationen“ anhand bestimmter Merkmale. Hier ein typischer Ablauf:

• Ein Nutzer klickt auf einen Link
• Die URL der Seite wird aktualisiert
• Die sichtbaren Inhalte der Seite ändern sich und verursachen ein Re-Rendering

Chrome interpretiert diese Schritte nun als Navigationsevent, auch wenn kein vollständiger Seiten-Reload stattfindet.

Zusätzlich führt die API neue Metriken und Erweiterungen ein:

• interaction-contentful-paint: Ermöglicht das Messen von LCP nach einer weichen Navigation.
• navigationId: Diese wird zu Performance-Einträgen hinzugefügt, sodass Metriken spezifischen Navigationsereignissen zugeordnet werden können.
• Erweiterungen für Layout Shift, Event Timing und INP, um auch bei weichen Navigationen zu funktionieren.

Wie du es ausprobieren kannst

Du kannst die Funktion in Chrome 139 auf zwei Arten testen:

• Lokales Testen: Aktiviere chrome://flags/#soft-navigation-heuristics in Chrome.
• Origin Trial: Füge einen Token zu deiner Website hinzu (per Meta-Tag oder HTTP-Header), um reale Nutzerdaten zu sammeln.

Chrome empfiehlt, die „Advanced Paint Attribution“-Option zu aktivieren, um die vollständigsten Daten zu erhalten.

Das ist zu beachten

Barry Pollard von Chrome, der diese Entwicklung leitet, betont, dass die API derzeit noch experimentell ist:

„Möchtest du Core Web Vitals für SPAs messen? Wir arbeiten an der Soft Navigations API und starten in Chrome 139 eine neue Phase. Probiere sie in deiner App aus und teile uns mit, falls es nicht korrekt funktioniert!“

Hier sind ein paar Dinge, die du im Hinterkopf behalten solltest:

• Die Metriken könnten von älteren Chrome-Versionen oder anderen Browsern nicht unterstützt werden.
• Dein Anbieter von Real User Monitoring (RUM) muss navigationId und interaction-contentful-paint unterstützen, um Daten zu erfassen.
• In einigen seltenen Fällen, wie bei automatischen Weiterleitungen, könnten Navigationen nicht registriert werden.

Ausblick

Dieses Experiment ist ein vielversprechender Schritt, um Core Web Vitals auch für moderne JavaScript-lastige Websites präzis zu machen. Derzeit ist die API noch nicht in öffentlichen Leistungsberichten von Chrome wie CrUX integriert – das könnte sich jedoch ändern, falls der Versuch erfolgreich ist.

Wenn deine Seite auf Frameworks wie React, Vue oder Angular basiert, solltest du die Gelegenheit nutzen, die neue API zu testen und zu sehen, wie gut sie die Benutzererfahrung erfasst.

Bildquelle: Roman Samborskyi/Shutterstock