CLS

Du har sikkert prøvet det. Du er ved at trykke på en knap, og lige i det øjeblik hopper siden, så du rammer noget helt andet. Den slags spring måler CLS.

Hvad er CLS

CLS står for Cumulative Layout Shift og måler, hvor meget indholdet på en side flytter sig uventet, mens den loader. Det er den ene af de tre Core Web Vitals og handler om visuel stabilitet. En god CLS er under 0,1. Lav CLS betyder, at siden står stille og forudsigeligt, mens den bygges op, så brugeren ikke bliver narret til at klikke forkert. Det er det mål, der er lettest at forstå intuitivt, fordi alle har oplevet en side, der hopper.

Hvad måler CLS?

CLS handler om noget, vi alle kender, men sjældent har et ord for. Du åbner en side, begynder at læse, og pludselig skubber et billede eller en annonce hele teksten ned. Eller du sigter efter en knap, og i det sekund flytter den sig, så du rammer en reklame i stedet.

Disse uventede spring er præcis, hvad CLS måler. Tallet udtrykker, hvor meget og hvor voldsomt indholdet flytter sig, mens siden loader. Jo mere det hopper, jo højere – og dårligere – bliver tallet.

Bemærk, at CLS ikke måles i sekunder eller millisekunder som de to andre. Det er et abstrakt tal, der udtrykker mængden af bevægelse. Nul ville betyde en helt rolig side, der ikke flytter sig en millimeter.

Hvorfor opstår layout-spring?

Årsagerne er som regel til at få øje på, når man først kender dem:

• Billeder uden fastsat størrelse. Når browseren ikke ved, hvor stort et billede bliver, reserverer den ingen plads. Når billedet så loader, skubber det alt andet.
• Annoncer og indlejret indhold, der dukker op og fortrænger teksten.
• Skrifttyper, der skifter, når en webfont loader og pludselig ændrer tekstens størrelse.
• Indhold, der indsættes dynamisk over det, brugeren allerede er i gang med at læse.

Den gennemgående synder er manglende reserveret plads. Når browseren ikke på forhånd ved, hvor meget plads et element skal bruge, opstår springet i det øjeblik, elementet endelig dukker op.

Hvad hjælper mod dårlig CLS?

Heldigvis er CLS et af de mere håndterbare mål at rette. Nøglen er at fortælle browseren på forhånd, hvor meget plads hvert element skal bruge:

• Angiv altid bredde og højde på billeder, videoer og indlejret indhold.
• Reservér plads til annoncer, så de ikke skubber, når de loader.
• Brug font-display swap fornuftigt, så tekstskift bliver mindre voldsomt.
• Indsæt nyt indhold under det eksisterende, ikke oven over det, brugeren læser.

CLS handler om respekt

Her er en pointe, der løfter CLS fra et teknisk tal til noget mere menneskeligt. En side, der hopper, signalerer reelt en mangel på respekt for brugerens opmærksomhed. Den afbryder, forstyrrer og narrer.

Det værste tilfælde er det velkendte fejlklik. Du vil trykke på “tilbage”, men en annonce loader i sidste øjeblik og flytter knappen, så du i stedet klikker dig ind på reklamen. For brugeren føles det manipulerende, selv hvis det er utilsigtet. Og den følelse smitter af på hele indtrykket af afsenderen.

Hos Concept Interest fremhæver vi ofte CLS som det mest undervurderede af de tre Core Web Vitals, fordi det er så let at overse i udviklingen. Alt ser fint ud på udviklerens hurtige forbindelse, hvor billederne loader øjeblikkeligt. Først ude hos den rigtige bruger med en langsommere forbindelse begynder siden at hoppe. En stabil side er en høflig side – og høflighed over for brugeren betaler sig både i tillid og i salg.