Die meisten Websites sind so konzipiert, dass sie von mehreren Geräten mit unterschiedlichen Bildschirmgrößen und Auflösungen aus aufgerufen werden können. Daher kann es schwierig sein, das gleiche Erlebnis auf mehreren Plattformen aufrechtzuerhalten. WordPress macht plattformübergreifendes Webdesign einfach. Allerdings kann es bei jeder Form der Softwareentwicklung schwierig sein, eine einheitliche Lösung zu erstellen.
Bei der Webentwicklung kann es bei Benutzern, die auf einer Website von Seite zu Seite navigieren, manchmal zu einer sogenannten kumulativen Layoutverschiebung (Cumulative Layout Shift, CLS) kommen. Dies liegt vor, wenn sich die visuellen Elemente einer Seite plötzlich ändern oder nicht mehr richtig geladen werden. Plötzlich wird Text größer oder kleiner, Bilder ändern ihre Position oder das gesamte Seitenlayout ändert sich.
Warum passiert das und wie können wir es beheben? In diesem Leitfaden erfahren Sie, was CLS ist und wie Sie es auf Ihrer Website vermeiden können.
Was ist eine kumulative Layoutänderung?
Die am häufigsten auftretende Form von CLS ist die Verzögerung beim Laden von Bildern. Auf komplexen Websites mit vielen visuellen Elementen werden Sie häufig feststellen, dass der Text vor den Multimedia-Elementen geladen wird. Darüber hinaus ändert sich das Layout der Webseite, wenn alle visuellen Elemente endgültig geladen sind. Diese Vorfälle ereignen sich unabhängig davon, ob Sie unterwegs sind oder nicht.
Wenn eine Webseite einen hohen CLS-Score aufweist, ist es schwierig festzustellen, wann sie vollständig geladen wurde. Je komplizierter und umfangreicher die Website ist, desto größer ist die Wahrscheinlichkeit von Änderungen am Erlebnisdesign.
Beispielsweise verfügen einfache Suchmaschinen-Webseiten mit sehr wenigen visuellen Elementen über wenig oder gar kein CLS. Dies bedeutet jedoch nicht, dass alle komplexen oder funktionsreichen Websites hohe CLS-Werte aufweisen. Der Online-Shop von Amazon ist beispielsweise vollgepackt mit Widgets, Bildern und Links, lädt aber schnell und ohne erkennbare Änderungen.
Was verursacht kumulative Layoutänderungen?
CLS tritt in der Regel auf, weil Webbrowser Elemente nacheinander zu unterschiedlichen Zeiten laden. Darüber hinaus können auf Ihrer Website Medienelemente mit unbekannten Eigenschaften (z. B. Abmessungen) vorhanden sein.
In Fällen, in denen Sie die Breite oder Höhe eines Medienelements (z. B. eines Bildes) nicht angeben, weiß Ihr Webbrowser nicht, wie viel Speicherplatz er zuweisen muss, bis die Webseite vollständig geladen ist. Daher die drastische Designänderung. Kurz gesagt, der Hauptgrund für die meisten CLS ist ineffizientes Laden.
Es ist wichtig zu beachten, dass selbst wenn Sie die Änderung des Layouts nicht in Echtzeit bemerken, dies nicht unbedingt bedeutet, dass keine Änderung stattfindet. Webbrowser speichern häufig Website-Daten im Cache, sodass Webseiten leichter geladen werden können, wenn Sie sie erneut besuchen. Die Messung des CLS-Scores ist der beste Weg, um festzustellen, ob Ihre Website wesentliche Designänderungen erfährt.
So messen Sie den CLS-Score Ihrer Website
Der CLS-Score gibt die Anzahl der Designänderungen an, die eine Webseite im Laufe ihrer Lebensdauer erfährt. Wir können den CLS-Score aus dem sogenannten Sitzungsfenster ableiten. Ein Sitzungsfenster beschreibt die Anzahl der Layoutänderungen, die in einem Fünf-Sekunden-Intervall auftreten. Um den CLS-Score zu berechnen, müssen wir den Distanzanteil mit dem Impact-Anteil multiplizieren:
CLS Score = Distance Fraction x Impact Fraction
Der Impact-Anteil beschreibt, wie stark ein instabiles Element den wahrnehmbaren Bereich zwischen zwei Frames beeinflusst. Der Distanzanteil beschreibt den Betrag, um den sich ein Element zwischen Frames bewegt hat. Ein CLS-Wert von 0,10 und darunter (0,0 – 0,10) ist ausgezeichnet. Ein CLS-Wert von mehr als 0,10, aber weniger als 0,25 (0,10 – 0,25) gilt als moderat und erfordert eine Verbesserung, während ein CLS-Wert von mehr als 0,25 (0,25) gilt
Diese Konzepte können etwas schwer zu verstehen sein. Glücklicherweise müssen Sie den CLS Ihrer Website nicht manuell berechnen. Es gibt zahlreiche Online- (und Offline-)Tools, die den CLS-Score für Sie berechnen können.
Derzeit ist die beliebteste Methode zur Messung des CLS Ihrer Webseite die PageSpeed Insights von Google. Es ermöglicht Ihnen, die Benutzererfahrungsstatistiken Ihrer Website für mobile und Desktop-Iterationen zu erfahren.
Zu den weiteren CLS-Tools gehören:
Da PageSpeed Insights von Google am bekanntesten ist, verwenden wir es für unser Beispiel.
Um Ihren CLS-Score zu messen, gehen Sie zur Homepage von PageSpeed Insights, geben Sie Ihre Webseiten-URL in das obere Textfeld ein und klicken Sie dann auf Analysieren Taste. Abhängig von der Beliebtheit Ihrer Website und der Internetgeschwindigkeit sollte Ihnen PageSpeed Insights innerhalb weniger Sekunden einen Bericht liefern.
Um Ihren CLS-Score zu finden, scrollen Sie im Internet nach unten zum Abschnitt „Basic Vitals Assessment“.
Am Beispiel der Amazon-Homepage würden wir höchstwahrscheinlich einen CLS-Score von weniger als 0,10 finden. Bei unseren 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 über so viele Ressourcen verfügt? Sehen wir uns an, wie Sie einen ähnlichen CLS-Score wie bei Amazon erzielen können.
So optimieren Sie CLS
Der beste Weg, um herauszufinden, welche Elemente Ihren hohen CLS-Score verursachen, ist die Verwendung des Google Web Vitals CLS-Debuggers. Es zeigt Ihnen ein GIF aller sich ändernden Funktionen auf Ihrer Website. Werbung und Mediendateien sind die häufigsten Ursachen 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.
Es ist genauso wichtig, sicherzustellen, dass Ihre Website über ein seriöses CLS verfügt, wie dafür zu sorgen, dass sie über starkes lokales SEO und relevante Inhalte verfügt. Die Suchmaschine Google tendiert dazu, Websites den Vorzug zu geben, die ein tolles Nutzererlebnis bieten und gut optimiert sind.
Zu diesem Zweck sind hier einige Schritte, um den CLS-Score Ihrer Website zu verbessern:
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 Hochladen die Größe Ihres Bildes berechnen und die Layoutausrichtung bestimmen muss. Diese Situationen treten eher bei großen Bildern und Dateien mit hoher Auflösung auf.
Durch das Hochladen von Mediendateien, denen Größeneigenschaften fehlen, legen Sie zu viel Arbeit in die Hände des Webbrowsers. Sie müssen für jede visuelle Mediendatei, die Sie hochladen, Höhen- und Breiteneigenschaften hinzufügen. Sie können dies tun, indem Sie Ihren Quellcode anzeigen und die Eigenschaften „Breite“ und „Höhe“ manuell hinzufügen.
Stellen Sie sicher, dass Schriftarten lokal geladen werden
Der Text muss beim Laden der Schriftart sichtbar bleiben. Der erste Schritt dazu besteht darin, sicherzustellen, dass die Schriftarten lokal hochgeladen werden, anstatt sie von Schriftarten-Websites Dritter abzurufen.
Wenn Sie feststellen, dass Ihre Schriftarten von einer Website eines Drittanbieters stammen, 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
Blinkender unsichtbarer Text (FOIT) tritt auf, wenn Sie keine alternative Schriftart angeben. Während Ihr Webbrowser versucht, Ihre Schriftart zu laden oder eine Alternative zu finden, wird Benutzern an der Stelle, an der sich der Text befinden sollte, eine leere Stelle angezeigt.
Während des unformatierten Textflashs (FOUT) wird Ihnen die Standard-Fallback-Schriftart des Webbrowsers angezeigt, bis Sie die angegebene Schriftart laden können. Um dieses Problem zu beheben, können Sie die Eigenschaft hinzufügen Quellenanzeige: Austausch.
Wenn Sie jemals Google Fonts 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 Swap Google Fonts Display-Plugins in WP.
Bitte beachten Sie jedoch, dass dieses Plugin nur für Google Fonts funktioniert und diesen URLs automatisch die Display-Sharing-Eigenschaft hinzufügt. Wenn Sie Schriftarten lokal hosten, können Sie das String Locator-Plugin verwenden, um alle Ihre Schriftartdateien zu finden und zu ändern. Sie müssen das Schriftarten-Stylesheet in WP öffnen und ändern.
Alternativ können Sie Caching-Plugins verwenden, beispielsweise eines, das Schriftarten automatisch optimiert, indem es die Eigenschaft „Schriftartfreigabe“ hinzufügt.
Schriftarten vorladen
Um sicherzustellen, dass Sie Schriftarten lokal hosten, können Sie Ihre Schriftarten mit Plugins wie den folgenden vorab laden:
Wenn Sie es sich nicht leisten können, diese Plugins zu verwenden, können Sie Ihre Schriftarten vorab laden, indem Sie Ihre Datei header.php bearbeiten. Testen Sie Ihre Website unbedingt gründlich, nachdem Sie die Schriftarten vorab geladen haben. Das Vorabladen zu vieler Schriftarten kann Ihre Website beschädigen. Daher empfehlen wir Ihnen, wie bei jeder größeren Backend-Möglichkeit, vorher ein Backup Ihrer WordPress-Site zu erstellen.
Deaktivieren Sie die CSS-Bereitstellungsoptimierung
Wenn Sie WP Rocket verwenden, um die CSS-Bereitstellung zu optimieren oder CSS asynchron mit LiteSpeed Cache zu laden, kann es zu Flash of Unstyled Content (FOUC) kommen. Wenn Sie Ihren CLS-Score verbessern möchten, empfehlen wir Ihnen, diese Optionen in den jeweiligen Plugins zu deaktivieren.
Alternativ können Sie sogenanntes Critical Fallback CSS einrichten. Dazu gehört die Erstellung eines kritischen Backup-Skripts mit einem Tool wie dem Critical Path CSS Generator.
Auch das Entfernen von Verarbeitungsblockierungsskripten kann Ihren CLS-Score senken. Wir empfehlen Ihnen, Ihr CLS zunächst mit aktivierter CSS-Auslieferungsoptimierung zu testen und es dann zum Vergleich zu testen, wenn Sie es deaktiviert haben.
Animationen deaktivieren
Wenn Sie Animationen verwenden, empfehlen wir Ihnen, diese für die mobile Version Ihrer Website zu deaktivieren, da Animationen die Ladezeiten Ihrer Website verlangsamen können. Wenn Sie auf Animationen für Ihre Website bestehen, empfehlen wir Ihnen, die CSS-Transformations- und Übersetzungsoptionen zu verwenden.
Alternativ können Sie das Happy Addons Elementor-Plugin verwenden. Dadurch können Sie Elemente animieren, ohne dass es zu Layoutänderungen kommt.
Der beste Weg, die meisten Designänderungen zu vermeiden, 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 steigern. Wie immer geht es darum, das Benutzererlebnis zu verbessern. Je reaktionsschneller Ihre Website ist, desto wahrscheinlicher ist es, dass Benutzer sie mit einem Lesezeichen versehen und erneut besuchen.
