So verbessern Sie den kumulativen Layout-Shift (CLS) für WordPress

Die meisten Websites sind so konzipiert, dass sie von verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen und Auflösungen aus aufgerufen werden können. Daher kann es schwierig sein, die gleiche Erfahrung auf mehreren Plattformen aufrechtzuerhalten. WordPress erleichtert das plattformübergreifende Webdesign. Bei jeder Form der Softwareentwicklung kann es jedoch kompliziert sein, eine One-fits-all-Lösung zu erstellen.

Bei der Webentwicklung kann es bei Benutzern, die auf einer Website von Seite zu Seite navigieren, manchmal zu einem sogenannten Cumulative Layout Shift (CLS) kommen. Dies ist der Fall, wenn sich die visuellen Elemente einer Seite plötzlich ändern oder falsch geladen werden. Plötzlich wird Text größer oder kleiner, Bilder ändern ihre Position oder das gesamte Seitenlayout ändert sich.

Warum tritt das auf und wie können wir es beheben? In diesem Leitfaden untersuchen wir, was CLS ist und wie Sie es auf Ihrer Website verhindern können.

Was ist eine kumulative Layoutverschiebung?

Die am häufigsten wahrnehmbare Form von CLS ist eine Verzögerung beim Laden von Bildern. Auf komplexen Websites mit vielen visuellen Elementen werden Sie oft feststellen, dass der Text vor den Medienelementen geladen wird. Außerdem ändert sich das Layout der Webseite, wenn alle visuellen Elemente endgültig geladen sind. Diese Vorfälle treten unabhängig davon auf, ob Sie scrollen oder nicht.

Wenn eine Webseite einen hohen CLS-Score hat, ist es schwer festzustellen, wann sie vollständig geladen ist. Je komplizierter und medienlastiger die Website ist, desto höher ist die Wahrscheinlichkeit, dass sich das Erlebnislayout ändert.

Zum Beispiel haben einfache Suchmaschinen-Webseiten mit sehr wenigen visuellen Elementen wenig bis gar kein CLS. Dies bedeutet jedoch nicht, dass alle komplexen oder funktionsreichen Websites hohe CLS-Werte aufweisen. Zum Beispiel ist der Online-Shop von Amazon vollgestopft mit Widgets, Bildern und Links, aber er lädt schnell ohne wahrnehmbare Verschiebungen.

Was verursacht eine kumulative Layoutverschiebung?

CLS tritt in der Regel auf, weil Webbrowser Elemente nacheinander zu unterschiedlichen Zeiten laden. Darüber hinaus haben Sie möglicherweise Medienelemente auf Ihrer Website mit unbekannten Eigenschaften (z. B. Abmessungen).

In Fällen, in denen Sie die Breite oder Höhe eines Medienelements (z. B. eines Bilds) nicht angeben, weiß Ihr Webbrowser nicht, wie viel Speicherplatz zugewiesen werden soll, bis die Webseite vollständig geladen ist. Daher die drastische Layoutverschiebung. Zusammenfassend lässt sich sagen, dass der Hauptgrund für die meisten CLS ineffizientes Laden ist.

Es ist wichtig zu beachten, dass selbst wenn Sie die Layoutverschiebung nicht in Echtzeit bemerken, dies nicht unbedingt bedeutet, dass keine Verschiebung stattfindet. Webbrowser speichern Website-Daten oft im Cache, sodass es einfacher ist, Webseiten zu laden, wenn Sie sie erneut besuchen. Die Messung des CLS-Scores ist der beste Weg, um festzustellen, ob Ihre Website erhebliche Layoutänderungen erfährt.

So messen Sie den CLS-Score Ihrer Website

Der CLS-Score gibt die Anzahl der Layoutänderungen an, die eine Webseite während ihrer Lebensdauer erfährt. Wir können den CLS-Score aus einem sogenannten Sitzungsfenster ableiten. Ein Sitzungsfenster beschreibt die Anzahl der Layoutverschiebungen, die innerhalb eines Fünf-Sekunden-Intervalls auftreten. Um den CLS-Score zu berechnen, müssen wir den Entfernungsanteil mit dem Aufprallanteil multiplizieren:

 CLS-Score = Distanzanteil x Aufprallanteil

Der Aufprallanteil beschreibt, wie stark ein instabiles Element den wahrnehmbaren Bereich zwischen zwei Frames beeinflusst. Der Abstandsanteil beschreibt den Betrag, um den sich ein Element zwischen Frames verschoben hat. Ein CLS-Score von 0,10 und darunter (0,0 – 0,10) ist großartig. Ein CLS-Wert über 0,10, aber unter 0,25 (0,10–0,25) ist moderat und erfordert eine Verbesserung, während ein CLS-Wert über 0,25 (0,25 <) schlecht ist.

Diese Konzepte sind vielleicht etwas schwer zu verstehen. Glücklicherweise müssen Sie den CLS Ihrer Website nicht manuell berechnen. Es gibt eine Reihe von Online- (und Offline-) Tools, die den CLS-Score für Sie berechnen können.

Derzeit ist die beliebteste Methode, den CLS Ihrer Webseite zu messen, die PageSpeed ​​Insights von Google. Es ermöglicht Ihnen, die Benutzererfahrungsstatistiken Ihrer Website sowohl für die mobilen als auch für die Desktop-Iterationen zu ermitteln.

Andere CLS-Tools umfassen:

• GT-Metrix
• Google Web Vitals CLS-Debugger
• Google Chrome Web Vitals-Erweiterung
• Google Leuchtturm
• Webseiten-Test

Da Googles PageSpeed ​​Insights am bekanntesten ist, verwenden wir es für unser Beispiel.

Um Ihren CLS-Score zu messen, navigieren Sie zur PageSpeed ​​Insight-Startseite, geben Sie die URL Ihrer Webseite in das obere Textfeld ein und klicken Sie dann auf die Schaltfläche „ Analysieren “. Abhängig von der Popularität Ihrer Website und der Internetgeschwindigkeit sollte PageSpeed ​​Insights Ihnen innerhalb weniger Sekunden einen Bericht liefern.

Um Ihren CLS-Score zu finden, scrollen Sie nach unten zum Abschnitt Core Web Vitals Assessment.

Wenn wir die Homepage von Amazon als Beispiel verwenden, werden wir höchstwahrscheinlich einen CLS-Wert von weniger als 0,10 finden. Während unserer Tests haben wir festgestellt, dass die mobile Website einen CLS-Wert von 0,01 hatte, während die Desktop-Version einen Wert von 0,05 hatte.

Aber wie machen sie das, wenn ihre Website so ressourcenintensiv ist? Schauen wir uns an, wie Sie auch einen Amazon-ähnlichen CLS-Score erzielen können.

So optimieren Sie CLS

Der beste Weg, um zu sehen, welche Elemente Ihren hohen CLS-Score verursachen, ist die Verwendung des CLS-Debuggers von Google Web Vitals. Es zeigt Ihnen ein GIF aller wechselnden Funktionen auf Ihrer Website. Anzeigen und Mediendateien sind die häufigsten Schuldigen für hohe CLS-Werte. Andere Ursachen können Schriftarten, asynchrones CSS, Animationen und Iframes sein. Um Ihren CLS-Score zu verbessern, müssen Sie diese Elemente optimieren.

Sicherzustellen, dass Ihre Website über ein respektables CLS verfügt, ist ebenso wichtig wie sicherzustellen, dass sie über starkes lokales SEO und relevante Inhalte verfügt. Die Suchmaschine von Google bevorzugt Websites, die eine großartige Benutzererfahrung bieten und gut optimiert sind.

Zu diesem Zweck sind hier einige Schritte zur Verbesserung des CLS-Scores Ihrer Website:

Fügen Sie allen Mediendateien Dimensionseigenschaften hinzu

Wenn Sie Mediendateien mit unbekannten Eigenschaften hochladen, erhöht sich das Risiko einer Layoutverschiebung, da Ihr Webbrowser nach dem Laden die Größe Ihres Bildes ermitteln und die Layoutausrichtung bestimmen muss. Diese Situationen treten häufiger bei großen Bildern und Dateien mit hoher Auflösung auf.

Durch das Hochladen von Mediendateien mit fehlenden Größeneigenschaften haben Sie zu viel Arbeit in die Hände des Webbrowsers gelegt. Sie müssen die Höhen- und Breiteneigenschaften für jede hochgeladene visuelle Mediendatei hinzufügen. Sie können dies tun, indem Sie Ihren Quellcode anzeigen und die Breiten- und Höheneigenschaften manuell hinzufügen.

Stellen Sie sicher, dass Schriftarten lokal geladen sind

Text muss während des Ladens von Schriftarten sichtbar bleiben. Der erste Schritt, um dies zu erreichen, besteht darin, sicherzustellen, dass Schriftarten lokal geladen werden, anstatt von Schriftarten-Websites von Drittanbietern abgerufen zu werden.

Wenn Sie feststellen, dass Ihre Schriftarten von einer Drittanbieter-Website abgerufen werden, können Sie ein Plugin wie OMGF verwenden, um sie lokal zu hosten und schneller zu laden. Dies verbessert nicht nur Ihren CLS-Score, sondern ist auch ein Schritt in Richtung umweltfreundliches Design.

Vermeiden Sie FOIT und FOUT

Flash of Invisible Text (FOIT) tritt auf, wenn Sie keine Fallback-Schriftart angeben. Während Ihr Webbrowser versucht, Ihre Schriftart zu laden oder eine Alternative zu finden, wird den Benutzern ein leerer Bereich angezeigt, in dem sich Text befinden sollte.

Während Flash of Unstyled Text (FOUT) wird Ihnen die Standard-Fallback-Schriftart des Webbrowsers angezeigt, bis Ihre angegebene Schriftart geladen werden kann. Um dies zu beheben, können Sie die Eigenschaft font-display: swap hinzufügen.

Wenn Sie jemals Schriftarten von Google heruntergeladen haben, werden Sie feststellen, dass dieses Tag am Ende jeder URL hinzugefügt wird. Der einfachste Weg, diese Eigenschaft selbst hinzuzufügen, ist die Verwendung des Plugins Swap Google Fonts Display in WP.

Beachten Sie jedoch, dass dieses Plugin nur für Google-Schriftarten funktioniert und die Display-Swap-Eigenschaft automatisch an diese URLs anhängt. Wenn Sie Schriftarten lokal hosten, können Sie das String Locator-Plugin verwenden, um alle Ihre Schriftartdateien zu finden und sie zu ändern. Sie müssen das Schriftart-Stylesheet in WP öffnen und ändern.

Alternativ können Sie Caching-Plug-ins verwenden, z. B. eines, das Schriftarten automatisch für Sie optimiert, indem es die Eigenschaft „Font Swap“ hinzufügt.

Schriftarten vorladen

Um sicherzustellen, dass Sie Schriftarten lokal hosten, können Sie Ihre Schriftarten dann mit Plugins wie den folgenden vorladen:

• WP-Rakete
• Pre* Party-Ressourcenhinweise
• Belang

Wenn Sie es sich nicht leisten können, diese Plugins zu verwenden, können Sie Ihre Schriftarten vorab laden, indem Sie Ihre header.php-Datei bearbeiten. Stellen Sie einfach sicher, dass Sie Ihre Website gründlich testen, nachdem Sie Schriftarten vorab geladen haben. Das Vorladen zu vieler Schriftarten kann Ihrer Website schaden. Wie bei allen großen Backend-Chancen empfehlen wir Ihnen, Ihre WordPress-Site vorher zu sichern.

Deaktivieren Sie die CSS-Zustellungsoptimierung

Wenn Sie WP Rocket verwenden, um die CSS-Bereitstellung zu optimieren oder CSS asynchron mit LiteSpeed ​​Cache zu laden, kann dies zu einem Flash von nicht formatiertem Inhalt (FOUC) führen. Wenn Sie Ihren CLS-Score verbessern möchten, empfehlen wir, diese Optionen in den jeweiligen Plugins zu deaktivieren.

Alternativ können Sie ein sogenanntes Fallback Critical CSS einstellen. Dazu gehört das Generieren eines kritischen Fallback-Skripts mit einem Tool wie dem Critical Path CSS Generator.

Das Entfernen von Render-blockierenden Skripten kann auch Ihren CLS-Score verringern. Wir empfehlen, dass Sie Ihr CLS zuerst mit aktivierter CSS-Bereitstellungsoptimierung testen und es dann testen, wenn Sie es zum Vergleichen deaktiviert haben.

Animationen deaktivieren

Wenn Sie Animationen verwenden, empfehlen wir, diese für die mobile Version Ihrer Website zu deaktivieren, da Animationen die Ladezeiten Ihrer Website beeinträchtigen können. Wenn Sie darauf bestehen, Animationen für Ihre Website zu haben, empfehlen wir die Verwendung der CSS-Transformations- und Übersetzungsoptionen.

Alternativ können Sie das Elementor-Plugin von Happy Addons verwenden. Auf diese Weise können Sie Elemente animieren, ohne Layoutverschiebungen zu verursachen.

Der beste Weg, um die meisten Layoutverschiebungen zu beseitigen, besteht darin, die Art und Weise zu ändern, wie Ihre Webseite geladen wird. Im Gegenzug können Sie die Geschwindigkeit und Effizienz Ihrer WordPress-Site erhöhen. Wie immer geht es darum, die Benutzererfahrung zu verbessern. Je reaktionsschneller Ihre Website ist, desto größer ist die Wahrscheinlichkeit, dass Benutzer sie mit einem Lesezeichen versehen und erneut besuchen.