Layout-Verschiebungen (CLS) auf Divi und Elementor beheben

Search Console meldet „CLS-Problem: mehr als 0,1 (Mobilgerät)“ für eine Gruppe von Seiten. PageSpeed zeigt für dieselbe URL einen CLS nahe null. Sie scrollen selbst durch die Seite und sehen nichts Auffälliges.

Die Lücke ist normal: Das Labor misst nur das Laden, während echte Besucher scrollen, tippen und auf Banner warten. Unser Leitfaden zu Labor- und Felddaten erklärt, warum. Hier geht es darum, die Verschiebung zu erwischen und ihre Ursache zu beseitigen.

Die Verschiebung auf frischer Tat ertappen

• DevTools, Tab Rendering, aktivieren Sie Layout Shift Regions: Jede Verschiebung blinkt blau auf, sobald sie passiert. Nutzen Sie mobile Emulation und ein gedrosseltes Netzwerk und scrollen Sie dann durch die ganze Seite.
• Performance-Panel: Zeichnen Sie ein Laden und ein Scrollen auf. Die Spur „Layout shifts“ listet jede Verschiebung und die Elemente, die sich bewegt haben.

new PerformanceObserver(l => l.getEntries().forEach(e => {
  if (e.hadRecentInput) return;
  console.log(e.value.toFixed(3), e.sources?.map(s => s.node));
})).observe({ type: 'layout-shift', buffered: true });

Notieren Sie das Element und den Moment: beim Laden, wenn eine Schrift erscheint, wenn sich ein Banner öffnet, beim Scrollen. Der Moment verweist auf die Ursache.

Die sechs üblichen Ursachen auf einer Builder-Website

1. Bilder ohne Abmessungen. Ein Bildmodul, das ein <img> ohne width und height ausgibt, hat null Höhe, bis die Datei ankommt, und schiebt dann alles darunter nach unten. Lösung: width und height an jedem Bild, damit der Browser das Seitenverhältnis berechnen kann; oder ein aspect-ratio am Container.

2. Styles, die nach dem ersten Paint ankommen. Builder teilen ihr CSS auf: eine globale Datei, dann Dateien pro Seite oder pro Layout. Lädt eine davon spät oder wird sie von einer Optimierung aufgeschoben, wird ein Element einmal ohne seine Styles gerendert und springt dann an seinen Platz. Ein echter Fall: Auf einer Divi-5-Website hatte ein Breadcrumb keine eigenen Styles und bekam seine Schriftgröße aus einem Layout-Stylesheet, das nach dem ersten Paint ankam. Er brach auf vier Zeilen um und fiel dann auf eine zusammen. Feld-CLS 0,215, im Labor unsichtbar. Eine eigene Schriftgröße und Zeilenhöhe für den Breadcrumb in den inline eingebundenen Critical Styles brachte ihn unter 0,02. Lösung: Die größenbestimmenden Regeln von allem im sichtbaren Bereich beim Laden müssen im Critical CSS stehen.

3. Webfonts, die ausgetauscht werden. Mit font-display: swap erscheint Text zuerst in einer Fallback-Schrift, dann in der Webfont. Sind die beiden unterschiedlich breit, brechen Zeilen neu um und Blöcke ändern ihre Höhe. Lösung: Laden Sie die ein oder zwei Schriftdateien, die im sichtbaren Bereich genutzt werden, per Preload; wählen Sie eine Fallback-Schrift mit ähnlichen Metriken; oder passen Sie die Fallback-Schrift mit size-adjust und ascent-override in ihrer @font-face an.

4. Per Skript hinzugefügte Header und Banner. Ein fixierter Header, dessen Skript der Seite einen Innenabstand hinzufügt, sobald es ihn gemessen hat; eine obere Leiste oder ein Cookie-Banner, das über dem Inhalt eingefügt wird, statt darüber zu schweben. Lösung: Geben Sie der Seite ihren Header-Abstand von Anfang an per CSS und machen Sie Banner zu Overlays (position: fixed) statt zu Blöcken, die Inhalt verschieben.

5. Slider und Karussells vor ihrem Start. Bevor sein Skript läuft, zeigt ein Slider alle Slides übereinander oder gar keine und fällt dann auf einen Slide zusammen. Lösung: CSS für den Zustand vor dem Skript, mit reservierter endgültiger Höhe und allen Slides außer dem ersten versteckt.

6. Embeds und Iframes. Ein Video, eine Karte oder ein Social-Media-Beitrag, der ohne reservierte Größe lädt. Lösung: ein Container mit festem aspect-ratio oder eine leichte Vorschau, die bereits die endgültige Größe hat.

Builder-spezifische Fallen

• Einblendanimationen: Animationen auf Basis von transform und opacity zählen nicht als Layout-Verschiebung; Animationen, die height, margin oder top ändern, schon. Bevorzugen Sie Erstere und vermeiden Sie Animationen im sichtbaren Bereich beim Laden.
• Anderer Header auf Mobilgeräten: Ein mobiler Header, der höher oder niedriger ist als der Platz, den die Seite reserviert hat, verschiebt alles, nur auf Smartphones.
• Veraltetes Builder-CSS: Generieren Sie nach einer großen Änderung das statische CSS des Builders neu. Eine abgeschnittene oder veraltete Datei kann Regeln fehlen lassen, bis sie neu erstellt wird.
• CSS-Optimierungen: Fehlt dem gekürzten oder aufgeschobenen CSS die Regel, die ein Element dimensioniert, kommt die Verschiebung zurück. Siehe unseren Leitfaden zu fehlenden Styles.

Validieren

• Spielen Sie das Szenario erneut durch: Mobil, gedrosselt, Laden, bis nach unten scrollen, das Menü öffnen. Keine blauen Blitze im sichtbaren Bereich beim Laden.
• Dann „Fehlerbehebung überprüfen“ in Search Console, und geben Sie ihr die 28 Tage des Feldzeitfensters.

Mit Mantys Core

Zusammenfassung

• Das Labor sieht die Verschiebung selten: Erwischen Sie sie in den DevTools beim Scrollen und Interagieren.
• Sechs Ursachen: Bilder ohne Abmessungen, späte Styles, Schriftaustausch, per Skript hinzugefügte Header und Banner, Slider vor ihrem Start, Embeds.
• Jede Lösung reserviert den Platz, bevor der Inhalt ankommt.
• Achten Sie bei Buildern auf Animationen, mobile Header und veraltetes Builder-CSS.
• Validieren Sie in Search Console und warten Sie 28 Tage.