Cumulative Layout Shift in WordPress verbessern – Gemeinsam reduzieren wir auf „0“ Cumulative Layout Shift (Wichtiger Teil der Core Web Vitals)

In diesem Leitfaden werden wir die Cumulative Layout Shift in WordPress verbessern.

Kumulative Layoutverschiebung (CLS) bedeutet, dass sich Elemente verschieben, während deine Website geladen wird.

Der Google Layout Shift Debugger erstellt ein GIF, das bestimmte Elemente hervorhebt, die Layoutverschiebungen auf dem Desktop oder auf dem Handy verursachen (da sie normalerweise zu schnell passieren, um mit dem bloßen Auge wahrgenommen zu werden).

Layoutverschiebungen lassen sich oft durch die Anpassung von CSS, Schriftarten, die Angabe von Abmessungen und den Ausschluss von Inhalten oberhalb der Falz von bestimmten Optimierungen (Lazy Load, asynchrones CSS und verzögertes JavaScript) beheben. Zum Zeitpunkt der Erstellung dieses Artikels wird die kumulative Layoutverschiebung mit 15 % der Lighthouse Bewertungen gewichtet.

Bevor du das liest, ist es hilfreich, den Unterschied zwischen FOIT, FOUT und FOUC zu verstehen. Das GIF zeigt eine schöne visuelle Demonstration von FOIT und FOUT.

Cumulative Layout Shift	Ergebnis
Unter 0.1	Gut
0.1-0.25	Verbesserungsbedürftig
0.25+	Schlecht

1. Finde die Elemente, die sich verschieben

Cumulative Layout Shift Debugger – erstellt ein GIF, das alle Layoutverschiebungen auf einer Seite für Mobilgeräte/Desktop anzeigt. Es wurde von einem Chrome-Ingenieur entwickelt und ist das wichtigste Tool, dass ich empfehle.

PageSpeed Insights – mehrere Empfehlungen in deinem PSI-Bericht stehen in direktem Zusammenhang mit deinem CLS-Score. Wenn du bei einer dieser Empfehlungen Fehler siehst, ist das ein guter Ansatzpunkt.

• Vermeide nicht komponierte Animationen (Schritt #7)
• Stelle sicher, dass der Text während des Ladens des Webfont sichtbar bleibt (Schritt #2)
• Bildelemente haben keine explizite Breite und Höhe (Schritt #5)
• Vermeide große Layout-Verschiebungen (eine weitere Möglichkeit die Ursache zu erkennen, siehe Bild unten)

Layoutverschiebungsbereiche – Durchsuche deine Website in Echtzeit, während du Layoutverschiebungen (blau hervorgehoben) anzeigst. Im Folgenden findest du Anweisungen zur Verwendung von Layoutverschiebungsbereichen in den Chrome-Entwicklungstools:

• Öffne die Chrome-Entwicklungstools.
• Öffne das Befehlsmenü.
• Beginne mit der Eingabe von „Rendering“.
• Führe den Befehl „Rendering anzeigen“ aus.
• Aktiviere das Kontrollkästchen „Layoutverschiebungsbereiche“.
• Wenn du mit einer Seite interagierst, werden Layoutverschiebungen hervorgehoben.

2. Die Schriftart-Anzeige in Swap oder Optional ändern

Wenn du sicherstellen musst, dass der Text während des Ladens der Webfont in PageSpeed Insights sichtbar bleibt, versuche, die Methode zur Anzeige der Schriftart auf Swap oder Optional zu ändern.

• Swap – während deine benutzerdefinierte Schriftart heruntergeladen wird, wird eine Ersatzschriftart verwendet. Sobald die benutzerdefinierte Schriftart fertig heruntergeladen ist, wird die Ersatzschriftart mit der benutzerdefinierten Schriftart „getauscht“.
• Optional – ähnlich der Swap-Methode. Aber der Browser erkennt, ob eine benutzerdefinierte Schriftart verwendet wird und zeigt benutzerdefinierte Schriftarten nur bei schnellen Verbindungen an (aber nicht bei langsameren Verbindungen).

Beide Methoden verhindern FOIT (Flash of Invisible Text), da anstelle eines leeren Bereichs sofort eine Ersatzschriftart geladen wird. Wenn jedoch die Ersatzschriftart mit der benutzerdefinierten Schriftart vertauscht wird und die beiden Schriftarten unterschiedliche Größen haben, kommt es zu einer Layoutverschiebung in den Schriftarten. Dies wird als FOUT (Flash of Unstyled Text) bezeichnet. Die Lösung besteht darin, für Ersatzschriftarten dasselbe Styling wie für benutzerdefinierte Schriftarten zu nutzen (dieselbe Schriftfamilie, Größe usw.). Google hat auch Beispiele für die Skalierung von Schriftarten mit Size-Adjust in CSS.

Wie kann man das beheben?

Die meisten Cache-Plugins haben eine Einstellung, um die Schriftart-Anzeige-Eigenschaft zu setzen (ändere einfach in Swap oder optional). Das gilt auch für Perfmatters, Elementor, oder du kannst Swap Google Fonts Display verwenden. Andere Cache-Plugins wie WP Rocket fügen „Swap“ automatisch hinzu, wenn Minify oder Combine CSS aktiviert sind.

Andernfalls musst du das CSS der Schriftart manuell bearbeiten.

Sieh dir den Bericht „webfont load“ in PageSpeed Insights an und verwende den String Locator, um die problematische Datei zu finden. Suche die CSS-Datei, in der sie geladen wird, bearbeite das Stylesheet und suche nach der Schriftart.

Sobald du das CSS der Schriftart gefunden hast, kannst du es ändern und swap, optional oder size-adjust ausprobieren.

Ohne font-display swap:

/assets/vendor/googleapis/css2?family=Lato:wght@100

Mit Font-Display-Swap:

/assets/vendor/googleapis/css2?family=Lato:wght@100&display=swap

Ohne Austausch der Schriftart und Anzeige:

@font-face {
font-family: 'font-name';
font-style: normal;
font-weight: 300;
src: local(''),
url('../fonts/font-name.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

Mit Font-Display-Swap:

@font-face {
font-family: 'font-name';
font-display: swap;
font-style: normal;
font-weight: 300;
src: local(''),
url('../fonts/font-name.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
}

3. Die ersten Inhalte von der Optimierungen ausschließen

Einige Cache-Plugin-Einstellungen sollen das Laden von Inhalten auf einen späteren Zeitpunkt verschieben. Aber Inhalte oberhalb der Falz sollten nicht verzögert werden – die Besucher müssen sie sofort sehen.

Das heißt, wenn du in deinem Cache-Plugin Einstellungen für „Lazy Load“, das asynchrone Laden von CSS oder die Verzögerung von JavaScript aktiviert hast, aber die „Above The Fold“-Dateien nicht ausgenommen hast, kann dies die CLS/LCP Werte erhöhen.

Schließe Above The Fold-Bilder vom Lazy Load aus

Die meisten Cache-Plugins können Bilder vom Lazy Load ausschließen, bei denen es sich in der Regel um dein Logo, das Bild in der Seitenleiste und vielleicht einige Hintergrundbilder handelt. Das Problem beim manuellen Ausschluss dieser Bilder ist, dass die Bilder oberhalb der Faltung auf deiner Website unterschiedlich sein können. Das manuelle Hinzufügen von Bildern aus allen Seiten/Beiträgen ist viel Arbeit.

Eine bessere Option ist es führende Bilder auszuschließen, was von Perfmatters und FlyingPress unterstützt wird. Dies ermöglicht es, Bilder oberhalb der Faltung vom Lazy Load auszuschließen, indem die Anzahl der Bilder, die typischerweise oberhalb der Faltung angezeigt werden, festgelegt wird. Es ist einfacher und in der Regel effektiver!

Ausschluss von Above The Fold-JS-Dateien von der Aufschiebung

Wenn Above the Fold-JavaScript aufgeschoben wird, ist das auch kontraintuitiv, da die Idee von Defer ist, Dateien auszuführen, nachdem das Dokument geparst wurde. Du musst die JavaScript-Dateien finden, die oberhalb des Falzes geladen werden und sie von der Aufschiebung ausschließen. Dies ist bei Schiebereglern und sogar bei JavaScript von Drittanbietern üblich. Die meisten Cache-Plugins verfügen über eine entsprechende Option in ihren Einstellungen, oder WP Rocket bietet ein entsprechendes Plugin an.

Schließe Above The Fold-CSS-Dateien vom asynchronen Laden aus

Asynchrones CSS kann zu FOUC (Flash of Unstyled Content) führen, bei dem dein Inhalt vor dem CSS geladen wird. FOUC ist nicht nur hässlich und sieht optisch schlecht aus, sondern kann auch zu Layout-Verschiebungen führen.

Versuche in deinem Cache-Plugin folgendes: Schließe Dateien von asynchronem CSS aus, deaktiviere asynchrones CSS vollständig oder entferne nicht verwendetes CSS (die Alternative zu asynchronem CSS).

Das Entfernen von unbenutztem CSS führt im Allgemeinen zu besseren Ergebnissen. Aber ich empfehle WP Rocket nicht, da es benutztes CSS inline statt in einer separaten Datei lädt, was langsamer für Besucher ist (aber besser für die Ergebnisse). FlyingPress, Perfmatters, LiteSpeed Cache und fast alle anderen Cache-Plugins laden verwendetes CSS in eine separate Datei – ist schneller, da es gecached werden kann und die HTML-Größe nicht erhöht.

Wenn das Entfernen von ungenutztem CSS nicht funktioniert oder deine Website beschädigt, versuche, die Einstellung CSS asynchron laden zu aktivieren. Vergewissere dich kritische CSS hinzufügen, die das above the fold CSS sofort laden und FOUC verhindern. Und wenn das nicht funktioniert, dann würde ich ein anderes Plugin ausprobieren.

Verwendung von Critical CSS

• Lasse deine Website durch einen CSS-Generator mit kritischem Pfad laufen.
• Kopiere den CSS-Code für den kritischen Pfad.
• Füge den Code in das Feld für kritisches CSS deines Cache-Plugins ein.
• Die Anweisungen können je nach Cache-Plugin variieren (einige unterstützen kritisches CSS überhaupt nicht).

4. Schriftarten lokal hosten und vorladen

Das Vorladen von Schriftarten kann auch Layout-Verschiebungen beheben.

Wenn optionale Schriftarten vorgeladen werden, beseitigt dies Layoutverschiebungen in Chrome vollständig.

Schritt 1 besteht darin, Schriftarten lokal zu hosten. Sieh dir deine Schriftdateien an und stelle sicher, dass sie deine Domäne enthalten und nicht Domänen von Drittanbietern wie fonts.gstatic.com. Das lokale Hosten von Schriftarten kann in vielen Tools erfolgen: Die Performance-Einstellungen von Elementor im Theme-Customizer, Perfmatters, FlyingPress und Transfonter, um nur einige zu nennen.

Sobald die Schriftarten lokal gehostet werden, lade die oben erwähnten Schriftarten in den CSS-Dateien vor.

PageSpeed Insights kann empfehlen, Schriftarten in den Preload Key Requests vorzuladen. Andernfalls findest du deine Schriftdateien in GTmetrix Waterfall (siehe Screenshot oben). Kopiere deren URLs und lade sie vor.

Einige Cache-Plugins unterstützen das Vorladen von Schriftarten. Du kannst Perfmatters, Pre* Party Resource Hints Plugin verwenden oder es manuell mit Code machen. Vorgeladene Schriftarten sollten auch das Attribut crossorigin haben.

<link rel="preload" href="/fonts/roboto.woff2" as="font/woff2" crossorigin>

5. Gebe die Abmessungen von Bildern, Videos, Iframes und Anzeigen an

Wenn Elemente nicht die richtigen Abmessungen haben, verursachen sie Layout-Verschiebungen und können dazu führen, dass auch andere Inhalte verschoben werden.

Bilder

Die Angabe von Bildabmessungen bedeutet, dass du dem HTML-Code des Bildes eine Breite/Höhe hinzufügen musst. Einige Cache-Plugins, wie FlyingPress und WP Rocket (und Permatters), haben eine Einstellung zum Hinzufügen fehlender Bildabmessungen. Andernfalls kannst du die Abmessungen manuell in HTML hinzufügen. Es ist viel einfacher, die Abmessungen von Bildern in HTML als in CSS hinzuzufügen. WP Rocket lädt auch keine Bilder mit Verzögerung, wenn sie in CSS oder JavaScript gefunden werden; in diesem Fall müsstest du sie in Inline HTML verschieben. Andere Cache-Plugins wie FlyingPress enthalten eine lazy-bg-Helferklasse, die es einfacher macht.

<img src="beispiel.png" width="680" height="680" />

Responsive Platzhalter können auch Layoutverschiebungen verhindern, wie LiteSpeed und QUICs LQIP (low quality image placeholder).

Videos/IFrames

Ähnlich wie bei Bildern sollten auch Videos und Iframes eine, im Einbettungscode angegebene Breite und Höhe haben. Es ist auch wichtig sicherzustellen, dass eingebettete Videos und Iframes reaktionsfähig sind.

<iframe src="https://www.youtube.com/embed/QlkzOoLRm6w" width="680"
height="340" ></iframe>

Werbeanzeigen

Google sagt, dass „die Reservierung vom Platz für die größte Größe, die für die Auslieferung konfiguriert ist, der effektivste Weg ist, um Layout-Verschiebungen zu vermeiden“.

Es wird auch empfohlen, Platz für die Größe zu reservieren, die am wahrscheinlichsten geschaltet wird (zu finden in den historischen Fülldaten deiner Google Ad Manager-Berichte).

Google hat eine ganze Reihe von Beispielen. Durch die Platzierung des Anzeigencodes innerhalb eines Divs, das die Abmessungen der Anzeige angibt, wird Platz reserviert, damit sie keine Layoutverschiebungen für Nicht-Anzeigeninhalte auf der Seite verursachen.

<div class="ad" style="min-width: 300px; min-height: 250px;"></div>

6. CSS-Transform Eigenschaft in Animationen verwenden

Wenn du Fehler für nicht komponierte Animationen in PageSpeed Insights hast, verursachen diese auch Layout-Verschiebungen.

Google empfiehlt die Verwendung der CSS-Eigenschaft transform, um Animationen ohne Layout-Verschiebungen zu verwenden. Anstatt die Attribute width + height zu ändern, verwende transform: scale(). Um Elemente zu verschieben, verwende transform: translate(), anstatt die Eigenschaft top, right, bottom oder left zu ändern. In der Abbildung unten habe ich das Happy Addons für Elementor Plugin für CSS transform verwendet.

Ich empfehle dir, eine Seite mit und ohne Animationen zu testen, um den Unterschied in deiner kumulativen Layoutverschiebungsbewertung zu sehen. Wenn du wirklich der Meinung bist, dass sich Animationen lohnen, behalte sie bei. Aber in Facebook-Gruppen wurde schon oft berichtet, dass Animationen WordPress verlangsamen können.

7. JavaScript verzögern

Das Verzögern von JavaScript kann auch durch JS-Dateien verursachte Layout-Verschiebungen verzögern.

Zu den Plugins, die JavaScript verzögern, gehören FlyingPress, WP Rocket, LiteSpeed Cache, Perfmatters und Flying Scripts. WP Rocket und LiteSpeed Cache verzögern JavaScript automatisch, während du bei den anderen Plugins bestimmte JavaScript-Dateien, die du verzögern möchtest, manuell hinzufügen musst.

In der Regel kannst du den Code von Drittanbietern und bestimmte Plugins verzögern, die unterhalb der Falz geladen werden (z. B. Kommentare oder Social-Sharing-Plugins). Im Folgenden habe ich einige gängige JS-Dateien aufgeführt, die du verzögern kannst. Am besten überprüfst du deinen PageSpeed Insights-Bericht, um festzustellen, welche Dateien verzögert werden können. Achte auf den Code von Drittanbietern, Layout-Verschiebungen durch JavaScript und andere JavaScript-bezogene Empfehlungen.

ga( '
ga('
google-analytics.com/analytics.js
analytics.js
gtagv4.js
analytics-minimal.js
/gtm.js
/gtag/js
gtag(
/gtm-
adsbygoogle.js
grecaptcha.execute
optimize.js
fbevents.js
fbq(
/busting/facebook-tracking/
disqus.com/embed.js
script.hotjar.com
wp-content/themes/script-name
wp-content/plugins/plugin-name

8. Verwende einen separaten mobilen Cache

Wenn deine mobile Website unterschiedliche Styles, JavaScript oder mobile Funktionen aufweisen, solltest du normalerweise einen separaten mobilen Cache verwenden.

Wie in einem Thread gezeigt wurde, kann dies Layout-Verschiebungen verhindern. Cache-Plugins sollten eine Dokumentation darüber haben, wann du einen separaten mobilen Cache verwenden solltest. Dadurch werden 2 Cache-Dateien erstellt: eine für den Desktop und eine für das Handy. In den meisten Fällen sollte dies deaktiviert werden, da es die CPU-Auslastung erhöht, aber du musst die Dokumentation des Cache-Plugins durchgehen und herausfinden, ob dies für deine Website sinnvoll ist.

9. Ändere deinen Cookie-Hinweis-Plugin

In vielen Support-Threads wurde berichtet, dass einige Cookie-Hinweis-Plugins das CLS erhöhen. Ich empfehle entweder Cookie Notice & Compliance für GDPR / CCPA oder diese 1 KB Cookie Notice.

10. Dynamische Inhalte richtig servieren

Dynamische Inhalte sind eindeutig für Layoutverschiebungen aufgeführt.

Wenn du dynamische Inhalte verwenden musst, reserviere Platz für sie mit Hilfe von Platzhaltern (gebe eine Breite und Höhe an). Dadurch wird sichergestellt, dass sich andere Elemente auf deiner Seite nicht verschieben, wenn der dynamische Inhalt geladen wird.

Beispiele für dynamische Inhalte:

• Werbeanzeigen
• Pops
• Banner
• Formulare
• GDPR-Hinweise

Wenn du Popups anbietest, sagt Graham Ritchie auf Stack Overflow:

11. Globale Schriftart in Oxygen Builder auf Mulish einstellen

Wenn du Oxygen Builder verwendest, gibt es Berichte über globale Schrifteinstellungen, die CLS-Probleme verursachen. Die aktuelle Lösung scheint darin zu bestehen, Stylesheets zu öffnen und die globale Schriftart auf Mulish zu setzen.

body { font-family: 'Mulish', sans-serif; }

Häufig gestellte Fragen

Schreibe mir eine Nachricht, wenn du Fragen hast!

Wenn du Hilfe benötigst, hinterlasse bitte einen Link zu deinem GTmetrix-Bericht. Ich würde mich freuen 🙂

Viel Glück,
Joe