„Layout shift culprits“ in Lighthouse und PageSpeed beheben

Warum ist „Layout shift culprits“ in PageSpeed Insights rot?

„Layout shift culprits“ wird rot, wenn die Layout-Shifts beim Laden einen CLS von 0,1 oder mehr ergeben: „Layout-Verschiebungen treten auf, wenn sich Elemente ohne Nutzerinteraktion bewegen.“ Früher nannte Lighthouse das „Avoid large layout shifts“. Der Hinweis listet auf, was sich bewegt hat, und schätzt die Ursache. Reserviere Platz für Inhalte, die spät eintreffen: Breite und Höhe bei Bildern, eine Höhe bei Ad-Slots.

Du willst nur die schnelle Lösung? Spring direkt zu Bildern, Web-Fonts, Anzeigen und Embeds oder Bannern.

Wie liest du die Tabelle zu „Layout shift culprits“?

Lighthouse zeichnet einen einzelnen Ladevorgang deiner Seite auf Smartphone-Größe auf und listet die Layout-Shifts in Bursts auf (Shifts im Abstand von unter einer Sekunde) – eine Tabelle pro Burst. Der Hinweis ist rot, wenn der schlechteste Burst einen Wert von 0,1 oder mehr erreicht; darunter ist er grau. Peile 0 an, auch wenn er grau ist: Ein Shift unter 0,1 verschiebt noch immer den Text, den dein Besucher gerade liest.

Auf einer Rezeptseite, die ich wie einen WordPress-Food-Blog aufgebaut habe – mit Web-Font in der Überschrift, Newsletter-Plugin, einer Anzeige unter dem Header und einem Rezeptkarten-Plugin –, war der Hinweis rot mit einem Burst von 0,241.

Der Hinweis der Rezeptseite in Lighthouse 13,5, mobil, simulierte Drosselung wie in PageSpeed Insights.

• Total ist der Wert des Bursts. Das Total des schlechtesten Bursts ist der CLS, den Lighthouse meldet.
• Element ist das, was sich bei diesem Shift am meisten bewegt hat – oft ein großer Container wie <main>. Was ihn verschoben hat, liegt meist darüber.
• Layout shift score ist der Anteil dieses einzelnen Shifts am Total.
• Die Zeile unter einem Eintrag ist die Schätzung von Lighthouse zur Ursache: „Unsized image element“ beim Bild oder „Web font“ bei der Schriftdatei. Ein Eintrag kann beides haben oder keines von beiden.

Auf der Rezeptseite nannte Lighthouse bei drei der vier Shifts das falsche Bild: Prüfe, welches Element sich wirklich bewegt hat, bevor du etwas änderst.

Warum springt die Seite beim Laden?

Dein Besucher fängt an zu lesen und der Text rutscht weg. Oder er tippt auf einen Link und trifft das, was an dessen Stelle gerückt ist.

Der Browser zeichnet die Seite mit dem, was er hat. Alles, was später eintrifft und wofür kein Platz reserviert ist, schiebt die Inhalte darunter weg: Ein Bild ohne Größenangabe startet mit einer Höhe von null, ein Web-Font setzt die Überschrift breiter als der Fallback. Jede Bewegung ist ein Layout-Shift, bewertet danach, wie viel vom Bildschirm sich bewegt hat und wie weit. Shifts mit weniger als einer Sekunde Abstand bilden einen Burst. Der CLS ist der Wert des schlechtesten Bursts – kleine Shifts kurz hintereinander summieren sich also auf.

Auf der Rezeptseite bleibt jede Ursache für sich unter 0,1, und alle vier treten in einem einzigen Burst auf:

Alle vier zusammen ergeben mehr als die Summe der Zeilen, weil Schrift und Foto auf der vollständigen Seite jeweils einen größeren Teil des Bildschirms bewegen. Die Behebung aller vier Punkte brachte den mobilen Performance-Score von 87 auf 100, während FCP, LCP und Total Blocking Time unverändert blieben. Der CLS macht ein Viertel dieses Scores aus, aber Google bewertet deine Seite nach dem CLS deiner echten Besucher.

Die Rezeptseite in der Smartphone-Größe von Lighthouse. Der gestrichelte Kasten markiert die Position des Fotos beim First Paint.

Hat Lighthouse dem richtigen Element die Schuld gegeben?

Lighthouse schätzt die Ursache anhand des Timings: ein Web-Font, der kurz vor dem Shift fertig geladen war, ein Bild, das der Browser direkt danach gezeichnet hat. Ein Bild, das lediglich weggeschoben wurde, kann daher als „Unsized image element“ aufgeführt werden. Das Beitragsbild der Rezeptseite hat width="1200" height="675", trotzdem nennt Lighthouse es bei den Shifts der Schrift, der Newsletter-Leiste und der Anzeige. Wenn eine Zeile keine Zusatzzeile darunter hat, beginne bei Schritt 2.

1. Hat das genannte Bild eine Größe? „Image elements do not have explicit width and height“ unter Diagnostics im selben Bericht listet die Bilder ohne Angabe auf. In den DevTools zeigt der Computed-Tab des Bildes ein Seitenverhältnis für aspect-ratio (auto 1200 / 675), wenn sein Platz reserviert ist, und nur auto, wenn nicht. Ein Bild mit Größenangabe hat den Shift nicht verursacht – außer das Theme setzt width: auto (Unsized image element weiter unten): Sieh dir die andere Zeile unter dem Eintrag an (oft „Web font“) oder gehe zu Schritt 2.
2. Was erschien in diesem Moment? Zeichne ein Neuladen im Performance-Panel auf. Jeder Shift ist eine lila Raute in der Spur „Layout shifts“. Bewege die Maus darüber für seinen Wert und einen Screenshot dieses Moments mit markiertem Verschiebungsbereich. Auf der Rezeptseite zeigt der Shift von 0,0583 die grüne Newsletter-Leiste, die gerade ganz oben erschienen war. Für Shifts beim Scrollen: Klicke auf Record, scrolle und klicke auf Stop.
3. Blockiere den Verdächtigen und lade neu. Klicke im Network-Panel mit der rechten Maustaste auf den verdächtigen Request – etwa die Schriftdatei oder das Ad-Tag –, wähle „Block requests“, dann „Block request URL“, und zeichne erneut auf. Eine Raute, die verschwunden ist, gehörte zu diesem Request: Das Blockieren der Schriftart auf der Rezeptseite entfernte einen Shift und ließ die anderen drei übrig. Entferne die Blockierung danach wieder im Drawer „Request conditions“.

Schritt 2 auf der Rezeptseite: Chrome 155, Slow 4G und 4× CPU-Drosselung.

Ohne DevTools übernimmt cRUM in CoreDash diese Prüfung: Es stellt einen Chrome-Trace der Seite den Daten deiner echten Besucher gegenüber, benennt das bewegte Element und zeigt, was der Besucher direkt davor getan hat. Der Screenshot unten stammt von einer anderen Seite: Starte bei Chrome trace und Real users.

CoreDash cRUM für eine Seite auf acme-pagespeed.com, mobil.

Welche Elemente verschieben sich bei deinen echten Besuchern?

Lighthouse lädt deine Seite ein einziges Mal als Erstbesucher und scrollt oder tippt nie. Deine Field Data erfasst jeden echten Besuch – inklusive der Anzeige mitten im Beitrag, die erst lädt, wenn der Besucher dorthin scrollt, und des Headers, der beim Scrollen schrumpft. Wenn Lighthouse sauber oder grau ist und die Search Console meldet, dass der CLS schlecht ist, passieren die Shifts meistens nach dem Laden.

Stelle in CoreDash das Gerät auf mobile und gruppiere den CLS nach Attribution Element (CLS), um zu sehen, welche Elemente sich bewegt haben. Last interaction (CLS) unter More dimensions verrät dir, ob das nach einem Scrollen passiert ist. Um herauszufinden, was diese Elemente weggeschoben hat: Zeichne die Seite im Performance-Panel auf, während du scrollst (Schritt 2 der Prüfung oben).

CoreDash auf Mobile, p75: Starte mit dem höchsten CLS.

Wie behebst du Layout shift culprits?

Beginne mit dem größten Shift in der Tabelle mit dem höchsten Total, sobald die Prüfung oben die Ursache bestätigt hat.

Unsized image element

Ein Bild ohne Größenangabe startet mit einer Höhe von null und schiebt beim Laden alles darunter nach unten. WordPress versieht Bilder aus der Mediathek mit Breite und Höhe. Bei Bildern, die ein Theme, Page-Builder, Slider oder Plugin selbst ausgibt, fehlen diese Angaben oft – wie beim Foto der Rezeptkarte. Wenn du das Theme nicht anpassen kannst, ergänzt WP Rocket die fehlenden Maße (Medien, Fehlende Bildabmessungen hinzufügen). Im Template schreibst du sie selbst:

<img src="shakshuka.jpg" width="800" height="600" alt="Shakshuka in the pan">

img { max-width: 100%; height: auto; }

Der Browser berechnet aus beiden Attributen ein Seitenverhältnis und reserviert bei jeder Bildschirmbreite die passende Höhe, noch bevor die Datei eintrifft. Ein width: auto im CSS des Themes hebelt dieses Verhältnis aus (automatisch skalierende Bilder). Bei Shopify fügt der Filter image_tag die Abmessungen hinzu. Ein Theme oder eine App, die ein eigenes <img> ausgibt, benötigt width="{{ image.width }}" height="{{ image.height }}". In Next.js benötigt next/image Breite und Höhe – oder fill innerhalb eines Elternelements mit festgelegter Größe.

Web-Font

Die Überschrift erscheint zuerst in der Fallback-Schriftart, dann im Web-Font, der breiter oder schmaler ist: Die Zeilen brechen an anderen Wörtern um und alles darunter gerät in Bewegung. In WordPress (Zusätzliches CSS) und Shopify (im Stylesheet des Themes unter Code bearbeiten – ein Theme-Update kann das überschreiben) fügst du eine Fallback-Font-Face ein, die eine lokale Schriftart an die Abmessungen des Web-Fonts anpasst. In Next.js bindet next/font automatisch einen passenden Fallback ein. Die Schriftart der Überschrift auf der Rezeptseite:

@font-face {
  font-family: "Young Serif Fallback";
  src: local("Times New Roman"), local("Liberation Serif");
  size-adjust: 131%;
  ascent-override: 79.85%;
  descent-override: 27.94%;
  line-gap-override: 0%;
}
h1 { font-family: "Young Serif", "Young Serif Fallback", serif; }

Ein size-adjust von 122 % aus einem Rechner hinterließ dort immer noch einen CLS von 0,029; 131 % ergaben 0. Font-display zeigt die Font-Face für Android, wie du deine eigenen Werte ermittelst, und font-display: optional, was den Shift stoppt und Erstbesuchern die Fallback-Schrift anzeigt.

Anzeigen, Videos und andere Embeds

Ein Ad-Skript fügt seinen Iframe nach der Auktion in den Slot ein. War der Slot leer, rutscht alles darunter um die Höhe der Anzeige nach unten. Laut dem State of Web Vitals bestehen 89 % der Websites ohne Werbenetzwerk den CLS auf Smartphones – gegenüber 73 % der Websites mit zwei oder mehr Netzwerken. Das ist eine Korrelation.

Gib dem Container der Anzeige im Theme oder Ad-Plugin die Höhe des Formats, das am häufigsten geladen wird, und mache den Iframe zum Blockelement:

.ad-slot { min-height: 50px; }
.ad-slot iframe { display: block; }

Ein Iframe sitzt standardmäßig auf der Text-Grundlinie. Der reservierte Slot auf der Rezeptseite wuchs deshalb noch um 8 Pixel, bis der Iframe als Block formatiert war. Lass den Slot offen, wenn keine Anzeige da ist: Ihn zu schließen, verschiebt die Seite genauso wie das Einfügen. AdSense Auto Ads platziert Google nach eigenem Ermessen: Schließe Bereiche auf dem ersten Bildschirm aus (Anzeigeneinstellungen, Ausgeschlossene Bereiche) und platziere dort einen manuellen Anzeigenblock in einem Slot mit fester Höhe.

YouTube, Karten und andere Embeds sind ebenfalls Iframes. Bei einem Iframe erzeugen die Attribute width und height kein Seitenverhältnis: Mit height: auto schrumpft er auf etwa 150 Pixel zusammen. Gib dem Iframe ein aspect-ratio oder nutze eine Facade – ein Vorschaubild mit fester Größe, das erst beim Klick zum Iframe wird (YouTube, Google Maps):

.video-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

Leisten und Banner, die ein Skript einfügt

Eine Newsletter-Leiste oder ein Hinweis auf kostenlosen Versand, den ein Skript über dem Header einfügt, schiebt die gesamte Seite nach unten.

Prüfe zuerst die Layout-Einstellungen im Plugin oder in der App: Eine Leiste am unteren Rand, eine Box oder ein Pop-up schwebt über der Seite und verschiebt nichts. Consent-Tools wie OneTrust und CookieYes bieten dieselben Layouts. Lighthouse sieht deren Banner bei jedem Durchlauf, weil es ohne Cookies startet. Muss die Leiste über dem Header sitzen, reservierst du ihren Platz im Theme – mit der Höhe, die der Computed-Tab bei Smartphone-Breite anzeigt:

<div id="promo-slot" style="min-height: 48px"></div>

Wird eine Leiste nur bei bestimmten Besuchen angezeigt, lasse sie über der Seite schweben oder rendere sie direkt serverseitig ins HTML. Sichtbare Inhalte aus einem Google Tag Manager-Tag treffen immer erst nach dem First Paint ein: Verschiebe sie ins Template. In Shopify benötigt eine App, die ein Widget wie Bewertungssterne oder eine Ankündigungsleiste einschleust, eine Höhenangabe auf dem Container, in dem ihr App-Block liegt.

CSS, das nach dem First Paint lädt

Ein Stylesheet, das über den media="print"-Trick geladen oder von einem Optimierungs-Plugin verzögert bzw. asynchron geladen wird, trifft erst ein, wenn die Seite bereits auf dem Bildschirm zu sehen ist. Es verändert die Größe bereits dargestellter Elemente: Ein Header, der wächst, schiebt alles darunter nach unten. Schließe es im Plugin von den Optionen für verzögertes oder asynchrones CSS aus. Im Theme lädst du es einfach über ein normales <link rel="stylesheet"> im Head.

Animationen, Slider und von JavaScript gerenderte Blöcke

Diese stammen meist aus dem Theme, einem Plugin oder einer App: Suche dort nach einer passenden Einstellung. Gibt es keine, gib einem Entwickler das im Bericht genannte Element und den folgenden Code weiter.

Eine Animation von top, left, height oder margin verschiebt das Layout in jedem Frame. Lighthouse führt dies als mehrere kleine Zeilen ohne Ursachenangabe auf, und „Avoid non-composited animations“ unter Diagnostics nennt das konkrete Element. Animiere stattdessen transform: Das bewegt nur die Pixel des Elements und nichts darum herum, sodass der Browser keinen Layout-Shift registriert.

.promo { position: fixed; top: 0; left: 0; right: 0;
         transform: translateY(-100%); transition: transform .3s; }
.promo.is-open { transform: translateY(0); }

Ein Slider zeigt seine Slides übereinandergestapelt an, bis sein Skript ausgeführt wird. Halte ihn auf seinem ersten Slide, bis das Skript seine Ready-Klasse setzt (nutze die Klasse deines Sliders):

.slider:not(.is-ready) > :not(:first-child) { display: none; }

Ein Block, den JavaScript nach dem Laden rendert – wie Bewertungen oder ähnliche Produkte –, benötigt einen leeren Container in seiner endgültigen Höhe oder serverseitiges Rendering. Zu Animationen beim Scrollen siehe scrollbasierte Animationen und CSS-Transitions.

Shifts durch Code, den du nicht bearbeiten kannst

Du kannst nicht ändern, was ein Werbemittel, eine App ohne Layout-Optionen oder das Skript eines Drittanbieters einfügt. Reserviere die Höhe, die es üblicherweise einnimmt, platziere es unterhalb des ersten Bildschirms oder ersetze es durch eine Lösung, die in ihrem vorgegebenen Rahmen bleibt.

Haben die Änderungen den CLS auf 0 gebracht?

Überprüfe den Fix in Lighthouse mobil, mit geleertem Caching-Plugin und CDN. Sind alle Shifts behoben, gilt „Layout shift culprits“ als bestanden und der CLS liegt bei 0. Eine Aufzeichnung im Performance-Panel – einmal beim Neuladen und einmal beim Scrollen – zeigt eine leere Spur für „Layout shifts“. CoreDash zeigt den neuen CLS pro Element ab den nächsten Besuchen; die Search Console braucht bis zu 28 Tage.

Vorher und nachher bei den vier Fixes: Lighthouse 13,5, mobil, simulierte Drosselung.

Manche Shifts entstehen an Stellen, an die du nicht herankommst: ein Ad-Slot, den dein Werbepartner befüllt, eine App, die ihr Widget einschleust, oder ein Shift, den nur echte Besucher beim Scrollen sehen. In einer Core Web Vitals Power Hour gehen wir diese Punkte in deiner Field Data und einer Aufzeichnung deiner Seite durch und legen fest, welcher Container welche Höhe bekommt.