Prüfer für Layout-Shift-Risiken.
Der Prüfer für Layout-Shift-Risiken findet eingebettete Inhalte im eingefügten Markup, für die kein Platz reserviert ist.
Ein Layout-Shift entsteht, wenn der Browser die Seite zeichnet, ohne zu wissen, wie viel Platz ein Element beanspruchen wird. Das Bild lädt, nimmt seine tatsächliche Größe an, schiebt alles darunter nach unten — und die Leserin verliert die Zeile, in der sie war. Die einzige Abhilfe ist, den Platz im Voraus zu reservieren: die Attribute `width` und `height` oder eine Seitenverhältnis-Regel.
Wonach gesucht wird
Das Werkzeug markiert drei verschiedene Risiken. Das erste und häufigste sind eingebettete Inhalte ohne angegebene Größe: Bilder, Video, Frames und eingebettete Objekte. Das zweite ist ein verzögert geladenes erstes Bild im sichtbaren Bereich — das erzeugt keine Verschiebung, sondern Verzögerung, aber das Ergebnis ist ähnlich schlecht, weil der größte Inhaltsaufbau bewusst hinausgezögert wird.
Das dritte ist die Schrift. Trägt eine `@font-face`-Deklaration kein `font-display`, greift das Standardverhalten des Browsers, und der Text fließt neu, wenn die Schrift spät eintrifft. Wurde keine metrisch passende Ersatzfamilie gewählt, kann sich sogar die Zeilenzahl ändern — und dann kommt die Verschiebung aus dem Text selbst. Die Einzelheiten stehen getrennt geschrieben.
Das ist keine Messung
Das Werkzeug MISST den Layout-Shift nicht, es sucht nach dessen Risiko. Der tatsächliche Wert lässt sich nur im Browser während des Ladens berechnen, nach der Logik des Sitzungsfensters, und er hängt auch vom Scrollverhalten der Besucherin ab. Aus dem Markup abzulesen „diese Seite verschiebt sich um so viel“ ist nicht möglich.
Die Ursache des Risikos liegt jedoch fast immer im Markup, und dort ist sie günstig zu finden. Die Messung findet das Problem, die Markup-Prüfung zeigt es, bevor es entsteht; das eine ersetzt das andere nicht. Wie die Verschiebung auf null gebracht wurde und der blinde Fleck beim Scrollen sind getrennt beschrieben.
Der blinde Fleck beim Scrollen
Die meisten Prüfwerkzeuge laden die Seite, messen den ersten Bildschirm und hören auf. Dabei entstehen Verschiebungen vor allem beim Scrollen: verzögert geladene Bilder, später erscheinende Abschnitte und scrollgebundene Animationen leben alle unterhalb des sichtbaren Bereichs. Auf dieser Website wurde dieser blinde Fleck durch Messung gefunden und mit einer eigenen Wache geschlossen — das schlechteste über den gesamten Scrollvorgang berechnete Sitzungsfenster muss unter 0,08 bleiben.
So wird es benutzt
- Fügen Sie das Markup des Abschnitts ein, den Sie prüfen möchten
- Klicken Sie auf Prüfen
- Jedes riskante Element wird mit Typ und Quelle aufgelistet
Das Werkzeug läuft vollständig in Ihrem Browser — es werden keine Daten gesendet und keine Cookies gesetzt.