SpeedupWP

WordPress-Performance mit Plan.

Bildabmessungen festlegen und CLS vermeiden

← Zur Wissensdatenbank

Typischer Nutzwert
Hoch
Aufwand
Gering
Risiko
Gering
Hosting / Umgebung
Alle Umgebungen
Voraussetzungen
Kontrolle über Markup oder Theme-Ausgabe
Aussagekraft
hoch
Zuletzt geprüft
17. August 2026

Cookbook: Ziel und Ergebnis

Der Browser kennt das Seitenverhältnis vor dem Download und reserviert den richtigen Platz. Responsive Skalierung bleibt möglich.

Rezept: Schritt für Schritt

  1. Im HTML intrinsische width und height entsprechend der Bilddatei ausgeben lassen.
  2. CSS mit max-width:100%; height:auto skalieren; bei bewusstem Crop aspect-ratio und object-fit definieren.
  3. Für Embeds, Karten, Anzeigen und dynamische Slider ebenfalls einen Platzhalter mit stabilem Verhältnis reservieren.
  4. CLS im Performance-Panel und als Feldwert prüfen; Nutzerinteraktionen und Consent-Banner separat betrachten.

Rechenweg oder Entscheidungsregel

Seitenverhältnis = Breite / Höhe\nreservierte Höhe = aktuelle CSS-Breite × Originalhöhe / Originalbreite

Praxisbeispiel

Bild 1600 × 900 in einem 720-px-Container: reservierte Höhe = 720 × 900 / 1600 = 405 px. Die HTML-Attribute bleiben width="1600" height="900"; CSS skaliert auf 720 × 405.

Prüfen, ob es funktioniert

  • Layout-Shift-Regions zeigen keinen Sprung durch Bilder/Embeds.
  • Responsive Varianten behalten dasselbe beabsichtigte Verhältnis.
  • CLS liegt idealerweise ≤ 0,1 am P75 und verschlechtert sich nicht auf Mobil.

Rollback

Neue Crop-/Aspect-Ratio-Regel entfernen und ursprüngliche Bildattribute wiederherstellen. Bei falschem Verhältnis nicht height:auto entfernen, sondern Metadaten/Markup korrigieren.

Ursache

Fehlen intrinsische Abmessungen, kennt der Browser den Platzbedarf eines Bildes beim ersten Layout nicht. Nach dem Download springt der folgende Inhalt. Gleiches gilt für Videos, Anzeigen, Embeds und nachträglich eingefügte Banner.

Empfehlung

Bildfunktionen von WordPress geben normalerweise width und height aus. Entferne diese Attribute nicht aus vermeintlich „responsivem“ Markup; CSS max-width:100%; height:auto kann weiterhin skalieren. Für wechselnde Seitenverhältnisse aspect-ratio oder passende source-Dimensionen einsetzen.

Dynamische Komponenten

Reserviere auch für Consent-Banner, Werbeflächen und Embeds einen stabilen Bereich. Ein oben nachträglich eingeschobener Balken verschiebt den gesamten Viewport.

Erfolgskontrolle

DevTools Layout Shift Regions und Feld-CLS prüfen. Ziel ist CLS ≤ 0,1 am 75. Perzentil; Labortests erfassen Interaktionen nach dem Laden nur begrenzt.

Quellen und Prüfstand

Inhalt fachlich geprüft am 17. August 2026. Konkrete Werte sind Ausgangspunkte, keine Universaldosierung.