Core Web Vitals Visualizer

Wir sind stolz darauf,  den Core Web Vitals Visualizer zu präsentieren.

Heute haben wir den kostenlosen Core Web Vitals Visualizer im Chrome Web Store gestartet. 

Der Core Web Vitals Visualizer ist ein Chrome-Plugin, das Benutzern hilft, die Core Web Vitals einer Seite zu verfolgen und zu visualisieren. Diese Metriken umfassen den Largest Contentful Paint, First Input Delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint und Time to First Byte. Das Plugin erstellt ein Overlay, das dem Benutzer zeigt, welche Elemente für visuelle Instabilität verantwortlich sind und welche Ereignisse eine Verzögerung bei der Eingabe verursachen. Darüber hinaus schlüsselt das Plugin die Core Web Vitals in ihre grundlegenden Komponenten auf, sodass Benutzer ein detaillierteres Verständnis davon erhalten, wie eine Seite abschneidet. Das Plugin ist kostenlos im Chrome Web Store erhältlich.

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

Sicher verwende ich RUM-Tracking.  Das sagt mir auf einer seitenspezifischen Ebene, welche Metriken die Core Web Vitals bestehen und welche nicht.  Aber warum scheitern sie?  Das ist etwas, das Sie wirklich nur herausfinden können, wenn Sie mit der Seite interagieren.

Um mir eine  ganze Menge Zeit zu sparen, entschied ich mich, diesen kleinen Teil eines langwierigen Prozesses zu automatisieren und ein Chrome-Plugin zu erstellen, das mir einen Teil der mühsamen Arbeit abnimmt.  Das Ergebnis ist der Core Web Vitals Visualizer.  Ich habe beschlossen, dieses Plugin für alle verfügbar zu machen.  also gehen Sie voran und schauen Sie es sich im Chrome Web Store an.

Was macht der Core Web Vitals  Visualizer?

Erstens zeichnet er die Core Web Vitals basierend auf Ihrer Interaktion mit der Seite auf.  ER verfolgt den Largest Contentful Paint,  den First Input Delay,  den Cumulative  Layout Shift,  den First Contentful Paint,  den Interaction to Next Paint und  die Time to First Byte.

Als nächstes erstellt er ein Overlay, das all diese Metriken visualisiert. Dies sagt Ihnen, welches Element der Largest Contentful Paint ist,  welche Elemente  visuelle Instabilität verursachen  und, wenn Sie mit der Seite interagiert haben, welches Ereignis den First Input Delay verursacht hat.

Schließlich, wenn Sie auf eine der Metriken klicken, schlüsselt der Core Web Vitals Visualizer  diese Metriken in ihre grundlegendsten Komponenten auf.

Warum nicht Lighthouse verwenden?

Probieren Sie den Core Web Vitals Visualizer aus!

Gehen Sie zum Chrome Store und installieren Sie den Core Web Vitals Visualizer. Und vielleicht nur ... wenn es Ihnen gefällt, hinterlassen Sie eine Bewertung. Ich würde das schätzen.