Hvad er CLS? Undgå indhold, der hopper på webshoppen

CLS står for Cumulative Layout Shift og måler uventede forskydninger af synligt indhold på en hjemmeside. Det er en af de tre Core Web Vitals.

Et typisk problem opstår, når kunden vil trykke på “Læg i kurv”, og et sent indlæst billede flytter knappen. Det kan føre til fejlklik og gøre siden vanskelig at bruge.

Hvordan forstås scoren?

CLS kombinerer, hvor meget synligt indhold der flytter sig, og hvor langt det flytter sig. Målingen tager udgangspunkt i den største samlede forskydning inden for en afgrænset gruppe af tætliggende hændelser.

En score på 0,1 eller mindre regnes som god. Over 0,25 regnes som dårlig. Vurderingen sker ved den 75. percentil af de målte sidevisninger. Se Googles forklaring af CLS.

CLS kan opstå under hele besøget. Det handler derfor ikke kun om de første sekunder, hvor siden indlæses. Samtidig er enhver layoutændring ikke automatisk et problem: Kunden kan eksempelvis selv åbne en sektion og forvente, at indholdet flytter sig.

Typiske årsager i en webshop

• Produktbilleder, hvor der ikke er reserveret plads.
• Anmeldelser eller anbefalinger, som dukker op over eksisterende indhold.
• Skrifttyper, der får tekstlinjer til at ændre størrelse efter indlæsning.
• Kampagnebannere eller apps, som ændrer højden på toppen af siden.

At bruge font-display: swap er ikke i sig selv en garanti mod forskydninger. Forskellen mellem den første og den endelige skrifttype har også betydning.

Hvordan finder du fejlen?

Gennemgå et helt besøg: Åbn et produkt, vælg en variant, brug filtre og læg en vare i kurven. Test både med en langsom forbindelse og på en mobilskærm.

Se efter det element, som flytter sig, men også efter det indhold, der skubber det. Knappen kan være symptomet, mens en anmeldelsesboks ovenover er årsagen.

Hvad kan du forbedre?

Reserver plads til billeder og dynamiske komponenter. Tilpas skrifttyper og deres reservevalg, og undgå at indsætte uventet indhold over det, kunden allerede bruger.

Kontrollér resultatet efter ændringer i tema og apps. Kombinér målingen med en brugertest, fordi en lav score ikke alene siger, om siden er nem at bruge. Arbejdet kan indgå i en samlet indsats med konverteringsoptimering.