|

Core Web Vitals Guide 🧑‍⚕️ - CLS 🥌 (Cumulative Layout Shift)

Dieser Beitrag ist Teil der Serie Core Web Vitals Guide.

Core Web Vitals Guide 🧑‍⚕️ - die wichtigsten Metriken im Web
Die Core Web Vitals: Einheitliche KPIs unabhängig vom Tool. Diese Werte sind zukünftig die Werte, nach denen man Performance bewerten wird; und damit die Werte, die wir mit Kund:innen kommunizieren werden.
FID (Visual Stability) visualisiert
Bildquelle: web.dev/CLS

CLS, oder auch "Cumulative Layout Shift" gibt an, wie visuell stabil eine Seite bei einer Interaktion bleibt.

Der Wert soll Verschiebungen von Layout entdecken, die etwa durch ein Element das nachgeladen wird, entstehen.

Einstufung der Ergebnisse

Auch hier gilt: Je geringer der Wert, umso besser.

Einstufung Layout Shift Score
🟢 gut < 0.1
🟡 verbesserungswürdig 0.1 bis 0.25
🔴 schlecht, Handlungsbedarf > 0.25

Berechnungsgrundlage

Um die Layout Shifts zu berechnen nutzt Google folgende Formel

Impact Fraction x Distance Fraction = Layout Shift Score

Impact Fraction = Prozentbereich (%) des Bildschirms, der von visuellen Shifts betroffen ist.
Dabei zählt die Summe der Fläche vor und nach dem Shift (Ergebnis: Wert zwischen 0 und 1)

Distance Fraction = Prozentanteil (%) der Viewport-Höhe, um den ein Element durch den Shift verschoben wurde. (Ergebnis: Wert zwischen 0 und 1)

Wir vergleichen also die Unterschiede zwischen zwei Frames und berechnen daraus den Layout Shift Score.

Details zur Berechnung sowie Beispiele finden sich hier.

Optimierungsmöglichkeiten

Bild und Videos mit Größen (inline) auszeichnen

  • Bilder die mit Breiten- und Höhenangaben (width und height) ausgezeichnet werden, stellen sicher, dass der Browser den Platz für das Bild freihält, wenn es noch geladen wird.

  • Alternativ kann auch die aspect-ratio via css definiert werden (! beachte browsersupport)

  • Oder (ganz wild) kann die unsized-media feature policy im browser aktivieren werden.

Keine unerwarteten Elemente vor exisiterenden Content einfügen

  • Plötzlich auftauchende Elemente immer am Ende einfügen
  • Elemente nur ändern/hinzufügen, wenn expliziete Interaktion stattgefunden hat (zB. Klick)

Werbungscontainergrößen abschätzen

  • Werbung (größter Layout-Shift verursacher) auch mit festen Größenanageben auszeichnen. (Google Ads Anzeigen haben zumeist dynaische Anzeige-Größen, diese können aber aufgrund von Erfahrungswerten abgeschätzt werden, um CLS teilweise zu reduzieren.)

Dynaischer Content mit Platzhaltern einplanen

  • Inhalt der dynamisch hinzukommt, etwa ein Cookiebanner, Angebots/Newsletter-Promotion etc. sorgt für viele Shifts.

  • Durch Platzhalter kann dieses Problem vorgebeugt werden.

transform verwenden

  • CSS transform verschiebt nur den angezeigten Inhalt und verursacht damit kein Re-Rendering und verhindert so Layout Shifts.
  • Direkte Animation von CSS Properties vermeiden.

Animationen/Transitions einfügen

  • Dies verbessert zwar nur bedingt den CLS Score allerdings gibt es Nutzer:innen mehr wissen, darüber dass etwas geschieht und kann damit eine bessere User-Experience dastellen.

Umgang mit Web-fonts

  • Webfonts werden oftmals nachgeladen, was zu Layout-Shifts führt sogenannte FOUT (flash of unstyled text) und/oder FOIT (flash of invisible text)
  • Fonts selber hosten und vorladen.

Weitere Tipps

Google selbst listet noch weitere Tipps zur Optimerung von CLS auf: siehe web.dev/optimize-CLS

Weitere Infos

siehe web.dev/CLS