CLS – Cumulative Layout Shift
Kaldes også: Cumulative Layout Shift, Visuel stabilitet
Når elementer på en hjemmeside uventet flytter sig under indlæsning, måles denne ustabilitet af Google-metrikken Cumulative Layout Shift (CLS). En høj CLS-score betyder en irriterende brugeroplevelse, hvor kunder risikerer at klikke forkert, hvilket skader både din konverteringsrate og dine Google-placeringer.
Opdateret
Hvorfor skærmhop koster webshops kunder og omsætning
Mange webshopejere har prøvet at besøge en side på mobilen, trykke på en knap eller et link, og i samme sekund hoppe videre til det forkerte sted, fordi et billede over knappen pludselig færdigindlæste. I e-handel er den slags uventede bevægelser katastrofale for konverteringen.
Hvis en kunde trykker på knappen for at gennemføre et køb, men siden hopper, så kunden i stedet rammer en annuller-knap eller en anden knap, forlader kunden ofte kurven i frustration. Google måler denne visuelle stabilitet som en del af deres Core Web Vitals som indgår i rangeringssystemerne sammen med andre signaler. En dårlig CLS-score er ikke en særskilt Google-straf.
De primære årsager til dårlig CLS i praksis
I moderne e-handelssystemer opstår CLS sjældent af ond vilje, men af manglende teknisk præcision i skabelonen eller temaet. De tre hyppigste syndere er:
- Billeder uden dimensioner: Hvis din shop indlæser produktbilleder uden angivne højder og bredder i HTML-koden, ved browseren ikke, hvor meget plads billedet tager, før det er hentet.
- Dynamic content og banners: Kampagnebanners, cookie-bannere eller produktanmeldelser, der skubbes ind i toppen af siden efter indlæsning.
- Webfonts: Eksterne skrifttyper, der erstatter standardskrifttyper med et kort blink, hvilket ændrer tekstlinjernes højde.
| CLS-score | Vurdering | Konsekvens for din shop |
|---|---|---|
| 0,00 – 0,10 | God | Få uventede layoutskift |
| 0,11 – 0,25 | Kan forbedres | Risiko for faldende konvertering på mobil |
| over 0,25 | Dårlig | Betydelige uventede layoutskift |
Sådan opnår du en stabil mobiloplevelse
En god tommelfingerregel er altid at reservere pladsen på skærmen på forhånd til dynamisk indhold. Det gøres teknisk med CSS via egenskaber som aspect-ratio eller min-height. Ved at gennemføre en gratis webshop-audit kan du hurtigt afdække, om din webshop lider af uventede hop, og hvilke specifikke filer der forårsager problemet.
