Das Dashboard verwenden

Das smoxy RUM Dashboard bietet Echtzeit-Einblicke in die Leistung der Website aus der Perspektive tatsächlicher Benutzer. Diese Anleitung hilft beim Navigieren und Verstehen des Dashboards.

Zugriff auf das Dashboard

1. Im smoxy Hub anmelden

2. Zu Real User Monitoring navigieren

Dashboard-Übersicht

Das RUM-Dashboard ist in mehrere Hauptbereiche unterteilt:

1. Core Web Vitals Widget

Core Web Vitals-Übersicht mit LCP, INP und CLS

Position: Oben im Dashboard

Was es zeigt:

• Aktuelle 75. Perzentilwerte für LCP, INP und CLS

• Klassifizierung (Gut/Verbesserungsbedarf/Schlecht) für jede Metrik

Wie verwenden:

• Schneller Gesundheitscheck der Website-Leistung

• Identifizieren, welche Core Web Vitals Aufmerksamkeit benötigen

• Tägliche Veränderungen überwachen

Ziel: Alle drei Metriken im "Gut" (grünen) Bereich halten für optimales SEO und Benutzererfahrung.

2. Performance-Trend-Diagramm

Was es zeigt:

• Zeitreihen-Visualisierung des gesamten Core Web Vitals-Status

• Ob die Website "Gut", "Verbesserungsbedarf" oder "Schlecht" über die Zeit abschneidet

• Historische Leistungstrends zur Identifizierung von Mustern

Wie verwenden:

1. Zeitbereich auswählen (Letzte 24 Stunden, 7 Tage, 30 Tage, benutzerdefiniert)

2. Trend des gesamten Leistungsstatus ansehen

3. Identifizieren, wann sich die Leistung von einem Status zu einem anderen geändert hat

Häufige Muster, nach denen gesucht werden sollte:

• Statusänderungen: Wann hat sich die Leistung von "Gut" zu "Verbesserungsbedarf" verschlechtert?

• Tageszeitliche Muster: Verschlechtert sich die Leistung während Spitzenverkehrszeiten?

• Deployment-Korrelation: Hat ein kürzliches Deployment den Leistungsstatus verändert?

• Wochentag-Muster: Bessere Leistung am Wochenende vs. unter der Woche?

Profi-Tipp: Dieses Diagramm nutzen, um Leistungsänderungen mit Deployments, Traffic-Spitzen oder Konfigurationsänderungen zu korrelieren. Eine plötzliche Statusänderung deutet oft darauf hin, dass etwas Spezifisches zu dieser Zeit passiert ist.

3. Geografische Leistungskarte

Was sie zeigt:

• Weltkarte, farbcodiert nach Leistung

• Aggregierung auf Länderebene

• Gesamter Core Web Vitals-Status pro Region

Farbcodierung:

• 🟢 Grün: Alle Core Web Vitals sind "Gut"

• 🟡 Gelb: Einige Metriken "Benötigen Verbesserung"

• 🔴 Rot: Eine oder mehrere Metriken sind "Schlecht"

• ⚪ Grau: Keine Daten oder unzureichende Daten

Wie verwenden:

1. Geografische Regionen mit schlechter Leistung identifizieren

2. Auf ein Land klicken, um detaillierte Metriken zu sehen

3. Leistung über Regionen vergleichen

Häufige Erkenntnisse:

• Entfernte Regionen benötigen möglicherweise regionale CDN-Optimierung

• Bestimmte Länder mit konsistent schlechter Leistung können auf ISP-Probleme hindeuten

• Prüfen, ob Zielmärkte gute Leistung haben

Handlungsschritte:

• Wenn wichtige Märkte schlechte Leistung zeigen, erwägen:

  • Regionale CDN-Konfiguration

  • Lokale Server-Präsenz

  • Netzwerk-Routen-Optimierung

4. Per-URL-Leistungstabelle

Was sie zeigt:

• Leistungsmetriken aufgeschlüsselt nach einzelnen URLs

• Event-Count (Anzahl der verfolgten Seitenaufrufe)

• Alle Core Web Vitals und Timing-Metriken pro Seite

Spalten:

• URL/Seitenpfad

• Views (Event-Count)

• LCP, INP, CLS

• Core Web Vitals-Bewertung

Wie verwenden:

1. Nach beliebiger Spalte sortieren, um Ausreißer zu finden

2. Seiten mit schlechter Leistung identifizieren

Sortierstrategien:

📊 Nach Views sortieren → Fokus auf hochfrequentierte Seiten zuerst 🐌 Nach LCP sortieren → Seiten mit Ladeproblemen finden ⚡ Nach INP sortieren → Nicht reagierende Seiten finden

Wichtig: Fokus zuerst auf Seiten mit signifikantem Traffic. Eine langsame Seite mit 10 Views/Monat hat weniger Einfluss als eine mäßig langsame Seite mit 10.000 Views/Monat.

Häufige Dashboard-Workflows

1. Täglicher Leistungscheck

Ziel: Schneller Gesundheitscheck der Website-Leistung

1. Dashboard öffnen

2. Core Web Vitals Widget prüfen - alles grün?

3. Trend-Diagramm auf besorgniserregende Spitzen prüfen

4. Top 5 Seiten nach Traffic prüfen - neue Probleme?

5. Dauert 2-3 Minuten

2. Post-Deployment-Validierung

Ziel: Überprüfen, dass Deployment die Leistung nicht beeinträchtigt hat

1. Deployment-Zeit notieren

2. Benutzerdefinierten Zeitbereich einstellen: 24 Stunden vorher → 24 Stunden nachher

3. Trend-Diagramm auf Änderungen zur Deployment-Zeit prüfen

4. Core Web Vitals überprüfen: Haben sich Metriken verschlechtert?

5. Per-URL-Tabelle auf betroffene Seiten prüfen

6. Bei Leistungsverschlechterung untersuchen und ggf. zurückrollen

3. Optimierungspriorisierung

Ziel: Identifizieren, was für maximalen Einfluss optimiert werden soll

1. Zeitbereich auf "Letzte 30 Tage" für stabile Daten einstellen

2. Per-URL-Tabelle nach "Views" absteigend sortieren

3. Auf Top 20 Seiten nach Traffic filtern

4. Nach LCP sortieren, um langsamste hochfrequentierte Seiten zu finden

5. Dies sind die Optimierungsprioritäten

6. Tickets/Aufgaben für Top 5 Seiten erstellen

4. Geografische Leistungsanalyse

Ziel: Gute Leistung in Zielmärkten sicherstellen

1. Geografische Karte öffnen

2. Rote/gelbe Regionen identifizieren

3. Auf wichtige Marktländer klicken

4. Detaillierte Metriken überprüfen

5. TTFB über Regionen vergleichen (zeigt CDN-Effektivität)

6. Wenn wichtige Märkte langsam sind, untersuchen:

   • CDN-Abdeckung in dieser Region

   • Netzwerk-Routing

   • Regionale ISP-Probleme

Best Practices

Regelmäßiges Monitoring

✅ Täglich: Schneller Core Web Vitals-Check (2 Minuten) ✅ Wöchentlich: Trend-Diagramm und Top-Seiten überprüfen (10 Minuten) ✅ Monatlich: Umfassende Leistungsüberprüfung und Optimierungsplanung (30 Minuten) ✅ Post-Deployment: Immer innerhalb von 24 Stunden nach jeder Änderung prüfen

Leistungsziele setzen

Minimalziele (für SEO und grundlegende UX):

• LCP < 2,5s

• INP < 200ms

• CLS < 0,1

• Alle Metriken im "Gut"-Bereich

Ambitionierte Ziele (für exzellente UX):

• LCP < 1,5s

• INP < 100ms

• CLS < 0,05

• Seitenladezeit < 2s

Optimierungs-Workflow

1. Messen: Dashboard nutzen, um Probleme zu identifizieren

2. Priorisieren: Fokus auf hochfrequentierte Seiten mit schlechten Metriken

3. Optimieren: Gezielte Verbesserungen vornehmen

4. Validieren: Dashboard nutzen, um Verbesserungen zu bestätigen

5. Iterieren: Zyklus mit nächster Priorität fortsetzen

Erweiterte Analysen benötigt?

Das smoxy RUM-Dashboard bietet umfassende Einblicke für die meisten Anwendungsfälle. Wenn jedoch benötigt wird:

• Benutzerdefinierte Metrikberechnungen

• Erweiterte Segmentierung

• Integration mit bestehenden Monitoring-Tools

• Benutzerdefinierte Alarmregeln

• Langfristige Trendanalyse über das Dashboard hinaus

Das Open-Source-Grafana-Dashboard-Projekt erkunden:

👉 Benutzerdefinierte Dashboards mit Grafana

Dies ermöglicht vollständig angepasste Visualisierungen mit RUM-Daten via API, während smoxy weiterhin die Daten sammelt und speichert.