Core Web Vitals - Rankingfaktor ab 2021
Im Mai 2021 erweitert Google sein Portfolio an Bewertungskriterien um die Core Web Vitals. Deshalb sollten die Messwerte zukünftig unbedingt beachtet werden. Insbesondere da Websites immer komplexer, mobilfreundlicher und interaktiver werden.
Was sind die Core Web Vitals?
Mit den Core Web Vitals macht Google die User Experience (UX) einer Website messbar. Die User Experience konzentriert sich im Zusammenhang von Verständnis, Bedürfnissen und Wertschätzung – wie der Name sagt – auf die Nutzer*innen. Hierbei soll mit Hilfe der UX-Best-Practices eine Qualitätssteigerung von Interaktion und Wahrnehmung gefördert werden.
Google beschäftigt sich mit dem Update im Mai 2021 in erster Linie mit technischen Performance-Themen. Die Core Web Vitals werden in drei verschiedene Messwerte unterteilt: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS).
Largest Contentful Paint (LCP)
Mit dem Largest Contentful Paint (LCP) wird die Ladezeit des Hauptcontents gemessen. Untersucht wird also, wie lange Nutzer*innen auf sichtbaren Content warten müssen. Der LCP wird in Sekunden gemessen und folgendermaßen bewertet:
- Gut: weniger als 2,5 Sekunden
- Verbesserungswürdig: bis zu 4 Sekunden
- Schlecht: mehr als 4 Sekunden
First Input Delay (FID)
Der First Input Delay (FID) ist die Messung der Interaktion. Ist die Seite vollständig geladen, möchten Nutzer*innen durch Verlinkungen, Bilder oder Formulare interagieren. Wie gut das funktioniert wird vom FID gemessen. Der First Input Delay lässt sich wie folgt bewerten:
- Gut: weniger als 0,1 Sekunden
- Verbesserungswürdig: bis zu 0,3 Sekunden
- Schlecht: mehr als 0,3 Sekunden
Cumulative Layout Shift (CLS)
Der Cumulative Layout Shift (CLS) beschäftigt sich mit der visuellen Stabilität einer Website. Hierbei geht es um die Abstimmung beim Ladevorgang von Content. Größere Projekte laden Teile des Contents asynchron, um die Ladezeiten für User*innen möglichst niedrig zu halten. Diese Ladevorgänge müssen allerdings aufeinander abgestimmt sein, sonst können die Inhalte der Website springen.
Was bedeutet das? Im schlimmsten Fall führen User*innen aufgrund einer Layout-Verschiebung beispielsweise eine Bestellung aus, obwohl das nicht beabsichtigt war. Das passiert, wenn Bestätigungsbutton und Abbruchbutton übereinander liegen und so für kurze Zeit überlappen. Dieses Problem hat einen negativen Einfluss auf die User Experience und verärgert außerdem die Nutzer*innen.
Der Cumulative Layout Shift wird anhand des Layout Shift Scores gemessen. Bewerten lässt sich der CLS wie folgt:
- Gut: weniger als 0,1
- Verbesserungswürdig: bis zu 0,25
- Schlecht: mehr als 0,25
Berechnung des Cumulative Layout Shift
Um den Cumulative Layout Shift zu berechnen, wird folgende Formel verwendet:
Impact Fraction * Distance Fraction = Layout Shift Score
Es folgt ein Beispiel zur Berechnung:
- Beim Laden einer Webseite nimmt ein Element 45 % der Höhe des Bildschirms ein (1. Frame)
- Während des Ladens verschiebt sich das Element um 15 % nach unten (2. Frame)
Die Impact Fraction bestimmt, wie viel Prozent des Bildschirms durch die Verschiebung eines Elements betroffen sind. Durch die Verschiebung wandert das Element von einem Bereich in einen anderen, sodass zwei Frames entstehen. Zur Verdeutlichung: Die Summe der beiden Frames aus dem Beispiel ergibt eine Impact Fraction von 0,60 (Berechnung: 45 % + 15 % = 60 %).
Die Distance Fraction gibt die Größe der Layout-Verschiebung zwischen den Frames an. Als Ausgangswert wird die größte Entfernung (horizontal oder vertikal), die ein Element zurückgelegt hat, gewählt. Ist ein instabiles Element z.B. um 15 % weitergewandert, beträgt die Distance Fraction 0,15.
Mithilfe der Impact Fraction und der Distance Fraction lässt sich der Cumulative Layout Shift (CLS) berechnen: CLS = 0,60 * 0,15 = 0,09 (gut). Bei diesem Beispiel wird ein guter Layout Shift Score erreicht, da er ein Ergebnis von unter 0,1 erreicht.
Core Web Vitals optimieren
Die schlechte Nachricht zuerst: Leider gibt es keine einfache Lösung, um die Core Web Vitals zu optimieren. Da jedes System unterschiedlich ist, muss je nach System unterschiedlich verfahren werden. Die gute Nachricht ist, dass es Standards gibt, mit denen sich die Core Web Vitals optimieren lassen:
- LCP: Server-Antwortzeiten, Rendering-Blocking (CSS & JavaScript), Ladezeiten der Ressourcen (Bilder, CSS) und Client Side Rendering
- FID: Auswirkungen von Code (Dritten) reduzieren, JavaScript-Ausführung beschleunigen, den Main-Thread des Browsers entlasten sowie die Anzahl der Requests und Dateigrößen reduzieren
- CLS: Größenangaben von Bildern und Video-Elementen, keine Inhalte automatisch am Anfang der Seite einfügen, Animationen nutzen, die Elemente nicht in ihrer Größe ändern
Doch Vorsicht: Jede Webseite ist individuell. Deswegen kann es Abweichungen zu den oben genannten Optimierungsmaßnahmen und weitere nötige Anpassungen geben.
Wichtige Bewertungskriterien für die User Experience
Die Nutzungsfreundlichkeit einer Website wird zukünftig immer stärker von Google in die Bewertung aufgenommen. Neben den im Mai hinzukommenden Core Web Vitals wird auch die Mobile First Indexierung im März 2021 final umgestellt, sodass Desktop-Inhalte in der Suche nicht mehr berücksichtigt werden. Folgende Bewertungskriterien sollte jede*r für die eigene Website im Hinterkopf behalten:
- Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS)
- Ladegeschwindigkeit
- Optimierung für Mobilgeräte
- Sichere Datenübertragung mit SSL-Zertifikat
- Nicht nutzungsfreundliche Werbebanner und Störer vermeiden
Kostenlose Tools zur Optimierung der Core Web Vitals
Zum Testen der neuen Kriterien empfiehlt sich unter anderem der Google Lighthouse Report ab Version 6.0. Websites mit konstantem Traffic können die Core Web Vitals außerdem in der Google Search Console prüfen.
Nicht vergessen: Die Optimierung wirkt sich positiv auf die User Experience einer Website aus, was wiederum positiv für das Ranking der Website ist. Denn schnelle und nutzungsfreundliche Webseiten erfreuen nicht nur diejenigen, die sie besuchen, sondern auch Google.
Autor: Henning Hüttmann