Core Web Vitals zeigt die drei Metriken, nach denen Google rangiert – LCP, CLS und INP –, die live auf der von Ihnen angezeigten Seite gemessen, anhand der Schwellenwerte von Google bewertet und auf das genaue Element hinter jeder Zahl zurückgeführt werden.
Core Web Vitals entscheidet teilweise über den Rang Ihrer Seiten, aber die üblichen Methoden zur Messung sind umständlich. Laborwerkzeuge erzeugen eine synthetische Belastung, die niemand erfährt. Die Search Console meldet echte Nutzer mit vier Wochen Verspätung, gruppiert in URL-Buckets. Beides sagt Ihnen nicht, welches Element auf der Seite vor Ihnen das Problem darstellt.
Dieses Tool misst die Seite, die Sie tatsächlich ansehen, während Sie sie verwenden. LCP, CLS und INP erhalten jeweils eine Kachel mit ihrem Wert, einer Bewertung „Gut“, „Benötigt Arbeit“ oder „Schlecht“ im Vergleich zu den von Google veröffentlichten Schwellenwerten und einer Leiste, die anzeigt, wo Sie sitzen. FCP und TTFB stehen aus Kontextgründen daneben, denn ein langsames LCP, das durch einen langsamen Server verursacht wird, ist ein anderes Problem als eines, das durch ein umfangreiches Image verursacht wird.
Die Definitionen stimmen mit dem überein, was Chrome an CrUX meldet. Dies ist wichtig, wenn Sie Zahlen mit der Search Console vergleichen möchten. CLS verwendet Sitzungsfenster – ein Fenster endet nach einer Pause von einer Sekunde oder nach fünf Sekunden, und das schlechteste Fenster gewinnt – anstatt naiv jede Schicht zusammenzuzählen. INP ist das 98. Perzentil Ihrer Interaktionslatenzen, was bei einem normalen Besuch einfach die langsamste Interaktion ist. LCP ändert sich bei Ihrer ersten Interaktion nicht mehr, genau wie Chrome es tut.
Am nützlichsten ist es, jede Zahl zuzuordnen. Das Bedienfeld benennt das größte Farbelement, die verschobenen Elemente und die langsamsten Interaktionen, und eine Schaltfläche „Anzeigen“ scrollt zu jedem dieser Elemente und skizziert es auf der Seite. Anstatt zu wissen, dass CLS 0,31 beträgt, sehen Sie das Banner, das Ihren Inhalt nach unten drängt. Copy Report liefert Ihnen das Ganze als Text für ein Ticket.
Die drei Ranking-Metriken werden aktualisiert, wenn Sie die Seite nutzen: Scrollen bewegt CLS, Klicken und Tippen bewegen INP. Jeder wird im Vergleich zu den Schwellenwerten von Google mit „Gut“, „Arbeitsbedürftig“ oder „Schlecht“ bewertet.
Benennt das größte Farbelement, die verschobenen Elemente und die langsamsten Interaktionen. Drücken Sie „Anzeigen“, um zu einem davon zu scrollen und es direkt auf der Seite zu skizzieren.
CLS verwendet Sitzungsfenster mit einer Lücke von 1 Sekunde und einer Obergrenze von 5 Sekunden, INP ist das 98. Perzentil der Interaktionslatenzen und LCP friert bei der ersten Interaktion ein – Ihre Zahlen stimmen also mit denen der Search Console überein.
First Contentful Paint und Time To First Byte stehen neben den großen Drei, sodass Sie einen langsamen Server von einem schweren Hero-Image unterscheiden können, bevor Sie mit der Optimierung des Falschen beginnen.
Listet Ihre langsamsten Interaktionen mit dem Ereignistyp und dem beteiligten Element auf, sodass ein träges Dropdown oder Filter gefunden werden kann, anstatt es zu erraten.
Mit einem Klick werden alle Messwerte, Bewertungen und Fehlerselektoren als Klartext kopiert – bereit zum Einfügen in ein Ticket, eine Pull-Anfrage oder eine Kunden-E-Mail.
Bestätigen Sie, dass LCP, CLS und INP bei einer neuen Vorlage im grünen Bereich sind, bevor sie live geht, anstatt dies einen Monat später in der Search Console herauszufinden.
Die Search Console teilt Ihnen mit, dass eine Gruppe von URLs CLS nicht besteht. Öffnen Sie eines davon mit diesem Tool und sehen Sie genau, welches Element die Verschiebung übernimmt.
Scrollen Sie durch die Seite und beobachten Sie, wie CLS aufsteigt. Klicken Sie dann auf „Anzeigen“, um die spät ladende Anzeige, das Banner oder die Webschriftart zu skizzieren, die Ihren Inhalt bewegt.
Klicken Sie sich durch Filter, Menüs und Modalitäten und lesen Sie dann die Liste der langsamsten Interaktionen, um herauszufinden, welches Steuerelement Hunderte von Millisekunden kostet.
Notieren Sie die Zahlen, stellen Sie den Fix bereit, messen Sie dann dieselbe Seite erneut und vergleichen Sie die beiden Berichte nebeneinander.
Klicken Sie im DevSuite Pro-Dock auf das Core Web Vitals-Symbol. Metrikkacheln werden sofort angezeigt und verwenden alles, was auf der Seite bereits aufgezeichnet wurde.
LCP ist nur ab Beginn des Ladens einer Seite von Bedeutung. Laden Sie es daher bei geöffnetem Bedienfeld erneut, wenn Sie einen vertrauenswürdigen Messwert wünschen.
Scrollen Sie durch die gesamte Seite, um CLS zu trainieren, und klicken, tippen und geben Sie ein, um INP-Messungen zu generieren. Die Kacheln werden im Laufe der Zeit aktualisiert.
Drücken Sie neben dem LCP-Element, einer Layout-Shift-Quelle oder einer langsamen Interaktion auf „Anzeigen“. Die Seite scrollt dorthin und umreißt es, sodass keine Unklarheit darüber besteht, welches Element verantwortlich ist.
Klicken Sie auf Bericht kopieren, um eine Zusammenfassung aller Metriken, Bewertungen und Selektoren im Klartext anzuzeigen. Drücken Sie „Reset“, um CLS und INP erneut von Grund auf zu starten.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 71+ Entwickler-Tools für Ihren Browser frei.
