{"id":849155,"date":"2023-09-20T00:53:22","date_gmt":"2023-09-20T05:53:22","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-verbessern-sie-die-kumulative-layoutverschiebung-cls-fur-wordpress\/"},"modified":"2023-09-20T00:53:22","modified_gmt":"2023-09-20T05:53:22","slug":"so-verbessern-sie-die-kumulative-layoutverschiebung-cls-fur-wordpress","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-verbessern-sie-die-kumulative-layoutverschiebung-cls-fur-wordpress\/","title":{"rendered":"So verbessern Sie die kumulative Layoutverschiebung (CLS) f\u00fcr WordPress"},"content":{"rendered":"

\n<\/p>\n

Die meisten Websites sind so konzipiert, dass sie von mehreren Ger\u00e4ten mit unterschiedlichen Bildschirmgr\u00f6\u00dfen und Aufl\u00f6sungen aus aufgerufen werden k\u00f6nnen. Daher kann es schwierig sein, das gleiche Erlebnis auf mehreren Plattformen aufrechtzuerhalten. WordPress macht plattform\u00fcbergreifendes Webdesign einfach. Allerdings kann es bei jeder Form der Softwareentwicklung schwierig sein, eine einheitliche L\u00f6sung zu erstellen.<\/p>\n

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\u00f6tzlich \u00e4ndern oder nicht mehr richtig geladen werden. Pl\u00f6tzlich wird Text gr\u00f6\u00dfer oder kleiner, Bilder \u00e4ndern ihre Position oder das gesamte Seitenlayout \u00e4ndert sich.<\/p>\n

Warum passiert das und wie k\u00f6nnen wir es beheben? In diesem Leitfaden erfahren Sie, was CLS ist und wie Sie es auf Ihrer Website vermeiden k\u00f6nnen.<\/p>\n

Was ist eine kumulative Layout\u00e4nderung?<\/h2>\n

Die am h\u00e4ufigsten auftretende Form von CLS ist die Verz\u00f6gerung beim Laden von Bildern. Auf komplexen Websites mit vielen visuellen Elementen werden Sie h\u00e4ufig feststellen, dass der Text vor den Multimedia-Elementen geladen wird. Dar\u00fcber hinaus \u00e4ndert sich das Layout der Webseite, wenn alle visuellen Elemente endg\u00fcltig geladen sind. Diese Vorf\u00e4lle ereignen sich unabh\u00e4ngig davon, ob Sie unterwegs sind oder nicht.<\/p>\n

Wenn eine Webseite einen hohen CLS-Score aufweist, ist es schwierig festzustellen, wann sie vollst\u00e4ndig geladen wurde. Je komplizierter und umfangreicher die Website ist, desto gr\u00f6\u00dfer ist die Wahrscheinlichkeit von \u00c4nderungen am Erlebnisdesign.<\/p>\n

Beispielsweise verf\u00fcgen einfache Suchmaschinen-Webseiten mit sehr wenigen visuellen Elementen \u00fcber 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\u00e4dt aber schnell und ohne erkennbare \u00c4nderungen.<\/p>\n

Was verursacht kumulative Layout\u00e4nderungen?<\/h2>\n

\"Was<\/p>\n

CLS tritt in der Regel auf, weil Webbrowser Elemente nacheinander zu unterschiedlichen Zeiten laden. Dar\u00fcber hinaus k\u00f6nnen auf Ihrer Website Medienelemente mit unbekannten Eigenschaften (z. B. Abmessungen) vorhanden sein.<\/p>\n

In F\u00e4llen, in denen Sie die Breite oder H\u00f6he eines Medienelements (z. B. eines Bildes) nicht angeben, wei\u00df Ihr Webbrowser nicht, wie viel Speicherplatz er zuweisen muss, bis die Webseite vollst\u00e4ndig geladen ist. Daher die drastische Design\u00e4nderung. Kurz gesagt, der Hauptgrund f\u00fcr die meisten CLS ist ineffizientes Laden.<\/p>\n

Es ist wichtig zu beachten, dass selbst wenn Sie die \u00c4nderung des Layouts nicht in Echtzeit bemerken, dies nicht unbedingt bedeutet, dass keine \u00c4nderung stattfindet. Webbrowser speichern h\u00e4ufig Website-Daten im Cache, sodass Webseiten leichter geladen werden k\u00f6nnen, wenn Sie sie erneut besuchen. Die Messung des CLS-Scores ist der beste Weg, um festzustellen, ob Ihre Website wesentliche Design\u00e4nderungen erf\u00e4hrt.<\/p>\n

So messen Sie den CLS-Score Ihrer Website<\/h2>\n

Der CLS-Score gibt die Anzahl der Design\u00e4nderungen an, die eine Webseite im Laufe ihrer Lebensdauer erf\u00e4hrt. Wir k\u00f6nnen den CLS-Score aus dem sogenannten Sitzungsfenster ableiten. Ein Sitzungsfenster beschreibt die Anzahl der Layout\u00e4nderungen, die in einem F\u00fcnf-Sekunden-Intervall auftreten. Um den CLS-Score zu berechnen, m\u00fcssen wir den Distanzanteil mit dem Impact-Anteil multiplizieren:<\/p>\n

CLS Score = Distance Fraction x Impact Fraction<\/pre>\n
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 \u2013 0,10) ist ausgezeichnet.  Ein CLS-Wert von mehr als 0,10, aber weniger als 0,25 (0,10 \u2013 0,25) gilt als moderat und erfordert eine Verbesserung, w\u00e4hrend ein CLS-Wert von mehr als 0,25 (0,25) gilt\n<\/p>\n
Diese Konzepte k\u00f6nnen etwas schwer zu verstehen sein.  Gl\u00fccklicherweise m\u00fcssen Sie den CLS Ihrer Website nicht manuell berechnen.  Es gibt zahlreiche Online- (und Offline-)Tools, die den CLS-Score f\u00fcr Sie berechnen k\u00f6nnen.<\/p>\n
Derzeit ist die beliebteste Methode zur Messung des CLS Ihrer Webseite die PageSpeed \u200b\u200bInsights von Google.  Es erm\u00f6glicht Ihnen, die Benutzererfahrungsstatistiken Ihrer Website f\u00fcr mobile und Desktop-Iterationen zu erfahren.<\/p>\n
Zu den weiteren CLS-Tools geh\u00f6ren:<\/p>\n
Da PageSpeed \u200b\u200bInsights von Google am bekanntesten ist, verwenden wir es f\u00fcr unser Beispiel.<\/p>\n
Um Ihren CLS-Score zu messen, gehen Sie zur Homepage von PageSpeed \u200b\u200b\u200b\u200bInsights, geben Sie Ihre Webseiten-URL in das obere Textfeld ein und klicken Sie dann auf Analysieren<\/i> Taste.  Abh\u00e4ngig von der Beliebtheit Ihrer Website und der Internetgeschwindigkeit sollte Ihnen PageSpeed \u200b\u200bInsights innerhalb weniger Sekunden einen Bericht liefern.<\/p>\n
Um Ihren CLS-Score zu finden, scrollen Sie im Internet nach unten zum Abschnitt \u201eBasic Vitals Assessment\u201c.<\/p>\n
\"Google<\/p>\n
Am Beispiel der Amazon-Homepage w\u00fcrden wir h\u00f6chstwahrscheinlich 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\u00e4hrend die Desktop-Version einen Wert von 0,05 hatte.<\/p>\n
Aber wie machen Sie das, wenn Ihre Website \u00fcber so viele Ressourcen verf\u00fcgt?  Sehen wir uns an, wie Sie einen \u00e4hnlichen CLS-Score wie bei Amazon erzielen k\u00f6nnen.<\/p>\n
So optimieren Sie CLS<\/h2>\n
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 \u00e4ndernden Funktionen auf Ihrer Website.  Werbung und Mediendateien sind die h\u00e4ufigsten Ursachen f\u00fcr hohe CLS-Werte.  Andere Ursachen k\u00f6nnen Schriftarten, asynchrones CSS, Animationen und Iframes sein.  Um Ihren CLS-Score zu verbessern, m\u00fcssen Sie diese Elemente optimieren.<\/p>\n
Es ist genauso wichtig, sicherzustellen, dass Ihre Website \u00fcber ein seri\u00f6ses CLS verf\u00fcgt, wie daf\u00fcr zu sorgen, dass sie \u00fcber starkes lokales SEO und relevante Inhalte verf\u00fcgt.  Die Suchmaschine Google tendiert dazu, Websites den Vorzug zu geben, die ein tolles Nutzererlebnis bieten und gut optimiert sind.<\/p>\n
Zu diesem Zweck sind hier einige Schritte, um den CLS-Score Ihrer Website zu verbessern:<\/p>\n
F\u00fcgen Sie allen Mediendateien Dimensionseigenschaften hinzu<\/h3>\n
Wenn Sie Mediendateien mit unbekannten Eigenschaften hochladen, erh\u00f6ht sich das Risiko einer Layoutverschiebung, da Ihr Webbrowser nach dem Hochladen die Gr\u00f6\u00dfe Ihres Bildes berechnen und die Layoutausrichtung bestimmen muss.  Diese Situationen treten eher bei gro\u00dfen Bildern und Dateien mit hoher Aufl\u00f6sung auf.<\/p>\n
Durch das Hochladen von Mediendateien, denen Gr\u00f6\u00dfeneigenschaften fehlen, legen Sie zu viel Arbeit in die H\u00e4nde des Webbrowsers.  Sie m\u00fcssen f\u00fcr jede visuelle Mediendatei, die Sie hochladen, H\u00f6hen- und Breiteneigenschaften hinzuf\u00fcgen.  Sie k\u00f6nnen dies tun, indem Sie Ihren Quellcode anzeigen und die Eigenschaften \u201eBreite\u201c und \u201eH\u00f6he\u201c manuell hinzuf\u00fcgen.<\/p>\n
Stellen Sie sicher, dass Schriftarten lokal geladen werden<\/h3>\n
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.<\/p>\n
Wenn Sie feststellen, dass Ihre Schriftarten von einer Website eines Drittanbieters stammen, k\u00f6nnen 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.<\/p>\n
Vermeiden Sie FOIT und FOUT<\/h3>\n
Blinkender unsichtbarer Text (FOIT) tritt auf, wenn Sie keine alternative Schriftart angeben.  W\u00e4hrend 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.<\/p>\n
W\u00e4hrend des unformatierten Textflashs (FOUT) wird Ihnen die Standard-Fallback-Schriftart des Webbrowsers angezeigt, bis Sie die angegebene Schriftart laden k\u00f6nnen.  Um dieses Problem zu beheben, k\u00f6nnen Sie die Eigenschaft hinzuf\u00fcgen Quellenanzeige: Austausch<\/i>.<\/p>\n
Wenn Sie jemals Google Fonts heruntergeladen haben, werden Sie feststellen, dass dieses Tag am Ende jeder URL hinzugef\u00fcgt wird.  Der einfachste Weg, diese Eigenschaft selbst hinzuzuf\u00fcgen, ist die Verwendung des Swap Google Fonts Display-Plugins in WP.<\/p>\n
Bitte beachten Sie jedoch, dass dieses Plugin nur f\u00fcr Google Fonts funktioniert und diesen URLs automatisch die Display-Sharing-Eigenschaft hinzuf\u00fcgt.  Wenn Sie Schriftarten lokal hosten, k\u00f6nnen Sie das String Locator-Plugin verwenden, um alle Ihre Schriftartdateien zu finden und zu \u00e4ndern.  Sie m\u00fcssen das Schriftarten-Stylesheet in WP \u00f6ffnen und \u00e4ndern.<\/p>\n
Alternativ k\u00f6nnen Sie Caching-Plugins verwenden, beispielsweise eines, das Schriftarten automatisch optimiert, indem es die Eigenschaft \u201eSchriftartfreigabe\u201c hinzuf\u00fcgt.<\/p>\n
Schriftarten vorladen<\/h3>\n
Um sicherzustellen, dass Sie Schriftarten lokal hosten, k\u00f6nnen Sie Ihre Schriftarten mit Plugins wie den folgenden vorab laden:<\/p>\n
Wenn Sie es sich nicht leisten k\u00f6nnen, diese Plugins zu verwenden, k\u00f6nnen Sie Ihre Schriftarten vorab laden, indem Sie Ihre Datei header.php bearbeiten.  Testen Sie Ihre Website unbedingt gr\u00fcndlich, nachdem Sie die Schriftarten vorab geladen haben.  Das Vorabladen zu vieler Schriftarten kann Ihre Website besch\u00e4digen.  Daher empfehlen wir Ihnen, wie bei jeder gr\u00f6\u00dferen Backend-M\u00f6glichkeit, vorher ein Backup Ihrer WordPress-Site zu erstellen.<\/p>\n
Deaktivieren Sie die CSS-Bereitstellungsoptimierung<\/h3>\n
Wenn Sie WP Rocket verwenden, um die CSS-Bereitstellung zu optimieren oder CSS asynchron mit LiteSpeed \u200b\u200b\u200b\u200bCache zu laden, kann es zu Flash of Unstyled Content (FOUC) kommen.  Wenn Sie Ihren CLS-Score verbessern m\u00f6chten, empfehlen wir Ihnen, diese Optionen in den jeweiligen Plugins zu deaktivieren.<\/p>\n
Alternativ k\u00f6nnen Sie sogenanntes Critical Fallback CSS einrichten.  Dazu geh\u00f6rt die Erstellung eines kritischen Backup-Skripts mit einem Tool wie dem Critical Path CSS Generator.<\/p>\n
Auch das Entfernen von Verarbeitungsblockierungsskripten kann Ihren CLS-Score senken.  Wir empfehlen Ihnen, Ihr CLS zun\u00e4chst mit aktivierter CSS-Auslieferungsoptimierung zu testen und es dann zum Vergleich zu testen, wenn Sie es deaktiviert haben.<\/p>\n
Animationen deaktivieren<\/h3>\n
Wenn Sie Animationen verwenden, empfehlen wir Ihnen, diese f\u00fcr die mobile Version Ihrer Website zu deaktivieren, da Animationen die Ladezeiten Ihrer Website verlangsamen k\u00f6nnen.  Wenn Sie auf Animationen f\u00fcr Ihre Website bestehen, empfehlen wir Ihnen, die CSS-Transformations- und \u00dcbersetzungsoptionen zu verwenden.<\/p>\n
Alternativ k\u00f6nnen Sie das Happy Addons Elementor-Plugin verwenden.  Dadurch k\u00f6nnen Sie Elemente animieren, ohne dass es zu Layout\u00e4nderungen kommt.<\/p>\n
Der beste Weg, die meisten Design\u00e4nderungen zu vermeiden, besteht darin, die Art und Weise zu \u00e4ndern, wie Ihre Webseite geladen wird.  Im Gegenzug k\u00f6nnen 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.<\/p>\n   ","protected":false},"excerpt":{"rendered":"
Die meisten Websites sind so konzipiert, dass sie von mehreren Ger\u00e4ten mit unterschiedlichen Bildschirmgr\u00f6\u00dfen und Aufl\u00f6sungen aus aufgerufen werden k\u00f6nnen. Daher kann es schwierig sein, das gleiche Erlebnis auf mehreren Plattformen aufrechtzuerhalten. WordPress macht plattform\u00fcbergreifendes Webdesign einfach. Allerdings kann es bei jeder Form der Softwareentwicklung schwierig sein, eine einheitliche L\u00f6sung zu erstellen. Bei der Webentwicklung […]<\/p>\n","protected":false},"author":1,"featured_media":849156,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/9.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/849155"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=849155"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/849155\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/849156"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=849155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=849155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=849155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}