Was sollte man tun, um CLS-Probleme schon in der Designphase zu verhindern?
Autor: Yılmaz Saraçclscore-web-vitalstasarim-sistemiyerlesim-kaymasi
Kurze Antwort: Die günstigste Lösung für CLS-Probleme liegt in der Designphase: Wer jedem dynamischen Element vorab Platz reserviert, verhindert Layoutverschiebungen am Reißbrett statt in der Produktion. Googles veröffentlichter Schwellenwert für CLS ist 0,1.
Checkliste für die Designphase
- Bild- und Videoflächen mit festem Seitenverhältnis entwerfen; in der Entwicklung mit width- und height-Attributen oder aspect-ratio umsetzen.
- Für Werbung, Banner und Embeds Container mit fester Höhe reservieren; nachträglich aufklappende Flächen sind die Hauptquelle von Verschiebungen.
- Font-Strategie festlegen: font-display und eine metrisch passende Fallback-Schrift verhindern springenden Text.
- Spät erscheinende Komponenten (Cookie-Banner, Aktionsleiste) als Overlay positionieren, damit sie den Inhalt nicht verdrängen.
- Skeleton-Zustände in exakt derselben Größe wie der echte Inhalt zeichnen.
Die Validierung hat zwei Ebenen: eine Regel in der Komponentenbibliothek, die kein Element ohne bekannte Größe zulässt, und die Beobachtung des 75. Perzentils der CLS über Lighthouse und CrUX-Felddaten. Eine einmal im Designsystem verankerte Regel schützt jede weitere Seite automatisch.