CLS: stoppa innehåll som hoppar runt på sidan

CLS, Cumulative Layout Shift, mäter hur mycket innehållet flyttar sig oväntat på skärmen. En bild eller banner som laddas sent kan knuffa undan texten du läser eller knappen du tänkte trycka på. Genom att reservera plats i förväg kan du ofta göra sidan stabilare.

CLS ingår i Core Web Vitals. En bra nivå är högst 0,1 vid den 75:e percentilen. Värdet är en poäng, inte en tid i sekunder.

Vad får sidan att flytta sig?

Vanliga orsaker är bilder utan reserverat utrymme, inbäddningar som ändrar höjd och innehåll som sätts in ovanför texten besökaren läser. Ett typsnittsbyte kan också ändra radbrytningar och flytta innehåll.

Börja inte med att ändra det som rör sig. En rubrik kan hoppa ned därför att bilden ovanför får sin höjd först när den laddats. Se vad som hände precis före förflyttningen.

Hitta det som får sidan att hoppa

Spela in i Performance medan du laddar och använder sidan. Leta upp layoutförskjutningarna och jämför bildrutorna före och efter. Följ vad som ändrades runt det ögonblick då innehållet hoppade.

Hoppar en rubrik nedåt kontrollerar du om bilden ovanför hade reserverat utrymme. Flyttas en produktlista kan en widget ha satts in före den. Granska höjd, bredd och ordning för komponenterna runt förskjutningen.

För en bild på 1 200 × 800 pixlar kan bredd- och höjdattribut tala om för webbläsaren att förhållandet är 3:2 innan bilden laddas. Bilden kan ändå skalas till skärmen. Testa olika bredder, långa rubriker och stora widgetvarianter, så att lösningen inte bara passar en viss skärmstorlek.

Ett konkret bildexempel

En bred illustration mitt i en artikel behöver plats redan innan den har hämtats. Annars kan webbläsaren först placera nästa stycke för högt. När bilden laddas flyttas texten ned.

Med bredd- och höjdattribut, eller rätt bildförhållande i CSS, kan webbläsaren avsätta utrymmet från början. Bilden kan fortfarande anpassas till skärmen. Det är proportionerna som behöver vara kända.

Testa mer än de första sekunderna

Sidan kan vara stabil vid laddning men börja hoppa när besökaren scrollar, öppnar en recension eller får en personlig rekommendation. Fortsätt därför testet även efter de första sekunderna.

Prova en vanlig väg genom sidan och se vad som tillkommer sent. Testa med tom cache och olika skärmbredder. Radbrytningar och bildproportioner kan göra att ett fel bara syns på mobil.

Skilj på förväntad och oväntad rörelse

När besökaren öppnar ett dragspel flyttas innehållet under det som väntat. CLS har särskilda regler för ändringar efter en användarinteraktion, så all rörelse räknas inte på samma sätt. Bedöm ändå om sidan känns stabil och går att använda.

Ett formulär som plötsligt flyttar fokus kan vara svårt att använda trots ett bra CLS-värde. Kontrollera därför även själva upplevelsen.

Rätta gemensamma fel i mallen

Om samma recensionswidget får många produktsidor att hoppa rättar du widgeten eller dess plats i mallen. Testa sedan flera produkter och följ CLS från verkliga besök efter publiceringen.

När du arbetar med bildoptimering behöver du både minska filstorleken och ge bilden en stabil plats. En liten fil kan fortfarande flytta innehållet om dimensionerna saknas. Läs mer om måtten i guiden till Core Web Vitals.