Was ist Ihre Herausforderung?

Sprechen Sie direkt mit einem Experten unter 030 91684401

Ich will Neuigkeiten!

Kontakt
Menschen überqueren einen großen Zebrastreifen
SEO

Web Vitals: Top Rankings durch UX-Fokus

Home Blog
Tina Kassens 17/07/20

Gesunde Web Vitals sind die Grundlage für eine gute Seitenbewertung und damit auch den langfristigen Erfolg im organischen Ranking.
Ab 2021 gehören Web Vitals zu Googles offiziellen Rankingfaktoren. Das Konstrukt wurde von Google herausgegeben, um es Seitenbetreibern einfacher zu machen, eine gute User Experience zu kreieren. Mithilfe von Web Vitals lässt sich die Nutzerfreundlichkeit einer Website analysieren und optimieren.
Laut Google werden hierfür drei Kennzahlen gemessen: Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS). In diesem Artikel erfahrt ihr, wie sich die Kennzahlen zusammensetzen, welche Tools ihr für das Monitoring nutzen könnt und welche Maßnahmen sich für die Optimierung von Web Vitals nutzen lassen.


Web Vitals sollen es Seitenbetreibern erleichtern, die Performance ihrer Website greifbar und messbar zu machen. Gleichzeitig soll die Nutzererfahrung wieder in den Fokus für das Website Ranking rücken. Mithilfe dieser Kennzahlen ermöglicht es Google jedem, die Qualität seiner Seite zu prüfen – auch ohne ein Experte auf dem Gebiet der Seitenperformance zu sein. Wir zeigen euch nachfolgend, wie das funktioniert. Dabei gehen wir zuerst darauf ein, was die entsprechenden Kennzahlen bedeuten:

Largest Contentful Paint

Ladezeiten für das größte Element im Sichtbereich (Largest Contentful Paint) als Teil der Web Vitals

Der Largest Contentful Paint beschreibt die Länge der Ladezeit für das größte Bild oder Textelement im Sichtbereich. Folgende Bausteine werden für den Largest Contentful Paint betrachtet:

  • alleinstehende <img> Elemente und solche, die sich innerhalb einer SVG befinden
  • <video> Elemente
  •  Elemente die über die url(.). Funktion einem Hintergrundbild geladen werden
  • Block Level Elemente die Text Nodes oder andere Inline-level Text Elemente beinhalten

Dabei wird eine Ladezeit von bis zu 2,5 Sekunden als gut angesehen. Alles was zwischen 2,5 Sekunden und 4 Sekunden liegt, ist noch akzeptabel – allerdings verbesserungswürdig. Ladezeiten, die über 4 Sekunden hinausgehen, werden als schlecht bewertet. Hier ist eine tiefergehende Analyse- und die Eliminierung der Verzugsquelle unbedingt notwendig.

Wie wird der LCP Report während des Scrollens berechnet?

Berücksichtigt wird immer nur der Inhalt, der auch für den User sichtbar ist. Da der LCP während des Ladens und Scrollens auf der Seite wechseln kann, wird sich auch die LCP Bewertung ändern. Es werden nur Elemente in die Bewertung einbezogen, die bereits gerendert sind. 

First Input Delay (FID)

FID =. First Input Delay (Teil der Web Vitals)

Innerhalb der Web Vitals beschreibt der First Input Delay, wie schnell die Seite erstmals auf konkrete Interaktionen, wie beispielsweise den Klick auf einen Button, reagiert. Scrollen und Zoomen werden als laufende Aktionen gezählt und fließen daher nicht in den First Input Delay ein. 

User wollen vor allem eins: Schnelle Reaktionszeiten!

Hat sich ein Nutzer dazu entschieden, eine bestimmte Interaktion auf einer Seite vorzunehmen, zeugt dies in den meisten Fällen von Interesse. So sollte jeder Seitenbetreiber bestrebt sein, einen interessierten, potenziellen Kunden auch auf seiner Seite zu halten. Lange Wartezeiten werden hier kaum toleriert und schnell durch das Verlassen der Seite gestraft. 

Google möchte dies zukünftig berücksichtigen und hat deshalb den First Input Delay eingeführt. Selbstverständlich ist die Reaktionszeit generell ein wichtiger Aspekt der Nutzerzufriedenheit – allerdings bewertet Google im FIP ausschließlich die erste Interaktion mit der Seite. Die Begründung: Bereits die erste Interaktion hinterlässt beim Nutzer einen guten oder eben einen schlechten Eindruck. Ebenfalls treten die größten Verzögerungen vorrangig beim ersten Laden der Seite auf.

Als gut angesehen werden in Bezug auf den First Input Delay alle Reaktionszeiten bis 100ms. Ab einem Wert von 300ms bewertet Google die Leistung als unzureichend. 

Verzögerungen in der Interaktions-Geschwindigkeit entstehen oft dadurch, dass die Seite noch mit anderen Dingen beschäftigt ist. Auslöser hierfür sind oft das Parsen und Ausführen großer JavaScript Files. 

Cumulative Layout Shift (CLS)

Cumulative Layout Shift beschreibt die visuelle Stabilität einer Seite (als Teil der Web Vitals)

Beim Cumulative Layout Shift geht es darum, die visuelle Stabilität einer Webseite in Zahlen zu fassen bzw. zu messen.

Wer hat es nicht schon einmal erlebt: Man ruft eine Seite auf, beginnt zu lesen und wieder und wieder verschiebt sich der Text oder Textteile nach unten, weil Objekte der Seite nachgeladen werden. Ob fehlende Bilder oder eingeblendete Werbeanzeigen – all diese “nachgeladenen” Komponenten behindern den Lesefluss und erschweren es, die Inhalte zu überblicken. Noch störender ist es, wenn man einen interessanten weiterführenden Link gefunden hat, diesen anklickt und sich die Seite kurz vorm Klick so verschiebt, dass ein falscher Link ausgewählt wird. 

Dieses Szenario ist nicht nur äußerst ärgerlich für den User, es kann auch zu falschen Angaben führen, wenn es zum Beispiel um die Bestätigung von Informationen geht. 

Grund für diese nachträglichen Verschiebungen sind oft asynchron nachgeladene Ressourcen oder DOM-Elemente, die dynamisch über den bereits angezeigten Seiteninhalt geladen werden. Infrage kommen hierfür beispielsweise: 

  • Bilder und Videos für die vorher keine festgelegte Größen hinterlegt wurde
  • Anzeigen, die in dynamischen Größen ausgespielt werden 
  • Fonts, die größentechnisch anders ausfallen als ihr Fallback

Auch Google bewertet diesen Vorgang als negativ für die User Experience und nimmt ihn deshalb als messbaren und kontrollierbaren Rankingfaktor innerhalb der Web Vitals auf. 

Tipp: Im Falle von CSS Klassen ermöglicht es die “transform” Property, Objekte zu bewegen, ohne einen Layout Shift hervorzurufen:

  • Anstelle der “height” und “width” Properties, Nutzung von “transform: scale ()
  • Um Bausteine auf der Seite zu bewegen Nutzung von “transform: translate ()” anstatt “top“, “right“, “bottom” und “left

Diese Einstellungen sollten sich positiv auf den Cumulative Layout Shift auswirken, ohne viel Arbeit zu erfordern. 

Web Vitals – Test Tools

Um die Performance eurer Seite zu testen, stehen euch eine Vielzahl von kostenlosen Tools zur Verfügung. Mithilfe von https://web.dev/measure/ oder den Page Speed Insights, könnt ihr euch ein Bild des IST-Zustands eurer Website machen. Auf diesen Seiten findet ihr außerdem viele nützliche Hinweise dazu, an welchen Stellen es momentan noch hakt und wie ihr eure Performance verbessern könnt. Lighthouse ist ebenfalls ein umfassendes Analyse Tool, mit dem ihr euch einen umfassenden Überblick über die komplette Seitenperformance schaffen könnt. Um im Nachhinein festzustellen, welche Maßnahmen den größten Impact auf eure Seite hatten, ist es wichtig, den Stand regelmäßig zu überprüfen und die Ergebnisse festzuhalten.

Screenshot von Pagespeed Insights mit Verbesserungspotenzial
Screenshot von Pagespeed Insights mit Verbesserungspotenzial

Fazit: Mit den neu festgelegten Web Vitals zeigt Google nun offenkundig, wie wichtig es ist, einen Fokus auf die User Experience zu legen. Webseiten werden letztlich für Menschen und nicht für Maschinen konzipiert. Auch wenn das Thema erst 2021 ausgerollt wird, sollte man bereits jetzt damit beginnen, die eigene Seite zu prüfen und nutzerorientierter zu gestalten. Falls ihr zum Thema Web Vitals noch Fragen habt, freuen wir uns über eure Nachrichten.

Tina Kassens
Tina Kassens Junior Digital Marketing Managerin

Hast Du Fragen zum Blogeintrag oder bist auf der Suche nach einer professionellen Unterstützung in diesem oder einem anderen Bereich?
Dann schreib uns gerne eine E-Mail über unser Kontaktformular.

Kontakt

Weitere Blogeinträge

Google Suchkampagnen: Die Basics
Die 9 besten Keyword-Tools