Når indhold på en side pludselig flytter sig, mens den indlæses, kan det skabe forvirring og fejlklik. Cumulative Layout Shift, forkortet CLS, er en måling af, hvor meget synlige elementer uventet ændrer placering på en webside.
CLS er en del af Core Web Vitals og bruges som et mål for sidens visuelle stabilitet. Jo lavere værdien er, desto mere rolig og forudsigelig opleves siden for brugeren. Det har betydning for brugeroplevelsen, fordi tekst, billeder og knapper helst skal blive dér, hvor man forventer.
Hvis en annonce, et billede eller en skrifttype indlæses sent og skubber resten af indholdet ned, registreres det som layoutskift. Metrikken ser altså ikke på hastighed alene, men på om siden føles stabil, mens den vises.
CLS læses som et mål for, hvor meget indhold flytter sig uventet, mens siden indlæses eller bliver brugt. Jo lavere tallet er, desto bedre, fordi brugeren møder en mere stabil side. En score på 0,1 eller derunder regnes som god. Ligger scoren mellem 0,1 og 0,25, er der behov for forbedringer. Er den over 0,25, vurderes oplevelsen som dårlig.
I praksis kan selv små forskydninger føles store. Det skyldes, at brugeren ofte er i gang med at læse, scrolle eller klikke, netop når et element pludselig flytter sig. En mindre bevægelse i layoutet kan derfor få en knap, et link eller et tekststykke til at skifte placering i det afgørende øjeblik. Resultatet kan være fejlklik, afbrudt læsning og en oplevelse af uro.
Det er altså ikke kun størrelsen på forskydningen, der tæller, men også hvor på siden den sker, og hvornår den rammer brugeren. Flere små skift kan desuden samlet give en mærkbar dårligere oplevelse. Derfor bør både enkelte elementer og hele sidens stabilitet vurderes, når man fortolker CLS i praksis.
Når elementer flytter sig, mens en side indlæses, bliver det sværere at bruge indholdet roligt og præcist. Brugeren kan miste overblikket, og små forskydninger kan føre til fejlklik på knapper, links eller annoncer. Det skaber irritation, især når man allerede er i gang med at læse eller udfylde et felt.
Problemet er ofte større på mobil, hvor skærmen er mindre, og fingeren fylder mere end en musemarkør. Her kan selv et begrænset layoutskift få stor praktisk betydning. Gentagne skift får siden til at virke mindre gennemarbejdet, og det kan svække tilliden til både indhold, afsender og eventuelle konverteringspunkter.
CLS er også relevant i et SEO-perspektiv, men effekten bør forstås nøgternt. Visuel stabilitet er et kvalitetssignal blandt flere, ikke alene afgørende for placeringer. Den største værdi ligger ofte indirekte: en mere stabil side kan give bedre brugeroplevelse, færre afbrydelser og stærkere engagement.
En høj CLS-score opstår ofte, når siden viser noget andet end det, browseren først har reserveret plads til. Den mest udbredte fejl er billeder og videoer uden faste mål. Hvis bredde og højde ikke er angivet, kender browseren ikke elementets plads på forhånd, og indholdet under skubbes ned, når filen er hentet. Det samme gælder bannere, produktbilleder og andre visuelle elementer, der indlæses sent.
Annoncer er en anden klassisk årsag. Et annoncefelt kan for eksempel være tomt ved første visning og derefter udvide sig, når annoncen bliver indsat. Så flytter tekst, knapper og andre elementer sig brat. Indlejret indhold som kort, videoer, formularer og opslag fra sociale medier giver lignende problemer, hvis containeren ikke har en fast eller mindst forventet højde fra start.
Webskrifter kan også skabe layoutskift. Når en skrifttype først vises som en reservefont og derefter erstattes af den rigtige webskrift, ændrer bogstavernes bredde og linjehøjden sig. Resultatet kan være, at overskrifter bryder anderledes, eller at et tekstafsnit pludselig fylder flere linjer. Det ses ofte på mobiler, hvor pladsen er begrænset.
Endelig giver dynamisk indsat indhold ofte en høj score. Det sker, når siden tilføjer elementer over eksisterende indhold efter indlæsning, for eksempel en cookiebesked, et nyhedsbrevsfelt eller en “tilføj til kurv”-meddelelse. Hvis en webshop indsætter en kampagnebjælke øverst på siden, efter at brugeren er begyndt at læse, kan hele siden forskubbe sig på én gang.
Det mest effektive greb er at gøre layoutet forudsigeligt, allerede før indholdet er hentet. Billeder, videoer, annoncer og indlejrede elementer bør derfor have faste dimensioner i koden, så browseren ved, hvor meget plads der skal bruges. Hvis et element kan variere i størrelse, er det stadig bedre at reservere et område på forhånd end at lade resten af siden flytte sig, når indholdet dukker op. Det gælder især øverst på siden, hvor små forskydninger ofte opleves mest forstyrrende.
For redaktører handler det om konsekvent brug af medier i de rigtige formater. Upload ikke et billede uden kendte mål, og undgå at indsætte indhold, som først presser tekst og knapper ned, når siden allerede er synlig. For udviklere er pladsreservation centralt: Opret faste beholdere til bannere, formularer, videoafspillere og annoncefelter, også når indholdet indlæses senere. Det samme gælder skrifttyper og komponenter, som kan ændre størrelse under indlæsning.
Lazy loading skal bruges med omtanke. Funktionen er nyttig til indhold længere nede på siden, men elementer tæt på toppen bør ofte indlæses normalt eller have reserveret plads, så de ikke skubber eksisterende indhold væk. Bannere, cookiebeskeder og pop op-elementer bør heller ikke indsættes på en måde, der flytter siden brat. Vis dem i et fast område, som overlay eller med plads afsat fra start. Jo færre overraskelser brugeren møder, desto lavere bliver risikoen for høj CLS.
CLS vurderes ikke kun i ét miljø. Tallet kan nemlig se forskelligt ud alt efter, om siden måles i et kontrolleret testmiljø eller hos rigtige brugere. Derfor er det vigtigt at skelne mellem laboratoriedata og feltdata. Laboratoriedata kommer fra en simuleret test på en bestemt enhed, netværkshastighed og sideindlæsning. De er nyttige til fejlfinding, fordi man kan gentage testen og se, hvilke elementer der flytter sig.
Feltdata viser derimod, hvordan siden faktisk opfører sig for rigtige brugere over tid. Her indgår variationer i skærmstørrelser, browsere, forbindelser og brugeradfærd. Feltdata giver derfor et mere realistisk billede af den oplevede stabilitet, men de er mindre kontrollerede og sværere at bruge til præcis fejlsøgning.
I PageSpeed Insights vises ofte begge datatyper side om side. Værktøjet kan både fremhæve feltdata fra rigtige besøg og laboratoriedata fra en enkelt testkørsel. Det gør det lettere at se, om et problem kun optræder i testmiljøet, eller om brugerne også oplever det i praksis.
I Lighthouse måles CLS som laboratoriedata. Her kan du se den samlede værdi og undersøge, hvilke elementer der bidrager til layoutskift. Det gør Lighthouse velegnet til teknisk analyse, mens feltdata er bedst til at vurdere den reelle brugeroplevelse.
Et typisk problem opstår på mobil, når et stort billede øverst på siden først indlæses efter teksten. Brugeren begynder at læse eller trykke på en knap, men indholdet bliver skubbet ned. Løsningen er som regel enkel: Billedet skal have faste mål eller et reserveret område, så pladsen er afsat fra start.
Annoncer skaber også ofte høj CLS. En annonceplads kan være tom i første øjeblik og derefter folde sig ud mellem afsnit, så teksten hopper. Her hjælper det at reservere den rigtige højde til annoncen på forhånd og undgå placeringer, der skubber centralt indhold væk, især på små skærme.
Et tredje eksempel er bannere til cookies eller nyhedsbreve, som vises øverst efter få sekunder. Hvis de indsættes over eksisterende indhold, flytter hele siden sig. En bedre løsning er at vise banneret som et lag oven på siden eller afsætte pladsen, før resten af siden bliver vist.
Hvordan måles CLS? CLS måler, hvor meget synlige elementer flytter sig uventet under indlæsning. Tallet beregnes ud fra både forskydningens størrelse og hvor stor en del af visningen der påvirkes. Hvad er en god CLS-score? En score på højst 0,1 regnes som god, mens højere værdier peger på problemer med visuel stabilitet.
Hvad forårsager typisk en høj CLS? De mest almindelige årsager er billeder, annoncer og indlejrede elementer uden faste mål. Også skrifttyper, bannere og indhold, der indsættes sent over eksisterende elementer, kan skabe layoutskift. Hvornår opstår problemet? Det sker ofte tidligt i indlæsningen, men kan også udløses senere, når dynamisk indhold bliver hentet ind.
Hvilke værktøjer bruges til at finde CLS-fejl? CLS kan undersøges i værktøjer, der viser Core Web Vitals samt konkrete layoutskift på siden. Her kan man både se den samlede score og identificere de elementer, der flytter sig. Kan CLS variere mellem brugere? Ja, forskelle i enheder, skærmstørrelser, netværk og cookie-bannere kan påvirke resultatet.
Hvordan forbedrer man CLS? Start med at reservere plads til billeder, videoer, annoncer og andre indlejrede moduler. Sørg også for stabile skrifttyper og undgå at indsætte nyt indhold over det, brugeren allerede ser. Små tekniske justeringer kan ofte reducere layoutskift mærkbart.
Cumulative Layout Shift, forkortet CLS, er en måling af, hvor meget indhold på en webside uventet flytter sig, mens siden bliver vist. Metrikken beskriver altså sidens visuelle stabilitet.
Hvis tekst, billeder, knapper eller andre elementer hopper rundt under indlæsning eller brug, stiger CLS. En lav score betyder, at siden virker mere rolig og forudsigelig for brugeren.
CLS er vigtigt, fordi layoutskift gør sider sværere at bruge. Når indhold flytter sig i det øjeblik, brugeren vil læse eller trykke, kan det føre til fejlklik, afbrydelser og irritation.
Det er også relevant for SEO, fordi CLS indgår i Core Web Vitals. Effekten på placeringer skal ikke overdrives, men en stabil side understøtter en bedre samlet kvalitet og brugeroplevelse.
En god CLS-score er 0,1 eller lavere. Det niveau regnes normalt som acceptabelt og viser, at siden er visuelt stabil for de fleste brugere.
Ligger scoren mellem 0,1 og 0,25, bør siden forbedres. Er den over 0,25, er der tydelige problemer med layoutskift, som ofte bør prioriteres teknisk.
CLS kan måles i værktøjer som PageSpeed Insights og Lighthouse. De viser enten laboratoriedata fra en testkørsel eller feltdata fra rigtige brugere, hvis sådanne data findes.
Til fejlsøgning er laboratoriedata ofte mest praktiske, fordi du kan gentage testen og se, hvilke elementer der flytter sig. Til vurdering af den reelle oplevelse er feltdata mere retvisende.
De mest almindelige årsager er billeder, videoer og iframes uden faste mål. Når browseren ikke kender størrelsen på forhånd, bliver pladsen først afsat senere, og så skubbes indholdet rundt.
Også annoncer, indlejret indhold, webskrifter og dynamiske beskeder kan skabe høj CLS. Det gælder især, hvis de bliver indsat over eksisterende indhold eller ændrer størrelse efter indlæsning.
På mobil bør du reservere plads til billeder, bannere, videoer og annoncefelter, før de vises. Små skærme gør forskydninger mere mærkbare, så faste dimensioner og stabile beholdere er særligt vigtige.
Undgå også at indsætte nye elementer øverst på siden, efter at brugeren er begyndt at læse. Cookiebannere, kampagnebjælker og lignende bør enten have afsat plads fra start eller vises som et lag oven på siden.
Ja, billeder uden angivet bredde og højde er en klassisk årsag til CLS. Browseren ved ikke, hvor meget plads billedet skal bruge, før filen er indlæst.
Når billedet så vises, flytter tekst og andre elementer sig for at give plads. Derfor bør billeder altid have kendte dimensioner eller ligge i en beholder med reserveret højde.
Ja, annoncer og indlejret indhold er blandt de hyppigste kilder til layoutskift. Hvis en annonceplads er tom ved første visning og senere udvider sig, skubber den ofte resten af siden ned.
Det samme gælder videoer, kort, eksterne formularer og opslag fra sociale medier. Løsningen er normalt at reservere plads på forhånd, også når indholdet først indlæses senere.
Laboratoriedata kommer fra en kontrolleret test, hvor siden bliver målt under faste forhold. De er gode til fejlsøgning, fordi du kan se problemerne i et reproducerbart miljø.
Feltdata bygger på rigtige brugeres besøg over tid. De viser derfor, hvordan siden faktisk opleves på tværs af enheder, netværk og browsere, men de er mindre præcise til at finde én konkret fejlårsag.
PageSpeed Insights og Lighthouse er blandt de mest brugte værktøjer til at analysere CLS. De viser den samlede score og kan pege på elementer, der bidrager til layoutskift.
Derudover findes også værktøjer som GTmetrix og DebugBear, som kan hjælpe med at visualisere forskydninger og følge udviklingen over tid. Det vigtigste er at kombinere måling med konkret gennemgang af de elementer, der flytter sig.