CLS (Cumulative Layout Shift)
CLS mäter hur mycket synliga element oväntat förskjuts medan en sida läses in - en av Googles grundläggande webbviktigheter.
Vad är CLS (Cumulative Layout Shift)?
CLS mäter hur mycket synliga element oväntat förskjuts medan en sida laddas eller används. Poängen är enhetslös och beräknas som påverkansfraktion (hur mycket av visningsporten som påverkas) gånger avståndsfraktion (hur långt elementen rör sig). CLS är en av de tre Core Web Vitals tillsammans med LCP och INP, och ett bra betyg är 0.1 eller lägre vid 75:e percentilen - allt över 0.25 anses vara dåligt.
Varför spelar CLS (Cumulative Layout Shift) någon roll?
Layouthopp är direkt skadliga i en onlinebutik: en shoppare är på väg att trycka på “Köp”, men en banner eller en senladdad bild trycker på knappen och trycket landar på något annat. Det skapar frustration, felklick och misstro precis innan konvertering. CLS är också en del av Googles sidupplevelsesignaler, så ihållande höga värden kan dra ner rankingen. En stabil sida känns snabbare och mer professionell — även när råhastigheten är identisk.
Vanliga användningsfall
- Bilder och video utan mått. Utan
width/heightelleraspect-ratiokan webbläsaren inte reservera plats i förväg, så innehållet hoppar när media laddas - koppla ihop detta med korrekt alt text. - Cookiebanner och popup-fönster. Innehåll som injiceras högst upp eller mitt på sidan skjuter allt under sig.
- App-widgets. Recensioner, “sedda nyligen” och merförsäljningsblock som laddas efter resten omformar layouten.
- Webbteckensnitt. Att byta från ett reservteckensnitt till det slutliga teckensnittet kan göra att texten flyter om och ändras.
- Annonser och iframes utan reserverat utrymme i området ovanför mitten.
Shopify perspektiv
I Shopify kommer de flesta layouthopp från appar och temaredigeringar snarare än kärnplattformen. Reservera alltid plats för dynamiska block, ställ in fasta mått på produktbilder och ladda cookie-banners och popup-fönster så att de inte trycker runt innehåll. Mät effekten med PageSpeed Insights eller Lighthouse på både mobil och dator, och titta på hastighetsrapporten under Online Store i Shopify-administratören, som bygger på Google Lighthouse-data.