CLS (Cumulative Layout Shift)
CLS måler hvor mye synlige elementer uventet forskyver seg mens en side lastes inn – en av Googles kjernenettverk.
Hva er CLS (Cumulative Layout Shift)?
CLS måler hvor mye synlige elementer uventet skifter mens en side lastes eller brukes. Poengsummen er enhetsløs og beregnes som påvirkningsbrøk (hvor mye av visningsporten som påvirkes) ganger avstandsbrøk (hvor langt elementene beveger seg). CLS er en av de tre Core Web Vitals sammen med LCP og INP, og en god poengsum er 0.1 eller lavere ved 75. persentilen – alt over 0.25 anses som dårlig.
Hvorfor er CLS (Cumulative Layout Shift) viktig?
Layouthopp er direkte skadelige i en nettbutikk: en shopper er i ferd med å trykke på “Kjøp”, men et banner eller et sent lastet bilde trykker på knappen og trykken lander på noe annet. Det skaper frustrasjon, feilklikk og mistillit rett før konvertering. CLS er også en del av Googles sideopplevelsessignaler, så vedvarende høye verdier kan trekke rangeringene ned. En stabil side føles raskere og mer profesjonell – selv når råhastigheten er identisk.
Vanlige brukstilfeller
- Bilder og video uten dimensjoner. Uten
width/heightelleraspect-ratiokan ikke nettleseren reservere plass på forhånd, så innholdet hopper når mediene lastes inn - par dette med riktig alt tekst. - Cookie-bannere og popup-vinduer. Innhold som injiseres øverst eller midt på siden skyver alt under seg.
- App-widgets. Anmeldelser, “nylig sett” og oppsalgsblokker som lastes inn etter resten, flyter layouten på nytt.
- Webfonter. Bytte fra en reservefont til den endelige fonten kan føre til at teksten flyter om og skifter.
- Annonser og iframes uten reservert plass i området over den synlige delen.
Shopify-perspektiv
I Shopify kommer de fleste layouthopp fra apper og temaredigeringer i stedet for kjerneplattformen. Reserver alltid plass til dynamiske blokker, sett faste dimensjoner på produktbilder, og last inn informasjonskapselbannere og popup-vinduer slik at de ikke skyver innhold rundt. Mål effekten med PageSpeed Insights eller Lighthouse på både mobil og datamaskin, og se hastighetsrapporten under Nettbutikk i Shopify-administratoren, som er bygget på Google Lighthouse-data.