Chrome: CLS (Cumulative Layout Shift) Fehler finden

Um CLS-Fehler zu beheben, müssen zuerst die Elemente gefunden werden, die die Layout-Verschiebung verursachen. Im folgenden Artikel erfährst du wie man dabei vorgeht.

Hierzu gehst du in die Chrome Web-Developer Tools. (⌘ + Option + i am Mac und Ctrl + Shift + j auf Windows)

Zusätzlich muss Rendering aktiviert sein. Dazu muss über „Run Command“ (⌘ + Shift + p am Mac und Ctrl + Shift + p auf Windows). „Show Rendering“ eingeben und dann im neuen Fensterbereich die Checkbox „Layout Shift Regions“ anhaken.

Das die Layout-Shift-Regions nun aktiviert sind hat man 2 Möglichkeiten um die Elemente zu erkennen, die eine Layout-Verschiebung erzeugen und somit potentiell einen CLS-Fehler.

1. Man lädt die Seite einfach neu und nun sollten die Elemente mit Layout-Verschiebung farblich hinterlegt (durchsichtiges Farbfeld)
2. genauere Möglichkeit: Es müssen die Developer-Tools so klein wie möglich gemacht werden und im Performance-Tab der Entwickler-Tools wird das „Record and reload“ – Icon geklickt um ein Ladeprofil der Seite zu erstellen.

Es dauert ein paar Sekunden bis das Profil erstellt wird.

Danach kann im Performance Tab das Ergebnis des Performance Profiling Tests genauer unter die Lupe genommen werden. Unter „Layout Shifts“ können die einzelnen Element angeklickt werden die eben diese Verschiebungen bewirken. Gibt an unten in der Console unter „Event log“ „shift“ ein, so hat man nochmals eine Auflistung der Shifts mit den Zeiten zu denen sie auftreten.

In den meisten Fällen wird es sich um eins der unten gelisteten Probleme handeln. Die dann im konkreten Fall, dann so adaptiert werden muss, dass die Layout-Verschiebung so gering ist, dass alle Verschiebungen zusammen keinen CLS-Fehler mehr erzeugen.

• Ein Bild ohne Dimensions-Angaben
• Ads, Embeds und iframes ohne Dimensionsangaben (z.B.: Laden von Werbung)
• Dynamisch erzeugter Inhalt
• Webfonts die FOIT/FOUT erzeugen: ist eine verzögert geladene Schriftart breiter als die Standard-Schriftart, so kann es passieren, dass ein Wort in eine neue Zeile springt und dadurch ein nachfolgendes Bild verschoben wird. So entsteht in diesem Fall ein negativer CLS-Wert.
• Aktionen die auf einen Netzwerk-Response warten bevor sie das DOM updaten

Quellen und Weiterführende Links:

• https://support.google.com/chrome/answer/157179?hl=en&co=GENIE.Platform%3DDesktop#zippy=%2Cgoogle-chrome-feature-shortcuts
• https://developer.chrome.com/docs/devtools/command-menu?hl=de
• https://www.youtube.com/watch?v=T8x2a0RiLCY