Cumulative Layout Shifts: So kann man sie vermeiden

Das hat sicher jeder schon erlebt: Wir öffnen eine Seite. Und das Feld, das wir eben noch anklicken wollten, springt in dem Moment, in dem wir draufklicken, ganz woanders hin. Nun kaufen wir eine Waschmaschine – obwohl wir doch die Bestellung des Staubsaugers stornieren wollten. Solche nervigen Mängel der User-Experience gehören zukünftig der Vergangenheit an. Denn Google straft sie seit Mai ab. Denn seitdem ist die Google Page Experience neuer Ranking-Faktor des Suchmaschinen-Riesen. Vor kurzem haben wir schon mal darüber geschrieben. 

Mit den sogenannten Core Web Vitals bewertet Google die Benutzerfreundlichkeit einer Seite. Neben der Ladezeit (“Largest Contentful Paint”), der Interaktivität (“First Input Delay”) ist die visuelle Stabilität (“Cumulative Layout Shift”) ein wichtiges Kriterium für eine gute User-Experience. Wir haben uns das bei dmf mal genauer angesehen. In der dmf Academy. Hier treffen sich unsere verschiedenen Themen-Experten, um Entwicklungen am Markt einzuordnen und Lösungen zu finden. So haben wir das auch dieses Mal gemacht – und die wichtigsten Fragen geklärt. Schließlich wollen wir als Online-Shop-Spezialisten unseren Kunden immer die aktuell beste Lösung anbieten.

Wie misst Google den Layout Shift?

Der Cumulative Layout Shift quantifiziert das Ausmaß unerwarteter Layout-Verschiebungen. Das passiert z.B., wenn Werbebanner oder andere Elemente nachgeladen werden und die Seite in Sekundenschnelle zu einer anderen Stelle springt. Gemessen werden Verschiebungen von Elementen im Sichtbereich des Benutzers beim Laden der Seite. Verändert sich beim Ladeprozess der DOM, so wird ein “Screenshot” des Sichtbereiches gemacht und die Positionen der Elemente miteinander verglichen. Der Wert der Abweichung im Verhältnis zur Größe des Sichtbereiches wird in Prozent gemessen und vermerkt. Je kleiner der Wert, desto besser die Benutzerfreundlichkeit. 

Was sind die häufigsten Ursachen?

Um die Ladegeschwindigkeit zu erhöhen, haben viele Seitenbetreiber Inhalte nachgeladen. Dieses übliche “Lazy Loading” führt zu Sprüngen im Layout und ist damit als Vorgehensweise vom Tisch. Auch beim Laden großer Bilder und Videos verschiebt sich in vielen Fällen das Layout. 

Relativ geringe Layout-Verschiebungen entstehen auch durch das sogenannte “swappen”. Dabei wird ein Fallback-Font eingebaut, während der Webfont geladen wird. Man könnte den swap auch abstellen, muss dann aber in Kauf nehmen, dass die ersten Seiteninhalte nicht so schnell geladen sind. In der Regel liegen die Verschiebungen unter dem durch Google vorgegebenen Schwellenwert von großzügigen 20 Prozent.

Platz reservieren 

Sind größere Datenmengen einzubinden, wie beispielsweise bei einem Video, dann sind Thumbnails als Platzhalter eine gute Option, um Layout Shifts zu vermeiden. Dabei hilft ein simpler JavaScript Schnipsel, um ein Poster in der entsprechenden Größe einzubauen, das angezeigt wird, so lange das Video lädt.

Auch beim Lazy Loading von Inhalten via dynamic Imports können Seitenbetreiber mit Platzhaltern dafür sorgen, dass das Nachladen nicht für Layout-Verschiebungen sorgt. In der Regel sei bekannt, wie groß der geladene Inhalt sein wird, so Lukas, Frontend-Programmierer bei dmf. “So kann ich einen Platzhalter in der entsprechenden Größe programmieren.” Wenn der Inhalt lädt, füllt er den Platzhalter aus. Kein Verschieben. Genauso könne man das auch mit Bildern handhaben. “Für Bilder mit festen Größen kann einfach der entsprechende Platz reserviert werden”, weiß Lukas.

Eltern-Container bauen

Schwieriger werde es bei Bildern, die responsiv sind. “Da gibt es einen Trick”, schmunzelt Lukas. Wir geben dem Bild einen sogenannten Eltern-Container und setzen die Höhe dieses Containers mittels CSS auf das Seitenverhältnis des Bildes. Dabei gilt die Formel: Höhe in Pixel / Breite in Pixel * 100 = Seitenverhältnis in %. Diese Prozentangabe geben wir dem Eltern-Container als „padding-top“ Eigenschaft. Das Bild selbst muss innerhalb des Eltern-Containers nur noch absolut auf die volle Breite gesetzt werden. Der Platzhalter sei nicht fix, sondern orientiere sich an dem Seitenverhältnis des Bildes. Lädt ein breiteres Bild, so vergrößert sich der Container entsprechend dem Seitenverhältnis – also auch in der Höhe. Wird das Bild kleiner, so funktioniert es genauso – nur eben andersherum. “So entspricht der Container der relativen Größe des Bildes”, freut sich Lukas. “Immer.” 

Mal sehen, welches spannende Thema als nächstes auf die Agenda unserer Academy kommt. Wir halten Sie auf dem Laufenden.