Cumulative Layout Shift (CLS) in WordPress: So beseitigen Sie es

Mit diesem Kapitel zum kumulativen Layout-Shift nähern wir uns dem Ende unserer Miniserie über Core Web Vitals für WordPress-Benutzer. In den früheren Kapiteln zu „Largest Contentful Paint“ und „First Input Delay“ haben wir bereits darüber gesprochen, was genau diese Begriffe bedeuten und wie Sie Ihre Website für jeden dieser Begriffe optimieren können. Jetzt wollen wir dasselbe für CLS tun.

Im Folgenden erläutern wir, was Cumulative Layout Shift genau ist, wie er berechnet wird, wie Sie Ihre Website auf ihre Leistung in diesem Bereich testen und welchen guten Wert Sie anstreben sollten. Anschließend geben wir Ihnen Schritt-für-Schritt-Anleitungen zur Behebung eventueller CLS-Probleme auf Ihrer WordPress-Site, um sie zu verbessern.

Wir hoffen, dass Sie sich nach Fertigstellung zusammen mit den beiden anderen Beiträgen dieser Reihe bereit fühlen, Ihre Website fit für das Gütesiegel von Google zu machen.

Was bedeutet die kumulative Layoutverschiebung?

Beginnen wir wie üblich mit einer Definition. In einem Satz: CLS misst, wenn sich auf einer Webseite etwas ändert, das dazu führt, dass sich die Elemente darauf ohne Benutzerinteraktion bewegen (oder verschieben, wenn Sie so wollen).

Es kann sein, dass ein Formular oder eine Anzeige in dem Artikel, den Sie gerade lesen, zu spät geladen wird und im gelesenen Absatz nach unten verschiebt, sodass Sie scrollen müssen, um wieder an die richtige Stelle zu gelangen. Oder schlimmer noch, es ändert die Position einer Schaltfläche oder eines Links in einem ungünstigen Moment, sodass Sie am Ende auf etwas klicken, das Sie nicht wollten.

Folglich kann es von leicht nervig bis hin zu völliger Verärgerung reichen. Die kumulative Layoutverschiebung ist die Metrik, die dieses Verhalten erfasst, um das Problem zu verstehen und es beheben zu können.

Warum ist es wichtig?

Eine unruhige Website stört Ihre aktuellen Aktivitäten völlig und kann sogar ärgerliche Folgen für das wirkliche Leben haben. Wie Sie sich vorstellen können, ist das sehr schlecht für die Benutzererfahrung und kann dazu führen, dass Besucher die Seite verlassen. Dies gilt insbesondere bei Smartphones, bei denen aufgrund der Bildschirmgröße kleine Verschiebungen größere Auswirkungen haben als bei Desktop-Geräten.

Weil es so störend ist, legt Google großen Wert auf diese Kennzahl und macht sie zu einem der Grundwerte, nach denen es Websites beurteilt. Wenn Sie also sowohl Ihren Besuchern als auch den Menschen (ich meine Robotern) gefallen möchten, die darüber entscheiden, wo Sie in den Suchergebnissen erscheinen, tun Sie Ihr Bestes, um kumulative Layoutverschiebungen auf Ihrer Website zu vermeiden.

Was verursacht CLS?

Die Ursache für die Verschiebung von Website-Elementen liegt normalerweise darin, dass die Dateien einer Webseite unterschiedlich schnell geladen werden. Ein weiterer Faktor sind Seitenelemente, die während oder nach dem Laden der Seite dynamisch hinzugefügt werden. Typische Beispiele sind:

• Visuals wie Bilder oder Videos ohne korrekt definierte Abmessungen
• Inhalte von Drittanbietern wie Anzeigen, Banner, Einbettungen oder Iframes
• Web-Schriftarten, die kleiner oder größer sind als die ursprünglich angezeigten Fallback-Schriftarten

Eine weitere CLS-Quelle können widersprüchliche CSS- und JavaScript-Markups sein. Wenn sie sich gegenseitig blockieren, wird der Ladevorgang von Webseiten blockiert.

Wie wird die kumulative Layoutverschiebung berechnet?

Im Gegensatz zu seinen Vorgängern ist die Berechnung des Cumulative Layout Shift etwas komplizierter. Um es zu verstehen, müssen wir uns zunächst auf einige Begriffe einigen:

• Layoutverschiebung – Dies ist der Fall, wenn ein Element, das bereits auf der Seite sichtbar ist, von seiner Startposition verschoben wird, nachdem es bereits gerendert wurde. Diese Art von Elementen nennt man instabile Elemente (kreativ, ich weiß).
• Erwartete vs. unerwartete Layoutverschiebungen – Layoutverschiebungen sind nur dann negativ, wenn der Benutzer sie nicht erwartet. Es gibt auch Layoutänderungen, die erwartet und begrüßt werden, beispielsweise nach einer Interaktion mit einer Webseite (z. B. dem Absenden eines Formulars). CSS-Animationen und -Übergänge sind weitere Beispiele für erwartete Layoutverschiebungen. Um dies zu berücksichtigen, berücksichtigt CLS alle Layoutänderungen, die innerhalb von 500 ms nach einer zu erwartenden Benutzerinteraktion auftreten.
• Auswirkungsanteil – Der Prozentsatz des Ansichtsfensters (der sichtbare Teil der Website auf dem Bildschirm), den ein sich bewegendes Element beeinflusst, als Dezimalzahl (z. B. 0,5, wenn es 50 % des Bildschirms beeinflusst).
• Entfernungsanteil – Entfernung als Prozentsatz des Bildschirms, den sich ein instabiles Element während einer Schicht bewegt. Wird auch als Dezimalzahl angegeben.
• Layout-Shift-Score – Dieser wird berechnet, indem der Impact-Anteil mit dem Distanzanteil multipliziert wird (z. B. 0,4 x 0,15 = 0,06). Infolgedessen führen große Elemente, die sich über eine große Distanz bewegen, zu einer höheren Punktzahl als kleine Elemente, die sich über eine kurze Distanz bewegen.

CLS erfasst das größte Auftreten unerwarteter Layout-Verschiebungswerte während eines Fünf-Sekunden-Intervalls. Offensichtlich ist niedriger besser.

Letztendlich müssen Sie die Einzelheiten nicht wirklich kennen. Sie müssen lediglich wissen, wie Sie CLS messen und welchen Wert Ihre Website anstreben sollte.

Was ist ein guter Layout-Shift-Score?

Ein guter Wert ist ein CLS-Wert von 0,1 oder weniger. Bis zu 0,25 muss verbessert werden, alles darüber ist schlecht und führt wahrscheinlich zu einer verringerten Suchleistung.

So testen Sie die kumulative Layoutverschiebung

Um den CLS-Score auf Ihrer Website verbessern zu können, müssen Sie zunächst wissen, wo Sie stehen. Es ist schwierig zu wissen, ob dies überhaupt geschieht, da sich Webseiten auf verschiedenen Geräten nicht immer gleich verhalten. Daher ist es möglicherweise nicht auf einer Entwicklungsseite zu sehen, Besucher können jedoch trotzdem darauf stoßen. Aus diesem Grund ist es am besten, es zu testen.

Es gibt mehrere Möglichkeiten, um zu überprüfen, ob die kumulative Layoutverschiebung ein Problem auf Ihrer WordPress-Site darstellt. Sie sind im Wesentlichen die gleichen wie bei den anderen Core Web Vitals-Metriken. Ihre erste Anlaufstelle sollte immer PageSpeed ​​Insights sein, das die Metrik auf seiner Ergebnisseite anzeigt.

Beachten Sie, dass sowohl Laborergebnisse als auch reale Daten aus dem Chrome User Experience Report verwendet werden. Es werden sogar Bilder der Layoutverschiebungen und des Quellelements angezeigt. Auf diese Weise haben Sie eine bessere Vorstellung davon, wo das Problem liegt und wo es auftritt.

Darüber hinaus liefert Ihnen PageSpeed ​​Insights das Verhältnis, wie viel jedes Element zum CLS-Score beiträgt. Dadurch können Sie priorisieren, was die größten negativen Auswirkungen hat.

Darüber hinaus können Sie auch Folgendes verwenden:

• Der Core Web Vitals-Bericht in der Google Search Console
• Chrome-Browser-Entwicklertools
• Leuchtturm
• web-vitals JavaScript-Bibliothek

Es gibt auch eine Chrome-Erweiterung namens CLS Visualizer. Es hebt wechselnde Elemente auf Ihren Webseiten hervor. Versuchen Sie für Firefox SpeedVitals.

So reduzieren Sie kumulative Layoutverschiebungen auf Ihrer WordPress-Site

Wenn Sie feststellen, dass CLS ein Problem auf Ihrer WordPress-Site darstellt, möchten Sie es wahrscheinlich beheben. Darum geht es im Rest dieses Artikels.

Geben Sie Medienabmessungen an

Viele Lösungen werden bereits deutlich, wenn man sich oben die Ursachen für die kumulative Layoutverschiebung ansieht. Wie bereits erwähnt, sind Bilder und andere Medien ohne definierte width und height ein häufiger Grund für CLS. Ohne feste Abmessungen weiß der Browser nicht, wie viel Platz er dafür reservieren muss. Dies gilt insbesondere für Medien, die später auf der Seite erscheinen, beispielsweise beim Lazy Loading.

Leider ist es beim responsiven Design üblich, keine bestimmten Bildabmessungen anzugeben. Am häufigsten werden Bilder auf width oder max-width: 100%; und height: auto; . Dann ist es Sache des Browsers, die tatsächlichen Abmessungen herauszufinden, wenn er das Bild herunterlädt.

Das hat in der Vergangenheit oft zu genau dem Verhalten geführt, das wir vermeiden wollen. Plötzlich tauchten Bilder auf und veränderten alles andere. Daher sollten Sie immer Abmessungen für Ihr Bildmaterial oder zumindest ein CSS-Seitenverhältnis angeben.

Wenn Sie WordPress verwenden, legt Ihre Website glücklicherweise automatisch die Bildabmessungen fest. Daher tritt das Problem normalerweise nicht ins Spiel.

Sollte dies bei einem bestimmten Bild nicht der Fall sein, können Sie dies im Gutenberg-Editor korrigieren.

Umgang mit Anzeigen, Einbettungen und ähnlichen Inhalten

In Seiten geladene Inhalte von Drittanbietern sind häufig eine der größten CLS-Quellen. In diesen Fällen haben Sie nicht unbedingt die Kontrolle über die Größe des Endprodukts. Auch wissen die Herausgeber nicht im Voraus, wie viel Platz auf der Website, auf der sie erscheinen, verfügbar ist. Daher müssen Sie die Größe auf die gleiche Weise wie bei Bildern angeben.

Zum Glück für WordPress-Benutzer: Wenn Sie den Gutenberg-Editor zum automatischen Einbetten von Inhalten aus sozialen Netzwerken, Videoportalen oder ähnlichen Anbietern in Ihre Inhalte verwenden, fügt der Editor automatisch die entsprechenden width und height hinzu.

Selbst wenn das Laden des Inhalts länger dauert als der Rest der Seite, ist auf diese Weise bereits die richtige Größe reserviert. Dadurch ändert sich das Layout beim Erscheinen nicht.

Achten Sie bei anderen Arten von Inhalten, die Sie manuell hinzufügen, darauf width und height manuell hinzuzufügen. Wenn Sie die genaue Höhe einer Anzeige oder eines anderen Elements nicht kennen, fügen Sie ihr zumindest eine min-height -Eigenschaft hinzu. Dies ermöglicht immer noch größere Elemente, reserviert aber etwas Platz und kann CLS auf der Seite eliminieren oder zumindest reduzieren.

Eine weitere Technik zur Minimierung der kumulativen Layoutverschiebung in WordPress für Inhalte von Drittanbietern besteht darin, diese nicht weit oben auf der Seite zu platzieren. Je höher es ist, desto mehr Inhalte können darunter nach unten gedrückt werden und desto höher ist Ihr CLS-Score. Platzieren Sie es daher möglichst in der Mitte oder unten.

Optimieren Sie dynamische Inhalte

Dynamische Inhalte sind Seitenelemente, die einer Seite hinzugefügt werden, nachdem diese bereits geladen wurde. Im vorherigen Beispiel handelte es sich um verzögert geladene Bilder, aber es enthält normalerweise auch Dinge wie Banner, Formulare oder sogar verwandte Produkte, die beim Scrollen angezeigt werden.

Wenn Sie diese nicht richtig planen, kann es natürlich auch zu Layoutverschiebungen kommen. Hier sind einige Möglichkeiten, dies zu vermeiden:

• Reservieren Sie im Voraus Platz – ähnlich wie oben: Wenn Sie einen Container mit einer festen Größe haben, in den Sie den Inhalt laden können, bleibt das Layout auch dann erhalten, wenn er später eintrifft. Ein fester Behälter kann auch ein Karussell oder ähnliches sein.
• Verbinden Sie es mit einer Benutzerinteraktion – Wenn Inhalte nach einer Benutzeraktion dynamisch geladen werden, hat dies keine Nachteile für CLS, selbst wenn sich das Layout ändert. Beachten Sie jedoch die 500-ms-Grenze.
• Inhalte außerhalb des Bildschirms laden – Wenn Sie Inhalte außerhalb des Ansichtsfensters laden und dem Benutzer dann eine Benachrichtigung über die Verfügbarkeit und eine Option zum Scrollen dorthin geben, gibt es ebenfalls kein CLS. Social-Media-Plattformen machen das gerne für neue Updates.

Verbessern Sie die Handhabung von Web-Schriftarten

Auch Web-Schriftarten können zu Layoutverschiebungen führen. Die beiden häufigsten Formen sind, dass Sie entweder zuerst unformatierten Text sehen, bevor die Webschriftart eingeht (Flash of Unstyled Text oder FOUT), oder dass Sie zunächst überhaupt keinen Text sehen und dieser dann zusammen mit der Webschriftart eingeht (Flash of Invisible Text oder). FOIT).

Beides kann zu Layoutverschiebungen führen. Hier erfahren Sie, was Sie dagegen tun können:

• Verwenden Sie das richtige Schriftformat – Wenn Sie benutzerdefinierte Schriftarten in Ihre WordPress-Website laden, achten Sie darauf, das WOFF2- oder WOFF-Format zu verwenden. Diese haben den kleinsten Platzbedarf, laden am schnellsten und helfen, die oben genannten Probleme zu vermeiden.
• Verwenden Sie die richtige Ersatzschriftart – Wenn Sie eine Ersatzschriftart verwenden, die sich stark von Ihrer tatsächlichen Schriftart unterscheidet, führt der Wechsel wahrscheinlich zu einer Verschiebung des Layouts. Sie können dies vermeiden, indem Sie eine Fallout-Schriftart verwenden, die nah am Endprodukt ist. Der Font Style Matcher kann Ihnen bei der Suche helfen.
• Schriftarten vorab laden – Platzieren Sie Ressourcen für Web-Schriftarten früh im Dokument und fügen Sie ihnen rel=preload hinzu. Auf diese Weise werden sie von Browsern priorisiert.

Es hilft auch, Schriftarten lokal zu hosten oder zumindest ein CDN zu verwenden, um sie den Benutzern so schnell wie möglich zur Verfügung zu stellen. Auf diese Weise verringern Sie die Wahrscheinlichkeit, dass Schriftarten zu spät beim Laden gewechselt werden und es zu Layoutverschiebungen kommt.

Lassen Sie nicht zu, dass die kumulative Layoutverschiebung Ihre WordPress-Site beeinträchtigt

Die kumulative Layoutverschiebung ist eine von drei Kennzahlen, die Google als wichtig erachtet, und die letzte in dieser ausführlichen Serie. Dies ist ein wichtiger Indikator für die Benutzererfahrung, da er die Stabilität des Seitenlayouts während und sogar nach dem Laden misst.

Wie die anderen Metriken in Core Web Vitals sind sie nicht nur für die Benutzer von Bedeutung, sondern zählen auch zum Suchranking und sind daher wichtig für den Erfolg Ihrer Website.

Inzwischen wissen Sie, was es ist, wie es berechnet wird, was es verursacht und wie man es testet und damit umgeht. Möge dein Layout für immer solide sein, mein Freund.

Haben Sie weitere Tipps, wie Sie kumulative Layoutverschiebungen in WordPress verhindern können? Lass es uns unten in den Kommentaren wissen!