Cumulative Layout Shift (CLS) Optimierung für Shopify

Mit der Einführung der „Web Vitals“-Übersicht in der Search-Console hat auch der bisher noch unbekanntere Rankingfaktor „Cumulative Layout Shift“ (CLS) an Bedeutung erlangt.

Dabei ist gar nicht so leicht zu beschreiben um was es sich dabei handelt: Der „Cumulative Layout Shift“-wert beschreibt die Stabilität einer Webseite beim Ladevorgang. Das hört sich recht kompliziert an, jedoch hat jeder einen Layout-Shift schon mal gesehen. Beim Laden der Inhalte springen diese hin und her bzw. sind für wenige Sekunden verschoben oder Dropdown-Menüs werden für kurze Zeit ausgeklappt angezeigt, obwohl Sie hätten geschlossen sein müssen.

Alle diese optischen Effekte werden von Google nicht länger toleriert und sorgen für Abstrafungen im Ranking. Diese zu entfernen ist spätestens jetzt natürlich absolut sinnvoll.

Was ist „Cumulative Layout Shift“ (CLS)?

Wie bereits zuvor ausgeführt beschreibt der Wert des Cumulative Layout Shift (CLS) die visuelle Stabilität beim Ladevorgang des Shopify Shops. Google wünscht sich, dass es beim Laden der Seite nicht zu größeren Sprüngen im Design der Seite kommt.

Außerdem spielen auch unerwartete Änderungen auf der Seite beim Ladevorgang eine Rolle. Lädt ein Bild asyncron nur langsam nach und verschiebt die Inhalte der Seite signifikant, wäre das z.B. ein Verhalten, was zu sehr schlechten Werten beim Cumulative Layout Shift sorgen würde.

Ein typisches Szenario wäre, wenn man zum Beispiel anfängt den Text auf einer Seite zu lesen und danach baut sich ein Bild unter der Überschrift auf, welches dann den Text weiter nach unten schiebt.

Insbesondere auf kleinen Displays ist das für Leser:innen natürlich sehr nervig, da jetzt nach unten gescrollt werden muss um die richtige Stelle zum weiterlesen zu finden.

Ursachen von „Cumulative Layout Shift“

Das Verhalten kann nur an drei Ursachen liegen:

• Der Webserver ist so langsam, dass die Inhalte nicht schnell genug ausgespielt werden.
• Der Code ist so schlecht, dass dieser die Inhalte nicht schnell genug laden kann.
• Der Code ist an sich schlecht und sorgt für die Verschiebungen, obwohl der Webserver schnell genug wäre.

Oft ist es eine Kombination aus den ersten beiden Punkten. An sich schlechter Code sollte sich beseitigen lassen.

Streng genommen handelt es sich hier fast um ein historisches Problem, da die Ladezeitoptimierung in den letzten Jahren zunehmend an Bedeutung gewonnen hat.

Gerade bei Onlineshops die schon einige Jahre bestehen ist daher die Optimierung schwierig, weil oft nicht nur das Design optimiert werden muss, sondern auch die Auslieferung des Contents oft langsam ist. Das Problem behebt man oft am besten mit einem Wechsel auf eine moderne Software wie Shopify, oder wenn diese bereits eingesetzt wird, mit einem relaunch des Shopify Themes.