Core Web Vitals: Was sie sind und wie man sie verbessern kann (Leitfaden)

Langsame Ladezeiten, nicht reagierende Elemente oder unerwartete Seitenwechsel können Benutzer frustrieren. Aus diesem Grund sind Core Web Vitals unverzichtbar für die Optimierung Ihrer Website und Ihre Chancen auf ein höheres Ranking in der Suche geworden.

Indem Sie die Leistung Ihrer Website anhand dieser Metriken verbessern, können Sie Ihrem Publikum eine reibungslosere Erfahrung bieten. Dies führt zu besseren Suchmaschinen-Rankings, erhöhtem Engagement und mehr Konversionen.

Was sind Core Web Vitals?

Core Web Vitals ist eine Reihe von Schlüsselmetriken von Google, die die reale Benutzererfahrung für die Ladeleistung, Interaktivität und visuelle Stabilität einer Webseite messen . Das Erreichen guter Core Web Vitals wird für den Erfolg in der Google-Suche empfohlen, da es hilft, eine schnelle, reaktionsschnelle und visuell stabile Benutzererfahrung zu gewährleisten. 

Die drei Core Web Vitals sind:

• Largest Contentful Paint (LCP) – Misst die Ladeleistung.
• Interaction to Next Paint (INP) – Verfolgt Benutzerinteraktionen und misst die Eingabeverzögerung.
• Cumulative Layout Shift (CLS) – Misst die visuelle Stabilität durch Verfolgung von Layoutverschiebungen auf der Seite.

Google verwendet diese Qualitätssignale als Teil seines Ranking-Algorithmus, und ihre Verbesserung kann Ihre Suchrankings verbessern.

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) misst, wie lange es dauert, bis das größte sichtbare Inhaltselement auf einer Seite vollständig gerendert ist . Dies kann ein Bild, ein Video oder ein Textblock sein, der den meisten Platz auf dem Bildschirm einnimmt. Diese Metrik ist wichtig, weil sie einen genauen Überblick darüber gibt, wie schnell eine Webseite aus der Perspektive des Benutzers geladen wird. 

So definiert Google LCP-Werte:

• Gut: 2.5 Sekunden oder weniger
• Verbesserungsbedürftig: Zwischen 2.5 und 4 Sekunden.
• Schlecht: Mehr als 4.0 Sekunden

Damit Ihre Website die Core Web Vitals besteht, benötigen Sie einen LCP-Score von 2.5 Sekunden oder weniger für 75% aller Ihrer Seitenaufrufe.

Ein hoher LCP bedeutet, dass Ihre Benutzer zu lange warten, um den größten Inhalt auf Ihrer Seite zu laden. Für Website-Besitzer bedeutet dies lange Rendering-Zeiten, was zu großen Absprungraten und niedrigen Konversionsraten führt. 

Die drei häufigsten Faktoren, die LCP negativ beeinflussen, sind:

• Große, nicht optimierte Medien
• Rendering-blockierendes JavaScript
• Langsame Ressourcenladezeit

Klicken Sie hier, um zu erfahren, wie Sie Ihren LCP-Score messen und verbessern können.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) ist eine Web-Performance-Metrik für echte Benutzer, die die Reaktionsfähigkeit einer Webseite misst. Es wertet die Zeit aus, die der Browser braucht, um auf Benutzerinteraktionen wie Klicks oder Tippen zu reagieren, nachdem die Seite geladen wurde. 

INP wurde entwickelt, um die Erfahrung des Benutzers zu erfassen, wie schnell und reibungslos eine Website auf ihre Eingaben reagiert. Es ist ein wichtiger Indikator für die Interaktivität und Reaktionsfähigkeit der Seite. 

Im Gegensatz zu FID, das nur die Verzögerung für die erste Eingabe misst, berücksichtigt INP die Reaktionsfähigkeit der gesamten Seite während der gesamten Sitzung des Benutzers. 

So definiert Google INP-Werte:

• Gut: Weniger als oder gleich 200 Millisekunden
• Verbesserungsbedürftig: Zwischen 200 Millisekunden und 500 Millisekunden
• Schlecht: Mehr als 500 Millisekunden

Ein häufiger Grund für einen schlechten INP-Wert sind nicht optimierte JavaScript- und CSS-Dateien. Wir zeigen Ihnen später, wie Sie INP messen und verbessern können.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) misst die visuelle Stabilität einer Seite, indem unerwartete Layoutverschiebungen verfolgt werden. Diese Verschiebungen treten häufig auf, wenn neue Inhalte geladen werden, wie Bilder ohne festgelegte Abmessungen oder dynamisch eingefügte Anzeigen. Ein hoher CLS-Score zeigt an, dass eine Seite instabil ist, was zu einer frustrierenden Erfahrung für die Benutzer führt. 

So definiert Google CLS-Werte:

• Gut – Weniger als oder gleich 0.1 Sekunden
• Verbesserungsbedürftig – Weniger als oder gleich 0.25 Sekunden
• Schlecht – Mehr als 0.25 Sekunden

Eine Punktzahl von weniger oder gleich 0.1 Sekunden bedeutet, dass der Inhalt der Seite während ihres Lebenszyklus völlig statisch ist. Eine höhere Punktzahl bedeutet, dass sich der Inhalt bewegt. 

Normalerweise werden Layout-Verschiebungen häufig verursacht durch:

• Bilder,
• Anzeigen,
• Einbettungen,
• iframes ohne Abmessungen,
• dynamisch eingefügter Inhalt,
• Web-Schriftarten, die das Aufblitzen von unsichtbarem Text und das Aufblitzen von ungestyltem Text verursachen. 

Wie misst man Core Web Vitals?

Es gibt mehrere Tools zur Messung von Core Web Vitals, die sowohl reale Daten von Benutzern, als auch Labormetriken (simulierte Tests) verwenden. Diese Tools helfen Website-Besitzern, ihre Core Web Vitals Leistung zu verfolgen und Bereiche mit Verbesserungspotenzial zu identifizieren.

Feld-Tools

Felddaten, auch bekannt als Real User Monitoring (RUM), spiegeln die Browsing-Erfahrung echter Benutzer wider. Es berücksichtigt echte Benutzer, verschiedene Geräte, verschiedene Netzwerkverbindungen und historische Daten. Das Ergebnis wird für die gesamte Domain oder pro URL aggregiert. 

Denken Sie daran, dass Google Felddaten verwendet, um Ihre Website zu ranken. Wenn Sie also Ihre echte Benutzererfahrung überprüfen möchten, sollten Sie Feldwerkzeuge verwenden.

Google Search Console (GSC)

Die Google Search Console bietet einen Core Web Vitals-Bericht, der zeigt, wie Ihre Website auf Desktop- und mobilen Geräten abschneidet. Es hebt betroffene Seiten hervor und gruppiert sie nach Leistung – Gut, Verbesserungsbedürftig oder Schlecht.

PageSpeed Insights

PageSpeed Insights analysiert einzelne Webseiten und bietet detaillierte Einblicke in deren Core Web Vitals Leistung. Es bietet Vorschläge zur Verbesserung der Seitengeschwindigkeit und der Leistung der Website. 

Sie sollten sich sowohl die Desktop- als auch die Mobile-Scores ansehen, da sie sich unterscheiden können. Oben im Bericht zeigt PageSpeed Insights deutlich an, ob Ihre Seite die Schwellenwerte für eine gute Erfahrung basierend auf den Core Web Vitals der Website erfüllt.

Chrome UX Bericht (CrUX)

Der Chrome User Experience Report (CrUX) bietet reale Leistungsdaten von Chrome-Benutzern. Es zeigt, wie Benutzer Ihre Website auf mobilen und Desktop-Geräten erleben. Der Chrome UX Report konzentriert sich auf die Ladeleistung von Websites. Es misst Core Web Vitals, Metriken wie Time to First Byte (TTFB) und mehr.

Web Vitals Chrome Erweiterung

Die Web Vitals-Erweiterung ermöglicht es Ihnen, Core Web Vitals direkt in Ihrem Chrome-Browser zu verfolgen, während Sie auf Ihrer Website surfen. Es ist ein kostenloses Tool, das sofortiges Feedback zu Core Web Vitals Metriken bietet.

Web.dev

Web.dev bietet ein kostenloses Messwerkzeug, um eine Leistungsprüfung auf Ihrer Website durchzuführen. Darüber hinaus können Sie die Leistung Ihrer Website in verschiedenen Bereichen überprüfen und Tipps zur Verbesserung von Metriken wie die Leistung der Website, progressive Web-App-Status, Zugänglichkeit, Verwendung von Best Practices und SEO erhalten. Es unterstützt auch die Core Web Vitals Metriken.

Lab-Tools

Dies bezieht sich auf die Durchführung von Tests in einer kontrollierten Umgebung, um zu sehen, wie ein potenzieller Benutzer Ihre Website erleben wird. Im Gegensatz zu Feld-Tools arbeiten Lab-Tools mit simulierten Daten, mit vordefinierten Geräte- und Netzwerkspezifikationen. Sie sind nützlich, um mögliche Probleme mit der Leistung der Website zu reproduzieren und zu debuggen, aber sie geben Ihnen keine echten Informationen über die Benutzererfahrung.

Lighthouse

Lighthouse ist ein quelloffenes, automatisiertes Website-Audit-Tool, das Entwicklern hilft, Probleme zu diagnostizieren und die Qualität von Webseiten zu verbessern.

Ein Lab-Tool wie Lighthouse kann die Interaction to Next Paint (INP) nicht messen, weil es echte Benutzerinteraktion erfordert. Sie können jedoch die Total Blocking Time (TBT) überwachen, die die Gesamtzeit zwischen First Contentful Paint und Time To Interactive misst. Durch die Verbesserung Ihrer TBT, werden Sie höchstwahrscheinlich auch Ihre INP verbessern.

WebseiteTest.org

Dies ist ein kostenloses quelloffenes Tool, das die Geschwindigkeit Ihrer Website misst. Es lädt Ihre Seite in einem echten Browser und hilft Ihnen, bestimmte Seitenabschnitte zu identifizieren, die mehr Zeit zum Laden benötigen.

Chrome DevTools Performance Panel

Mit den Chrome DevTools haben Sie die Performance-Option, die Core Web Vitals enthält. Das Performance-Panel hat auch einen Erfahrungsbereich, in dem Sie unerwartete Layout-Veränderungen erkennen können. Daher können Sie jede visuelle Instabilität identifizieren und beheben und Ihre Cumulative Layout Shift-Metrik verbessern. Um auf das Chrome DevTools Performance Panel zuzugreifen, öffnen Sie Google Chrome (verwenden Sie den Inkognito-Modus, damit es keinen Browser-Cache gibt) und drücken Sie Befehl + Wahl + I (Mac) oder Strg + Umschalt + I (Windows, Linux) , um DevTools zu öffnen.

Wählen Sie die Layout-Verschiebung, um die Details auf der Registerkarte Zusammenfassung anzuzeigen. 

Beachten Sie, dass je nachdem, welches Tool Sie verwenden (basierend auf Feld- oder Labordaten), die Core Web Vitals-Metriken unterschiedliche Ergebnisse anzeigen können.

Wie man Core Web Vitals verbessert

Die gute Nachricht ist, dass die meisten Tipps zur Verbesserung Ihrer Core Web Vitals bereits Teil der bewährten Verfahren zur Optimierung der Website-Leistung sind.

Wie man Largest Contentful Paint (LCP) verbessert

Ganzseiten-Caching aktivieren

Wenn Sie das Caching ganzer Seiten aktivieren, werden die Seiten Ihrer Website nach dem ersten Laden auf dem Server gespeichert. Nur der erste Besucher lädt den gesamten Seiteninhalt aus der Datenbank. Der ganze Rest wird die Seitenausgabe direkt aus dem Speicher des Servers bekommen, was Ihre Seite viel schneller macht und letztendlich Ihre LCP-Metrik verbessert. 

SiteGround-Benutzer nutzen unsere einzigartige Ganzseiten-Caching-Lösung namens Dynamic Caching, die standardmäßig für alle Websites aktiviert ist. Je nach Art der Website werden die Seiten bis zu 5-mal schneller geladen. 

Ein schnelles und zuverlässiges Webhosting wählen

Einer der häufigsten Gründe für ein schlechtes LCP ist eine langsame Serverantwortzeit. Überprüfen Sie zuerst Ihre Time to First Byte (TTFB) – wie lange es dauert, bis der Browser das erste Byte des Inhalts vom Server empfängt. Je schneller Ihr Server reagiert, desto besser wird Ihre Website funktionieren. 

CDN verwenden

Neben dem Server, der Ihre Website hostet, können Sie ein Content Delivery Network (CDN) verwenden, um die Ladezeit aller Ihrer Besucher zu beschleunigen. Das CDN wird Ihre Inhalte über ein globales Netzwerk von Servern zwischenspeichern und Ihre Website von der Seite laden, die dem Besucher am nächsten ist, wodurch die Erfahrung mit Ihrer Seite verbessert wird.

SiteGround hat seine eigene CDN-Infrastruktur entwickelt, um die Leistung und Sicherheit der Website für alle Benutzer zu erhöhen.

Bilder optimieren

Das Optimieren von Bildern wird Ihren Largest Contentful Paint-Score verbessern, da sie oft das größte Seitenelement sind. 

Komprimieren Sie Ihre Bilder immer und skalieren Sie sie richtig. Es wird empfohlen, Bilder in modernen Formaten wie WebP bereitzustellen, um die Leistung zu verbessern. 

JavaScript und CSS optimieren

Die Reduzierung von CSS und JavaScript, die das Laden der Seite verlangsamen, kann Ihren gesamten Core Web Vital-Score und die Benutzerinteraktion verbessern.

• JavaScript verschieben

Während der Browser JavaScript lädt, können Benutzer nicht mit der Webseite interagieren. Deshalb kann man manchmal den Begriff „Render-blocking JavaScript“ sehen. Das Zurückstellen Ihrer JavaScrips bedeutet , dass der Browser JS-Dateien erst nach dem Parsen des HTML-Dokuments verarbeitet und lädt. 

Mit anderen Worten, das Rendern Ihrer Website wird viel schneller sein, da nichts den Prozess blockieren wird.

• CSS- und JS-Dateien minimieren

Zur leichteren Lesbarkeit hinterlassen Entwickler oft Zeichen wie Leerzeichen, Einrückungen oder Kommentare in CSS- und JS-Dateien. Alle diese Zeichen im Code sind jedoch für den Browser nicht unbedingt erforderlich. 

Minimierung optimiert Ihren Code, indem unnötige Zeichen entfernt werden, was zu einer verbesserten Renderzeit und schnelleren Websites führt.

Wie verbessert man die Interaction to Next Paint (INP)?

Große Seitenelemente und lange Aufgaben entfernen

Die Reduzierung langer Aufgaben verhindert Verzögerungen bei der Reaktion auf Benutzerinteraktionen. Eine lange Aufgabe bezieht sich auf jedes Stück JavaScript-Code, dessen Ausführung mehr als 50 Millisekunden dauert. 

Große Seitenelemente wie Videos oder Hintergrundbilder können die Codeausführung verlangsamen und sich auf INP auswirken. 

Anstatt ein hochauflösendes Bild für den Hintergrund (z.B. ein 4 MB JPEG) zu verwenden, sollten Sie ein optimiertes WebP-Bild verwenden, das die Dateigröße erheblich reduziert (z.B. 400 KB). In ähnlicher Weise können Videos mit Verzögerung geladen oder durch statische Bilder für das erste Aufladen ersetzt werden, so dass die schweren Medien erst nach der Benutzerinteraktion geladen werden.

Web-Worker verwenden

Die Verwendung von Web-Worker ermöglicht die Ausführung schwerer Aufgaben im Hintergrund und verhindert, dass sie den Haupt-Thread blockieren. Dies reduziert Verzögerungen bei der Benutzereingabe und beim Laden der Seite und optimiert den INP-Score und die Gesamtleistung. 

Anstatt große Aufgaben direkt im Haupt-Thread des Browsers laufen zu lassen (was dazu führt, dass die Seite einfriert), kann die Verarbeitung auf einen Web-Worker ausgelagert werden. Auf diese Weise kann der Benutzer ohne merkliche Verzögerung mit der Website interagieren, während die Hintergrundaufgabe abgeschlossen wird.

Event-Handler optimieren

Optimierte Event-Handler reduzieren die Eingabeverzögerung und verbessern die Website-Geschwindigkeit, was zu besseren Core Web Vitals-Metriken beiträgt. 

Wenn beispielsweise ein Benutzer auf eine Schaltfläche klickt, protokolliert die Ereignisbehandlungsroutine zuerst den Schaltflächenklick und verschiebt die Berechnung auf einen weniger kritischen Zeitpunkt, wenn der Haupt-Thread des Browsers im Leerlauf ist. Dies stellt sicher, dass die Interaktion reibungslos ist und der Benutzer keine Verzögerungen erfährt.

Skripte von Drittanbietern reduzieren

Es wird dringend empfohlen, alle Skripte von Drittanbietern zu entfernen, die keinen klaren Wert bringen. Wenn Ihre Website mehrere Skripte von Drittanbietern für Analysen, Anzeigen oder Widgets für soziale Medien enthält, prüfen Sie, ob diese notwendig sind. Das Entfernen nicht wesentlicher Skripte, wie ein redundantes Chat-Widget oder Anzeigen-Tracker, die nicht für Ihr Kernpublikum verwendet wird, kann sowohl Ihren Largest Contentful Paint (LCP), als auch Interaction to Next Paint (INP) Score erheblich verbessern.

Wie verbessert man die Cumulative Layout Shift (CLS)?

Größenattribute setzen

Durch die Festlegung der Abmessungen des Größenattributs wird dem Browser des Benutzers genau mitgeteilt, wie viel Platz dieses Element benötigt. 

Nehmen wir als Beispiel ein Bildelement. Wenn Sie die Breiten- und Höhenattribute für ein Bild nicht setzen, weiß der Browser nicht die genaue Größe, die dieses Bild einnehmen wird, bis es vollständig geladen ist, was zu einer Verschiebung des Layouts führen kann. 

<img src="image.jpg" width="600" height="400" alt="A scenic view of mountains">

Durch die Angabe der Breite und Höhe erlauben Sie dem Browser, das Seitenverhältnis des Bildes zu berechnen und entsprechenden Platz dafür zu reservieren. Dadurch werden Cumulative Layout Shifts minimiert.

Schriftarten vorladen

Schriftarten verbessern die Lesbarkeit Ihrer Seite und vermitteln Ihr Markenimage. Jede Schriftart, die Sie verwenden, ist jedoch eine zusätzliche Ressource, die Ihre Website verlangsamen kann. Es wird empfohlen, Schriftarten vorab zu laden, um Layoutverschiebungen und das Aufblitzen von unsichtbarem Text zu verhindern. 

Um Schriftarten vorzuladen, verwenden Sie den <link rel=„preload“>-Tag im <head> Ihres HTML-Dokuments. Sie müssen das Attribut as=„font“ angeben und crossorigin einschließen, wenn die Schrift von einer externen Quelle (wie einem CDN) geladen wird. 

Platz für Werbung reservieren

Anzeigen haben einen dynamischen Charakter, der zu unerwarteten Layout-Veränderungen führen kann. Dies kann sich negativ auf Ihren CLS-Wert auswirken. Wenn Sie nicht genügend Platz für die Anzeigen auf Ihrer Website reservieren, können sie unerwartet erscheinen und die Benutzererfahrung ruinieren.

CSS-Transformation für Animationen verwenden

Layoutverschiebungen während Animationen stören oft die Erfahrung des Benutzers und können sich erheblich auf Ihren Cumulative Layout Shift (CLS)-Score auswirken. Indem Sie die CSS transform-Eigenschaft für Animationen verwenden, können Sie verhindern, dass sich Elemente auf der Seite unvorhersehbar bewegen. 

Transform-Animationen, wie scale oder translate, helfen dabei, die Position anderer Inhalte auf der Seite beizubehalten. Dies führt zu einer stabileren Erfahrung auf Ihrer Website.

Dynamisch eingefügte Inhalte minimieren

Dynamisch eingefügte Inhalte, wie Anzeigen, Bilder oder Videos, die nach der ersten Webseite geladen werden, verursachen oft Layoutverschiebungen. Diese Verschiebungen können sich negativ auf die Cumulative Layout Shift (CLS) auswirken. 

Um die visuelle Stabilität zu verbessern, ist es wichtig, Speicherplatz für dynamisch geladenen Inhalt vorab zuzuweisen. Es gibt mehrere Techniken dafür, wie das Festlegen von Größendimensionen in CSS, JavaScript oder die Verwendung von Seitenverhältnis-Boxen oder Platzhaltern. Unten sehen Sie ein Beispiel für das Festlegen von Größendimensionen vor dem dynamischen Einfügen von Inhalten mit JavaScript: 

<div id="dynamic-content" class="ad-container"></div>

<script>
    const adContainer = document.getElementById('dynamic-content');
    adContainer.style.width = '300px';  // Fixed width
    adContainer.style.height = '250px'; // Fixed height

    // Dynamically inject content
    adContainer.innerHTML = '<p>Ad will appear here</p>';
</script>

Dies minimiert die Auswirkungen auf die Benutzererfahrung und verbessert gleichzeitig die Leistungskennzahlen in Bezug auf Ihren Layout-Shift-Score.

Warum sind Core Web Vitals wichtig?

Die oben genannten Tipps sind sowohl empfohlene Best Practices für die Website-Optimierung als auch positive Auswirkungen auf die von den Core Web Vitals von Google gemessenen Signale für die Seitenerfahrung.

Als Website-Besitzer ist es wichtig, diese Metriken zu verstehen. Dies kann Ihnen helfen, eine positive Benutzererfahrung zu bieten und Ihre Suchmaschinen-Rankings und die allgemeine Webseiten-Performance zu verbessern. 

Es ist wichtig zu beachten, dass der Ranking-Algorithmus von Google ständig aktualisiert wird. Die regelmäßige Überwachung Ihrer Core Web Vitals mit Tools wie PageSpeed Insights oder Search Console kann Ihnen helfen, notwendige Anpassungen vorzunehmen, auch wenn sich die Erwartungen der Benutzer und die Ranking-Algorithmen von Google weiterentwickeln. Auf diese Weise richten Sie Ihre Website für langfristigen Erfolg ein. 

Für weitere Expertentipps zur Website-Optimierung können Sie unser E-Book zur WordPress-Geschwindigkeitsoptimierung herunterladen und lernen, wie man eine leistungsstarke Website erstellt.