Der Cumulative Layout Shift (CLS) ist ein wichtiger Indikator für Web-Vitals und bewertet, inwieweit eine Webseite ihre visuelle Konsistenz beibehält. Die Anzahl unerwarteter Layoutänderungen ohne Interaktion des Nutzers mit der Webseite bestimmt den Grad der visuellen Stabilität. Jede Änderung des Seiteninhalts wird als Layoutänderung gewertet, selbst wenn diese nicht durch einen Klick auf einen Link oder Ähnliches verursacht wurde.
Die Gesamtpunktzahl für die kumulative Layoutverschiebung wird durch Addition aller dieser Verschiebungen ermittelt.
Was ist eine kumulative Layoutverschiebung?
Verzögerungen beim Laden von Fotos sind die am häufigsten gemeldete Fehlermeldung von CLS- Nutzern. Üblicherweise wird der Text vor den Medienelementen geladen. Außerdem ändert sich die Seitenstruktur, nachdem alle grafischen Komponenten vollständig geladen wurden. Diese Probleme treten unabhängig vom Scrollverhalten auf.
Selbst bei einer Webseite mit hohem CLS-Wert ist es unter Umständen schwer zu erkennen, wann der Ladevorgang abgeschlossen ist. Die Komplexität der Webseite und die Menge an Medieninhalten erhöhen die Wahrscheinlichkeit, dass Nutzer Layoutänderungen bemerken.
Reduzierung der kumulativen Layoutverschiebung in WordPress?
Die Verwendung des Google Web Vitals CLS-Debuggers ist die effektivste Methode, um die Komponenten zu ermitteln, die für den hohen CLS-Wert Ihrer Website verantwortlich sind. Er zeigt Ihnen eine GIF-Animation, die alle relevanten Elemente Ihrer Website visualisiert. Hohe CLS-Werte lassen sich meist auf Werbung und Medieninhalte zurückführen. Um Ihren CLS-Wert zu verbessern, müssen Sie jede Komponente optimieren.
Zu diesem Zweck können folgende Methoden zur Verbesserung des CLS-Scores Ihrer Website eingesetzt werden:
1. Fügen Sie allen Mediendateien Dimensionsattribute hinzu
Da Ihr Webbrowser nach dem Laden die Größe und Ausrichtung Ihres Bildes ermitteln muss, kann es bei Mediendateien mit unbekannten Attributen zu Layoutverschiebungen kommen. Große Fotos und hochauflösende Dateien sind davon stärker betroffen als kleinere. Bilder im WordPress-Medieneditor skalieren.
2. Stellen Sie sicher, dass die Schriftarten lokal geladen sind
Während des Ladens der Schriftart muss der Text sichtbar bleiben. Um dies zu erreichen, muss daher zunächst sichergestellt werden, dass die Schriftarten lokal geladen und nicht von Websites mit externen Schriftarten-Hostern abgerufen werden.
3. Vermeiden Sie FOIT und FOUT
Das des kurzzeitig aufblitzenden unsichtbaren Textes (FOIT) tritt auf, wenn keine Ausweichschriftart angegeben ist. Dadurch sehen Nutzer einen leeren Bereich an der Stelle, wo normalerweise der Text stehen würde, während der Browser versucht, die Schriftart zu laden oder eine Alternative zu finden.
Während einer sogenannten „Flash of Unstyled Text“-Phase (FOUT) verwendet Ihr Webbrowser seine Standard-Fallback-Schriftart, bis die von Ihnen ausgewählte Schriftart geladen werden kann. Um dies zu beheben, können Sie das Attribut `font-display: switch` hinzufügen.
Weitere Artikel wie diesen finden Sie im Seahawk Media Blog.
