Was ist Cumulative Layout Shift (CLS)? Erkl\u00e4rung der Bedeutung von Cumulative Layout Shift<\/h2>\n
Die kumulative Layoutverschiebung ist das Ma\u00df daf\u00fcr, wie stark sich eine Seite auf deiner Website w\u00e4hrend des Besuchs eines Nutzers unerwartet verschiebt. Dies wird von der Layout Instability API<\/a> gemessen, einer standardisierten API f\u00fcr Leistungstests<\/a>.<\/p>\n Cumulative Layout Shift (CLS) ist neben Largest Contentful Paint (LCP) und First Input Delay (FID) eine der drei Metriken in Googles Core Web Vitals Initiative<\/a>.<\/p>\n Um die Bedeutung der kumulativen Layoutverschiebung zu verstehen, ist es wichtig, die Layoutverschiebung im Allgemeinen zu erl\u00e4utern.<\/p>\n Eine Layoutverschiebung tritt auf, wenn sich Inhalte auf deiner Website unerwartet „bewegen“ oder „verschieben“.<\/p>\n Oder, technisch ausgedr\u00fcckt, wenn ein Element, das im Viewport sichtbar ist, seine Startposition zwischen zwei Frames \u00e4ndert.<\/p>\n Ein g\u00e4ngiges Beispiel: Du bist gerade dabei, einen Textblock zu lesen… aber dann erscheint pl\u00f6tzlich eine Anzeige, die zu sp\u00e4t geladen wird und den Textinhalt nach unten verschiebt.<\/p>\n Hier ist ein weiteres Beispielbild von Google, das diesen Vorgang verdeutlicht:<\/p>\n Wenn du im Internet unterwegs bist, bist du bestimmt schon einmal auf Layoutverschiebungen gesto\u00dfen, auch wenn du sie nicht unter diesem Namen kennst.<\/p>\n Bei einem einzigen Besuch kann es zu mehreren separaten Layout-Verschiebungen kommen. Die Metrik Kumulative Layoutverschiebung zielt daher darauf ab, das gesamte Bild zu erfassen, indem sie die Gesamtzahl der unerwarteten Layoutverschiebungen auf einer Seite* misst.<\/p>\n *Die genaue Messung ist nach einigen \u00c4nderungen von Google etwas technischer geworden, aber das ist immer noch die Grundidee. Wenn du dich f\u00fcr die genauen Details interessierst, kannst du <\/em>hier dar\u00fcber lesen<\/em><\/a>.<\/em><\/p>\n\n Der Hauptgrund, warum Cumulative Layout Shift schlecht ist, ist, dass es ein schlechtes Nutzererlebnis auf deiner Website schafft<\/a>.<\/p>\n Im besten Fall ist es f\u00fcr deine Besucher leicht l\u00e4stig. Im schlimmsten Fall kann es dazu f\u00fchren, dass Besucher\/innen Aktionen ausf\u00fchren, die sie gar nicht wollen.<\/p>\n Stell dir zum Beispiel vor, dass ein Besucher auf „Abbrechen“ klicken m\u00f6chte, aber versehentlich auf „Best\u00e4tigen“ klickt, weil sich die Position der Schaltfl\u00e4chen durch eine Layoutverschiebung verschoben hat, als er gerade geklickt hat.<\/p>\n Abgesehen von der Beeintr\u00e4chtigung der Erfahrungen deiner Besucher\/innen k\u00f6nnen schlechte Werte f\u00fcr die kumulative Layoutverschiebung auch die Platzierung deiner Website in den Suchmaschinen<\/a> beeintr\u00e4chtigen.<\/p>\n Seit dem Google Page Experience Update<\/a> (das im August 2021 abgeschlossen wurde) verwendet Google Core Web Vitals als einen seiner SEO-Rankingfaktoren. Da die kumulative Layoutverschiebung Teil der Core Web Vitals ist, kann sie die Suchleistung deiner Website beeinflussen<\/a>.<\/p>\n Wenn du alle Probleme mit der kumulativen Layoutverschiebung auf deiner Website behebst, wird sie sowohl f\u00fcr menschliche Besucher als auch f\u00fcr Suchmaschinen besser sein.<\/p>\n Was k\u00f6nnte also die Ursache f\u00fcr die kumulative Layoutverschiebung sein? Darauf gehen wir als N\u00e4chstes ein..<\/p>\n Hier ist ein kurzer \u00dcberblick \u00fcber die h\u00e4ufigsten Ursachen f\u00fcr Layoutverschiebungen:<\/p>\n Sp\u00e4ter in diesem Beitrag gehen wir ausf\u00fchrlicher auf diese Probleme ein und zeigen dir, wie du sie beheben kannst.<\/p>\n Es gibt eine Reihe von Tools, mit denen du das Ergebnis der kumulativen Layoutverschiebung deiner Website testen kannst.<\/p>\n Die kumulative Layoutverschiebung ist Teil des Lighthouse-Audits, so dass jedes Speedtest-Tool, das Lighthouse als Teil seines Audits nutzt, CLS-Daten enth\u00e4lt – dazu geh\u00f6ren PageSpeed Insights<\/a>, GTmetrix<\/a>, Chrome Developer Tools und viele andere beliebte Test-Tools<\/a>.<\/p>\n Hier sind einige der wichtigsten Cumulative Layout Shift Test-Tools, die sich durch ihre N\u00fctzlichkeit auszeichnen..<\/p>\n PageSpeed Insights<\/a> ist eines der n\u00fctzlichsten Tools, wenn es darum geht, den Zustand der Layoutverschiebung deiner Website zu beurteilen, weil es dir zwei Datenquellen zur Verf\u00fcgung stellt:<\/p>\n Du kannst auch Daten f\u00fcr Desktop und Mobile anzeigen, indem du zwischen den Tabs umschaltest.<\/p>\n Hinweis: <\/strong> Die Labordaten k\u00f6nnen nur Layoutverschiebungen messen, die w\u00e4hrend des Ladens der Seite auftreten. Daher k\u00f6nnen deine Ergebnisse bei echten Nutzern etwas h\u00f6her ausfallen, wenn du Layoutverschiebungen hast, die nach dem Laden der Seite auftreten.<\/p>\n Die Chrome Developer Tools bieten einige n\u00fctzliche Ressourcen<\/a>, um CLS zu messen und die einzelnen Layoutverschiebungen auf deiner Website zu beheben.<\/p>\n Zun\u00e4chst kannst du ein Lighthouse-Audit durchf\u00fchren, um den CLS-Wert deiner Website zu ermitteln. So geht’s:<\/p>\n Nach einer kurzen Wartezeit solltest du die regul\u00e4re Lighthouse-Audit-Oberfl\u00e4che sehen (die sehr \u00e4hnlich wie PageSpeed Insights aussieht).<\/p>\n In den Chrome Developer Tools kannst du mit der Rendering-Analyse<\/strong> aber auch tiefer in CLS eindringen. Damit kannst du einzelne Layout-Verschiebungsbereiche auf deiner Website hervorheben, was dir bei der Fehlersuche hilft.<\/p>\n So geht’s:<\/p>\n Lade die Seite, die du testen m\u00f6chtest, neu und Chrome sollte alle Bereiche mit Layout-Verschiebungen mit einem blauen Kasten hervorheben. Diese Hervorhebungen erscheinen auf der eigentlichen Seite, w\u00e4hrend der Inhalt geladen wird, und verschwinden, wenn die Verschiebung abgeschlossen ist.<\/p>\n Wenn die Hervorhebungen f\u00fcr dich zu schnell erscheinen, kannst du deine Seite verlangsamen und das Laden Frame f\u00fcr Frame auf der Registerkarte Leistung<\/strong> beobachten.<\/p>\n Mit der Google Search Console<\/a> kannst du zwar keine Labortests durchf\u00fchren, um die kumulative Layoutverschiebung zu bestimmen, aber sie bietet dir eine einfache M\u00f6glichkeit, Probleme mit der kumulativen Layoutverschiebung auf deiner Website zu erkennen, wie sie im Chrome UX Bericht gemessen werden.<\/p>\n Der Vorteil der Google Search Console<\/a> gegen\u00fcber anderen Tools besteht darin, dass du Probleme auf deiner gesamten Website schnell erkennen kannst, anstatt Seite f\u00fcr Seite zu testen.<\/p>\n Hier erf\u00e4hrst du, wie du m\u00f6gliche Probleme auf deiner Website erkennen kannst:<\/p>\n Falls zutreffend, hebt Google URLs<\/a> mit problematischen Cumulative Layout Shift-Werten hervor.<\/p>\n Hinweis: <\/strong> Du siehst hier nur Daten, wenn deine Website gen\u00fcgend monatlichen Traffic hat, um in den Chrome UX-Bericht aufgenommen zu werden.<\/p>\n Wie der Name schon sagt, erzeugt der Layout Shift GIF Generator<\/a> ein GIF der Layout-Verschiebungen auf deiner Website, damit du genau sehen kannst, welche Inhalte Probleme verursachen. Au\u00dferdem bekommst du deinen Score, obwohl das nicht der Hauptfokus des Tools ist.<\/p>\n Du musst nur die URL eingeben, die du testen willst, und zwischen Mobile und Desktop w\u00e4hlen. Dann wird ein GIF deiner Website erstellt, in dem die Elemente, die sich verschieben, gr\u00fcn markiert sind.<\/p>\n Wenn du siehst, welche Elemente sich verschieben und zu deiner kumulativen Layoutverschiebung beitragen, wei\u00dft du genau, worauf du dich konzentrieren musst, wenn du die Werte deiner Website verbessern willst.<\/p>\n Laut der Google-Initiative Core Web Vitals liegt ein guter Wert f\u00fcr die kumulative Layoutverschiebung bei 0,1 oder weniger<\/strong>.<\/p>\n Wenn deine kumulative Layoutverschiebung zwischen 0,1 und 0,25 liegt, definiert Google dies als „verbesserungsbed\u00fcrftig“.<\/p>\n Und wenn dein Cumulative Layout Shift-Wert \u00fcber 0,25 liegt, definiert Google ihn als „Schlecht“.<\/p>\n Hier ist eine Grafik von Googles Core Web Vitals Website, die diese Werte anschaulich darstellt:<\/p>\n Jetzt, da du wei\u00dft, was mit der kumulativen Layoutverschiebung passiert, ist es an der Zeit, einige praktische Tipps zu geben, wie du die kumulative Layoutverschiebung in WordPress beheben kannst.<\/p>\n Diese Tipps beziehen sich zwar auf WordPress, sind aber allgemeing\u00fcltig und k\u00f6nnen auch auf andere Tools zur Website-Erstellung angewendet werden.<\/p>\n Eine der h\u00e4ufigsten Ursachen f\u00fcr Layoutverschiebungen sind sp\u00e4t ladende Bilder, die den Inhalt verschieben, vor allem, wenn du Taktiken wie „Lazy Loading“<\/a> verwendest.<\/p>\n Um dies zu vermeiden, kannst du die Abmessungen eines Bildes im Code angeben, wenn du es einbettest. Auf diese Weise reserviert der Browser des Besuchers den Platz auch dann, wenn das Bild noch nicht geladen wurde, sodass das Bild den Inhalt nicht verschieben muss.<\/p>\n Wenn du Bilder \u00fcber den WordPress-Editor einbettest (entweder den Gutenberg-Blockeditor<\/a> oder den klassischen TinyMCE-Editor<\/a>), musst du die Abmessungen des Bildes nicht manuell angeben, da WordPress dies automatisch f\u00fcr dich erledigt.<\/p>\n Das Gleiche gilt f\u00fcr beliebte Page-Builder-Plugins<\/a> wie Elementor, Divi<\/a>, Beaver Builder und so weiter.<\/p>\n Allerdings kann es zu Problemen kommen, wenn du Bilder manuell mit deinem eigenen Code einbettest, z. B. wenn du Inhalte zu einem Plugin hinzuf\u00fcgst oder die Template-Dateien deines Child-Themes<\/a> bearbeitest.<\/p>\n Der HTML-Code f\u00fcr eine einfache Bildeinbettung sieht wie folgt aus:<\/p>\n Um die Abmessungen des Bildes festzulegen, kannst du die Parameter H\u00f6he<\/strong> und Breite<\/strong> hinzuf\u00fcgen. Hier ist ein Beispiel daf\u00fcr, wie das f\u00fcr ein 600x300px gro\u00dfes Bild aussehen k\u00f6nnte:<\/p>\n Viele WordPress-Performance-Plugins<\/a> enthalten auch Funktionen, um dies zu automatisieren, wie z. B. die Funktion „Add Missing Image Dimensions<\/strong>“ in WP Rocket oder Perfmatters.<\/p>\n Genau wie bei Bildern musst du auch bei Videos, iframes und anderen Einbettungen die Abmessungen angeben.<\/p>\n Die meisten Einbettungstools von Websites sollten automatisch die Ma\u00dfe f\u00fcr die Einbettung angeben.<\/p>\n Wenn du dir zum Beispiel den YouTube-Einbettungscode<\/a> ansiehst, wirst du sehen, dass er Abmessungen enth\u00e4lt:<\/p>\n Das Gleiche gilt f\u00fcr viele andere Dienste.<\/p>\n Wenn dein Einbettungscode jedoch keine Angaben zu H\u00f6he und Breite enth\u00e4lt, kannst du diese Ma\u00dfe manuell in den Einbettungscode einf\u00fcgen.<\/p>\n Probleme beim Laden und Optimieren von Schriftarten k\u00f6nnen eine weitere h\u00e4ufige Ursache f\u00fcr Layoutverschiebungen sein, und zwar durch zwei m\u00f6gliche Probleme:<\/p>\n Um diese Probleme zu vermeiden, musst du das Laden von Schriftarten auf deiner Website optimieren (was sich auch positiv auf die Leistung deiner Website auswirken kann).<\/p>\n Indem du Schriften lokal hostest und vorl\u00e4dst, gibst du den Browsern deiner Besucher\/innen die Anweisung, dem Laden benutzerdefinierter Schriftdateien eine h\u00f6here Priorit\u00e4t einzur\u00e4umen.<\/p>\n Indem du die Schriftdateien vor anderen Ressourcen l\u00e4dst, kannst du sicherstellen, dass die Schriftdateien bereits geladen sind, wenn der Browser mit dem Rendern deines Inhalts beginnt, was Probleme mit FOUT und FOIT verhindern kann.<\/p>\n Wie du Schriftarten lokal in WordPress hosten kannst, erf\u00e4hrst du in unserem vollst\u00e4ndigen Leitfaden zum lokalen Hosten von Schriftarten in WordPress<\/a>.<\/p>\n Von dort aus kannst du das Vorladen von Schriften manuell oder mit einem Plugin einrichten. Die meisten Performance-Plugins enthalten Optionen zum Vorladen von Schriftarten, darunter WP Rocket, Perfmatters, Autoptimize<\/a> und andere.<\/p>\n Wenn du Google Fonts verwendest<\/a>, kannst du auch das kostenlose OMGF-Plugin<\/a> nutzen, um die Schriften lokal zu hosten und<\/em> vorzuladen.<\/p>\n Du kannst die Schriftarten auch manuell vorladen, indem du den Code in den <head>-Abschnitt<\/strong> deiner Website einf\u00fcgst.<\/p>\n Hier ist ein Beispiel f\u00fcr den Code – achte darauf, ihn durch den tats\u00e4chlichen Namen\/Speicherort der Schriftartdatei zu ersetzen, die du vorladen m\u00f6chtest:<\/p>\n Du kannst ihn direkt mit einem WordPress Child-Theme<\/a> einf\u00fcgen oder ihn mit dem wp_head-Hook<\/a> und einem Plugin wie Code Snippets<\/a> einf\u00fcgen.<\/p>\n Mit der CSS-Eigenschaft Font-Display<\/a> kannst du das Rendering-Verhalten der Schriftarten auf deiner Website steuern und FOIT vermeiden.<\/p>\n Im Wesentlichen kannst du damit eine Ausweichschrift verwenden, wenn deine eigene Schriftart noch nicht geladen wurde.<\/p>\n Es gibt zwei Hauptoptionen, mit denen du CLS umgehen kannst:<\/p>\n Mit Swap<\/strong> wechselt der Browser immer<\/strong> zur benutzerdefinierten Schriftart, sobald sie geladen ist.<\/p>\n W\u00e4hrend Swap<\/strong> FOIT vollst\u00e4ndig l\u00f6st, kann es zu FOUT f\u00fchren. Um dies zu minimieren, solltest du sicherstellen, dass die Ersatzschrift die gleichen Abst\u00e4nde verwendet wie die benutzerdefinierte Schrift (zumindest so weit wie m\u00f6glich). Selbst wenn sich die Schriftart \u00e4ndert, f\u00fchrt dies nicht zu Layoutverschiebungen, da die Abst\u00e4nde gleich bleiben.<\/p>\n Mit Optional<\/strong> gibt der Browser der benutzerdefinierten Schriftart 100 ms Zeit zum Laden. Wenn die benutzerdefinierte Schriftart zu diesem Zeitpunkt jedoch noch nicht verf\u00fcgbar ist, bleibt der Browser bei der Fallback-Schriftart und \u00e4ndert sie f\u00fcr diesen Seitenaufruf nicht in die benutzerdefinierte Schriftart um (er verwendet die benutzerdefinierte Schriftart f\u00fcr nachfolgende Seitenaufrufe, da die Schriftartdatei zu diesem Zeitpunkt wahrscheinlich bereits heruntergeladen und zwischengespeichert<\/em> wurde).<\/p>\n Optional<\/strong> kann sowohl FOIT als auch FOUT l\u00f6sen, hat aber den Nachteil, dass der Besucher bei seinem ersten Seitenaufruf mit der Ausweichschrift feststecken k\u00f6nnte.<\/p>\n Wenn du dich im Umgang mit CSS auskennst, kannst du die Eigenschaft Font-Display im Stylesheet deines Child-Themes manuell bearbeiten.<\/p>\n Wenn du dich damit nicht wohl f\u00fchlst, kannst du auch einige Plugins finden, die dir dabei helfen:<\/p>\n Wenn du Elementor verwendest<\/a>, enth\u00e4lt Elementor auch eine integrierte Option, um dies zu tun. Gehe zu Elementor \u2192 Einstellungen \u2192 Erweitert<\/strong>. Dort kannst du das Dropdown-Men\u00fc f\u00fcr das Laden von Google Fonts<\/strong> je nach deinen Vorlieben auf Swap oder Optional einstellen:<\/p>\n Wenn dir das ganze Gerede \u00fcber das Vorladen und die Anzeige von Schriften zu verwirrend ist, kannst du ganz einfach einen System-Schriftartenstapel anstelle eines benutzerdefinierten Schriftartenstapels verwenden.<\/p>\n Das schr\u00e4nkt zwar deine Gestaltungsm\u00f6glichkeiten ein, l\u00f6st aber die Probleme mit der kumulativen Layoutverschiebung, dem FOIT und dem FOUT vollst\u00e4ndig. Au\u00dferdem wird deine Website dadurch viel schneller geladen.<\/p>\n Wenn du dich daf\u00fcr interessierst, sieh dir Brians Anleitung zur Verwendung eines Systemschriftartenstapels in WordPress<\/a> an.<\/p>\n Wenn du Display-Anzeigen verwendest, ist es wichtig, dass du im Code deiner Website Platz f\u00fcr diese Anzeigen reservierst. Dies entspricht dem gleichen Prinzip wie das Reservieren von Platz f\u00fcr Bilder, Videos und Einbettungen.<\/p>\n Display-Anzeigen verdienen jedoch eine besondere Erw\u00e4hnung, da es sehr h\u00e4ufig vorkommt, dass Display-Anzeigen zu sp\u00e4t geladen werden, wenn du irgendeine Art von Gebotstechnologie verwendest. Das liegt daran, dass die Bietertechnologie Zeit braucht, um herauszufinden, welche Anzeige angezeigt werden soll.<\/p>\n Das kann auch bei automatischen AdSense-Anzeigen<\/a> ein Problem sein, wenn du dynamische Anzeigenpl\u00e4tze hast, denn zus\u00e4tzlich zum Gebotsproblem l\u00e4dt AdSense auch Anzeigen in verschiedenen Gr\u00f6\u00dfen<\/a> (du kennst also die Gr\u00f6\u00dfe der Anzeige nicht im Voraus).<\/p>\n Wenn du eines der beliebten Display-Anzeigen-Netzwerke<\/a> wie Mediavine oder AdThrive nutzt, sollten diese bereits Tools anbieten, die dir helfen, Layout-Verschiebungen bei deinen Anzeigen zu vermeiden. Wenn du z.B. die Anzeigeneinstellungen<\/strong> von Mediavine \u00f6ffnest, kannst du den Schalter „Anzeigen f\u00fcr CLS optimieren<\/strong>“ aktivieren:<\/p>\n AdSense f\u00fcr Cumulative Layout Shift zu optimieren ist etwas schwieriger.<\/p>\n Eine g\u00e4ngige L\u00f6sung besteht darin, ein <div>-Wrapper-Element um jeden Anzeigenblock herum einzuf\u00fcgen, das mit der CSS-Eigenschaft min-height<\/strong><\/a> eine Mindesth\u00f6he festlegt. Du kannst auch Media-Queries verwenden, um die Mindesth\u00f6he je nach Ger\u00e4t des Nutzers zu \u00e4ndern.<\/p>\n Google empfiehlt, die Mindesth\u00f6he mit der gr\u00f6\u00dftm\u00f6glichen Anzeigengr\u00f6\u00dfe gleichzusetzen. Das kann zwar dazu f\u00fchren, dass Platz verschwendet wird, wenn eine kleinere Anzeige geschaltet wird, aber es ist die beste Option, um eine Verschiebung des Layouts zu vermeiden.<\/p>\n Achte beim Einrichten dieses Wrapper-Elements darauf, dass du eine CSS-ID und keine Klasse verwendest<\/a>, da AdSense die CSS-Klasse oft von \u00fcbergeordneten Objekten entfernt.<\/p>\n So k\u00f6nnte das CSS aussehen:<\/p>\n Und hier ist, wie die AdSense-Einbettung aussehen k\u00f6nnte:<\/p>\n Auf dem Frontend siehst du jetzt, dass deine Website Platz f\u00fcr die Anzeige reserviert, auch wenn sie leer ist:<\/p>\n Auf vielen WordPress-Websites werden dynamisch Inhalte f\u00fcr Funktionen wie Cookie-Zustimmungshinweise, verwandte Inhalte, E-Mail-Opt-in-Formulare<\/a> usw. eingef\u00fcgt.<\/p>\n Das ist zwar in Ordnung, aber du solltest darauf achten, dass sich das Layout nicht verschiebt.<\/p>\n Eine gute Best Practice f\u00fcr das Webdesign<\/a> ist es, niemals Inhalte \u00fcber<\/em> bestehenden Inhalten einzuf\u00fcgen, es sei denn, der\/die Nutzer\/in hat ausdr\u00fccklich eine Interaktion vorgenommen (z. B. auf eine Schaltfl\u00e4che geklickt).<\/p>\n Wenn du z.B. einen Hinweis auf die Cookie-Einwilligung einf\u00fcgst<\/a>, solltest du ihn nicht oben auf der Seite einf\u00fcgen, weil dadurch der Inhalt nach unten verschoben wird(es sei denn, du hast bereits Platz f\u00fcr das Cookie-Einwilligungsbanner reserviert<\/em>).<\/p>\n Stattdessen solltest du den Hinweis unten auf der Seite anzeigen, damit der sichtbare Inhalt nicht nach unten verschoben wird.<\/p>\n Um zu sehen, ob dynamische Inhalte das Problem verursachen, kannst du die oben genannten Visualisierungstools verwenden (z. B. den Layout Shift GIF Generator<\/a>).<\/p>\n Wenn du feststellst, dass Inhalte eines bestimmten Plugins Layoutverschiebungen ausl\u00f6sen, kannst du die Einstellungen dieses Plugins anpassen oder zu einem anderen Plugin wechseln.<\/p>\n Einige Plugins f\u00fcr die Cookie-Zustimmung sind zum Beispiel besser als andere, wenn es um Layout-Verschiebungen geht. Es lohnt sich also, mit verschiedenen Plugins zu experimentieren, wenn du Probleme hast.<\/p>\n Wenn du das Verhalten der Plugins noch genauer untersuchen willst, kannst du ein Tool zur \u00dcberwachung der Anwendungsleistung verwenden<\/a>. Wenn du bei Kinsta hostest, kannst du das APM-Tool von Kinsta<\/a> kostenlos in deinem MyKinsta-Dashboard<\/a> nutzen, oder du findest andere APM-Tools<\/a>.<\/p>\n Um Plugins zu testen, kannst du auch die Staging-Sites von Kinsta<\/a> oder das lokale Entwicklungstool DevKinsta<\/a> nutzen.<\/p>\n Wenn du Animationen auf deiner Website verwendest, k\u00f6nnen diese ein weiterer h\u00e4ufiger Grund f\u00fcr Layoutverschiebungen sein.<\/p>\n Um zu vermeiden, dass Animationen Layoutverschiebungen verursachen, solltest du f\u00fcr Animationen die CSS-Transform-Funktion<\/a> verwenden, anstatt andere Taktiken anzuwenden:<\/p>\n Dies ist eher ein technischer Tipp, den du wahrscheinlich nur dann anwenden musst, wenn du dein eigenes CSS hinzuf\u00fcgst. Mehr dazu erf\u00e4hrst du auf der Seite von Google \u00fcber CLS und Animationen\/\u00dcberg\u00e4nge<\/a>.<\/p>\n\n Wenn deine Website einen hohen Cumulative Layout Shift-Wert hat, ist es wichtig, dass du das Problem behebst, um ein besseres Erlebnis f\u00fcr deine Besucher zu schaffen und die Leistung deiner Website in den Google-Suchergebnissen zu optimieren.<\/p>\n Zwei der h\u00e4ufigsten Probleme sind fehlende Abmessungen f\u00fcr Bilder\/Einbettungen und Probleme beim Laden von Schriften. Sind diese behoben, bist du auf dem Weg zu einer viel besseren Bewertung.<\/p>\n Andere Websites m\u00fcssen vielleicht noch einen Schritt weiter gehen und sich mit dem Laden von Anzeigen, dynamischen Inhalten und Animationen besch\u00e4ftigen. Wenn es dir schwerf\u00e4llt, diese Optimierungen selbst vorzunehmen, kannst du mit einer WordPress-Agentur oder einem Freiberufler zusammenarbeiten<\/a>.<\/p>\n Um mehr \u00fcber Core Web Vitals im Allgemeinen zu erfahren, kannst du den vollst\u00e4ndigen Kinsta-Leitfaden zu Core Web Vitals lesen<\/a>.<\/p>\n Und wenn du einen WordPress-Hoster suchst, der dir hilft, eine leistungsstarke Website zu erstellen<\/a>, die in Core Web Vitals gut abschneidet, solltest du das Managed WordPress Hosting von Kinsta<\/a> in Betracht ziehen – wir migrieren deine WordPress-Seiten kostenlos<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":" Hast du Probleme mit der kumulativen Layout-Verschiebung auf deiner Website? Oder bist du dir nicht sicher, was „Cumulative Layout Shift“ \u00fcberhaupt bedeutet? Cumulative Layout Shift, kurz …<\/p>\n","protected":false},"author":199,"featured_media":57801,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[984,979],"class_list":["post-57800","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-benutzererfahrung","topic-seo-strategie"],"yoast_head":"\n![\"Ein](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-example-1024x749.jpg\")
Warum ist Cumulative Layout Shift schlecht?<\/h2>\n
Was verursacht die kumulative Layoutverschiebung?<\/h2>\n
\n
Wie man die kumulative Layoutverschiebung misst: Die besten Test-Tools<\/h2>\n
PageSpeed Insights<\/h3>\n
\n
![\"Kumulative](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/pagespeed-insights-cls-1024x960.jpg\")
Chrome-Entwickler-Tools<\/h3>\n
\n
![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-1-1024x763.jpg\")
\n
![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/chrome-developer-tools-2-enable-rendering-report-1024x580.jpg\")
Google Search Console<\/h3>\n
\n
![\"Der](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-1024x696.jpg\")
![\"So](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-search-console-list-1024x982.jpg\")
Layout Shift GIF Generator<\/h3>\n
![\"Das](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/layout-shift-gif-generator-1024x724.jpg\")
Was ist ein guter Cumulative Layout Score?<\/h2>\n
![\"Googles](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/cumulative-layout-shift-scores-1024x252.jpg\")
Wie du die kumulative Layoutverschiebung in WordPress (oder anderen Plattformen) behebst<\/h2>\n
Gib immer die Abmessungen f\u00fcr Bilder an<\/h3>\n
<img src=\"https:\/\/kinqsta.com\/example-image.jpg\" alt=\"An example image\"><\/code><\/p>\n<img src=\"https:\/\/kinqsta.com\/example-image.jpg\" alt=\"An example image\" width=\"600\" height=\"300\"<\/strong>><\/code><\/p>\nGib immer die Abmessungen f\u00fcr Videos, iframes und andere Einbettungen an<\/h3>\n
![\"Ein](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/youtube-embed-code-1024x605.jpg\")
Beheben und Optimieren des Ladens von Schriften<\/h3>\n
\n
Schriftarten lokal hosten und vorladen<\/h4>\n
<link rel=\"preload\" href=\"https:\/\/kinqsta.com\/fonts\/roboto.woff2\" as=\"font\/woff2\" crossorigin><\/code><\/p>\nFont-Display auf Optional oder Swap setzen<\/h4>\n
\n
\n
![\"Die](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/elementor-font-display-1024x796.jpg\")
Zu kompliziert? Erw\u00e4ge einen System Font Stack!<\/h4>\n
Reserviere Platz f\u00fcr Anzeigen (wenn du Display Ads verwendest)<\/h3>\n
![\"Mediavine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/optimize-mediavine-ads-cls-1024x597.jpg\")
![\"Ein](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-1024x775.jpg\")
![\"Verpacke](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-embed-code-1024x703.jpg\")
![\"Deine](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2022\/12\/reserve-space-for-adsense-frontend-example-1024x611.jpg\")
Sei smart, wenn du Inhalte mit Plugins dynamisch einf\u00fcgst<\/h3>\n
Verwende die CSS Transform-Eigenschaft f\u00fcr Animationen, wann immer es m\u00f6glich ist<\/h3>\n
\n
Zusammenfassung<\/h2>\n