Das Layout springt — und der Klick geht daneben.

Was gemessen wird.

CLS summiert, wie viel sichtbarer Inhalt sich unerwartet verschiebt — gewichtet nach der betroffenen Fläche und der Distanz. „Unerwartet“ ist der entscheidende Teil: Verschiebungen direkt nach einer Nutzereingabe zählen nicht, weil sie beabsichtigt sind.

Gemessen wird über die gesamte Lebensdauer der Seite, in Abschnitten. Das heißt: Auch ein Sprung, der erst nach zwanzig Sekunden Scrollen passiert, zählt. Es reicht also nicht, nur den ersten Bildschirm in Ordnung zu bringen.

Bilder ohne Maßangaben.

Die häufigste Ursache und die am einfachsten zu beheben. Ein Bild ohne Angabe von Breite und Höhe nimmt zunächst keinen Platz ein; sobald es geladen ist, schiebt es alles darunter nach unten.

Die Lösung ist, Breite und Höhe im HTML anzugeben. Der Browser rechnet daraus das Seitenverhältnis aus und reserviert den Platz, auch wenn das Bild per CSS auf eine andere Größe skaliert wird. Das gilt genauso für Videos und für Elemente, die Bilder über CSS einbinden — dort braucht es ein festgelegtes Seitenverhältnis.

In WordPress fügt der Editor diese Angaben meist automatisch ein. Fehlen sie, kommen die Bilder oft aus einem Page Builder oder einem Plugin (Bilder).

Nachgeladene Bereiche.

Alles, was erst nach dem ersten Aufbau erscheint und Platz braucht: Werbeflächen, Bewertungssterne, Lagerbestandsanzeigen, personalisierte Empfehlungen, Hinweisleisten.

Richtig ist, den Platz von Anfang an zu reservieren — mit einer Mindesthöhe, die dem späteren Inhalt entspricht. Das sieht während des Ladens leer aus und ist trotzdem besser als ein Sprung. Wenn die Höhe schwankt, nimm die übliche und akzeptiere kleine Abweichungen.

Besonders tückisch sind Elemente, die nur manchmal erscheinen — eine Rabatthinweiszeile, die nur bei bestimmten Produkten kommt. Die springt genau dann, wenn niemand damit rechnet (Shop-Elemente).

Cookie-Banner und Hinweise.

Ein eigener Abschnitt, weil fast jede Website betroffen ist. Ein Banner, das den Inhalt nach unten schiebt, erzeugt einen großen Sprung über die volle Breite — das ist der denkbar schlechteste Fall.

Richtig ist, das Banner über dem Inhalt schweben zu lassen, statt ihn zu verschieben. Das ist eine Frage der Positionierung und ändert nichts an der rechtlichen Seite. Dasselbe gilt für Versandkostenhinweise und Aktionsleisten (Cookie-Banner).

Achte dabei darauf, dass das Banner trotzdem per Tastatur bedienbar bleibt und den Inhalt nicht dauerhaft verdeckt (Barrierefreiheit).

Der Schriftwechsel.

Wird Text zuerst mit einer Ersatzschrift angezeigt und dann auf die geladene Schrift umgestellt, verschiebt sich der Text — weil die beiden Schriften unterschiedlich breit und hoch laufen.

Zwei Ansätze. Erstens: Die Ersatzschrift so anpassen, dass sie der echten in den Maßen nahekommt; moderne CSS-Eigenschaften erlauben das recht genau. Zweitens: Schriften früh laden und lokal ausliefern, damit das Fenster klein bleibt.

Den Text so lange unsichtbar zu lassen, bis die Schrift da ist, vermeidet zwar den Sprung, verschlechtert aber das LCP und die Nutzbarkeit — das ist der falsche Tausch (Schriften optimieren).

Eingebettete Inhalte.

Bei der dritten Zeile ist die bessere Lösung oft, gar nicht einzubetten: Ein Bildschirmfoto mit Link lädt schneller, springt nicht und löst nebenbei die Datenschutzfrage (Einbettungen und Datenschutz).

Animationen richtig bauen.

Animationen sind nicht grundsätzlich problematisch — es kommt darauf an, welche Eigenschaften bewegt werden. Wer Position, Höhe oder Abstände animiert, verschiebt anderen Inhalt und erzeugt CLS. Wer stattdessen Verschiebung und Skalierung über die dafür vorgesehenen Eigenschaften animiert, verändert nur die Darstellung und nichts am Platzbedarf.

Das ist zugleich die flüssigere Variante, weil der Browser sie besser verarbeiten kann. Dieselbe Animation, anders umgesetzt, kostet also nichts statt zweier Werte.

Späte Sprünge.

Da über die gesamte Besuchsdauer gemessen wird, zählen auch Verschiebungen weit unten auf der Seite. Typische Quellen: Bilder in langen Listen, die beim Scrollen nachladen, unendliches Nachladen weiterer Beiträge, Elemente, die beim Sichtbarwerden eingeblendet werden.

Prüfe deshalb nicht nur den ersten Bildschirm, sondern scroll einmal langsam durch die ganze Seite und achte auf Bewegung, die nicht von dir ausgeht.

Besonderheiten mobil.

Auf dem Handy ist CLS fast immer schlechter, weil die Fläche kleiner ist — dieselbe Verschiebung betrifft anteilig mehr Bildschirm. Dazu kommt, dass Elemente untereinander statt nebeneinander stehen, sich also stärker gegenseitig schieben.

Besonders zu prüfen: das Hauptmenü beim Aufklappen, Bilder im Hochformat, Hinweisleisten und die Tastatur, die beim Fokussieren eines Feldes das Layout ändert (Mobil).

Prüfweg.

1. Entwicklerwerkzeuge öffnen und die Verschiebungen aufzeichnen lassen — sie werden einzeln mit Element benannt.
2. Seite neu laden und dabei zusehen, was springt.
3. Langsam durchscrollen und auf späte Sprünge achten.
4. Mit gedrosselter Verbindung wiederholen — dann sieht man die Sprünge überhaupt erst.
5. Mobil gegenprüfen.
6. Die drei größten Verursacher beheben, nicht alle auf einmal.
7. Erneut messen.

Punkt vier ist der entscheidende Kniff: Auf einer schnellen Verbindung sieht man die Sprünge nicht, weil alles gleichzeitig da ist. Mit gedrosselter Verbindung werden sie offensichtlich.

Wenn du nicht weiterkommst.

Wenn deine Seite springt und du nicht herausfindest, welches Element dafür verantwortlich ist. Ich messe deine Seite mit echten Nutzerdaten statt mit einem einzelnen Test, sortiere die Befunde nach Wirkung und behebe die, die zählen: Ladezeit optimieren. Dauerhaft begleitet die WordPress-Wartung — damit neue Inhalte die Werte nicht wieder kaputt machen.

Orientierungswerte, keine Fixpreise — nach einem kurzen Gespräch bekommst du ein Festpreisangebot.

Wer hilft.

Ich bin Manuel Killert, Webentwickler aus Quakenbrück. Ich mache Websites schneller — und zwar messbar, nicht gefühlt. Das heißt: erst messen, dann die zwei oder drei Stellen beheben, die tatsächlich den Unterschied machen, dann noch einmal messen.

Was ich nicht mache: eine Punktzahl schönrechnen. Es gibt Tricks, mit denen ein Testwerkzeug hundert Punkte zeigt, während die Seite für echte Besucher gleich langsam bleibt. Das ist Selbstbetrug, und ich sage dir, wenn jemand dir so etwas verkauft hat.

Ich arbeite mit dem, was du hast — Theme, Plugins, Hoster. Ein Neubau ist manchmal die ehrlichere Antwort, und dann sage ich das auch, statt monatelang an einer Seite zu optimieren, die grundsätzlich falsch gebaut ist.