Was ist Cumulative Layout Shift (CLS)?
Cumulative Layout Shift (CLS) ist ein Core Web Vital, das die Gesamtmenge an unerwarteten visuellen Shifts misst, die während der Lifetime einer Seite passieren. Jedes Mal, wenn Content springt, weil ein Image spät lädt, eine Ad injiziert oder ein Font swappt, ist das ein Layout-Shift — und für User frustrierend.
CLS ist eines von drei Core Web Vitals (mit LCP und INP), die Google als Search-Ranking-Signal nutzt.
Wie CLS gemessen wird
CLS = Summe der Layout-Shift-Scores. Jeder Shift-Score = Impact-Fraction × Distance-Fraction.
| CLS | Rating |
|---|---|
| ≤ 0.1 | Good |
| 0.1 - 0.25 | Needs Improvement |
| > 0.25 | Poor |
Was CLS verursacht
| Ursache | Warum | Fix |
|---|---|---|
| Images ohne width/height | Browser weiß nicht, wie viel Space | width + height attrs setzen |
| Ads, Embeds, Iframes | Injizieren Content unbekannter Size | Space reservieren |
| Web-Fonts spät ladend | Fallback wird mit Web-Font geswapped | font-display: optional |
| Dynamic Content über existierendem | Content oben injiziert pusht alles runter | Below appenden |
| Animations, die Layout ändern | Animating height/width | transform nutzen |
| Cookie/GDPR-Banner | Top-Banner pusht Content runter | Position fixed |
Häufige CLS-Fixes
1. Image-Dimensions immer spezifizieren
<img src="hero.jpg" alt="Hero" width="1200" height="675">2. Space für Ads/Embeds reservieren
<div class="ad-slot" style="min-height: 250px;"></div>3. Web-Fonts optimieren
@font-face {
font-family: 'Inter';
src: url('inter.woff2') format('woff2');
font-display: optional;
size-adjust: 95%;
}4. Transform statt Layout-Properties
.menu { transition: transform 0.3s; transform: translateY(0); }CLS messen
| Tool | Typ |
|---|---|
| Lighthouse / PageSpeed Insights | Lab + Field |
| Chrome DevTools | Lab |
| Web Vitals Chrome-Extension | Field |
| web-vitals.js | Programmatic, RUM |
| Search Console CWV-Report | Field |
| CrUX Dashboard | Field, public |
CLS Best Practices
- Width/Height auf Images und Videos.
- Space für alles, was spät lädt, reservieren.
- font-display: optional für non-critical Fonts.
- Fallback-Font-Metriken matchen.
- Transform-Animations.
- Skeleton-Screens.
- Nicht über existierendem Content injizieren.
- Auf langsamen Devices testen.
Häufige CLS-Fallstricke
- Responsive Image ohne Aspect-Ratio.
- Web-Fonts, die Text resizen.
- Lazy-loaded Ads ohne reservierten Space.
- Click-Handler auf shifting Elementen.
- Auto-rotierende Carousels.
- Spät-ladendes Hero-Image.
FAQ: Cumulative Layout Shift
Was ist ein guter CLS-Score?
≤ 0.1 ist gut.
Beeinflusst CLS SEO?
Ja — Core Web Vital, Ranking-Signal.
Wie fixe ich Images, die CLS verursachen?
width und height-Attribute immer setzen.
Zählen Scrolling und User-Interaktionen zu CLS?
Nein. Shifts innerhalb 500ms von User-Input ausgeschlossen.
Wie beeinflusst font-display CLS?
font-display: optional + size-adjust für besten CLS.
Kann ich CLS = 0 haben?
Möglich aber selten.
Was ist Session-Window?
5-Sekunden-Window von consecutive Shifts.
CLS-Regressions mit LoadFocus catchen
LoadFocus läuft Lighthouse-Audits aus 25+ Regionen und trackt CLS über Zeit. Registrieren bei loadfocus.com/signup.
Verwandte LoadFocus-Tools
Setze dieses Konzept mit LoadFocus in die Praxis um — derselben Plattform, die alles antreibt, was du gerade gelesen hast.