Mäter oväntade förflyttningar
Cumulative Layout Shift summerar hur mycket synligt innehåll flyttar sig utan att användaren orsakat det. En låg poäng ger en stabilare sida.
Det som oftast får layouten att hoppa
Bilder utan dimensioner, annonser, formulärmeddelanden och webfonts som ändrar textmått kan flytta innehåll efter att sidan börjat visas.
Så förbättras CLS
Ange width och height eller aspect-ratio, reservera plats för dynamiska element och ladda typsnitt på ett stabilt sätt. Lägg inte nytt innehåll ovanför det användaren läser.
Mät både labb och fält
Ett laboratorietest visar en körning, medan fältdata speglar riktiga besökare. Problem kan variera med skärmstorlek, cookies och annonser.
Ett cookie-meddelande kan vara snabbt men ändå skapa en dålig layoutförskjutning
Sidan laddas och besökaren börjar läsa rubriken. En halv sekund senare läggs en cookie-banner in högst upp och skjuter ned hela heron 120 pixlar. Inget laddar särskilt långsamt, men upplevelsen känns instabil och CLS kan påverkas.
En bättre lösning är att låta bannern ligga som overlay eller reservera dess yta från början, beroende på design och juridiska krav. Samma tankesätt gäller kampanjfält och personaliserade meddelanden: dynamiskt innehåll bör inte oväntat flytta det som användaren redan håller på att läsa eller klicka på. Prioritera sådant som påverkar första skärmen och interaktionen.
CLS mäter oväntade förflyttningar medan sidan används
Cumulative Layout Shift handlar om element som hoppar efter att de först blivit synliga. Ett vanligt exempel är en bild utan reserverad höjd som laddas in och skjuter ned texten. Annonser, cookie-banners och webbtypsnitt kan ge liknande effekter. Måttet fokuserar på layoutförskjutningar som inte utlöses på ett sätt användaren förväntar sig. En sida som flyttar knappen precis när någon ska klicka upplevs instabil även om den laddar snabbt.
Reservera utrymme för bilder och inbäddat innehåll
Ange bildens bredd och höjd eller använd `aspect-ratio` så att webbläsaren kan beräkna platsen innan filen är nedladdad. Samma princip gäller video, annonser och andra komponenter som laddas asynkront.
Om en banner kan bli 200 pixlar hög bör layouten veta det från början. Det är ofta enklare att förebygga skiftet i CSS och HTML än att försöka kompensera efter att elementet redan lagts in.
Fontbyten och dynamiska komponenter kan behöva särskild kontroll
När ett webbtypsnitt laddas kan textens mått ändras jämfört med fallback-fonten och flytta resten av layouten. Välj kompatibla fallback-värden och optimera fontladdningen. Dynamiska meddelanden som visas överst på sidan bör helst inte skjuta ned allt innehåll efter att användaren börjat läsa. DevTools kan markera layout shifts och hjälpa dig se vilket element som orsakade dem.
Då blir CLS ett konkret layoutproblem i stället för en abstrakt siffra.
Behöver företaget en bättre hemsida?
Få ett tydligt förslag och fast pris
Vi bygger och förbättrar WordPress-hemsidor med fokus på tydlighet, prestanda, SEO och enkel förvaltning.
Snabb återkoppling
Hjälpte den här artikeln dig?
Din röst sparas anonymt och hjälper oss att förbättra guiderna.