Was bedeuten die Core Web Vitals?
Wie du die Core Web Vitals interpretieren musst und welche Maßnahmen dir bei der Optimierung deiner Website-Performance weiterhelfen.
Was sind die Core Web Vitals?
Unter dem Titel Core Web Vitals fasst Google mehrere Metriken zusammen, die die Performance von Websites messen. Die Schwerpunkte liegen auf der Ladegeschwindigkeit, der visuellen Stabilität und der Interaktivität. Alles Punkte die auch in der Nutzer Experience eine große Rolle spielen.
Außerdem haben die Core Web Vitals einen Einfluss auf die SEO Performance deiner Website.
Google bestätigt, dass ab Juni 2021 die Core Web Vitals ein offizieller Rankingfaktor sind.
Lesetipp: ✎ So schreibt man den perfekten SEO-Text
Wie werden die Metriken der Core Web Vitals gemessen?
Die Core Web Vitals teilen sich in drei Kennzahlen auf:
- Largest Contentful Paint (LCP):
Die LPC misst, wie lange es dauert, bis, nach dem Start des Ladevorgangs einer Website, alle visuellen Elemente auf dem Bildschirm dargestellt werden. Die Messung wird gestoppt, sobald die größten Elemente, seinen es Textblöcke oder Bilder, zu sehen sind. In der Regel handelt es sich beim größten Element einer Seite um Bild-Dateien (SVG und alle Dateien mit einem <img> Tag), Videos, Hintergrundbilder (via url()call) und Block-Level Textmodule. Diese Elemente sollten untersucht werden, wenn man den LCP optimieren möchte.
- First Input Delay (FID):
Beim FID wird die Interaktivität der Website gemessen - also die Zeit, die vergeht, bis bis der Browser auf zB. einen Klick eines Users reagiert. Im Zentrum der Messung steht der erste Eindruck eines Users, die Responsiveness und Interaktivität. Beim Laden einer Website muss ein Browser eine sehr große Script-Datei laden, was den Ausfürhungs- und Rendering-Prozess der gesamten Seite in die länge ziehen kann. Darauf musst du achten, wenn du den FID-Wert verbessen möchtest.
- Cumulative Layout Shift (CLS):
Der CLS bildet ab, ob und in welchem Ausmaß User beim Laden und Nutzen einer Website Layout-Shifts erleben. Unter Layout-Shifts versteht man unvorhergesehenes Verrutschen von Inhalten auf einer Website (CTA-Buttons, Bilder, Text oder Links). Dieses "Verrutschen" von Elementen im Layout passiert, wenn DOM* Elemente dynamisch über dem existierenden Content geladen werden.
*Was sind DOM Elemente? Wenn eine Seite geladen wird, erstellt der Browser ein Document Object Model (DOM) der Seite. Das DOM HTML enthät eine Baumstruktur der Seite, bestehend aus <head>, <body>, <h1>, <a > etc.
Wie kann ich die Core Web Vitals meiner Seite messen?
Es gibt verschiedene Wege, die Core Web Vitals einer Website herauszufinden:
- Google Search Console In der Search Console von Google findest du einen ausführlichen Bericht zu deinen Core Web Vitals in dem Bereich, wo du auch die generellen Health und Performance Daten findest.
Hier geht es zur Search Console.
- Google Page Speed Inshights
In Googles eigenem Analyse-Tool für Page Speed und Performance findest du ebenfalls Reports zu den Core Web Vitals deiner Website. Hier kannst du die drei Metriken ausführlich analysieren und erhältst dazu direkt Verbesserungsvorschläge, die du umsetzen solltest, um deine Core Web Vitals zu optimieren.
Hier kannst du deine Score in den Google Page Speed Insights checken.
- GT Metrix
Das Tool GT Metrix ist weitestgehend kostenlos und bietet neben Reports zu den Core Web Vitals zusätzliche Analysen zu Page Speed und Performance, Auswertungen der Lighthouse KPIs und weitere Audits. Das Tool überzeugt vor allem durch eine gut verständliche Aufbereitung und Darstellung der Analysen, sowie die Möglichkeit, Tests für verschiedene Devices und Serverabfragen verschiedener geographischen Locations zu fahren. Ebenfalls interessant ist das hier das Benchmarking mit historischen Daten, um bessere Prognosen für die Zukuftssicherheit der Website treffen zu können.
Hier kannst du dir einen Überblick über die Optimierungsmöglichkeiten mit GT Metrix verschaffen.
Als weitere passende Reporting-Tools seien hier noch Lighthouse, Chrome Dev Inspector und CrUX genannt. Die Daten und Analysen überschneiden sich allerdings mit den oben genannten Tools, da sie dieselben Metriken nutzen und fast alle die Daten aus Lighthouse als Grundlage haben.
Was sind die idealen Werte innerhalb der Core Web Vitals Metriken?
| Metric |
Ideal* |
Perfect Score* |
| LCP |
2.5 to 4 Seconds |
Less than 2.5 Seconds |
| FID |
100 to 300 milliseconds |
Less than 100 milliseconds |
| CLS |
0.1 to 0.25 |
Less than 0.1 |
*Values based on official Core Web Vitals Documentation
An welchen Stellschrauben kann man die Werte der Core Web Vitals optimieren?
Longest Contentful Paint (LCP) und First Input Delay (FID)
Bilder:
- Zum Optimieren von Bilddateien solltest du Tools wie TinyPNG nutzen.
- Ersetze große animierte GIFs durch komprimierte Videos oder durch statische Bilder, je nachdem, was deine UI zulässt.
- Verwende lazy-loading, um die Ladegeschwindigkeit zu verbessern.
CSS
- Verkleinere CSS auf deiner Website mit Tools wie CSS Minifier und CSS Nano.
- Optimiere CSS Hintergrundbilder mit Media Queries:
@media (max-width: 480px) {
body {
background-image: url(images/sample-background.jpg);
}
}
@media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/sample-background-big.jpg);
}
}
JavaScript
- Identifiziere langsam ladende JavaScript Elemente von Drittanbietern auf deiner Website. Solche Elemente werden dir in den Core Web Vitals Reports praktischerweise angezeigt.
- Minimiere JavaScript durch JavaScript Minifier oder JS Compress.
Cumulative Layout Shift (CLS)
- Beim Einfügen von Bild- und Video-Dateien auf einer Website empfiehlt es sich, anstatt mit width und height Attributen, mit aspect ratios zu arbeiten. Diese CSS Regeln optimieren die Größenverhältnisse solcher Visuals automatisch und passen sie an veränderte Device- oder Window-Größen an, ohne das gesamte Layout der Seite unnötig zu verzerren:
aspect-ratio: attr(width) / attr(height);
- Spezifiziere die Höhe von eingebetteten Inhalten. Um Höhenverhältnisse von eingebetteten Elementen zu untersuchen, nutze am besten den Chrome Dev Inspector.
- Achte bei Cookie Banner und DSGVO Benachrichtigungen darauf, dass sie nicht die komplette Seite verdecken und relevante Inhalte der Seite verdecken.
- Zudem solltest du mit Pop-Up-Fenstern, beispielsweise für die Leadgenerierung via Newsletter-Anmeldung, aufpassen. Auch solche Elemente können Layout Shifts verursachen und deinen CLS Wert nach unten ziehen.
💡 Tipp: Stelle dir vor, du wärest ein User, der deine Seite zum ersten mal besucht. Lösche dafür die Cookies in deiner Browser, damit es auch für deinen Browser der erste Besuch ist. Auf diese Art und Weise werden dir bestimmt Bereiche deiner Website auffallen, die du noch optimieren kannst.
- Behalte Animationen im Blick, die ebenfalls Layout Shifts verursachen könnten. Zum Beispiel können schon Box-Shadows in manchen Fällen ein leichtes Verzerren des Layouts verursachen. Weitere Beispiele für möglicherweise kritische Animationen findest du in diesem Spreadsheet.
.gif?width=2358&name=m2G%20Studio%20%20Banner%20Focus%20Keyword%20(2).gif "m2G Studio Banner Core Web Vitals")
