Was ist Cumulative Layout Shift (CLS) und wie behebt man ihn

Was ist Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) repräsentiert den Teil der "visuellen Stabilität" der Core Web Vitals. Der Cumulative Layout Shift (CLS) misst die Bewegungen der Seite, wenn Inhalte gerendert werden oder neue Inhalte auf der Seite angezeigt werden. Er berechnet einen Wert basierend darauf, wie viel der Seite sich unerwartet bewegt und wie weit sie sich verschiebt. Diese Inhaltsverschiebungen sind sehr ärgerlich, da man seinen Platz in einem Artikel verliert, den man gerade liest, oder schlimmer noch, auf den falschen Button klickt!

Was ist ein guter Cumulative Layout Shift (CLS) Wert?

Ein guter CLS-Wert liegt zwischen 0 und 0,1. Wenn Ihr CLS-Wert zwischen 0,1 und 0,25 liegt, besteht Verbesserungsbedarf. Jeder CLS-Wert über 0,25 gilt als schlecht. Um die Core Web Vitals für den Cumulative Layout Shift zu bestehen, müssen mindestens 75% Ihrer Besucher einen "guten" CLS-Wert haben.

Bedeutung von CLS für Web-Performance und User Experience

Cumulative Layout Shift (CLS) ist sowohl mit der Web-Performance als auch mit der User Experience verbunden, da er direkt beeinflusst, wie stabil und vorhersehbar sich eine Webseite beim Laden anfühlt. Hier ist, warum es wichtig ist:

• UX, Engagement und Markenwahrnehmung: Unerwartete Layout-Verschiebungen unterbrechen den Nutzerfluss und erschweren es, Informationen zu finden, auf Buttons zu klicken und wie beabsichtigt mit der Seite zu interagieren. Diese Frustration kann zu schlechten Erfahrungen führen, bei denen Nutzer die Website ganz verlassen. Die User Experience einer Website spiegelt die Marke dahinter wider. Häufige Layout-Verschiebungen können den Eindruck einer schlecht gestalteten oder gewarteten Website erwecken, das Nutzer-Engagement stören und zu verringerter Interaktion und potenziell höheren Absprungraten führen.
• Barrierefreiheit: Layout-Verschiebungen können besonders störend für Nutzer mit Behinderungen sein, die auf assistive Technologien oder Screenreader angewiesen sind. Ein stabiles Layout stellt sicher, dass alle die Website effektiv navigieren und nutzen können.
• SEO und Suchranking: Die Core Web Vitals sind ein kleiner, aber bedeutender Rankingfaktor bei Google. Google und andere Suchmaschinen priorisieren Websites, die eine gute User Experience bieten. CLS ist eine der Core Web Vitals Metriken, die Google beim Ranking von Websites berücksichtigt. Die Optimierung für CLS kann Ihrer Website einen Wettbewerbsvorteil in den Suchergebnissen verschaffen.

Wie wird CLS gemessen?

Der CLS einer Seite kann mit der Layout Instability API gemessen werden. Im Folgenden eine einfache Verwendung dieser API:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

Berechnung des CLS

Der CLS wird mit einer einfachen, aber eleganten Formel berechnet:

CLS = sum(impact-fraction * distance-fraction)

Die Auswirkungsfraktion misst, wie viel des sichtbaren Seiteninhalts sich verschoben hat. Die Distanzfraktion misst, wie weit sich der Inhalt verschoben hat. Wenn zum Beispiel 50% der Seite (wie viel) sich um 25% (wie weit) des Viewports verschoben haben, ergibt sich ein CLS-Wert von 0,50 * 0,25 = 0,125.

Erwartete vs. unerwartete Layout-Verschiebungen

Nicht alle Layout-Verschiebungen sind schlecht, nur die, die man nicht erwartet. Wenn Sie auf einen „Mehr laden"-Link klicken, würden Sie beispielsweise erwarten, dass mehr Elemente auf der Seite erscheinen und sich der Seiteninhalt verschiebt.

Deshalb verursachen nur unerwartete Layout-Verschiebungen einen CLS-Beitrag. Wenn ein Nutzer beispielsweise auf einen Button klickt und als Reaktion neuer Inhalt zur Seite hinzugefügt wird (zum Beispiel ein Dropdown-Menü), wird die Layout-Verschiebung vom CLS ausgeschlossen. Genauer gesagt: Layout-Verschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzereingabe auftreten, werden von den Berechnungen ausgeschlossen.

Layout-Verschiebungs-Sitzungen

Als CLS erstmals eingeführt wurde, wurden einige Websites unfairerweise mit einem schlechten CLS-Wert bestraft. Zum Beispiel hätte eine Seite mit Infinite Scrolling den Einfluss des neu hinzugefügten Inhalts bei jedem neuen Scrollen zum gesamten CLS-Wert addiert bekommen. Deshalb wird der CLS jetzt in Sitzungen berechnet. Jede Sitzung hat eine maximale Dauer von 5 Sekunden und eine Lücke von 1 Sekunde zwischen Layout-Verschiebungen. Die Sitzung mit dem höchsten CLS-Wert wird zum endgültigen CLS-Wert.

Wenn beispielsweise während der ersten Sitzung der CLS-Wert 0,095 beträgt, in der nächsten Sitzung 0,15 und in der letzten Sitzung 0, wird der endgültige CLS-Wert der höchste der drei sein: 0,15.

CLS und die Core Web Vitals

Cumulative Layout Shift (CLS) ist eine wichtige, nutzerzentrierte Metrik zur Messung der visuellen Stabilität. Der Cumulative Layout Shift (CLS) ist Teil der Core Web Vitals zusammen mit dem Largest Contentful Paint (LCP) und Interaction to Next Paint (INP). Zusammen messen diese drei Metriken Ladeleistung, Interaktivität und visuelle Stabilität.

Wie man CLS-Probleme misst

1. Lighthouse verwenden, um Cumulative Layout Shifts zu finden

Die einfachste Methode, Layout-Verschiebungen zu finden, ist die Verwendung von Lighthouse in Ihrem eigenen Chrome-Browser. Führen Sie einfach ein Lighthouse-Audit durch, indem Sie mit der rechten Maustaste irgendwo auf der Seite klicken. Wählen Sie dann „Element untersuchen", wählen Sie die Lighthouse-Registerkarte in der nun geöffneten Konsole und starten Sie das Audit.

Die Audit-Ergebnisse zeigen den Cumulative Layout Shift (CLS) Wert. Scrollen Sie nach unten zu Diagnostik und erweitern Sie die Cumulative Layout Shift Informationen, um zu sehen, welche Knoten die Layout-Verschiebung verursachen.

Ehrlich gesagt verwende ich diese Methode selbst nie. Das Fehlen von Details über die genaue Distanz der Layout-Verschiebung macht diese Ergebnisse schwerer zu interpretieren.

2. Den CLS Visualizer verwenden, um Cumulative Layout Shifts zu finden

Der CLS Visualizer ist eine von mir geschriebene Chrome-Erweiterung. Mit einem einzigen Klick werden alle Layout-Verschiebungen auf der Seite visualisiert. Dies ist die erste Lösung, die ich verwende, wenn ich eine Layout-Verschiebung auf einer Seite bestimmen möchte. Sie ist einfach und gibt einen großartigen visuellen Überblick über den Cumulative Layout Shift.

3. Die Chrome Performance-Registerkarte verwenden, um CLS zu finden

Bei weitem die beste Methode zum Debuggen einer Layout-Verschiebung ist die Chrome Performance-Registerkarte. Um die Performance-Registerkarte zu öffnen, navigieren Sie zu einer beliebigen Seite in Chrome und verwenden Sie diese Tastenkombination:

• Drücken Sie Strg+Umschalt+I (Dev Tools öffnen)
• Drücken Sie Strg+Umschalt+E (Profiling starten und Seite neu laden)

Untersuchen Sie nun die Timeline Bild für Bild, indem Sie mit der Maus über die Timeline oben fahren und nach Layout-Verschiebungen suchen (Layout-Verschiebungen sind auch rot in der Experience-Sektion der Performance-Registerkarte markiert).

4. RUM-Tools wie Core/Dash verwenden

RUM steht für Real User Monitoring und RUM-Daten können wertvolle Echtzeit-Einblicke in die Core Web Vitals liefern. RUM-Tools wie Core/Dash können die Cumulative Layout Shifts in Segmente wie Browser, Element, Navigationstyp, spezifische URL oder Seitentyp aufschlüsseln. Dies hilft dabei, schlecht performende Seiten und problematische Elemente zu identifizieren und zu beheben.

Häufige Ursachen für Cumulative Layout Shift und wie man sie behebt

Der Ursprung aller Layout-Verschiebungen ist im Grunde derselbe. Irgendwann hat ein Element, das über einem anderen Element platziert war, mehr oder weniger Platz eingenommen als zuvor. Dies liegt typischerweise an einer oder mehreren dieser Ursachen:

• Bilder, Iframes oder Videos ohne explizite Abmessungen
• Werbung, die spät im Viewport geladen wird
• Dynamisch eingefügter Inhalt
• CSS-Animationen, die Layout-auslösende Eigenschaften verwenden
• Langsame Nutzerinteraktionen
• Webschriften mit nicht übereinstimmenden Fallbacks

CLS verursacht durch Bilder, Videos und Iframes

Bilder, Videos und Iframes sind die üblichen Verdächtigen beim Cumulative Layout Shift, da diese Elemente die Mehrheit der CLS-Probleme ausmachen. Für eine detaillierte Anleitung zu dieser spezifischen Ursache siehe Layout-Verschiebung durch automatisch dimensionierte Bilder beheben.

Layout-Verschiebungen, die durch Bilder, Videos oder Iframes verursacht werden, entstehen immer durch fehlende Abmessungen. Am häufigsten liegt dies daran, dass Höhe und Breite des Elements nicht im HTML definiert sind. Ein bewährtes Muster ist es, die intrinsische Breite des Bildes im HTML festzulegen und Styling zu verwenden, um das Bild automatisch an seinen übergeordneten Container anzupassen.

Explizite Breiten- und Höhenattribute setzen

Der einfachste und effektivste Weg, CLS durch Bilder und Iframes zu verhindern, ist immer width- und height-Attribute direkt im HTML einzufügen. Moderne Browser verwenden diese Attribute, um das Seitenverhältnis vor dem Laden der Ressource zu berechnen und den richtigen Platz zu reservieren.

<!-- Images: always include width and height -->
<img src="hero.jpg" width="800" height="450" alt="Hero image">

<!-- Iframes: same principle -->
<iframe src="https://example.com/embed"
    width="560" height="315"
    title="Embedded content">
</iframe>

<!-- Videos: always include dimensions -->
<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
</video>

<style>
img, iframe, video {
    max-width: 100%;
    height: auto;
}
</style>

Die CSS aspect-ratio Eigenschaft verwenden

Für responsive Layouts oder wenn keine exakten Pixelabmessungen verfügbar sind, bietet die CSS-Eigenschaft aspect-ratio eine alternative Möglichkeit, Platz zu reservieren. Dies ist besonders nützlich für Container, die dynamischen Inhalt oder eingebettete Medien enthalten.

<style>
/* Reserve space for a 16:9 video container */
.video-wrapper {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: #f0f0f0;
}

/* Reserve space for a square image */
.avatar {
    aspect-ratio: 1 / 1;
    width: 80px;
    object-fit: cover;
}

/* Responsive iframe container */
.embed-container {
    aspect-ratio: 560 / 315;
    width: 100%;
}
.embed-container iframe {
    width: 100%;
    height: 100%;
}
</style>

CLS verursacht durch Webschriften

Ein Cumulative Layout Shift kann durch Webschriften verursacht werden. Webschriften sind Schriftarten, die nicht auf Ihrem lokalen Computer oder Telefon installiert sind, sondern aus dem Internet heruntergeladen werden. Solange die Webschrift noch nicht heruntergeladen ist, wird die Seite normalerweise mit einer Fallback-Schrift gerendert. Die Größe dieser Fallback-Schrift kann von der endgültigen Schrift abweichen. In diesem Beispiel ist die Fallback-Schrift etwas kleiner als die endgültige Webschrift. Weitere Informationen finden Sie unter Sicherstellen, dass Text während des Ladens der Webschrift sichtbar bleibt.

Es gibt mehrere Methoden, um die durch Webschriften verursachte Layout-Verschiebung zu beheben. Sie basieren auf zwei Techniken:

1. Die Fallback-Schrift der Webschrift besser anpassen. Der effektivste Weg ist das Überschreiben der @font-face Deskriptoren.

2. Die Webschriften beschleunigen. Dadurch werden sie dem Browser zur Verfügung gestellt, bevor er mit dem Rendern beginnt. Ein gängiger Weg ist es, Ihre Webschriften selbst zu hosten und Ihre kritischen Webschriften vorzuladen.

Fallback-Schrift-Anpassung mit Metrik-Überschreibungen

Die effektivste Technik zur Beseitigung von CLS durch Webschriften ist die Erstellung einer Fallback-Schrift-Definition, die den Abmessungen Ihrer Webschrift möglichst genau entspricht. Mit den Deskriptoren size-adjust, ascent-override, descent-override und line-gap-override können Sie die Fallback-Schrift dazu bringen, nahezu identischen Platz einzunehmen. Kombiniert mit font-display: swap stellt dies sicher, dass Text sofort sichtbar ist, mit minimaler Layout-Verschiebung beim Laden der Webschrift.

<style>
/* Define a matched fallback font */
@font-face {
    font-family: 'My Font Fallback';
    src: local('Arial');
    size-adjust: 105.2%;
    ascent-override: 93%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* Use the web font with the matched fallback */
@font-face {
    font-family: 'My Font';
    src: url('/fonts/myfont.woff2') format('woff2');
    font-display: swap;
}

body {
    font-family: 'My Font', 'My Font Fallback', sans-serif;
}
</style>

<!-- Preload the critical web font for faster loading -->
<link rel="preload" href="/fonts/myfont.woff2"
    as="font" type="font/woff2" crossorigin>

Tools wie der Fallback Font Generator können automatisch die richtigen Überschreibungswerte für Ihre spezifische Schriftpaarung berechnen. Speziell für Google Fonts gibt Ihnen das Selbst-Hosten Ihrer Schriften volle Kontrolle über die font-face Deklarationen und die Vorladen-Strategie.

CLS verursacht durch CSS-Animationen

CSS-Animationen und -Übergänge können unerwartete Layout-Verschiebungen auslösen, wenn sie Eigenschaften animieren, die das Layout der umgebenden Elemente beeinflussen. Eigenschaften wie top, left, width, height, margin und padding zwingen den Browser, das Layout der gesamten Seite neu zu berechnen, was zu CLS führt. Für eine detaillierte Anleitung siehe Layout-Verschiebung durch CSS-Übergänge beheben.

Die Lösung besteht darin, zusammengesetzte CSS-Eigenschaften wie transform und opacity für Animationen zu verwenden. Diese Eigenschaften werden vom GPU-Compositor verarbeitet und lösen keine Layout-Neuberechnungen aus, sodass sie null CLS erzeugen.

<style>
/* BAD: Animating top/left causes layout shifts */
.slide-in-bad {
    position: relative;
    animation: slide-bad 0.3s ease-out;
}
@keyframes slide-bad {
    from { top: -50px; opacity: 0; }
    to   { top: 0; opacity: 1; }
}

/* GOOD: Animating transform does NOT cause layout shifts */
.slide-in-good {
    animation: slide-good 0.3s ease-out;
}
@keyframes slide-good {
    from { transform: translateY(-50px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
</style>

Laut dem HTTP Archive Web Almanac haben 39% der mobilen Seiten und 42% der Desktop-Seiten nicht-zusammengesetzte Animationen, die zum CLS beitragen. Überprüfen Sie immer Ihre Animationen, um sicherzustellen, dass sie nur transform und opacity verwenden, anstatt Layout-auslösende Eigenschaften.

CSS Containment verwenden, um Layout-Verschiebungen zu isolieren

Die CSS-Eigenschaft contain teilt dem Browser mit, dass der Inhalt eines Elements unabhängig vom Rest der Seite ist. Dies begrenzt den Umfang der Layout-Neuberechnungen und kann verhindern, dass Layout-Verschiebungen sich auf umgebende Elemente ausbreiten.

<style>
/* Isolate ad containers from the rest of the page */
.ad-slot {
    contain: layout style;
    min-height: 250px;
}

/* For off-screen content, use content-visibility */
.below-fold-section {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}
</style>

Die contain: layout Deklaration stellt sicher, dass Größenänderungen innerhalb des Elements keine Layout-Neuberechnungen für Elemente außerhalb davon auslösen. Die Eigenschaft content-visibility: auto geht noch weiter und ermöglicht es dem Browser, das Rendern von Inhalten außerhalb des Bildschirms vollständig zu überspringen, wobei contain-intrinsic-size eine geschätzte Größe bereitstellt, um Layout-Verschiebungen zu verhindern, wenn der Inhalt in den Viewport scrollt.

CLS-Probleme durch langsame Nutzerinteraktionen

Im folgenden Beispiel löst der „Mehr laden"-Button eindeutig eine Layout-Verschiebung aus. Die Layout-Verschiebung wird jedoch nicht zu den CLS-Metriken hinzugefügt. Das liegt daran, dass diese Layout-Verschiebung beabsichtigt ist.

Der Browser weiß dies, weil die nun sichtbaren Elemente ein Attribut namens „hadRecentInput" haben. Wenn dieses auf true gesetzt ist UND die Layout-Verschiebung innerhalb von 500 ms nach dem Eingabeereignis (dem Button-Klick) stattfindet, wird die Layout-Verschiebung nicht vom Browser gemeldet.

Stellen Sie sicher, dass Nutzerinteraktionen innerhalb von 500ms abgeschlossen werden. Wenn eine Interaktion länger dauert, wird jede resultierende Layout-Verschiebung zum CLS-Wert gezählt. Dies ist besonders relevant für AJAX-Anfragen, die neuen Inhalt einfügen. Tipps zur Optimierung interaktiver Elemente finden Sie unter Chat-Widget mit perfekten Core Web Vitals erstellen.

CLS-Probleme durch AJAX und dynamisch eingefügten Inhalt

AJAX ermöglicht es, Webseiten asynchron zu aktualisieren, indem Daten im Hintergrund mit einem Webserver ausgetauscht werden. Das Einfügen neuer Inhalte in eine Webseite kann zu einer massiven Layout-Verschiebung führen. Deshalb ist es ratsam, den Platz für den neuen Inhalt zu reservieren. Sie kennen die Höhe des neuen Inhalts nicht im Voraus, aber Sie können eine fundierte Schätzung abgeben.

Wenn zum Beispiel der durchschnittliche AJAX-Inhalt 50% des Bildschirms einnimmt, ist es ratsam, diese 50% zu reservieren. Wenn der neue Inhalt letztendlich 40 oder 60% des Bildschirms einnimmt, ist der CLS (50% minus 40% = 10% Distanzfraktion) immer noch viel kleiner als eine 50% Distanzfraktion.

Hier ist ein Beispiel, wie das geht:

<style>
   #ajax { height: 400px; }
   #ajax.loaded { height: auto; }
</style>
<script>
   fetch('/ajax-content')
   .then(response => response.json())
   .then(result => {
      let el = document.getElementById('ajax');
      el.innerHTML = result.html;
      el.classList.add('loaded');
   })
</script>

CLS nach dem Laden: dynamischer Inhalt und spät ladende Elemente

Layout-Verschiebungen passieren nicht nur während des initialen Seitenladens. Post-Load-CLS wird durch Inhalte verursacht, die erscheinen oder ihre Größe ändern, nachdem die Seite bereits gerendert wurde. Häufige Ursachen sind:

• Spät ladende Werbung: Werbenetzwerke fügen oft Inhalte Sekunden nach dem Laden der Seite ein. Wenn der Werbeplatz keinen reservierten Platz hat, drückt die Werbung den gesamten umgebenden Inhalt nach unten.
• Cookie-Consent-Banner: Banner, die den Seiteninhalt nach unten drücken, anstatt ihn zu überlagern, verursachen erheblichen CLS. Verwenden Sie ein Overlay-Muster (position: fixed) oder reservieren Sie Platz oben auf der Seite.
• Lazy-geladener Inhalt oberhalb des Folds: Inhalt, der über Intersection Observer geladen wird und zunächst versteckt war, aber ohne reservierten Platz im Viewport erscheint.
• A/B-Testing-Skripte: Test-Tools, die das DOM nach dem initialen Rendern modifizieren, können unerwartete Verschiebungen verursachen. Führen Sie A/B-Test-Modifikationen serverseitig oder innerhalb des initialen HTML durch, wenn möglich.
• Infinite-Scroll-Implementierungen: Neuer Inhalt, der am Ende einer Liste angehängt wird, kann Verschiebungen verursachen, wenn er das Layout bestehender Elemente ändert. Stellen Sie sicher, dass neuer Inhalt nur unterhalb der aktuellen Scrollposition angehängt wird.

Das Sitzungsfenster-Modell (oben beschrieben) bedeutet, dass selbst Post-Load-Verschiebungen zum CLS zählen, wenn sie zufällig in die schlechteste Sitzung fallen. Überwachen Sie Ihre CLS-Attributionsdaten in Core/Dash, um zu identifizieren, welche Elemente sich nach dem Laden verschieben.

CLS-Probleme durch Werbung beheben

Werbung lädt oft deutlich später auf der Seite. Das macht Cumulative Layout Shifts durch Werbung besonders ärgerlich. Wenn mehrere Werbeanzeigen im sichtbaren Viewport laden, bleibt die Seite einfach nicht still. Um dies zu beheben, reservieren Sie den Platz für die Werbung, besonders für die Werbung im sichtbaren Viewport.

<style>
/* Reserve space for rectangle mobile ad */
.ad {
    min-height: 250px;
    background: #dedede;
    contain: layout style;
}
/* Reserve space for banner desktop ad */
@media only screen and (min-width: 600px) {
    .ad { min-height: 90px; }
}
</style>

Fallstudie: Rakuten 24 und die geschäftliche Auswirkung von CLS

Rakuten 24, eine große japanische E-Commerce-Plattform, führte eine detaillierte Studie über die Auswirkungen von Cumulative Layout Shift auf ihre Geschäftskennzahlen durch. Durch die Reduzierung von CLS auf ihren Produkt- und Kategorieseiten erzielte Rakuten 24 bemerkenswerte Ergebnisse:

• 53,37% Steigerung des Umsatzes pro Besucher für Nutzer, die niedrigen CLS erlebten, im Vergleich zu denen mit hohem CLS.
• 33,13% Steigerung der Konversionsrate für dieselbe verbesserte CLS-Kohorte.
• 15,20% Rückgang der Absprungrate bei Besuchern mit stabilen Seitenerfahrungen.

Diese Zahlen zeigen, dass CLS nicht nur eine technische Metrik ist. Visuelle Instabilität kostet Unternehmen direkt Umsatz, indem sie Nutzer während ihrer Browser- und Kaufreise frustriert. Wenn sich Elemente unerwartet verschieben, verlieren Nutzer Vertrauen, klicken falsch und brechen ihre Sitzungen ab. Die Rakuten-24-Studie bestätigt, dass Investitionen in die CLS-Optimierung einen messbaren Return on Investment haben, insbesondere für E-Commerce-Websites, bei denen jede Interaktion zählt.

Was reale CLS-Daten zeigen

CoreDash-Daten zeigen, dass CLS die am besten performende Core Web Vital ist, wobei 92,8% der Seitenladungen auf corewebvitals.io einen „guten" Wert erreichen und es praktisch keinen Geräteunterschied zwischen Mobilgeräten und Desktop gibt. Sowohl Desktop (92,8% gut) als auch Mobilgeräte (92,7% gut) erreichen nahezu perfekte CLS-Werte mit einem p75 von 0 auf beiden Gerätetypen.

Dies steht im Gegensatz zu Metriken wie LCP und INP, bei denen die mobile Leistung deutlich schlechter ist als die Desktop-Leistung. CLS ist einzigartig besser auf Mobilgeräten als auf dem Desktop im breiteren Web, was das Gegenteil jeder anderen Core Web Vital ist.

Global gesehen ist das Bild laut dem 2025 Web Almanac weniger optimistisch:

• 72% der Websites erreichen insgesamt gute CLS-Werte, während 11% schlechten CLS haben.
• 66% der mobilen Seiten haben mindestens ein Bild ohne definierte Abmessungen (gegenüber 72% im Jahr 2022, aber immer noch ein großer CLS-Verursacher).
• 39% der mobilen Seiten haben nicht-zusammengesetzte Animationen, die zum CLS beitragen.
• Nur 11% der Seiten laden Webschriften vor, was bedeutet, dass die überwiegende Mehrheit der Websites anfällig für Schriftwechsel-Layout-Verschiebungen ist.

CLS hat global eine stetige Verbesserung von Jahr zu Jahr gezeigt, aber die Daten zeigen, dass Bilder ohne Abmessungen und nicht-zusammengesetzte Animationen die beiden häufigsten Ursachen bleiben. Allein die Behebung dieser beiden Probleme würde Layout-Verschiebungen für einen großen Teil des Webs beseitigen.

Häufig gestellte Fragen zu CLS

Verwandte Anleitungen

Erkunden Sie diese detaillierten Anleitungen für spezifische CLS-Optimierungstechniken:

• Layout-Verschiebung durch CSS-Übergänge beheben: Erfahren Sie, wie Sie Layout-auslösende CSS-Animationen identifizieren und durch zusammengesetzte Alternativen ersetzen.
• Layout-Verschiebung durch automatisch dimensionierte Bilder beheben: Eine vollständige Anleitung zum Hinzufügen korrekter Abmessungen zu Bildern und responsiven Containern.
• Google Fonts selbst hosten: Reduzieren Sie den CLS beim Laden von Schriften durch Selbst-Hosting mit geeigneten font-display- und Vorladen-Strategien.
• Sicherstellen, dass Text während des Ladens der Webschrift sichtbar bleibt: Konfigurieren Sie font-display und Schriftmetrik-Überschreibungen, um Schriftwechsel-Layout-Verschiebungen zu eliminieren.
• Chat-Widget mit perfekten Core Web Vitals erstellen: Eine Fallstudie zur Implementierung von Drittanbieter-Widgets ohne CLS-, INP- oder LCP-Regressionen.

Für einen vollständigen Überblick über alle Core Web Vitals Metriken und Optimierungsstrategien besuchen Sie die Core Web Vitals Übersicht oder verwenden Sie die Ultimative Core Web Vitals Checkliste, um Ihre Website zu prüfen.