CLS (Cumulative Layout Shift)

Cumulative Layout Shift (CLS) ist eine Core-Web-Vital-Metrik, die die visuelle Stabilität einer Seite während des Ladens misst. Anstatt Geschwindigkeit oder Reaktionsfähigkeit zu messen, konzentriert sich CLS darauf, ob sich sichtbare Inhalte während und nach dem Ladevorgang unerwartet verschieben. Jedes Mal, wenn sich ein Element ohne Nutzerinteraktion bewegt, zeichnet der Browser die Entfernung und Größe der Verschiebung auf. Diese einzelnen Verschiebungswerte werden in Sitzungsfenster gruppiert, und das größte Sitzungsfenster wird zum CLS-Score der Seite. Ein Score von 0,1 oder weniger gilt als gut, 0,1 bis 0,25 muss verbessert werden, und alles über 0,25 ist schlecht.

Unerwartete Layout-Verschiebungen verschlechtern die Nutzererfahrung direkt. Ein Leser, der gerade einen Button drücken will, tippt versehentlich auf das falsche Element, wenn der Inhalt springt. Ein Betrachter, der durch ein Dokument scrollt, verliert möglicherweise seine Stelle. Diese Frustrationen erhöhen die [Absprungrate](/glossary/bounce-rate) und verringern die Verweildauer. Google verwendet CLS als einen der drei [Core Web Vitals](/glossary/core-web-vitals) in seinem Ranking-Algorithmus, sodass Seiten mit schlechter visueller Stabilität sowohl beim Engagement als auch beim SEO Nachteile haben. Für digitale Verleger, die interaktive Inhalte wie Flipbooks einbetten, ist die CLS-Kontrolle besonders wichtig, da Drittanbieter-Embeds eine der häufigsten Ursachen für Layout-Verschiebungen sind.

FlipLinks Viewer ist darauf ausgelegt, CLS zu minimieren, indem er feste Abmessungen für den [Flipbook](/glossary/flipbook)-Container reserviert, bevor der Seiteninhalt vollständig geladen wird. Bilder und interaktive Elemente werden in vorab zugewiesenen Bereichen gerendert, damit sich das Layout beim Eintreffen der Assets nicht verschiebt. Der [Three.js](/glossary/three-js)-Flipbook-Renderer und der [PDF.js](/glossary/pdf-js)-Dokumenten-Viewer initialisieren sich beide mit einem stabilen Rahmen und verhindern, dass die Seitenblätter-Animation Layout-Sprünge verursacht. Der von FlipLink generierte [responsive Einbettungscode](/features/sharing-and-distribution) verwendet Seitenverhältnis-Container, die sofort den korrekten Platz auf der Hostseite beanspruchen. Dieses Design kommt sowohl dem eingebetteten Viewer auf deiner Website als auch der gehosteten Publikation auf go.fliplink.me zugute.

CLS wird anhand zweier Komponenten pro Verschiebung gemessen: **Impact Fraction** (der betroffene Prozentsatz des Viewports) und **Distance Fraction** (wie weit sich das Element relativ zum [Viewport](/glossary/viewport) bewegt hat). Der Layout-Shift-Score für ein einzelnes Frame entspricht der Impact Fraction multipliziert mit der Distance Fraction. Verschiebungen, die innerhalb von 500 Millisekunden nach einer Nutzereingabe (wie einem Klick oder Tippen) auftreten, werden ausgeschlossen, da der Nutzer als Reaktion auf seine Aktion eine Bewegung erwartet. Chrome DevTools, Lighthouse, PageSpeed Insights und die Web-Vitals-JavaScript-Bibliothek melden alle CLS. Felddaten aus dem Chrome User Experience Report (CrUX) liefern reale CLS-Scores von tatsächlichen Besuchern.

CLS verwendet einen **Sitzungsfenster-Ansatz** zur Berechnung des Endscores. Ein Sitzungsfenster ist eine Gruppe von Layout-Verschiebungen, die innerhalb einer Sekunde voneinander auftreten, mit einer maximalen Fensterdauer von fünf Sekunden. Der CLS-Score der Seite ist das größte einzelne Sitzungsfenster, nicht die Summe aller Verschiebungen. Diese Methode wurde 2021 aktualisiert, um langlebige Seiten und Single-Page-Applications, bei denen Inhalte progressiv geladen werden, besser abzubilden. Häufige Ursachen für hohen CLS sind Bilder ohne Breiten- und Höhenattribute, dynamisch eingefügte Anzeigen oder Banner, Webfonts, die einen Flash of Unstyled Text (FOUT) auslösen, und Drittanbieter-Embeds, die asynchron ohne reservierten Platz geladen werden.

**„CLS ist nur beim initialen Seitenaufbau relevant."** CLS erfasst Verschiebungen während des gesamten Lebenszyklus der Seite, einschließlich solcher, die durch Lazy-Loaded-Bilder, Infinite-Scroll-Inhalte oder dynamisch eingefügte Elemente ausgelöst werden. Single-Page-Applications, die bei der Navigation Inhalte austauschen, können CLS ansammeln, wenn Übergänge nicht sorgfältig gehandhabt werden. **„Das Ziel ist ein CLS-Score von 0."** Obwohl Null ideal ist, gilt ein Score von 0,1 oder weniger als gut. Das Streben nach absolutem Null kann zu Überoptimierung führen. Das praktische Ziel ist es, Verschiebungen für Nutzer unmerklich zu halten. **„CLS misst, wie schnell eine Seite lädt."** CLS hat nichts mit Geschwindigkeit zu tun. Eine Seite kann in unter einer Sekunde laden und trotzdem einen schrecklichen CLS haben, wenn Elemente beim Rendern herumspringen. Die Geschwindigkeit wird durch [LCP](/glossary/lcp) und andere Zeitmetriken gemessen, nicht durch CLS.