Core Web Vitals Visualizer: Kostenlose Chrome-Erweiterung zum Debuggen von CWV

Eine kostenlose Chrome-Erweiterung zum Debuggen von Core Web Vitals

Der Core Web Vitals Visualizer ist eine kostenlose Chrome-Erweiterung, die ich entwickelt habe, um Core Web Vitals zu debuggen, ohne die DevTools öffnen zu müssen. Er erstellt auf jeder Seite ein Echtzeit-Overlay und zeigt genau, welche Elemente LCP, CLS und INP beeinflussen. Über 14.000 Entwickler nutzen ihn.

Zuletzt überprüft von Arjen Karel im März 2026

Als Core Web Vitals-Spezialist verbringe ich viel Zeit damit, zu prüfen, wie eine Seite reagiert und antwortet, wenn ich mit ihr interagiere. Was macht das mit den Core Web Vitals und wie verändern sich die Metriken, wenn ich zur mobilen Emulation wechsle oder das Browser-Caching deaktiviere?

Natürlich nutze ich RUM tracking. Das zeigt mir auf Seitenebene, welche Metriken bestehen und welche durchfallen. Aber warum fallen sie durch? Das lässt sich wirklich nur herausfinden, wenn man mit der Seite interagiert.

Um mir viel Zeit zu sparen, habe ich beschlossen, einen kleinen Teil eines langwierigen Prozesses zu automatisieren und eine Chrome-Erweiterung zu entwickeln, die mir etwas von der mühsamen Arbeit abnimmt. Das Ergebnis ist der Core Web Vitals Visualizer. Ich habe mich entschieden, ihn für alle zugänglich zu machen – also schau ihn dir im Chrome Web Store an.

Was macht der Core Web Vitals Visualizer?

Zunächst erfasst er die Core Web Vitals basierend auf deiner Interaktion mit der Seite. Er trackt den Largest Contentful Paint, die Interaction to Next Paint, den Cumulative Layout Shift, den First Contentful Paint und die Time to First Byte.

Als Nächstes wird ein Overlay erstellt, das all diese Metriken visualisiert. Das zeigt dir, welches Element der Largest Contentful Paint ist, welche Elemente visuelle Instabilität verursachen und – falls du mit der Seite interagiert hast – welches Event das schlimmste Input Delay verursacht hat.

Wenn du auf eine der Metriken klickst, schlüsselt der Core Web Vitals Visualizer diese in ihre grundlegendsten Bestandteile auf. Für LCP bedeutet das, du siehst die Ressourcen-Ladeverzögerung, die Ladedauer und die Element-Renderverzögerung. Für INP erhältst du die Eingabeverzögerung, die Verarbeitungszeit und die Präsentationsverzögerung.

Warum nicht Lighthouse verwenden?

Diese Frage höre ich oft. Meine Antwort ist immer: „Ich habe nie gesagt, dass ich Lighthouse nicht benutze“ (obwohl ich Lighthouse nicht so oft benutze). Lighthouse ist ein großartiges Tool und du solltest dich damit vertraut machen.

Aber es gibt wichtige Unterschiede. Lighthouse ist ein Lab-Test und die Daten sind möglicherweise nicht repräsentativ für reale Bedingungen. Deshalb verwendet meine Erweiterung die echten Daten deines Browsers. Lighthouse liefert auch keine echten Interaktionsergebnisse. Es kann INP nicht messen, da kein echter Nutzer mit der Seite interagiert. Es verwendet stattdessen die Total Blocking Time als Stellvertreter-Metrik. Meine Erweiterung visualisiert den tatsächlichen CLS genau in dem Moment, in dem er passiert, und schlüsselt LCP und INP in ihre Teilbereiche auf, sodass du genau sehen kannst, wohin die Zeit fließt.

Was ist mit der Web Vitals-Erweiterung von Google?

Google hat seine Web Vitals Chrome-Erweiterung im Januar 2025 eingestellt. Sie empfehlen nun, stattdessen das DevTools-Performance-Panel zu verwenden. DevTools ist mächtig, aber manchmal möchte man einfach nur ein schnelles Overlay haben, ohne eine vollständige Profiling-Session starten zu müssen. Genau das macht der Core Web Vitals Visualizer. Er bietet zudem die Aufschlüsselungen der Metrik-Teilbereiche, die DevTools nicht in einer einzigen Ansicht anzeigt.

Installiere den Core Web Vitals Visualizer

Gehe zum Chrome Web Store und installiere den Core Web Vitals Visualizer. Und vielleicht, wenn er dir gefällt, hinterlasse eine Bewertung. Das würde mich sehr freuen.