Core Web Vitals - LCP, FID & CLS

Was sind Core Web Vitals?

Die Core Web Vitals sind drei Faktoren zum Messen der Performance einer Website die Google 2020 eingeführt hat.

Core Web Vitals - Definition und Erklärung

Die Google Core Web Vitals sind drei SEO-KPIs, die Google im Juni 2020 eingeführt hat. Diese neuen KPIs sind neue Richtlinien, die als zukünftige Rankingfaktoren angekündigt wurden. Sie sind bereits Teil der Search Console!

Momentan bestehen die Web Vitals aus drei Bereichen rund um die Page Experience (Nutzerfreundlichkeit, Seitenerfahrun ):

• Ladezeiten (Wie schnell werden Inhalte angezeigt?)
• Responsiveness (Wie schnell reagiert eine Seite auf Eingaben der Nutzer?)
• Visuelle Stabilität (Bewegen sich Inhalte nach dem Laden der Seite noch?)

Konkret sind die Core Web Vitals:

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) - Dauer in ms zum Laden des Hauptinhalts.

LCP ausführlich erklärt

First Input Delay (FID)

First Input Delay (FID) - Dauer in ms bis Nutzer mit Seite interagieren kann.

FID ausführlich erklärt

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS): Dauer in der sich das Layout der Seite nach dem Laden noch ändert.

CLS ausführlich erklärt

Largest Contentful Paint (LCP) ausführlich erklärt:

LCP steht für "Largest Contentful Paint" und ist ein wichtiger Teil der Core Web Vitals, die von Google eingeführt wurden, um die Qualität der Nutzererfahrung auf einer Website zu messen. LCP misst die Zeit, die benötigt wird, um das größte sichtbare Inhalts-Element (z. B. Text, Bild oder Video) im sichtbaren Bereich (Viewport) der Seite vollständig zu laden und darzustellen. Ein guter LCP-Wert liegt bei 2,5 Sekunden oder weniger.

LCP aus Performance-Sicht optimieren:

1. Optimieren von Bildern: Verkleinern, Komprimieren und optimieren Sie die Bilder auf Ihrer Website, um die Ladezeit zu verkürzen. Verwenden Sie moderne Bildformate wie WebP oder AVIF für eine bessere Kompression.
2. Lazy Loading: Implementieren Sie "Lazy Loading" für Bilder und Medien, die außerhalb des sichtbaren Bereichs liegen, um die anfängliche Ladezeit der Seite zu verkürzen.
3. Schriftarten optimieren: Verwenden Sie moderne Web-Schriftarten mit effizienter Komprimierung und laden Sie sie asynchron, um das Blockieren des Seitenaufbaus zu vermeiden.
4. Reduzieren von JavaScript: Entfernen oder reduzieren Sie unnötiges JavaScript und laden Sie Skripte asynchron oder verzögert, um die Renderzeit zu verbessern.
5. Optimieren von Stylesheets: Reduzieren und optimieren Sie CSS-Dateien, um die Renderzeit der Seite zu verkürzen.
6. Serverantwortzeit verbessern: Optimieren Sie den Server, nutzen Sie Caching und Content Delivery Networks (CDNs), um die Antwortzeit des Servers zu beschleunigen.
7. Priorisieren von wichtigen Ressourcen: Stellen Sie sicher, dass wichtige Ressourcen zuerst geladen werden, damit der Browser sie schnell rendern kann.

Indem man diese Optimierungen durchführt, kann man die LCP-Werte verbessern und dadurch die Gesamt-Performance der Website erhöhen.

FID (First Input Delay) ausführlich erklärt:

FID steht für "First Input Delay" und ist ein weiterer wichtiger Teil der Core Web Vitals, die von Google eingeführt wurden, um die Qualität der Nutzererfahrung auf einer Website zu messen. FID misst die Zeit, die benötigt wird, um auf die erste Interaktion eines Benutzers mit der Seite (z. B. Klicken, Tippen oder Scrollen) zu reagieren. Ein guter FID-Wert liegt bei 100 Millisekunden oder weniger.

FID aus Performance-Sicht optimieren:

1. Reduzieren von JavaScript: Minimieren Sie die Menge an JavaScript, die auf der Seite ausgeführt wird, und teilen Sie umfangreiche Skripte in kleinere Teile auf. Laden Sie Skripte asynchron oder verzögert, um das Blockieren des Seitenaufbaus zu vermeiden.
2. Web Workers nutzen: Verwenden Sie Web Workers, um JavaScript-Aufgaben im Hintergrund auszuführen und so den Haupt-Thread frei zu halten, was zu einer schnelleren Interaktionszeit führt.
3. Third-Party-Code optimieren: Prüfen und optimieren Sie Third-Party-Code, der auf Ihrer Website verwendet wird, um sicherzustellen, dass er die Performance nicht beeinträchtigt.
4. Eingabe-Handling optimieren: Verwenden Sie passive Event-Listener und Debouncing-Techniken, um die Effizienz des Eingabehandlings zu verbessern und unnötige Ausführungen zu vermeiden.
5. Priorisieren von wichtigen Ressourcen: Stellen Sie sicher, dass wichtige Ressourcen wie CSS und JavaScript zuerst geladen werden, damit der Browser sie schnell rendern und Benutzerinteraktionen zügig verarbeiten kann.
6. Code-Splitting: Implementieren Sie Code-Splitting, um nur die für die aktuelle Seite benötigten Ressourcen zu laden und dadurch die Gesamtgröße der Seite zu reduzieren.

Indem man diese Optimierungen durchführt, kann man die FID-Werte verbessern und dadurch die Gesamt-Performance der Website erhöhen.

CLS (Cumulative Layout Shift) ausführlich erklärt:

CLS steht für "Cumulative Layout Shift" und ist der dritte wichtige Teil der Core Web Vitals, die von Google eingeführt wurden, um die Qualität der Nutzererfahrung auf einer Website zu messen. CLS misst die visuelle Stabilität einer Seite, indem es unerwartete Layout-Verschiebungen während des Ladens der Seite quantifiziert. Ein guter CLS-Wert liegt bei 0,1 oder weniger.

CLS aus Performance-Sicht optimieren:

1. Abmessungen für Bilder und Videos angeben: Stellen Sie sicher, dass Sie Breite- und Höhenattribute für Bilder und Videos festlegen, um zu verhindern, dass der Browser während des Ladens Platz für sie schaffen muss.
2. Reservieren von Platz für dynamischen Inhalt: Reservieren Sie ausreichend Platz für Inhalte, die dynamisch nachgeladen werden, wie z. B. Anzeigen oder Widgets, um unerwartete Layout-Verschiebungen zu vermeiden.
3. Schriftarten optimieren: Vermeiden Sie plötzliche Layout-Verschiebungen durch das Laden von Web-Schriftarten, indem Sie Fallback-Schriftarten verwenden, die eine ähnliche Größe und Darstellung haben, bis die Web-Schriftarten vollständig geladen sind.
4. Animationen und Übergänge verwenden: Verwenden Sie CSS-Animationen und Übergänge, um sanfte und vorhersehbare Änderungen am Layout vorzunehmen, anstatt plötzliche Verschiebungen.
5. Reihenfolge der Ressourcen beibehalten: Achten Sie darauf, dass die Reihenfolge der Elemente im HTML-Code der Reihenfolge entspricht, in der sie auf der Seite erscheinen sollen, um unerwartete Layout-Verschiebungen zu vermeiden.
6. Vermeiden von plötzlichen Stilanpassungen: Vermeiden Sie plötzliche Änderungen von CSS-Stilen, die zu Layout-Verschiebungen führen können, insbesondere bei interaktiven Elementen wie Schaltflächen und Dropdown-Menüs.

Indem man diese Optimierungen durchführt, kann man die CLS-Werte verbessern und dadurch die Gesamt-Performance der Website erhöhen.