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.
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 og straffer webshops med dårlig stabilitet ved at sænke deres organiske placeringer.
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 standardfonde med et kort blink, hvilket ændrer tekstlinjernes højde.
| CLS-score | Vurdering | Konsekvens for din shop |
|---|---|---|
| 0,00 – 0,10 | God | Optimal oplevelse, ingen Google-straf |
| 0,11 – 0,25 | Kan forbedres | Risiko for faldende konvertering på mobil |
| over 0,25 | Dårlig | Høj afvisningsrate og tab af Google-placeringer |
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.