Layoutsprünge vermeiden: Platz für Bilder und dynamische Inhalte reservieren

Verschiebung, Auslöser und betroffenen Bereich erfassen

Beobachten Sie nicht nur das erste Laden. Scrollen, nachgeladene Bilder, wechselnde Inhalte und spät erscheinende Hinweise können die Seite später verschieben. Dokumentieren Sie, welches Element seine Position verändert und welches andere Element den Raum beansprucht hat. Ursache und sichtbares Opfer sind nicht immer dasselbe.

Ein angeklickter Link, der unter dem Finger verschwindet, ist ein konkretes Nutzungsproblem. Erfassen Sie solche Fälle zusätzlich zum Messwert. Ein reproduzierbarer Ablauf mit Viewport und Ausgangszustand hilft mehr als die pauschale Forderung, „alles kleiner“ zu gestalten. Die richtige Lösung kann gerade darin bestehen, passenden Platz früh vorzusehen.

Reservierter Platz muss zum tatsächlichen Inhalt passen

Breite und Höhe beziehungsweise ein passendes Seitenverhältnis erlauben dem Browser, Bildraum vor dem vollständigen Laden einzuplanen. Responsive Darstellung darf diese Verhältnisse nicht widersprüchlich überschreiben. Ein quadratischer Platzhalter für ein breites Motiv kann die Verschiebung lediglich in einen anderen Moment verlagern.

Für Einbettungen und dynamische Module ist eine zur jeweiligen Darstellung passende Reservierung nötig. Unterschiedliche Mobil- und Desktop-Anordnungen können verschiedene Höhen brauchen. Vermeiden Sie starre riesige Leerflächen als vermeintliche Lösung. Der reservierte Raum soll zum vorgesehenen Inhalt und seiner tatsächlichen Reihenfolge passen.

Die passende Grundlage erläutert Mobile Lesbarkeit umfangreicher Fachartikel.

Entscheidungen am konkreten Befund festmachen

Eine Verschiebung am auslösenden Element nachweisen

Notieren Sie den sichtbaren betroffenen Bereich und das später auftauchende verursachende Element. Eine Bildzeile braucht Originalabmessungen, wirksames Seitenverhältnis und die tatsächliche Darstellung im jeweiligen Viewport. Ein illustratives Muster ist <img width="1200" height="675" ...> für ein tatsächlich passendes breites Bild. Diese Werte sind ein fiktives Verhältnisbeispiel und dürfen nicht auf anders proportionierte Motive übertragen werden. Prüfen Sie anschließend dieselbe Seite vor dem Laden, nach dem Laden und nach vollständigem Scrollen. Die Abnahme umfasst damit auch Zustände, die ein einzelner Startbildschirm nicht zeigt.

Praxisfall: nachgeladene Empfehlung über dem Formular

Ein fiktiver Ratgeber fügt nach dem Laden eine Empfehlung direkt über einem bereits sichtbaren Formular ein. Der Nutzer setzt gerade zur Eingabe an; das Formular rutscht nach unten. Eine kleinere Empfehlungsabbildung begrenzt den Effekt, beseitigt aber den ungeplanten Einbauort nicht.

Das Team prüft eine früh reservierte Fläche oder einen fachlich passenden anderen Platz. Die Entscheidung wird an zwei Viewports kontrolliert. Das Beispiel beschreibt eine Gestaltungsentscheidung und keinen gemessenen allgemeinen CLS-Gewinn. Entscheidend bleibt, ob der konkrete Ablauf nach der Änderung stabil und verständlich funktioniert.

Abnahme über mehrere Zustände durchführen

Prüfen Sie Bilder vor und nach dem Laden, lange Überschriften, leere und gefüllte Module sowie verzögerte Antworten. Kontrollieren Sie außerdem Schriftwechsel und deren Auswirkungen auf Zeilenumbrüche. Eine Prüfung mit bereits gefülltem Browsercache kann andere Probleme verbergen als ein erster Besuch.

Die web.dev-Dokumentation weist darauf hin, dass Laborbeobachtung nicht jede Verschiebung während der gesamten Nutzung erfasst. Nutzen Sie vorhandene Felddaten mit ihrem Beobachtungszeitraum und reproduzieren Sie auffällige Abläufe. Melden Sie eine technische Änderung als solche, ohne daraus ungeprüft eine allgemeine Suchmaschinen- oder Conversion-Wirkung abzuleiten.

Die passende Grundlage erläutert Core Web Vitals im Content-Prozess berücksichtigen.

Häufige Fragen.