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

Was ist Cumulative Layout Shift (CLS)?

Der Cumulative Layout Shift (CLS) repräsentiert den Aspekt 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 – sie können dazu führen, dass man die Stelle in einem Artikel verliert, den man gerade liest, oder schlimmer noch, dass man auf den falschen Button klickt!

Bedeutung von CLS für Web-Performance und user experience

Der Cumulative Layout Shift (CLS) ist sowohl mit der Web-Performance als auch mit der user experience verknüpft, da er direkt beeinflusst, wie stabil und vorhersehbar sich eine Webseite beim Laden anfühlt. Deshalb ist er wichtig:

• UX, Engagement und Markenwahrnehmung:  Unerwartete Layout-Verschiebungen stören den Nutzerfluss, erschweren das Finden von Informationen, das Klicken auf Buttons und die beabsichtigte Interaktion mit der Seite. Diese Frustration kann zu schlechten Erfahrungen führen, bei denen Nutzer die Website vollständig 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 vermitteln, 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 jeder die Website effektiv navigieren und mit ihr interagieren kann.
  
• SEO und Suchmaschinenranking: Die Core Web Vitals sind ein kleiner, aber bedeutender Rankingfaktor bei Google. Google priorisiert zusammen mit anderen Suchmaschinen 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. Das Folgende ist 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 Impact Fraction misst, wie viel des sichtbaren Seiteninhalts sich verschoben hat. Die Distance Fraction misst, wie weit sich der Inhalt verschoben hat. Wenn sich beispielsweise 50 % der Seite (wie viel) 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 unerwarteten. Wenn man beispielsweise auf einen 'Mehr laden'-Link klickt, erwartet man, dass weitere Elemente auf der Seite erscheinen und sich der Seiteninhalt verschiebt.

Deshalb tragen nur unerwartete Layout-Verschiebungen zum CLS bei. 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-Shift-Sessions

Als der CLS erstmals eingeführt wurde, wurden einige Websites unfair mit einem schlechten CLS-Wert bestraft. Beispielsweise hätte eine Seite mit unendlichem Scrollen den Einfluss des neu hinzugefügten Inhalts bei jedem neuen Scrollen zum gesamten CLS-Wert addiert bekommen. Deshalb wird der CLS jetzt in Sessions berechnet. Jede Session hat eine Dauer von 5 Sekunden. Die Session mit dem höchsten CLS-Wert wird zum endgültigen CLS-Wert.
Wenn beispielsweise in den ersten 5 Sekunden der CLS-Wert 0,095 beträgt, in der nächsten 5-Sekunden-Session der CLS 0,15 ist und in der letzten Session der CLS-Wert 0 beträgt, wird der endgültige CLS-Wert der höchste der drei sein: 0,15.

Zur Erinnerung: CLS und die Core Web Vitals!

Der Cumulative Layout Shift (CLS) ist eine wichtige, nutzerzentrierte Metrik zur Messung der visuellen Stabilität. Der Cumulative Layout Shift (CLS) ist zusammen mit dem First Contentful Paint, dem Largest Contentful Paint und dem First Input Delay Teil der Core Web Vitals.

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 auf eine beliebige Stelle der Seite klicken. Wählen Sie dann Element untersuchen, navigieren Sie zum Lighthouse-Tab in der geöffneten Konsole und starten Sie das Audit

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

Ehrlich gesagt verwende ich diese Methode selbst kaum. Das Fehlen von Details zur genauen 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 Chrome-Erweiterung, die von mir geschrieben wurde. Mit einem einzigen Klick werden alle Layout-Verschiebungen auf der Seite visualisiert. Das ist die erste Lösung, die ich verwende, wenn ich eine Layout-Verschiebung auf einer Seite untersuche. Es ist einfach und bietet einen großartigen visuellen Überblick über den Cumulative Layout Shift.

3. Den Chrome Performance-Tab verwenden, um CLS zu finden

Die mit Abstand beste Methode, eine Layout-Verschiebung zu debuggen, ist über den Chrome Performance-Tab. Um den Performance-Tab 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 Frame für Frame, indem Sie mit der Maus über die Timeline oben fahren und nach Layout-Verschiebungen suchen (Layout-Verschiebungen sind auch rot markiert im Experience-Abschnitt des Performance-Tabs). 

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 den Cumulative Layout Shift in Segmente wie Browser, Element, Navigationstyp, spezifische URL oder Seitentyp aufschlüsseln. Dies hilft dabei, schlecht performende Seiten und verursachende Elemente zu identifizieren und zu beheben

Häufige Cumulative Layout Shift-Ursachen 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 ist typischerweise auf eine oder mehrere der folgenden Ursachen zurückzuführen:

• Bilder, iFrames oder Videos
• Werbeanzeigen
• Injizierter Inhalt
• Animationen
• Langsame Interaktionen
• Web Fonts

CLS verursacht durch Bilder, Videos und iFrames

Layout-Verschiebungen, die durch Bilder, Videos oder iFrames verursacht werden, sind immer auf fehlende Dimensionen zurückzuführen. Am häufigsten liegt dies daran, dass Höhe und Breite des Elements nicht im HTML definiert sind. Ein gängiges Best-Practice-Muster ist es, die intrinsische Breite des Bildes im HTML festzulegen und Styling zu verwenden, um das Bild automatisch an seinen übergeordneten Container anzupassen.

<img src="img.jpg" width="200" height="200">
<style>
   img{
      max-width:100%;
      height:auto
   }
</style>

Beachten Sie, dass Dimensionen auch als Style-Eigenschaft oder durch Setzen der aspect-ratio Style-Eigenschaft definiert werden können.

CLS verursacht durch Webfonts

Ein Cumulative Layout Shift kann durch Webfonts verursacht werden. Webfonts sind Schriftarten, die nicht auf Ihrem lokalen Computer oder Telefon installiert sind, sondern aus dem Internet heruntergeladen werden. Solange die Webfont noch nicht heruntergeladen ist, wird die Seite normalerweise mit einer fallback-Schriftart gerendert. Die Größe dieser fallback-Schriftart kann sich von der endgültigen Schriftart unterscheiden. In diesem Beispiel ist die fallback-Schriftart etwas kleiner als die endgültige Webfont.

Es gibt viele Methoden, um die Layout-Verschiebung durch Web Fonts zu 'beheben'. Sie basieren auf 2 Techniken:

1. Die fallback-Schriftart der Webfont stärker angleichen. Der effektivste Weg ist das Überschreiben der @font-face-Deskriptoren

Der zweite Weg ist die Beschleunigung der Web-Fonts. Dadurch stehen sie dem Browser zur Verfügung, bevor er mit dem Rendern beginnt. Eine gängige Methode ist das Preloading Ihrer kritischen Web Fonts. 

CLS-Probleme verursacht durch langsame Nutzerinteraktionen

Im folgenden Beispiel löst der Mehr-laden-Button eindeutig eine Layout-Verschiebung aus. Diese Layout-Verschiebung wird jedoch nicht zu den CLS-Metriken hinzugefügt, da sie beabsichtigt ist

Der Browser erkennt dies, weil die jetzt sichtbaren Elemente ein Attribut namens 'hadRecentInput' haben. Wenn dieses auf true gesetzt ist UND die Layout-Verschiebung innerhalb von 500 ms nach dem Eingabe-Event (dem Button-Klick) stattfindet, wird die Layout-Verschiebung nicht vom Browser gemeldet.

Stellen Sie sicher, dass Nutzerinteraktionen innerhalb von 500ms abgeschlossen werden

CLS-Probleme verursacht durch AJAX

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 offensichtlich zu einem massiven Layout-Shift führen. Deshalb ist es ratsam, den Platz für die neuen Inhalte zu reservieren. Natürlich kennen Sie die Höhe der neuen Inhalte nicht im Voraus, aber Sie können eine fundierte Schätzung abgeben.

Wenn beispielsweise der durchschnittliche AJAX-Inhalt 50 % des Bildschirms einnimmt, ist es ratsam, diese 50 % zu reservieren. Wenn der neue Inhalt dann 40 oder 60 % des Bildschirms einnimmt, ist der CLS (50 % - 40 % = 10 % Distance Fraction) immer noch deutlich kleiner als 50 % Distance Fraction.

Hier ist ein Beispiel, wie das umgesetzt werden kann:

<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-Probleme durch Werbeanzeigen beheben

Werbeanzeigen laden oft (deutlich) später auf der Seite. Dies macht durch Werbeanzeigen verursachte Cumulative Layout Shifts besonders ärgerlich. Wenn mehrere Anzeigen im sichtbaren Viewport laden, 'bleibt die Seite einfach nicht still'. Um dies zu beheben, reservieren Sie auch den Platz für die Anzeigen, insbesondere die Anzeigen im sichtbaren Viewport.

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