Skip to main content
Browser monitoring ist ein Beta-Feature von AppSignal Labs. Das Paket @appsignal/browser wird unter dem beta-Tag auf npm veröffentlicht, und seine Konfiguration und API können sich zwischen Beta-Releases noch ändern. Teilen Sie Ihr Feedback in unserer Discord-Community.
Web vitals messen, wie schnell eine Seite lädt und reagiert. Sie zeigen außerdem, ob sich ihr Layout unerwartet verschiebt. AppSignal misst sie auf den Geräten und Verbindungen echter Nutzer. Die Erfassung beginnt mit init(). Es gibt nichts zu konfigurieren.

Was jede Metrik misst

LCP, INP und CLS sind die drei Core Web Vitals. FCP und TTFB helfen dabei, einen schlechten LCP zu erklären. Ein langsamer TTFB deutet auf den Server oder das Netzwerk hin. Ein schneller TTFB bei langsamem LCP deutet auf das Laden von Ressourcen oder das Rendering hin. Jeder Wert wird an diesen Schwellenwerten bewertet. AppSignal versieht jeden Wert in der Zusammenfassung mit einer Bewertung. Die Tabelle pro Route verwendet dieselben Bewertungen.

Wie Werte Routen zugeordnet werden

LCP, FCP und TTFB messen den Seitenaufruf. Der Browser misst jeden davon einmal, beim ersten Laden der Seite, und danach nie wieder. In einer Single-Page-Anwendung gehören sie zu der zuerst geladenen Route. Spätere clientseitige Routen erhalten keine neuen Lade-Metriken. Sie erneut pro Route zu messen, bräuchte eine Browser-Funktion, die noch experimentell ist. CLS und INP können sich aufbauen, solange eine Seite geöffnet ist. Unterstützt der Browser das, ordnet AppSignal beobachtete Werte der aktiven Route zu. Bei einer Navigation setzt es diese Werte zurück. Damit Routen getrennt und lesbar bleiben, teilen Sie AppSignal bei jeder Navigation Ihres Routers das Route-Template mit:
Ohne Template ersetzt der Prozessor erkennbare IDs in Web-vital-URLs, etwa Zahlen und UUIDs. Für Ihre App spezifische IDs kann er dabei übersehen. Fehler verwenden den Rohpfad, sofern Sie kein Template setzen, ein Aufruf verbessert also auch die Fehlergruppierung. Es gibt einen zweiten Grund für Templates. AppSignal behält nur eine begrenzte Anzahl separater Routen pro Anwendung. Sobald Sie darüber hinausgehen, werden die übrigen zu einer unbenannten Gruppe zusammengefasst, die der Routen-Filter auslässt. Ohne explizite Templates kann dieses Limit bei Routen, deren IDs der Prozessor nicht erkennt, früher erreicht werden.

Wann Werte gesendet werden

Web vitals werden gestapelt und an Seiten- und Routengrenzen gesendet:
  • Wenn die Seite verborgen wird, was das Wechseln von Tabs und das Verschieben der App in den Hintergrund abdeckt.
  • Wenn die Seite geschlossen oder verlassen wird.
  • Bei einem clientseitigen Routenwechsel.
Wenn eine Seite abstürzt oder erzwungen beendet wird, bevor eines davon passiert, wird für diesen Besuch nichts aufgezeichnet. Bei Hash-basierten Routern behandelt AppSignal #/orders als Navigation. Einen einfachen Anker auf derselben Seite, etwa #pricing, behandelt es nicht als solche.

Browser-Unterstützung

Das SDK meldet eine Metrik nur, wenn der Browser die dafür nötigen Performance-Einträge bereitstellt. CLS benötigt layout-shift, INP benötigt event-timing. Browser ohne diese Entry-Typen tragen zu diesen Metriken nichts bei. LCP, FCP und TTFB werden, sofern verfügbar, über die web-vitals-Bibliothek erfasst.

Performance in AppSignal ansehen

Die Performance-Ansicht fasst jede Metrik für den gewählten Zeitraum zusammen. Filtern Sie sie nach Perzentil, Zeit, App-Version oder Route. Mehr dazu unter Front-end-Performance in AppSignal.