Hast du Probleme mit der kumulativen Layout-Verschiebung auf deiner Website? Oder bist du dir nicht sicher, was „Cumulative Layout Shift“ überhaupt bedeutet?
Cumulative Layout Shift, kurz CLS, ist eine Kennzahl, die Teil der Core Web Vitals Initiative von Google ist.
Kurz gesagt misst sie, wie viel des Inhalts einer Webseite sich „unerwartet“ verschiebt. Ein hoher CLS-Wert kann auf ein schlechtes Nutzererlebnis hindeuten und sich auch negativ auf die Suchmaschinenoptimierung deiner Website auswirken.
In diesem Beitrag erfährst du alles, was du über Cumulative Layout Shift wissen musst und wie es sich auf WordPress-Websites (und das Internet im Allgemeinen) auswirkt.
Was ist Cumulative Layout Shift (CLS)? Erklärung der Bedeutung von Cumulative Layout Shift
Die kumulative Layoutverschiebung ist das Maß dafür, wie stark sich eine Seite auf deiner Website während des Besuchs eines Nutzers unerwartet verschiebt. Dies wird von der Layout Instability API gemessen, einer standardisierten API für Leistungstests.
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.
Um die Bedeutung der kumulativen Layoutverschiebung zu verstehen, ist es wichtig, die Layoutverschiebung im Allgemeinen zu erläutern.
Eine Layoutverschiebung tritt auf, wenn sich Inhalte auf deiner Website unerwartet „bewegen“ oder „verschieben“.
Oder, technisch ausgedrückt, wenn ein Element, das im Viewport sichtbar ist, seine Startposition zwischen zwei Frames ändert.
Ein gängiges Beispiel: Du bist gerade dabei, einen Textblock zu lesen… aber dann erscheint plötzlich eine Anzeige, die zu spät geladen wird und den Textinhalt nach unten verschiebt.
Hier ist ein weiteres Beispielbild von Google, das diesen Vorgang verdeutlicht:
Wenn du im Internet unterwegs bist, bist du bestimmt schon einmal auf Layoutverschiebungen gestoßen, auch wenn du sie nicht unter diesem Namen kennst.
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.
*Die genaue Messung ist nach einigen Änderungen von Google etwas technischer geworden, aber das ist immer noch die Grundidee. Wenn du dich für die genauen Details interessierst, kannst du hier darüber lesen.
Warum ist Cumulative Layout Shift schlecht?
Der Hauptgrund, warum Cumulative Layout Shift schlecht ist, ist, dass es ein schlechtes Nutzererlebnis auf deiner Website schafft.
Im besten Fall ist es für deine Besucher leicht lästig. Im schlimmsten Fall kann es dazu führen, dass Besucher/innen Aktionen ausführen, die sie gar nicht wollen.
Stell dir zum Beispiel vor, dass ein Besucher auf „Abbrechen“ klicken möchte, aber versehentlich auf „Bestätigen“ klickt, weil sich die Position der Schaltflächen durch eine Layoutverschiebung verschoben hat, als er gerade geklickt hat.
Abgesehen von der Beeinträchtigung der Erfahrungen deiner Besucher/innen können schlechte Werte für die kumulative Layoutverschiebung auch die Platzierung deiner Website in den Suchmaschinen beeinträchtigen.
Seit dem Google Page Experience Update (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.
Wenn du alle Probleme mit der kumulativen Layoutverschiebung auf deiner Website behebst, wird sie sowohl für menschliche Besucher als auch für Suchmaschinen besser sein.
Was könnte also die Ursache für die kumulative Layoutverschiebung sein? Darauf gehen wir als Nächstes ein..
Was verursacht die kumulative Layoutverschiebung?
Hier ist ein kurzer Überblick über die häufigsten Ursachen für Layoutverschiebungen:
- Die Abmessungen für Bilder, Iframes, Videos oder andere Einbettungen wurden nicht festgelegt.
- Probleme beim Laden von benutzerdefinierten Schriftarten, die dazu führen können, dass der Text unsichtbar ist oder seine Größe verändert, wenn benutzerdefinierte Schriftarten geladen werden.
- Das Schalten von responsiven Anzeigen (z. B. AdSense) mit unterschiedlichen Größen (und das Nichtreservieren von Platz für diese Anzeigen).
- Dynamisches Einfügen von Inhalten mit Plugins (Cookie-Einverständniserklärungen, Formulare zur Lead-Generierung usw.).
- Verwendung von Animationen ohne die CSS-Eigenschaft Transform.
Später in diesem Beitrag gehen wir ausführlicher auf diese Probleme ein und zeigen dir, wie du sie beheben kannst.
Wie man die kumulative Layoutverschiebung misst: Die besten Test-Tools
Es gibt eine Reihe von Tools, mit denen du das Ergebnis der kumulativen Layoutverschiebung deiner Website testen kannst.
Die kumulative Layoutverschiebung ist Teil des Lighthouse-Audits, so dass jedes Speedtest-Tool, das Lighthouse als Teil seines Audits nutzt, CLS-Daten enthält – dazu gehören PageSpeed Insights, GTmetrix, Chrome Developer Tools und viele andere beliebte Test-Tools.
Hier sind einige der wichtigsten Cumulative Layout Shift Test-Tools, die sich durch ihre Nützlichkeit auszeichnen..
PageSpeed Insights
PageSpeed Insights ist eines der nützlichsten Tools, wenn es darum geht, den Zustand der Layoutverschiebung deiner Website zu beurteilen, weil es dir zwei Datenquellen zur Verfügung stellt:
- Felddaten – echte Nutzerdaten aus dem Chrome UX-Bericht (vorausgesetzt, deine Website hat genug Traffic, um in den Bericht aufgenommen zu werden). So kannst du die tatsächlichen Daten der kumulativen Layoutverschiebung für deine echten Besucher sehen. Das sind auch die Daten, die Google als Ranking-Signal verwendet.
- Labordaten – simulierte Testdaten, die von Lighthouse gesammelt werden (und die PageSpeed Insights verwendet, um seine Leistungsanalyseberichte zu erstellen).
Du kannst auch Daten für Desktop und Mobile anzeigen, indem du zwischen den Tabs umschaltest.
Hinweis: Die Labordaten können nur Layoutverschiebungen messen, die während des Ladens der Seite auftreten. Daher können deine Ergebnisse bei echten Nutzern etwas höher ausfallen, wenn du Layoutverschiebungen hast, die nach dem Laden der Seite auftreten.
Chrome-Entwickler-Tools
Die Chrome Developer Tools bieten einige nützliche Ressourcen, um CLS zu messen und die einzelnen Layoutverschiebungen auf deiner Website zu beheben.
Zunächst kannst du ein Lighthouse-Audit durchführen, um den CLS-Wert deiner Website zu ermitteln. So geht’s:
- Öffne die Chrome-Entwicklerwerkzeuge.
- Gehe auf die Registerkarte Lighthouse.
- Konfiguriere deinen Test.
- Klicke auf die Schaltfläche Seitenlast analysieren, um den Test auszuführen.
Nach einer kurzen Wartezeit solltest du die reguläre Lighthouse-Audit-Oberfläche sehen (die sehr ähnlich wie PageSpeed Insights aussieht).
In den Chrome Developer Tools kannst du mit der Rendering-Analyse aber auch tiefer in CLS eindringen. Damit kannst du einzelne Layout-Verschiebungsbereiche auf deiner Website hervorheben, was dir bei der Fehlersuche hilft.
So geht’s:
- Klicke auf das „Drei-Punkte-Symbol“ in der oberen rechten Ecke der Chrome Developer Tools-Oberfläche.
- Wähle „Weitere Werkzeuge“ → „Rendering“, wodurch sich unten ein neues Fenster öffnet.
- Aktiviere das Kontrollkästchen für Layout Shift Regions.
Lade die Seite, die du testen möchtest, neu und Chrome sollte alle Bereiche mit Layout-Verschiebungen mit einem blauen Kasten hervorheben. Diese Hervorhebungen erscheinen auf der eigentlichen Seite, während der Inhalt geladen wird, und verschwinden, wenn die Verschiebung abgeschlossen ist.
Wenn die Hervorhebungen für dich zu schnell erscheinen, kannst du deine Seite verlangsamen und das Laden Frame für Frame auf der Registerkarte Leistung beobachten.
Google Search Console
Mit der Google Search Console kannst du zwar keine Labortests durchführen, um die kumulative Layoutverschiebung zu bestimmen, aber sie bietet dir eine einfache Möglichkeit, Probleme mit der kumulativen Layoutverschiebung auf deiner Website zu erkennen, wie sie im Chrome UX Bericht gemessen werden.
Der Vorteil der Google Search Console gegenüber anderen Tools besteht darin, dass du Probleme auf deiner gesamten Website schnell erkennen kannst, anstatt Seite für Seite zu testen.
Hier erfährst du, wie du mögliche Probleme auf deiner Website erkennen kannst:
- Gehe zur Google Search Console. Wenn du deine Website noch nicht verifiziert hast, kannst du unserer Anleitung zur Verifizierung der Google Search Console folgen.
- Öffne den Bericht Core Web Vitals unter Experience.
- Klicke auf Bericht öffnen neben Mobile oder Desktop, je nachdem, was du analysieren möchtest.
Falls zutreffend, hebt Google URLs mit problematischen Cumulative Layout Shift-Werten hervor.
Hinweis: Du siehst hier nur Daten, wenn deine Website genügend monatlichen Traffic hat, um in den Chrome UX-Bericht aufgenommen zu werden.
Layout Shift GIF Generator
Wie der Name schon sagt, erzeugt der Layout Shift GIF Generator ein GIF der Layout-Verschiebungen auf deiner Website, damit du genau sehen kannst, welche Inhalte Probleme verursachen. Außerdem bekommst du deinen Score, obwohl das nicht der Hauptfokus des Tools ist.
Du musst nur die URL eingeben, die du testen willst, und zwischen Mobile und Desktop wählen. Dann wird ein GIF deiner Website erstellt, in dem die Elemente, die sich verschieben, grün markiert sind.
Wenn du siehst, welche Elemente sich verschieben und zu deiner kumulativen Layoutverschiebung beitragen, weißt du genau, worauf du dich konzentrieren musst, wenn du die Werte deiner Website verbessern willst.
Was ist ein guter Cumulative Layout Score?
Laut der Google-Initiative Core Web Vitals liegt ein guter Wert für die kumulative Layoutverschiebung bei 0,1 oder weniger.
Wenn deine kumulative Layoutverschiebung zwischen 0,1 und 0,25 liegt, definiert Google dies als „verbesserungsbedürftig“.
Und wenn dein Cumulative Layout Shift-Wert über 0,25 liegt, definiert Google ihn als „Schlecht“.
Hier ist eine Grafik von Googles Core Web Vitals Website, die diese Werte anschaulich darstellt:
Wie du die kumulative Layoutverschiebung in WordPress (oder anderen Plattformen) behebst
Jetzt, da du weißt, 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.
Diese Tipps beziehen sich zwar auf WordPress, sind aber allgemeingültig und können auch auf andere Tools zur Website-Erstellung angewendet werden.
Gib immer die Abmessungen für Bilder an
Eine der häufigsten Ursachen für Layoutverschiebungen sind spät ladende Bilder, die den Inhalt verschieben, vor allem, wenn du Taktiken wie „Lazy Loading“ verwendest.
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.
Wenn du Bilder über den WordPress-Editor einbettest (entweder den Gutenberg-Blockeditor oder den klassischen TinyMCE-Editor), musst du die Abmessungen des Bildes nicht manuell angeben, da WordPress dies automatisch für dich erledigt.
Das Gleiche gilt für beliebte Page-Builder-Plugins wie Elementor, Divi, Beaver Builder und so weiter.
Allerdings kann es zu Problemen kommen, wenn du Bilder manuell mit deinem eigenen Code einbettest, z. B. wenn du Inhalte zu einem Plugin hinzufügst oder die Template-Dateien deines Child-Themes bearbeitest.
Der HTML-Code für eine einfache Bildeinbettung sieht wie folgt aus:
<img src="https://kinsta.com/example-image.jpg" alt="An example image">
Um die Abmessungen des Bildes festzulegen, kannst du die Parameter Höhe und Breite hinzufügen. Hier ist ein Beispiel dafür, wie das für ein 600x300px großes Bild aussehen könnte:
<img src="https://kinsta.com/example-image.jpg" alt="An example image" width="600" height="300">
Viele WordPress-Performance-Plugins enthalten auch Funktionen, um dies zu automatisieren, wie z. B. die Funktion „Add Missing Image Dimensions“ in WP Rocket oder Perfmatters.
Gib immer die Abmessungen für Videos, iframes und andere Einbettungen an
Genau wie bei Bildern musst du auch bei Videos, iframes und anderen Einbettungen die Abmessungen angeben.
Die meisten Einbettungstools von Websites sollten automatisch die Maße für die Einbettung angeben.
Wenn du dir zum Beispiel den YouTube-Einbettungscode ansiehst, wirst du sehen, dass er Abmessungen enthält:
Das Gleiche gilt für viele andere Dienste.
Wenn dein Einbettungscode jedoch keine Angaben zu Höhe und Breite enthält, kannst du diese Maße manuell in den Einbettungscode einfügen.
Beheben und Optimieren des Ladens von Schriften
Probleme beim Laden und Optimieren von Schriftarten können eine weitere häufige Ursache für Layoutverschiebungen sein, und zwar durch zwei mögliche Probleme:
- Flash of invisible text (FOIT) – die Seite wird zunächst geladen, ohne dass ein Textinhalt angezeigt wird. Sobald die benutzerdefinierte Schriftart geladen wird, erscheint der Text plötzlich (was dazu führen kann, dass vorhandene Inhalte verschoben werden).
- Flash of unstyled text (FOUT) – der Textinhalt wird mit einer Systemschriftart (ungestylt) geladen. Sobald die benutzerdefinierte Schriftart geladen wird, ändert sich der Text in diese benutzerdefinierte Schriftart, was dazu führen kann, dass sich der Inhalt verschiebt, weil die Textgröße und die Abstände unterschiedlich sein können.
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).
Schriftarten lokal hosten und vorladen
Indem du Schriften lokal hostest und vorlädst, gibst du den Browsern deiner Besucher/innen die Anweisung, dem Laden benutzerdefinierter Schriftdateien eine höhere Priorität einzuräumen.
Indem du die Schriftdateien vor anderen Ressourcen lädst, 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.
Wie du Schriftarten lokal in WordPress hosten kannst, erfährst du in unserem vollständigen Leitfaden zum lokalen Hosten von Schriftarten in WordPress.
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 und andere.
Wenn du Google Fonts verwendest, kannst du auch das kostenlose OMGF-Plugin nutzen, um die Schriften lokal zu hosten und vorzuladen.
Du kannst die Schriftarten auch manuell vorladen, indem du den Code in den <head>-Abschnitt deiner Website einfügst.
Hier ist ein Beispiel für den Code – achte darauf, ihn durch den tatsächlichen Namen/Speicherort der Schriftartdatei zu ersetzen, die du vorladen möchtest:
<link rel="preload" href="https://kinsta.com/fonts/roboto.woff2" as="font/woff2" crossorigin>
Du kannst ihn direkt mit einem WordPress Child-Theme einfügen oder ihn mit dem wp_head-Hook und einem Plugin wie Code Snippets einfügen.
Font-Display auf Optional oder Swap setzen
Mit der CSS-Eigenschaft Font-Display kannst du das Rendering-Verhalten der Schriftarten auf deiner Website steuern und FOIT vermeiden.
Im Wesentlichen kannst du damit eine Ausweichschrift verwenden, wenn deine eigene Schriftart noch nicht geladen wurde.
Es gibt zwei Hauptoptionen, mit denen du CLS umgehen kannst:
- Swap – verwendet eine Ausweichschrift, während die benutzerdefinierte Schriftart geladen wird, und wechselt dann zu deiner benutzerdefinierten Schriftart, sobald diese geladen ist.
- Optional – lässt den Browser je nach Verbindungsgeschwindigkeit des Besuchers entscheiden, ob eine benutzerdefinierte Schriftart verwendet werden soll oder nicht.
Mit Swap wechselt der Browser immer zur benutzerdefinierten Schriftart, sobald sie geladen ist.
Während Swap FOIT vollständig löst, kann es zu FOUT führen. Um dies zu minimieren, solltest du sicherstellen, dass die Ersatzschrift die gleichen Abstände verwendet wie die benutzerdefinierte Schrift (zumindest so weit wie möglich). Selbst wenn sich die Schriftart ändert, führt dies nicht zu Layoutverschiebungen, da die Abstände gleich bleiben.
Mit Optional gibt der Browser der benutzerdefinierten Schriftart 100 ms Zeit zum Laden. Wenn die benutzerdefinierte Schriftart zu diesem Zeitpunkt jedoch noch nicht verfügbar ist, bleibt der Browser bei der Fallback-Schriftart und ändert sie für diesen Seitenaufruf nicht in die benutzerdefinierte Schriftart um (er verwendet die benutzerdefinierte Schriftart für nachfolgende Seitenaufrufe, da die Schriftartdatei zu diesem Zeitpunkt wahrscheinlich bereits heruntergeladen und zwischengespeichert wurde).
Optional kann sowohl FOIT als auch FOUT lösen, hat aber den Nachteil, dass der Besucher bei seinem ersten Seitenaufruf mit der Ausweichschrift feststecken könnte.
Wenn du dich im Umgang mit CSS auskennst, kannst du die Eigenschaft Font-Display im Stylesheet deines Child-Themes manuell bearbeiten.
Wenn du dich damit nicht wohl fühlst, kannst du auch einige Plugins finden, die dir dabei helfen:
- Swap Google Fonts Display – aktiviert einfach den Font-Display Swap für Google Fonts.
- Asset CleanUp – unterstützt kostenlose Google Fonts und benutzerdefinierte lokale Schriftarten in der Pro-Version.
- Perfmatters – bietet eine Funktion für Google Fonts.
Wenn du Elementor verwendest, enthält Elementor auch eine integrierte Option, um dies zu tun. Gehe zu Elementor → Einstellungen → Erweitert. Dort kannst du das Dropdown-Menü für das Laden von Google Fonts je nach deinen Vorlieben auf Swap oder Optional einstellen:
Zu kompliziert? Erwäge einen System Font Stack!
Wenn dir das ganze Gerede über das Vorladen und die Anzeige von Schriften zu verwirrend ist, kannst du ganz einfach einen System-Schriftartenstapel anstelle eines benutzerdefinierten Schriftartenstapels verwenden.
Das schränkt zwar deine Gestaltungsmöglichkeiten ein, löst aber die Probleme mit der kumulativen Layoutverschiebung, dem FOIT und dem FOUT vollständig. Außerdem wird deine Website dadurch viel schneller geladen.
Wenn du dich dafür interessierst, sieh dir Brians Anleitung zur Verwendung eines Systemschriftartenstapels in WordPress an.
Reserviere Platz für Anzeigen (wenn du Display Ads verwendest)
Wenn du Display-Anzeigen verwendest, ist es wichtig, dass du im Code deiner Website Platz für diese Anzeigen reservierst. Dies entspricht dem gleichen Prinzip wie das Reservieren von Platz für Bilder, Videos und Einbettungen.
Display-Anzeigen verdienen jedoch eine besondere Erwähnung, da es sehr häufig vorkommt, dass Display-Anzeigen zu spät geladen werden, wenn du irgendeine Art von Gebotstechnologie verwendest. Das liegt daran, dass die Bietertechnologie Zeit braucht, um herauszufinden, welche Anzeige angezeigt werden soll.
Das kann auch bei automatischen AdSense-Anzeigen ein Problem sein, wenn du dynamische Anzeigenplätze hast, denn zusätzlich zum Gebotsproblem lädt AdSense auch Anzeigen in verschiedenen Größen (du kennst also die Größe der Anzeige nicht im Voraus).
Wenn du eines der beliebten Display-Anzeigen-Netzwerke 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 von Mediavine öffnest, kannst du den Schalter „Anzeigen für CLS optimieren“ aktivieren:
AdSense für Cumulative Layout Shift zu optimieren ist etwas schwieriger.
Eine gängige Lösung besteht darin, ein <div>-Wrapper-Element um jeden Anzeigenblock herum einzufügen, das mit der CSS-Eigenschaft min-height eine Mindesthöhe festlegt. Du kannst auch Media-Queries verwenden, um die Mindesthöhe je nach Gerät des Nutzers zu ändern.
Google empfiehlt, die Mindesthöhe mit der größtmöglichen Anzeigengröße gleichzusetzen. Das kann zwar dazu führen, dass Platz verschwendet wird, wenn eine kleinere Anzeige geschaltet wird, aber es ist die beste Option, um eine Verschiebung des Layouts zu vermeiden.
Achte beim Einrichten dieses Wrapper-Elements darauf, dass du eine CSS-ID und keine Klasse verwendest, da AdSense die CSS-Klasse oft von übergeordneten Objekten entfernt.
So könnte das CSS aussehen:
Und hier ist, wie die AdSense-Einbettung aussehen könnte:
Auf dem Frontend siehst du jetzt, dass deine Website Platz für die Anzeige reserviert, auch wenn sie leer ist:
Sei smart, wenn du Inhalte mit Plugins dynamisch einfügst
Auf vielen WordPress-Websites werden dynamisch Inhalte für Funktionen wie Cookie-Zustimmungshinweise, verwandte Inhalte, E-Mail-Opt-in-Formulare usw. eingefügt.
Das ist zwar in Ordnung, aber du solltest darauf achten, dass sich das Layout nicht verschiebt.
Eine gute Best Practice für das Webdesign ist es, niemals Inhalte über bestehenden Inhalten einzufügen, es sei denn, der/die Nutzer/in hat ausdrücklich eine Interaktion vorgenommen (z. B. auf eine Schaltfläche geklickt).
Wenn du z.B. einen Hinweis auf die Cookie-Einwilligung einfügst, solltest du ihn nicht oben auf der Seite einfügen, weil dadurch der Inhalt nach unten verschoben wird(es sei denn, du hast bereits Platz für das Cookie-Einwilligungsbanner reserviert).
Stattdessen solltest du den Hinweis unten auf der Seite anzeigen, damit der sichtbare Inhalt nicht nach unten verschoben wird.
Um zu sehen, ob dynamische Inhalte das Problem verursachen, kannst du die oben genannten Visualisierungstools verwenden (z. B. den Layout Shift GIF Generator).
Wenn du feststellst, dass Inhalte eines bestimmten Plugins Layoutverschiebungen auslösen, kannst du die Einstellungen dieses Plugins anpassen oder zu einem anderen Plugin wechseln.
Einige Plugins für 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.
Wenn du das Verhalten der Plugins noch genauer untersuchen willst, kannst du ein Tool zur Überwachung der Anwendungsleistung verwenden. Wenn du bei Kinsta hostest, kannst du das APM-Tool von Kinsta kostenlos in deinem MyKinsta-Dashboard nutzen, oder du findest andere APM-Tools.
Um Plugins zu testen, kannst du auch die Staging-Sites von Kinsta oder das lokale Entwicklungstool DevKinsta nutzen.
Verwende die CSS Transform-Eigenschaft für Animationen, wann immer es möglich ist
Wenn du Animationen auf deiner Website verwendest, können diese ein weiterer häufiger Grund für Layoutverschiebungen sein.
Um zu vermeiden, dass Animationen Layoutverschiebungen verursachen, solltest du für Animationen die CSS-Transform-Funktion verwenden, anstatt andere Taktiken anzuwenden:
- Anstatt die Eigenschaften Höhe und Breite zu verwenden, verwende transform: scale()
- Wenn du Elemente verschieben willst, verwende transform: translate() anstelle von oben, unten, rechts oder links
Dies ist eher ein technischer Tipp, den du wahrscheinlich nur dann anwenden musst, wenn du dein eigenes CSS hinzufügst. Mehr dazu erfährst du auf der Seite von Google über CLS und Animationen/Übergänge.
Zusammenfassung
Wenn deine Website einen hohen Cumulative Layout Shift-Wert hat, ist es wichtig, dass du das Problem behebst, um ein besseres Erlebnis für deine Besucher zu schaffen und die Leistung deiner Website in den Google-Suchergebnissen zu optimieren.
Zwei der häufigsten Probleme sind fehlende Abmessungen für Bilder/Einbettungen und Probleme beim Laden von Schriften. Sind diese behoben, bist du auf dem Weg zu einer viel besseren Bewertung.
Andere Websites müssen vielleicht noch einen Schritt weiter gehen und sich mit dem Laden von Anzeigen, dynamischen Inhalten und Animationen beschäftigen. Wenn es dir schwerfällt, diese Optimierungen selbst vorzunehmen, kannst du mit einer WordPress-Agentur oder einem Freiberufler zusammenarbeiten.
Um mehr über Core Web Vitals im Allgemeinen zu erfahren, kannst du den vollständigen Kinsta-Leitfaden zu Core Web Vitals lesen.
Und wenn du einen WordPress-Hoster suchst, der dir hilft, eine leistungsstarke Website zu erstellen, die in Core Web Vitals gut abschneidet, solltest du das Managed WordPress Hosting von Kinsta in Betracht ziehen – wir migrieren deine WordPress-Seiten kostenlos!
Schreibe einen Kommentar