Unerwartete Bewegungen finden
Der CLS bedeutet nicht, dass jede beabsichtigte Bewegung ausgeschlossen wird. Die Metrik schließt Verschiebungen innerhalb von 500 ms nach einer qualifizierenden Nutzereingabe aus. Eine verzögerte Reaktion auf eine Eingabe kann trotzdem zählen. Die Metrik arbeitet mit Session-Fenstern. Prüfen Sie daher die tatsächlichen Layout-Shift-Einträge, statt anzunehmen, dass eine einzelne Animation den Wert erklärt.
So prüfen Sie es
Nutzen Sie Felddaten, um zu erfahren, ob ein Problem echte Besucher betrifft, und reproduzieren Sie es dann in einem Performance-Trace mit Markierungen für Layout-Shifts. Untersuchen Sie das Element, das sich bewegt hat, und das Element, das die Bewegung ausgelöst hat. Beide können verschieden sein. Testen Sie Erstaufrufe und wiederholte Aufrufe, denn gecachte Schriften und Assets können ein Problem beim ersten Laden verdecken.
So setzen Sie es um oder verbessern es
Reservieren Sie Breite und Höhe oder das Seitenverhältnis für Medien, weisen Sie dynamischen Modulen einen festen oder begrenzten Bereich zu und vermeiden Sie das Einfügen von Inhalten oberhalb eines bereits sichtbaren Bedienelements. Ändert eine Schrift ihre Metriken, wählen Sie einen kompatiblen Fallback oder passen Sie die Strategie zum Laden der Schrift an. Prüfen Sie nach jeder Änderung den Tastaturfokus und die responsiven Breakpoints erneut.
Grenzen und typische Fehler
Unterdrücken Sie nicht berechtigte, vom Nutzer ausgelöste Übergänge, nur um eine Metrik zu verbessern. Das Ziel ist ein vorhersagbares Layout vor und während des Lesens, kein synthetischer Wert, der von der Oberfläche losgelöst ist.
Eine gezielte CLS-Prüfung hat drei Durchgänge: Kaltstart, Interaktionszustand und responsiver Breakpoint. Notieren Sie beim Kaltstart-Trace, welches Element sich bewegt hat und welche spät geladene Ressource die Bewegung ausgelöst hat. Im Interaktionszustand unterscheiden Sie eine vom Nutzer ausgelöste Erweiterung von einem unerwarteten Einfügen oberhalb des aktiven Bedienelements. Prüfen Sie am Breakpoint, ob ein Bild, ein Anzeigenplatz oder ein Einwilligungsbanner seine reservierte Geometrie verliert. Eine konkrete Reparatur besteht darin, Breite und Höhe oder ein Seitenverhältnis für den Bild-Container festzulegen, bevor die Bilddaten eintreffen. Danach prüfen Sie, ob Raster, Fokusreihenfolge und Scroll-Position auf einem schmalen Bildschirm stabil bleiben. Reservieren Sie keinen übermäßigen Platz nur, um die Metrik zu senken. Die Seite muss trotzdem bewusst gestaltet wirken.