User Experience (UX): Cumulative Layout Shift (CLS), oder: Flash of Unstyled Content (FOUC)

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Puh! CLS? FOUC? Was ist das denn?

Beispiel: Wikipedia – CC BY-SA 3.0
Sobald das CSS geladen ist, das den Stern für die Beobachtungsliste anzeigt, ändert sich der Umbruch des Absatzes

Flash of Unstyled Content (FOUC), oder Cumulative Layout Shift (CLS). Beides bezeichnet das – unerwünschte – Verhalten, dass sich laufend noch Elemente auf der Seite verschieben, während diese geladen wird oder sogar danach noch. Ursachen für eine Layout-Verschiebung können z.B. nachladende Schriften sein, Bilder, deren korrekte Abmessungen nicht im HTML angegeben sind, oder auch spät zur Seite hinzugefügtes CSS (beispielsweise erst durch JavaScript eingefügt). Das Ergebnis ist ein gefühlt unruhiger Seitenaufbau, und eine schlechte User Experience (UX)

Ein ausführlicher Artikel zu diesem Thema bei Heise.

Auch auf meiner Website gab und gibt es immer wieder einmal Fälle von FOUC / CLS. Die Ursache ist häufig durch JavaScript eingefügtes CSS, und die Fehlersuche und -abstellung nicht immer trivial.

Seiten sanft einblenden

In diesem Zusammenhang habe ich mich erinnert, dass manche Webseiten beim Aufruf einen subtilen Einblendeffekt zeigen, der den Seitenaufbau angenehmer erscheinen lässt. Die Technik dahinter:

1. Das body-Element wird per CSS auf opacity:0 gesetzt
2. Wenn die Seite komplett geladen ist, und alle JavaScripts ausgeführt sind, wird opacity mit einer Transition auf 1 gesetzt

Da nur mit JavaScript der Zeitpunkt bestimmt werden kann, zu dem alle JavaScripts ausgeführt sind , muss opacity:1 per JavaScript onload gesetzt werden:

<script> window.onload = function () { document.getElementsByTagName('body')[0].style.opacity = 1; document.getElementsByTagName('body')[0].style.WebkitTransition = 'opacity 500ms'; document.getElementsByTagName('body')[0].style.Transition = 'opacity 500ms'; } </script> In Zwischenablage kopieren

Auch das ursprüngliche opacity:0 muss selbstverständlich per JavaScript, und nicht direkt per CSS deklariert werden. Andernfalls bekämen Besucher mit deaktiviertem JavaScript nur eine leere Seite zu sehen!

<script> document.getElementsByTagName("body")[0].style.opacity = 0; </script> In Zwischenablage kopieren

Im Ergebnis gibt es kein FOUC bzw. CLS mehr, oder besser gesagt, es ist nicht mehr sichtbar. Weil allfällige Layoutverschiebungen vor dem onload-Event erfolgen, und damit während der opacity:0-Phase.

Die Anwendung dieser Technik setzt natürlich einen grundsätzlich schnellen Seitenaufbau voraus. Wenn der onload-Event erst später als 1 (eine) Sekunde nach dem Aufruf feuert, dann bitte nicht!
Aus diesem Grund wende ich die Technik auch nicht auf der mobilen Version der Site an. Im Mobilfunknetz sind Ladezeiten unter 1 Sekunde leider kaum erreichbar.

Man muss übrigens den Effekt des sanften Einblendens nicht mögen. Dann einfach in der onload-Funktion die zweite und dritte Zeile (Transition) weglassen. Die Seite wird dann normal aufgebaut, aber eben erst, nachdem alles andere JavaScript ausgeführt ist. FOUC wird auch so komplett unterbunden.

Und jetzt würde ich mich über Kommentare freuen, wie meine Besucher das sehen. Ist die kurze Zeit (ca. ½ sec) gänzlich ohne Inhalt, und das anschließende sanfte Einblenden "angenehmer" als ein eventueller FOUC?

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.