Die meisten Websites sind so konzipiert, dass sie von verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen und Auflösungen aufgerufen werden können. Daher kann es schwierig sein, dieselbe Erfahrung über mehrere Plattformen hinweg aufrechtzuerhalten. WordPress erleichtert das plattformübergreifende Webdesign. Bei jeder Form der Softwareentwicklung kann der Aufbau einer Komplettlösung jedoch kompliziert sein.
Bei der Webentwicklung kann es bei Benutzern, die auf einer Website von Seite zu Seite navigieren, manchmal zu einer 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 dies auf und wie können wir es beheben? In diesem Leitfaden erfahren Sie, was CLS ist und wie Sie es auf Ihrer Website verhindern können.
Was ist kumulative Layoutverschiebung?
Die am häufigsten wahrnehmbare Form von CLS ist Verzögerung beim Laden von Bildern. Auf komplexen Websites mit vielen visuellen Elementen werden Sie häufig feststellen, dass der Text vor den Medienelementen geladen wird. Außerdem ändert sich das Layout der Webseite, wenn alle visuellen Elemente endlich geladen sind. Diese Vorfälle treten auf, unabhängig davon, ob Sie scrollen oder nicht.
Wenn eine Webseite einen hohen CLS-Score hat, ist es schwer zu bestimmen, wann sie vollständig geladen ist. Je komplizierter und medienlastiger die Website ist, desto höher ist die Wahrscheinlichkeit, dass sich das Layout ä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. Der Online-Shop von Amazon beispielsweise ist voll von Widgets, Bildern und Links, lädt aber schnell ohne wahrnehmbare Verschiebungen.
Was verursacht eine kumulative Layoutverschiebung?
CLS tritt tendenziell auf, weil Webbrowser Elemente nacheinander zu unterschiedlichen Zeiten laden. Außerdem 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 Bilds) nicht angeben, weiß Ihr Webbrowser nicht, wie viel Speicherplatz zugewiesen werden muss, 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 keine Layoutverschiebung in Echtzeit bemerken, dies nicht unbedingt bedeutet, dass keine Verschiebung stattfindet. Webbrowser speichern häufig Websitedaten zwischen, 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-Veränderungen durchmacht.
So messen Sie den CLS-Score Ihrer Website
Der CLS-Score gibt die Anzahl der Layoutverschiebungen 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 Distanzanteil mit dem Aufprallanteil multiplizieren:
CLS Score = Distance Fraction x Impact Fraction
Der Schlaganteil beschreibt, wie stark ein instabiles Element den wahrnehmbaren Bereich zwischen zwei Bildern beeinflusst. Der Distanzanteil beschreibt den Betrag, um den sich ein Element zwischen den 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 mäßig und muss verbessert werden, während ein CLS-Wert über 0,25 (0,25
Diese Konzepte können ein wenig schwer zu verstehen sein. Zum Glück 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 zur Messung des CLS Ihrer Webseite 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
- Webseitentest
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 das Analysieren Taste. 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, finden wir höchstwahrscheinlich einen CLS-Score von weniger als 0,10. 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 Site so ressourcenintensiv ist? Schauen wir uns an, wie Sie auch einen Amazon-ähnlichen CLS-Score haben 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 Schaltfunktionen 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.
Es ist genauso wichtig, sicherzustellen, dass Ihre Website über ein respektables CLS verfügt, wie sicherzustellen, dass dies der Fall ist starke lokale SEO und relevante Inhalte. 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:
Bemaßungseigenschaften zu allen Mediendateien hinzufügen
Wenn Sie Mediendateien mit unbekannten Eigenschaften hochladen, erhöht sich das Risiko einer Layoutverschiebung, da Ihr Webbrowser die Größe Ihres Bildes und die Layoutausrichtung nach dem Laden ermitteln muss. Diese Situationen treten bei großen hochauflösenden Bildern und Dateien mit größerer Wahrscheinlichkeit auf.
Durch das Hochladen von Mediendateien mit fehlenden Größeneigenschaften haben Sie dem Webbrowser zu viel Arbeit auferlegt. Sie müssen die Eigenschaften für Höhe und Breite für jede hochgeladene visuelle Mediendatei hinzufügen. Sie können dies tun, indem Sie Ihren Quellcode anzeigen und die Eigenschaften width und height manuell hinzufügen.
Stellen Sie sicher, dass die Schriftarten lokal geladen werden
Der Text muss während des Ladens der Schriftart sichtbar bleiben. Der erste Schritt, um dies zu erreichen, besteht darin, sicherzustellen, dass Schriftarten lokal geladen werden, anstatt von Schriftarten-Websites von Drittanbietern gezogen zu werden.
Wenn Sie feststellen, dass Ihre Schriftarten von einer Drittanbieter-Website abgerufen werden, können Sie sie mit einem Plugin wie OMGF lokal hosten und schneller laden. Dies verbessert nicht nur Ihren CLS-Wert, 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 Benutzern eine leere Stelle angezeigt, an der der Text stehen sollte.
Während des Flashens von unformatiertem Text (FOUT) wird Ihnen die Standard-Fallback-Schriftart des Webbrowsers angezeigt, bis die angegebene Schriftart geladen werden kann. Um dies zu beheben, können Sie die Eigenschaft hinzufügen Schrift-Anzeige: tauschen.
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, besteht darin, das Plugin Swap Google Fonts Display auf WP zu verwenden.
Beachten Sie jedoch, dass dieses Plugin nur für Google-Schriftarten funktioniert und die Anzeige-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 zu ändern. Sie müssen das Schriftarten-Stylesheet in WP öffnen und ändern.
Alternativ können Sie Caching-Plugins verwenden, z. B. eines, das Schriftarten automatisch für Sie optimiert, indem Sie die Eigenschaft „font swap“ hinzufügen.
Schriftarten vorladen
Um sicherzustellen, dass Sie Schriftarten lokal hosten, können Sie Ihre Schriftarten dann mit folgenden Plugins vorladen:
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 Site gründlich testen, nachdem Sie die 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.
CSS-Zustellungsoptimierung deaktivieren
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 unstyled Content (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 festlegen. Dies beinhaltet das Generieren eines kritischen Fallback-Skripts mit einem Tool wie CSS-Generator für kritischen Pfad.
Das Entfernen von Render-Blocking-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 Ihnen, 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 bereitzustellen, empfehlen wir die Verwendung der CSS transformieren und übersetzen Optionen.
Alternativ können Sie das Happy Addons Elementor-Plugin verwenden. Auf diese Weise können Sie Elemente animieren, ohne Layoutverschiebungen zu verursachen.
Der beste Weg, um die meisten Layoutverschiebungen 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 erhöhen. Wie immer geht es um die Verbesserung der User Experience. Je reaktionsschneller Ihre Website ist, desto größer ist die Wahrscheinlichkeit, dass Benutzer sie mit einem Lesezeichen versehen und sie erneut besuchen.