Cumulative Layout Shift (CLS)

Google Core Web Vitals

Wer kennt das nicht: Man hat eine Webseite aufgerufen, und die Seite lädt und lädt. Endlich erscheint der Button, den man betätigen will, klickt drauf, und man landet ganz woanders, weil im letzten Moment sich alles doch nochmal verschiebt! Das ist Zeit, Datenvolumen und Nerven raubend!

Weil der Service am Suchenden für Google wichtig ist, ist genau dieser Umstand einer der Kernelemente der Core Web Vitals. Der Cumulative Layout Shift gibt also an, ob und in welchem Ausmaß unerwartete Layout-Veränderungen erfolgen, während der Nutzer mit einer Website interagiert. In ihrem eigenen Blog beschreiben die Google-Entwickler, was der CLS ist, wie er sich auf das Ranking der Website auswirkt und wie man ihn verbessern kann.

Cumulative Layout Shift (CLS)

Wie wird der CLS berechnet?

Die Berechnung des Cumulative Layout Shift im Rahmen der Core Web Vitals geht wie folgt:

Impact Fraction x Distance Fraction = Layout Shift Score

Impact Fraction gibt den Prozentbereich des Bildschirms an, der von einer Änderung betroffen ist; und die Distance Fraction beschreibt, wie hoch der prozentuale Anteil an der Viewport-Höhe an, um den das Element durch den Layout Shift nach unten geschoben wurde. Beide Angaben werden als Wert zwischen 0 und 1 ermittelt und anschließend multipliziert: Als Ergebnis steht dann ein Layout Shift Score zwischen 0 und 1.

Für Google ist alles bis 0.1 ein guter Wert und ab 0.25 schlecht; dazwischen besteht Verbesserungsbedarf. 

Was kann ich machen, um meinen CLS-Wert zu verbessern?

Bilder- und Video-Elemente ohne Breiten- und Höhenangaben

Bilder und Videos sollten immer mit einer Breiten- und Höhenangabe versehen sein. Alternativ kann der benötigte Platz auch mit der Aspect Ratio im CSS definiert werden. Damit wird sichergestellt, dass der Browser den exakten Platz fürs Bild oder Video freihält, während das Bild geladen wird.

Werbung ohne Breiten- und Höhenangaben

Laut Google sind Ads einer der häufigsten Gründe für einen Layout Shift auf Webseiten, da Werbenetzwerke häufig dynamische Anzeigen-Größen anbieten. Um dies zu vermeiden, wird ein Platzhalter-Element empfohlen, und zwar in der wahrscheinlichsten Dimensionierung für eine bestimmte Werbefläche.

Dynamisch eingebundener Content

Elemente wie etwa Newsletter- oder Datenschutz-Hinweise im Haupt-Content der Seite kann zu Layout-Verschiebungen führen. Daher empfiehlt Google auch hier, ein Platzhalter-Element einzufügen, damit die Besucher keine Überraschung erleben, wenn das Element geladen ist und den Content verschieben kann.

Web-Schriftarten

Wer Schriftarten aus dem Web einbindet, hat womöglich Probleme mit Layout-Verschiebungen – etwa, wenn die Fallback-Schriftart mit der eigentlichen Web-Font ausgetauscht wird. Empfohlen wird daher, die Fonts vorzuladen; zudem können die genutzten Fonts auch auf dem eigenen Server gespeichert werden.

Wieviel Zeit hab ich noch zur Umsetzung?

Die Tatsache, dass viele Unternehmen noch nicht ausreichend darauf vorbereitet sind, hat inzwischen zu einer Verlängerung der Frist geführt. Google hat bekannt gegeben, dass das Update auf Mitte Juni 2021 verschoben wird. Dadurch gewinnen Websitebetreiber sechs zusätzliche Wochen für Verbesserungen. Die Core Web Vitals mit ihren drei neuen Faktoren Largest Contentful Paint (LCS), First Input Delay (FID) und Cumulative Layout Shift (CLS) werden uns also auch in Zukunft stärker beschäftigen.

Wenn Sie Fragen zu den Core Web Vitals haben, stehen wir Ihnen gerne zur Verfügung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.