Core/Dash Die Metric Breakdown Dashboards verstehen

Das Metric Breakdown Dashboard verstehen

Zusammengesetzte Metriken wie LCP und INP aggregieren mehrere unterschiedliche Timing-Ereignisse. Die Optimierung des Gesamtwerts erfordert die Isolierung dieser zugrunde liegenden Komponenten. Das Metric Breakdown Dashboard zerlegt die Performance in granulare Phasen, um den spezifischen Engpass zu identifizieren.

Dieses Tool ersetzt die grobe Optimierung durch präzise Engineering-Ziele. Es ordnet die Latenz dem Server, dem Netzwerk oder der Client-Ausführung zu.

Anatomie des Breakdown Dashboards

Das Dashboard bietet drei synchronisierte Ansichten, um die Grundursache der Latenz zu isolieren:

• Contribution Donut: Visualisiert das relative Gewicht jedes Teilbereichs. Es beantwortet die Frage "Was ist der größte Faktor?". Wenn die `Time to First Byte` 70 % des Diagramms einnimmt, wissen Sie, dass das Problem backend-bezogen ist.
• Historical Timeline: Zeigt die Trends der absoluten Werte jeder Komponente im Zeitverlauf. Verwenden Sie dies, um Performance-Verschiebungen mit bestimmten Ereignissen wie Deployments zu korrelieren.
• Segmented Data Table: Schlüsselt die Metrik nach Dimensionen (URL, Gerät usw.) auf. Jede Zeile enthält einen Verteilungsbalken, der das einzigartige Profil dieses Segments aufzeigt und Ihnen hilft, Ausreißer zu erkennen.

LCP-Komponenten (Largest Contentful Paint)

LCP misst die Ladeleistung. Wir unterteilen diese Metrik in vier Phasen:

• TTFB (Time to First Byte): Die Serverantwortzeit. Eine hohe TTFB weist auf langsame Datenbankabfragen oder fehlendes Edge-Caching hin.
• Load Delay: Die Lücke zwischen der initialen HTML-Antwort und dem Beginn des Downloads der LCP-Ressource. Dies misst die Latenz der Ressourcenerkennung.
• Load Time: Die Dauer, die erforderlich ist, um das LCP-Asset (Bild oder Schriftart) über das Netzwerk herunterzuladen. Dies korreliert mit der Dateigröße und der Bandbreite.
• Render Delay: Die Zeit zwischen dem Abschluss des Ressourcen-Downloads und dem Rendern auf dem Bildschirm. Eine hohe Render Delay weist häufig auf eine Blockierung des Main Threads durch JavaScript hin.

TTFB-Komponenten (Time to First Byte)

TTFB dient als Proxy für die Server-Reaktionsfähigkeit. Dieser Breakdown isoliert die Phasen der Netzwerkverbindung:

• Waiting: Die Zeit, die der Browser darauf wartet, dass der Server eine Antwort generiert (Backend-Verarbeitung).
• Cache: Zeit, die für die Überprüfung lokaler oder zwischengeschalteter Caches aufgewendet wird.
• DNS: Die Dauer des Domain Name System-Lookups.
• Connection: Die Zeit, die für den Aufbau der TCP-Verbindung benötigt wird.
• Request: Die Zeit, die für das Senden der HTTP-Request-Header benötigt wird.

INP-Komponenten (Interaction to Next Paint)

INP misst die Interaktivität. Wir segmentieren den Interaktionslebenszyklus, um die Blockierung des Main Threads genau zu lokalisieren:

• Input Delay: Die Zeit zwischen der Benutzerinteraktion und der Ausführung des Event-Handlers. Eine hohe Input Delay bedeutet, dass der Main Thread ausgelastet war.
• Processing: Die Zeit, die für die Ausführung der Event-Callbacks benötigt wird. Dies repräsentiert die Effizienz Ihrer JavaScript-Logik.
• Presentation: Die Zeit, die der Browser benötigt, um das Layout zu berechnen und den nächsten Frame zu malen.

Diagnose-Workflow

Befolgen Sie diese Sequenz, um eine Regression zu diagnostizieren:

• Quantifizieren Sie den Engpass: Betrachten Sie das Donut-Diagramm, um den dominierenden Teilbereich zu finden. Wenn die `TTFB` hoch ist, überprüfen Sie Ihren Server. Wenn die `Resource Load Delay` hoch ist, überprüfen Sie Ihre Asset-Priorität.
• Stellen Sie die Kausalität her: Überprüfen Sie die Timeline, um den Ausschlag mit einem bestimmten Deployment oder Content-Update zu korrelieren.
• Isolieren Sie den Kontext: Verwenden Sie die Data Table, um zu sehen, ob dieses Muster für alle Seiten gilt oder ob es spezifisch für ein bestimmtes Template ist. Das Finden des Musters ist der Schlüssel zur Bereitstellung eines skalierbaren Fixes.

Optimierung von Core Web Vitals

Verwenden Sie diese Breakdowns, um Tickets an das richtige Engineering-Team weiterzuleiten. Weisen Sie TTFB-Probleme dem Backend zu. Weisen Sie Load Delay und Render Delay dem Frontend zu. Weisen Sie DNS/Connection-Latenz der Infrastruktur zu. Dieser optimierte Triage-Prozess reduziert die Untersuchungszeit und beschleunigt die Lösung.