Orbit
Orbit Web Vitals
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
Der Tab „Web Vitals" meldet Core Web Vitals, die von echten Besuchern Ihres Projekts erfasst werden, nicht aus einem synthetischen Test. So sehen Sie, was Menschen auf ihren eigenen Geräten und Verbindungen tatsächlich erleben.
Wo sich Web Vitals befindet
Öffnen Sie Orbit, klicken Sie auf das Projekt und wählen Sie Web Vitals unter der Gruppe Observability in der Registerkarte des Projekts aus. Die Seite hat den Titel Web Vitals und erklärt ihre eigene Schlagzahl: p75 ist der Score, der für die Seitenerfahrung verwendet wird.
Bis Sie den Collector zu Ihrer Website hinzufügen, hat die Seite nichts anzuzeigen. Beginnen Sie daher mit der Einrichtungskarte am unteren Rand.
Hinzufügen des Collectors
Die Einrichtungskarte gibt Ihnen ein einzeiliges Script-Tag, das Sie in <head> Ihrer Website einfügen können:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
Die genaue Zeile mit dem bereits eingefüllten Slug Ihres Projekts befindet sich auf der Seite. Kopieren Sie sie von dort, anstatt sie zu tippen.
Das Script erfasst fünf Metriken, wenn Besucher jede Seite verlassen, und meldet sie in einem Batch. Es werden keine personenbezogenen Informationen erfasst und es werden keine Cookies gesetzt, daher entsteht durch das Script selbst keine Zustimmungsanforderung.
Daten werden etwa dreißig Sekunden nach dem ersten echten Seitenaufruf angezeigt. Wenn danach nichts angezeigt wird, wird das Script nicht geladen: Prüfen Sie die Registerkarte „Netzwerk" in Ihrem Browser auf der Live-Website.
Im Menü Settings gibt es unter der Karte Web Analytics eine zweite Kopie desselben Collectors, die von der Panel-Domain geladen wird und vor dem schließenden </body>-Tag eingefügt wird. Beide funktionieren und speisen die gleichen Daten. Verwenden Sie eins, nicht beide, sonst wird jeder Seitenaufruf doppelt gezählt.
Die fünf Metriken
| Metrik | Messgröße |
|---|---|
| LCP | Largest Contentful Paint: wie lange bis der Hauptinhalt sichtbar ist |
| INP | Interaction to Next Paint: wie schnell die Seite auf Eingaben reagiert |
| CLS | Cumulative Layout Shift: wie sehr sich das Layout beim Laden verschiebt |
| FCP | First Contentful Paint: wie lange bis etwas gezeichnet wird |
| TTFB | Time to First Byte: wie lange der Server brauchte, um zu antworten |
Die ersten drei sind die Core Web Vitals im eigentlichen Sinne. FCP und TTFB sind Diagnose-Metriken: Sie zeigen an, ob ein schlechtes LCP ein langsamer Server oder eine langsame Seite ist.
p75 verstehen
Jede Zahl auf dieser Seite ist ein p75, kein Durchschnitt, über die Samples im ausgewählten Fenster. Drei Viertel Ihrer Besucher hatten ein mindestens so gutes Erlebnis; ein Viertel hatte es schlechter.
Diese Wahl ist wichtig. Ein Durchschnitt wird von vielen schnellen Besuchen mit guten Verbindungen dominiert und verbirgt die Ausreißer. Ein p75 nicht: Wenn Ihr p75 LCP vier Sekunden beträgt, wartet ein von vier Besuchern länger als das.
Jede Metrik-Karte trägt eine Bewertung von Good, Needs improvement oder Poor, plus die Anzahl der Samples, aus denen sie berechnet wurde. Für LCP gibt die Seite die Grenzen direkt an: gut sind 2500 ms oder darunter, und schlecht sind über 4000 ms.
Behandeln Sie jede Karte mit einer kleinen Anzahl von Samples mit Skepsis. Ein p75 über ein Dutzend Samples ist Rauschen. Vergrößern Sie das Fenster mit dem Selector oben auf der Seite oder warten Sie auf mehr Traffic, bevor Sie danach handeln.
Das Trend-Diagramm
Das Trend-Diagramm zeigt tägliche p75 für LCP und CLS über das ausgewählte Fenster hinweg mit markierten Schwellwerten für „gut" und „schlecht". Der Untertitel sagt Ihnen, worauf Sie achten sollten: Flache Linien sind gesund.
Eine Stufenänderung an einem bestimmten Tag ist das nützliche Signal, da sie fast immer mit einem Deploy übereinstimmt. Vergleichen Sie das Datum mit der Registerkarte „Deployments" oder markieren Sie das Ereignis auf der Projekt-Timeline, damit es beim nächsten Mal kommentiert wird: siehe Orbit Timeline Annotations.
Ein langsamer Anstieg über Wochen ist ein anderes Problem, normalerweise angesammelte Seitengewichte statt einer einzelnen Änderung.
Länder mit den meisten Samples
Top countries zeigt die Sample-Größe nach Land, abgeleitet von Edge-Headern. Dies dient dem Kontext statt zur Analyse: Ein p75, das insgesamt schlecht aussieht, erweist sich oft als gut für Ihren Hauptmarkt und wird von einem kleineren, weiter entfernten Publikum dominiert.
Wenn sich der meiste Traffic weit weg von Ihrem Origin befindet, ist das ein Argument für aggressiveres Caching am Edge statt für weitere Code-Optimierung.
Seiten, die Aufmerksamkeit benötigen
Die Tabelle Pages needing attention rangiert Pfade danach, wie weit ihr p75 für jede Metrik über dem guten Schwellwert liegt, mit der Sample-Anzahl für jede Zeile.
Arbeiten Sie diese Tabelle durch, statt zu versuchen, die gesamte Website zu verbessern. Normalerweise machen zwei oder drei Templates den Großteil des Problems aus, und das Beheben eines Templates behebt jede Seite, die es verwendet.
Häufige Ursachen in der Reihenfolge, in der es sich lohnt, sie zu überprüfen:
- Ein Hero-Bild, das nicht dimensioniert oder vorgeladen wird. Dies ist das häufigste LCP-Problem mit großem Abstand.
- Ein Drittanbieter-Script, das den Haupt-Thread blockiert. Chat-Widgets, Tag-Manager und Analytics-Stacks sind die üblichen Verdächtigen und beeinträchtigen hauptsächlich INP.
- Bilder und Einbettungen ohne Dimensionen. Diese führen dazu, dass sich das Layout beim Laden verschiebt, was genau das ist, was CLS misst.
- Eine langsame Origin-Antwort. Wenn TTFB schlecht ist, wird keines der oben genannten Sie retten; die Lösung ist Caching oder eine schnellere Antwort, keine Frontend-Arbeit.
Keine Samples in diesem Fenster
Wenn die Seite anzeigt, dass es keine Samples gibt, trifft eine von drei Dingen zu:
- Der Collector wurde nicht hinzugefügt oder wird auf den besuchten Seiten nicht geladen.
- Er wurde vor kurzem hinzugefügt und es hat noch niemand besucht.
- Das ausgewählte Fenster ist kürzer als die Lücke seit Ihrem letzten Traffic.
Vergrößern Sie das Fenster zuerst, da das kostenlos ist, und prüfen Sie dann, ob das Script im bereitgestellten HTML der Live-Website vorhanden ist und nicht nur in Ihrem Source.
Wie lange Daten behalten werden
Einzelne Samples werden automatisch bereinigt, sobald sie 30 Tage alt sind, durch einen nächtlichen Job. Der Window-Selector lässt Sie über die beibehaltene Historie schauen; es gibt kein Archiv darüber hinaus.
Wenn Sie einen langfristigen Datensatz benötigen, machen Sie einen Screenshot oder notieren Sie die p75-Werte zu einem bestimmten Zeitpunkt, beispielsweise unmittelbar vor und nach einem Performance-Projekt, damit Sie ein Vorher und Nachher haben, das Sie später zitieren können.
Vitals auf der öffentlichen Statusseite
Wenn Sie eine Statusseite für das Projekt veröffentlichen, kann diese die gleiche Core Web Vitals-Zusammenfassung Ihren Besuchern neben Verfügbarkeit und neuesten Deploys anzeigen. Siehe Orbit Status Page.
Nächste Schritte
- Orbit Project Analytics für die Build-seitigen Zahlen und eine gekürzte Vitals-Zusammenfassung.
- Orbit Timeline Annotations um Deploys und Incidents hinter einer Stufenänderung zu markieren.
- Website Speed für allgemeine Performance-Ratschläge.