SEO-News

Google Web VitalsGoogle hat mit den 'Web Vitals' eine Übersicht wichtiger Kennzahlen für die User Experience vorgestellt. Zumindest eine dieser Kennzahlen ist bisher wenig bekannt gewesen: Der 'Cumulative Layout Shift'. Was verbirgt sich dahinter?

Unter den wichtigsten Kennzahlen für die User Experience, die Google im Zusammenhang mit den neuen Web Vitals vorgestellt hat, wird neben dem Largest Contentful Paint, also der Zeitspanne, bis zu der die wichtigsten Inhalte geladen sind, und dem First Input Delay, also der Dauer, bis eine Seite auf Eingaben der Nutzer reagieren kann, auch der Cumulative Layout Shift (CLS) genannt. Diese Kennzahl ist bisher wenig bekannt. Laut Google steht sie für die visuelle Stabilität beim Laden einer Seite sowie für unerwartete Änderungen auf der Seite beim Ladevorgang.

Diese Kennzahl ist aus Sicht der User Experience sehr bedeutsam, weil sie ein häufiges und sehr ärgerliches Problem beschreibt, das wohl jeder schon oft erlebt hat: Man besucht eine Seite und möchte zum Beispiel auf einen Link klicken. Doch während man versucht, die Aktion auszuführen, verschiebt sich plötzlich das Layout - zum Beispiel, weil ein zusätzlicher Werbeblock geladen wird und die Seitenelemente an einen anderen Platz rutschen.

Besonders ärgerlich ist so etwas, wenn dadurch ungewünschte Aktionen wie zum Beispiel eine Bestellung ausgelöst werden. Das zeigt das folgende Beispiel, in dem sich zwei Buttons untereinander befinden. Der eine Button dient für das Absenden der Bestellung, der andere zum Abbrechen. Verrutscht nun das Layout, kurz bevor geklickt wird, so kann statt eines Abbruchs ungewollt eine Bestellung ausgelöst werden:

 

Google: Cumulative Layout Shift - Beispiel für eine problematische Handlung

 

Solche Verschiebungen passieren häufig beim asynchronen Laden von Komponenten, oder wenn nachträglich Elemente zum Document Object Model (DOM) hinzugefügt werden.

 

Wie wird der Cumulative Layout Shift berechnet?

Der Cumulative Layout Shift gibt die Summe aller Layout Shift-Werte für unerwartete Änderungen des Layouts an, die während der Lebensdauer einer Seite geschehen. Ein Layout Shift liegt immer dann vor, wenn ein sichtbares Element auf einer Seite von einem Frame in ein anderes wechselt.

Betrachtet werden die Größe des Viewports sowie die Bewegungen instabiler Elemente zwischen jeweils zwei gerenderten Frames. Der Layout Shift-Wert ist das Produkt aus zwei Maßen der Bewegung: der Impact Fraction und der Distance Fraction. Die Impact Fraction gibt an, welcher Bereich des Viewports durch eine Verschiebung von einem Frame auf den anderen betroffen ist:

 

Google: Impact Fraction Beispiel

Impact Fraction - Beispiel. Bild: Google

 

Im Bild oben gibt es ein Element, welches 50 Prozent des Viewports einnimmt. Im nächsten Frame rutscht dieses Element um 25 Prozent nach unten. Betroffen ist also insgesamt ein Bereich von 75 Prozent des Viewports, die Impact Fraction beträgt also 75 Prozent.

Die Distance Fraction gibt an, wie weit sich ein instabiles Element zwischen zwei Frames bewegt hat. Dabei berechnet sich die Distance Fraction aus der größten Entfernung, die ein Element zurückgelegt hat (horizontal oder vertikal), geteilt durch die größte Dimension des Viewports (Breite oder Höhe). Als Ergebnis der Distance Fraction erhält man ebenfalls einen Prozentwert.

Die Formel des Cumulative Layout Shifts sieht so aus:

layout shift score = impact fraction * distance fraction

 

Was sind nicht erwartete Änderungen des Layouts?

Nur wenn Änderungen des Layouts nicht vom Nutzer erwartet werden, fließen sie in den Cumulative Layout Shift ein. Daher zählen folgende Arten vom Änderungen nicht dazu:

  • Vom Nutzer angestoßene Änderungen, die zum Beispiel durch Klicks oder andere Interaktionen ausgelöst werden
  • Animationen und Übergänge, die in einer Weise erfolgen, dass sich das Layout einer Seite ändert, ohne die Nutzer zu überraschen.

Plötzliche Änderungen ohne Nutzerinteraktion sollten also vermieden werden. Sie werden bei der Berechnung einbezogen.

 

Was ist ein guter CLS-Score?

Google nennt als guten CLS-Score einen Wert von unter 0,1. Um sicherzustellen, dass man diesen Zielwert für die meisten Nutzer erreicht, sollte man die 75. Perzentile aller Page Loads zur Messung heranziehen.

 

Cumulative Layout Shift

Cumulative Layout Shift (CLS)

 

Wie kann man den CLS messen?

Die einfachste und bequemste Möglichkeit zur Messung des Cumulative Layout Shifts ist es, das Web Vitals-Plugin für Google Chrome zu installieren. Dieses steht derzeit in einer Alpha-Version auf GitHub zur Verfügung. Neben dem Largest Contentful Paint und dem First Input Delay zeigt das Plugin auch den Cumulative Layout Shift an:

 

Web Vitals Chrome-Plugin: Beispiel

Web Vitals Chrome-Plugin: Ergebnis

 

Erreicht eine der Kennzahlen nicht den nötigen Wert, erscheint oben in der Browserleiste ein roter Kasten.

 

Was kann man unternehmen, wenn der CLS zu hoch ist?

Wenn der CLS einen Wert von 0,1 übersteigt, sollte die betreffende Seite auf Elemente untersucht werden, die sich während des Ladens verschieben. Heiße Kandidaten dafür sind Werbebanner und andere Inhalte in Iframes. Auch das nachträgliche Anpassen des DOMs per JavaScript kann den CMS erhöhen. Außerdem sollten folgende Punkte beachtet werden:

  • Bilder und Videos sollten immer mit einer Größenangabe eingebunden werden. Auf diese Weise wird gleich der benötigte Platz auf der Seite reserviert.
  • Zudem sollten bestehende Inhalte nicht durch neue Inhalte ersetzt werden - es sei denn, dies erfolgt als Reaktion auf eine Nutzerinteraktion.
  • Und schließlich wird empfohlen, plötzliche Änderungen zugunsten von animierten Übergängen zu vermeiden.

 

Wirkt sich der CLS auf die Rankings aus?

Google schreibt nichts von einem direkten Zusammenhang zwischen dem CLS und den Rankings in den Suchergebnissen. Der Zusammenhang ergibt sich vielmehr indirekt: Zufriedene Nutzer kehren wieder und sind eher dazu bereit, Inhalte zu teilen und Links zu setzen. Wer seine Seitenbesucher dagegen durch plötzliche Änderungen des Layouts verärgert, schmälert damit auch die Chance auf Weiterempfehlungen.

 

Fazit

Der Cumulative Layout Shift ist eine wichtige Kennzahl, wenn es um die User Experience geht. Der Vorteil ist, dass sich die Veränderungen des Layouts beim Laden auf eine Zahl reduzieren lassen. Das erleichtert Tests und schafft die Basis für Verbesserungen. Betreiber von Webseiten sollten plötzliche und unerwartete Änderungen des Seitenlayouts vermeiden. Das schafft zufriedenere Nutzer und erhöht die Chancen auf Weiterempfehlungen.

 


Christian Kunz

Von Christian Kunz

SEO-Experte. Sie benötigen Beratung für Ihre Webseite? Klicken Sie hier.



Anzeigen

Artikelveröffentlichungen auf starken Magazinen und Blogs

Wir kooperieren mit unzähligen Verlagen und Bloggern und können daher auf über 4000 Blogs zu fast allen Themengebieten Artikelplätze anbieten:

    - Nachhaltiger Linkaufbau, kein SEO-Netzwerk
    - Hohe Sichtbarkeitswerte, keine expired Domains
    - Einmalzahlung, keine Vertragsbindung

Für jede Artikelveröffentlichung erstellen wir hochwertigen Content mit mindestens 400 Wörtern und publizieren den Artikel mit einem DoFollow-Bachlink zu deiner Seite auf einem Magazin oder Blog deiner Wahl.

Frag uns unverbindlich nach Beispielen



SEO-Contest 2020





Verwandte Beiträge

SEO-Newsletter bestellen

Im monatlichen SEO-Newsletter erhaltet Ihr eine Übersicht der jeweils zehn wichtigsten SEO-Meldungen des Monats. Mit dem SEO-Newsletter bleibt Ihr auf dem Laufenden.
Ich bin mit den Nutzungsbedingungen einverstanden

 

 

 

 

Premium-Partner (Anzeige)

rnkeffect

 

Anzeigen






InterNetX


OMT

SEO Agentur aus Darmstadt

SEO-Vergleich

SEO-Beratung

Suchmaschinenoptimierung und SEO-Beratung für Karlsruhe, Baden und die Pfalz

 

06340/351-943

 

info(at)seo-suedwest.de

Jetzt vernetzen

SEO-Glossar

SEO-Glossar

 

SEO-Kalender 2020

SEO-Kalender 2019

 

Onsite-Optimierung

Onsite-Optimierung

 

SEO- und Suchmaschinenblogs

Bekannt aus

Website Boosting


Internet World Business

SEO United


The SEM Post


Webselling

SEO selber machen

SEO selber machen

Sprecher auf

Auszeichnungen

iBusiness Top-100-Liste SEO-Dienstleister

SEO Südwest: Platz 5 bei den SEO-Wahlen 2014 zum besten deutschen SEO-Blog

 

SEO-united.de Tipp 12/15

SEO-Tipps und SEO-Tricks

IMAGE 'Noindex' oder robots.txt - wann ist welches Instrument das richtige?
Freitag, 09. Februar 2018
Um zu steuern, welche Seiten von Google und anderen Suchmaschinen gecrawlt und indexiert werden... Weiterlesen...
IMAGE Lighthouse: ein Top-Tool für die Performancemessung von Webseiten und PWAs
Montag, 16. Oktober 2017
Lighthouse ist ein Tool, mit dem man die Performance und die Nutzerfreundlichkeit von Progressive... Weiterlesen...
IMAGE Tipp: Reddit für den Aufbau von Backlinks nutzen
Samstag, 17. Januar 2015
Die Social-News-Plattform Reddit erlaubt den Aufbau von guten Backlinks - wenn man sich an... Weiterlesen...

News aus dem Blog

IMAGE Google Webmaster Conference 2019 in Zürich – Recap
Mittwoch, 11. Dezember 2019
Auf der diesjährigen Google Webmaster Conference in Zürich, die erstmals im Raum EMEA... Weiterlesen...
IMAGE Google Webmaster Hangout: A visit at the Google Zurich office
Donnerstag, 05. Juli 2018
I was invited to Google Zurich to take part in a new episode of the Webmaster Office Hangout. I was... Weiterlesen...
IMAGE Unterstützung in der Krise: Unternehmen mit kostenloser Online-Beratung
Dienstag, 31. März 2020
Die aktuelle Krise bringt viele Unternehmen in wirtschaftliche Schwierigkeiten. Existenzen sind... Weiterlesen...

 Eine Auswahl zufriedener Kunden

Rebel - Bad Küche Raum
Schöne Haare Karlsruhe
kr3m
feel-perfect.eu - Die Nährstoffexperten border=
Flintec IT GmbH
ESM Academy
Ringladen

Verbinden und Informationen zu SEO Südwest

Impressum und Datenschutz

Social Networks und RSS-Feed