Hvad er CLS (Cumulative Layout Shift)?
CLS måler hvor meget indholdet hopper på skærmen, mens siden bliver hentet. Se grænseværdierne, de fire typiske årsager, og hvordan du får tallet i nul.
CLS står for Cumulative Layout Shift og måler, hvor meget indholdet på en side flytter sig, efter at det er blevet tegnet. Det er ikke en tid, men et forholdstal: hvor stor en del af skærmen der rykkede sig, ganget med hvor langt det rykkede. CLS er et af de tre Core Web Vitals, og det eneste af dem, der måler noget, brugeren kan mærke som irritation frem for som ventetid.
Sådan måles CLS
| Vurdering | CLS |
|---|---|
| God | 0,1 eller under |
| Kan forbedres | 0,1–0,25 |
| Dårlig | Over 0,25 |
Som de øvrige Core Web Vitals gøres CLS op på 75. percentil af sidevisningerne.
Der findes en vigtig undtagelse: et skift, der sker inden for et halvt sekund efter et klik eller et tastetryk, tæller ikke med. Åbner en menu og skubber indholdet ned, fordi brugeren selv bad om det, er det ikke en fejl. Det er kun de skift, brugeren ikke bad om, der koster.
De fire årsager jeg ser oftest
Billeder uden width og height. Browseren aner ikke, hvor meget plads billedet skal fylde, så den lader teksten løbe sammen — og skubber den ned igen, når billedet lander. Det er den mest almindelige, og den letteste at rette.
Skrifttyper der byttes undervejs. Siden tegnes først med en systemskrift, og når den rigtige skrift er hentet, ombrydes teksten. To linjer bliver til tre, og alt under dem rykker.
Reklamer, cookiebannere og indlejringer. En YouTube-indlejring eller et bannerfelt uden reserveret højde vokser fra nul til flere hundrede pixels i det øjeblik, indholdet kommer.
Indhold indsat af JavaScript. Et rabatbanner, en anmeldelsesstribe eller en “gratis fragt over 500 kr.”-linje, der lægges ind i toppen efter tegningen, skubber hele siden ned.
Sådan får du CLS i nul
- Sæt
widthogheightpå hvert eneste<img>og<video>. Browseren regner selv forholdet ud og reserverer pladsen — også når billedet er responsivt. - Giv indlejringer og annoncepladser en fast højde i CSS, så hullet er der, før indholdet er.
- Brug
font-display: swapsammen med en reservefont, der fylder nogenlunde det samme, eller preload den rigtige skrift. - Indsæt aldrig nyt indhold over noget, der allerede er tegnet. Skal der være et banner, skal pladsen være reserveret fra starten.
Et CLS på 0 er ikke et teoretisk mål. Det er det, jeg går efter, og det er opnåeligt på en helt almindelig WordPress-side.
Ofte stillede spørgsmål
Hvad er en god CLS-værdi?
0,1 eller derunder. Mellem 0,1 og 0,25 hedder det “kan forbedres”, og over 0,25 er dårligt.
Hvorfor viser PageSpeed Insights CLS 0, når jeg selv kan se siden hoppe?
Fordi laboratoriemålingen kun ser de første sekunder og ikke ruller ned ad siden. Skift, der sker længere nede, eller når man scroller, fanges kun af feltdata fra rigtige besøgende. PageSpeed Insights viser begge dele — kig på feltdelen øverst.
Tæller CLS med i Googles ranking?
CLS indgår i Core Web Vitals, som er en del af Googles signal for sidefunktionalitet. Det vejer mindre end relevans og indhold, men på to sider, der ellers ligner hinanden, er det med til at afgøre rækkefølgen. Se hvad er SEO.
Hvad betyder tallet 0,1 egentlig?
Det er andelen af skærmen, der flyttede sig, ganget med hvor langt den flyttede sig. Et element, der fylder halvdelen af skærmen og rykker en femtedel af skærmhøjden ned, giver 0,5 × 0,2 = 0,1. Værdierne fra hvert skift lægges sammen i vinduer på fem sekunder, og den værste periode er den, der tæller.