Test zum Cumulative Layout Shift (CLS)
Der Cumulative-Layout-Shift-Test von SEOptimer zeigt den CLS Ihrer Seite im Vergleich zu den Schwellenwerten von Google und verwendet dabei Googles eigene Felddaten von echten Besuchern.
SEO-Audits für jede Website in Sekundenschnelle
+ Umfassende SEO-/GEO-Tools für jede Aufgabe
Führen Sie über 100 Prüfungen Ihrer Website in den Bereichen On-Page-SEO, Benutzerfreundlichkeit, Performance, Social Media und Links durch. Jetzt mit GEO in jedem Bericht. SEOptimer bietet außerdem Keyword-Recherche, Ranking-Tracking, Backlink-Analysen und einen vollständigen Website-Crawler.
Über Cumulative Layout Shift
Was ist Cumulative Layout Shift?
Cumulative Layout Shift misst, wie stark sich die Seite während des Ladens verschiebt. Jedes Mal, wenn ein sichtbares Element an eine neue Position springt, ohne dass der Besucher dies verursacht, wird diese Verschiebung bewertet und die Bewertungen werden addiert.
Dies ist die Kennzahl mit dem vertrautesten Symptom: Man möchte auf einen Link klicken, drückt aber stattdessen auf etwas anderes, weil eine Anzeige oder ein Bild oberhalb davon geladen wurde und die Seite nach unten verschoben hat.
Im Gegensatz zu den beiden anderen wird sie nicht in Zeit gemessen. Sie ist ein Verhältnis, das beschreibt, wie viel sich auf dem Bildschirm bewegt hat und wie weit, weshalb die Zahlen klein sind und ein Wert von 0,1 bereits eine sichtbare Verschiebung darstellt.
Was gilt bei CLS als guter Wert?
Google stuft einen Wert von 0,1 oder weniger als gut ein, Werte zwischen 0,1 und 0,25 als verbesserungsbedürftig und alles über 0,25 als schlecht – jeweils im 75. Perzentil realer Seitenaufrufe.
Layoutverschiebungen, die ein Besucher selbst verursacht, werden nicht berücksichtigt. Das Öffnen eines Akkordeons oder das Schließen eines Banners verschiebt die Seite auf legitime Weise. Nur Bewegungen innerhalb einer halben Sekunde nach einer Interaktion werden entschuldigt – ungefähr der Zeitraum, in dem eine Person die Bewegung ihrer eigenen Aktion zuschreibt.
Dies ist normalerweise der am einfachsten erreichbare Wert der drei. Während für LCP und INP Leistungsoptimierungen erforderlich sind, lässt sich der Großteil der Layoutverschiebungen beheben, indem Platz reserviert wird – eine Änderung am Markup statt an der Architektur.
Was Layoutverschiebungen normalerweise verursacht
- Bilder und Videos ohne Angaben zu Breite und Höhe, sodass bis zum Laden kein Platz reserviert wird.
- Werbeanzeigen und eingebettete Inhalte, die in einen Container ohne festgelegte Größe eingefügt werden.
- Webfonts, die in einer anderen Größe als die Fallback-Schrift geladen werden und dadurch den Text neu anordnen.
- Banner, Hinweise und Cookie-Leisten, die oberhalb bestehender Inhalte eingefügt werden.
- Inhalte, die per Skript eingefügt werden, nachdem die Seite bereits gerendert wurde.
Das Muster dahinter ist immer dasselbe: Etwas kommt verspätet und nimmt Platz ein, der zuvor für nichts reserviert war. Alles darunter wird nach unten verschoben, und das, was der Besucher gerade berühren wollte, bewegt sich.
So können Sie das verbessern
- Legen Sie für jedes Bild und Video eine Breite und Höhe fest, damit der Browser den Platz dafür reserviert.
- Gib Anzeigenflächen und eingebetteten Inhalten eine feste Mindestgröße, auch wenn sie leer sind.
- Lade wichtige Schriftarten vor und passe die Metriken der Fallback-Schriftart an, damit beim Austausch kein Reflow entsteht.
- Füge Banner und Hinweise unterhalb vorhandener Inhalte ein oder lege sie als Overlay darüber, anstatt den Inhalt zu verschieben.
- Reserviere Platz für alles, was ein Skript später hinzufügen wird.
- Achte auf die mobile Darstellung, bei der eine schmale Spalte eine kleine Verschiebung in eine große verwandelt.
Was dieses Tool prüft
Der CLS-Test liest die Felddaten von Google für die Seite – Messwerte, die von echten Besuchern in Chrome erfasst wurden – und zeigt, wie sie im Vergleich zu den oben genannten Schwellenwerten abschneidet.
Wenn kein Ergebnis angezeigt wird, gibt es nicht genügend Traffic auf der Seite, damit Google darüber berichten kann. Layout-Verschiebungen sind in der Zwischenzeit die einzige Metrik, die du zuverlässig manuell überprüfen kannst: Lade die Seite auf einem Smartphone über eine langsame Verbindung und beobachte, was sich bewegt.
Für die anderen beiden Metriken oder für alle drei zusammen verwenden Sie die Core-Web-Vitals-Test.
Wie es weitergeht
Die meisten Layout-Verschiebungen lassen sich auf Bilder und verspätet geladene Ressourcen zurückführen. Überprüfe die Bildoptimierung auf der Seite, ihre Größe mit der Prüfung Dateigröße der Webseite und ihr Verhalten auf einem Smartphone mit dem Test mobil responsiv.
Umfassende SEO-Toolbox mit über 55 Tools
Überprüfen Sie Titel, Meta-Beschreibungen, Überschriften, Schema-Markup, Core Web Vitals, SSL und die robots.txt. Generieren Sie Meta-Tags, Sitemaps und .htaccess-Regeln, minimieren Sie CSS, JavaScript und HTML und erstellen Sie mit unseren KI-Schreibtools sofort und kostenlos Texte.
Weiterführende Informationen
Mehr sehen
Core Web Vitals: What are They? How are They Crucial to SEO?
You should optimize your web pages for a seamless user experience. But how can you measure the quality of user experience on a site? That’...
SEOptimer's Core Web Vitals Checks
What are Core Web Vitals?
Google launched the Core Web Vitals (CWV) initiative in 2020 - "essential metrics for a healthy site". T...
Page Speed: What It Is, and How It Impacts SEO
What is Page Speed?
The term page speed refers to the amount of time your media content or web page will take to download from the...
Webpage Size - Why is it important? And how do you optimize it?
What is Webpage Size?
The term webpage size in the SEO world refers to the downloaded file size of a given web page.
The...