Was ist Cumulative Layout Shift (CLS) und wie beheben Sie 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, während Inhalte gerendert werden oder neue Inhalte auf der Seite angezeigt werden. Er berechnet einen Score basierend darauf, wie viel von der Seite sich unerwartet bewegt und wie weit sie sich bewegt. Diese Inhaltsverschiebungen sind sehr ärgerlich und führen dazu, dass Sie Ihre Stelle in einem Artikel verlieren, den Sie zu lesen begonnen haben, oder schlimmer noch, dass Sie auf den falschen Button klicken!

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 verknüpft, da er sich direkt darauf auswirkt, wie stabil und vorhersagbar sich eine Webseite beim Laden anfühlt. Hier ist, warum es wichtig ist:

• UX, Engagement und Markenwahrnehmung:  Unerwartete Layout-Verschiebungen stören den Nutzerfluss und machen es schwieriger, 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 Nutzerengagement stören, was zu verminderter Interaktion und möglicherweise höheren Absprungraten führt.
  
• 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 effektiv navigieren und mit der Website interagieren kann.
  
• SEO und Suchranking: Die Core Web Vitals sind ein kleiner, aber bedeutender Rankingfaktor in Google. Google, zusammen mit anderen Suchmaschinen, priorisiert 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 gemessen werden mit der Layout Instability API. 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});

Den CLS berechnen

Der CLS wird einfach mit einer simplen, aber eleganten Formel berechnet:

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

Die Impact Fraction misst, wie viel des sichtbaren Inhalts der Seite sich verschoben hat. Die Distance Fraction misst, wie weit sich der Inhalt verschoben hat. Wenn sich zum Beispiel 50% der Seite (wie viel) um 25% (wie weit) des Viewports der Seite verschoben haben. Der CLS-Score = .50 * .25 = 0.125

Erwartete VS unerwartete Layout-Verschiebungen

Nicht alle Layout-Verschiebungen sind schlecht, nur die, die Sie nicht erwarten. Wenn Sie beispielsweise auf einen 'Weitere Elemente laden'-Link klicken, würden Sie erwarten, dass mehr Elemente auf der Seite erscheinen und sich der Inhalt der Seite verschiebt.

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

Layout-Shift-Sitzungen

Als CLS zum ersten Mal eingeführt wurde, wurden einige Seiten zu Unrecht mit einem schlechten CLS-Score bestraft. Zum Beispiel hätte eine Seite, die Infinite Scrolling implementiert, die Auswirkung des neu hinzugefügten Inhalts zum gesamten CLS-Score für jeden neuen Scroll hinzugefügt bekommen. Deshalb wird der CLS jetzt in Sitzungen berechnet. Jede Sitzung hat eine Dauer von 5 Sekunden. Die Sitzung mit dem größten CLS-Score wird der endgültige CLS-Score.
Wenn zum Beispiel während der ersten 5 Sekunden der CLS-Score 0,095 beträgt, dann in der nächsten 5-Sekunden-Sitzung der CLS 0,15 ist und für die letzte Sitzung der CLS-Score 0 ist. Der endgültige CLS-Score wird der höchste der drei sein: 0,15.

Eine kurze Erinnerung: 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 First Contentful Paint, dem Largest Contentful Paint und dem First Input Delay.

Wie man CLS-Probleme misst

1. Verwenden Sie Lighthouse, um Cumulative Layout Shifts zu finden

Die einfachste Methode, um 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 die Seite klicken. Wählen Sie dann Element untersuchen, wählen Sie den Lighthouse-Tab in der nun geöffneten Konsole und starten Sie das Audit.

Die Auditergebnisse zeigen den Cumulative Layout Shift (CLS) Score an. Scrollen Sie nach unten zu Diagnose und erweitern Sie die Cumulative Layout Shift-Informationen, um zu sehen, welche Knoten die Layout-Verschiebung verursachen.

Um ehrlich zu sein, benutze ich diese Methode selbst nie wirklich. Der Mangel an Details über die genaue Distanz der Layout-Verschiebung macht diese Ergebnisse schwerer zu interpretieren.

2. Verwenden Sie den CLS Visualizer, 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. Dies ist die erste Lösung, zu der ich greife, wenn ich versuche, eine Layout-Verschiebung auf einer Seite zu bestimmen. Es ist einfach und gibt einen großartigen visuellen Überblick über den Cumulative Layout Shift.

3. Verwenden Sie den Chrome Performance-Tab, um CLS zu finden

Bei weitem der beste Weg, 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-Shift-I (Dev Tools öffnen)
- Drücken Sie Strg-Shift-E (Profiling starten und Seite neu laden)

Inspizieren Sie nun die Zeitachse Bild für Bild, indem Sie mit der Maus über die Zeitachse oben fahren, und suchen Sie nach Layout-Verschiebungen (Layout-Verschiebungen sind auch im Experience-Bereich des Performance-Tabs rot gefärbt). 

4. Verwenden Sie RUM-Tools wie Core/Dash

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 unterteilen. Dies hilft bei der Identifizierung und Behebung schlecht funktionierender Seiten und störender Elemente.

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

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

• Bilder, iFrames oder Videos
• Anzeigen
• Inijizierter Inhalt
• Animationen
• Langsame Interaktionen
• Webfonts

CLS verursacht durch Bilder, Videos und iFrames

Layout-Verschiebungen, die durch Bilder, Videos oder iFrames verursacht werden, sind immer auf fehlende Abmessungen zurückzuführen. Meistens liegt dies daran, dass die Höhe und Breite des Elements nicht im HTML definiert sind. Ein gängiges Best-Practice-Muster besteht darin, die intrinsische Breite des Bildes im HTML festzulegen und Styling zu verwenden, um das Bild automatisch so zu skalieren, dass es in seinen übergeordneten Container passt.

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

Beachten Sie, dass Abmessungen auch als Stileigenschaft oder sogar durch Festlegen der aspect-ratio Stileigenschaft 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. Während der Webfont noch nicht heruntergeladen ist, wird die Seite normalerweise mit einer Fallback-Schriftart gerendert. Die Größe dieser Fallback-Schriftart kann von der endgültigen Schriftart abweichen. In diesem Beispiel ist die Fallback-Schriftart etwas kleiner als der endgültige Webfont.

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

1. Stellen Sie sicher, dass die Fallback-Schriftart besser mit dem Webfont übereinstimmt. Der effektivste Weg ist das Überschreiben der @font-face Descriptors

Der zweite Weg ist die Beschleunigung der Webfonts. Dies macht sie für den Browser verfügbar, bevor der Browser mit dem Rendern beginnt. Ein üblicher Weg, dies zu tun, ist das Vorladen Ihrer kritischen Webfonts, 

CLS-Probleme verursacht durch langsame Benutzerinteraktionen

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

Ein Browser weiß dies, da die jetzt sichtbaren Elemente ein Attribut namens ' hadRecentInput' haben. Wenn dies auf true gesetzt ist UND die Layout-Verschiebung innerhalb von 500 ms nach dem Eingabeereignis (dem Klick auf den Button) erfolgt, wird die Layout-Verschiebung vom Browser nicht gemeldet.

Stellen Sie sicher, dass Benutzerinteraktionen innerhalb von 500ms abgeschlossen sind

CLS-Probleme verursacht durch AJAX

AJAX ermöglicht es Webseiten, asynchron aktualisiert zu werden, indem Daten mit einem Webserver im Hintergrund ausgetauscht werden. Offensichtlich kann das Injizieren neuer Inhalte in eine Webseite zu einer massiven Layout-Verschiebung führen. Deshalb ist es klug, den Platz zu reservieren, der für den neuen Inhalt verwendet wird. Natürlich kennen Sie die Höhe des neuen Inhalts nicht im Voraus, aber was Sie tun können, ist eine fundierte Schätzung vorzunehmen.

Wenn zum Beispiel der durchschnittliche AJAX-Inhalt 50% des Bildschirms einnimmt, ist es klug, diese 50% zu reservieren. Wenn der neue Inhalt schließlich 40 oder 60% des Bildschirms einnimmt, ist der CLS (50% - 40% = 10% Distance-Fraction) immer noch viel kleiner als 50% Distance-Fraction.

Hier ist ein Beispiel, wie man das macht:

<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>

Beheben Sie CLS-Probleme, die durch Anzeigen verursacht werden

Anzeigen werden oft (viel) später auf der Seite geladen. Dies macht Cumulative Layout Shifts, die durch Anzeigen verursacht werden, besonders ärgerlich. Wenn mehrere Anzeigen im sichtbaren Viewport laden, 'steht 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>
// rechteckige mobile Anzeige
.ad{min-height:250px;background:#dedede}
// Banner-Desktop-Anzeige
@media only screen and (min-width: 600px) {
.ad{min-height:90px}
}
</style>