Hvorfor cumulative layout shift påvirker SEO
Hvad er Cumulative Layout Shift (CLS)?
Noget af det værste, du kan byde dine kunder på din hjemmeside, er at elementer hopper og danser rundt som et loppecirkus. Derfor er viden om CLS vigtig.
Cumulative Layout Shift (CLS) er en vigtig måling inden for webperformance, der bruges til at vurdere, hvor meget indholdet på en webside uventet flytter sig, mens siden indlæses.
Disse uventede bevægelser og layout shifts kan være frustrerende for brugeren, især hvis du forsøger at klikke på noget, og elementet (elements) pludselig hopper væk.
Et enkelt skift kan have stor betydning for den samlede user experience og systemets ydeevne.
Googles Core Web Vitals
CLS er en del af Googles Core Web Vitals og måler den samlede sum af alle layout shifts, der sker under indlæsningen af siden. Et layoutskift opstår, når et synligt element ændrer position fra én frame til den næste, uden at brugeren har interageret med siden.
Denne cumulative layout shift er afgørende for at vurdere den visuelle stabilitet og det overordnede design af din hjemmeside.
Forbyg irritation ved layoutskift
Et lavt CLS-score (tæt på ,1) betyder, at siden er stabil og giver en god brugeroplevelse og stabilitet, mens et højt CLS-score indikerer, at der er mange uventede layout shifts, hvilket kan føre til irritation og tab af brugere.
Typiske årsager til høj CLS kan være
- Billeder uden angivne dimensioner, hvilket kan medføre uventede skift og forringe designet.
- Annoncer, embeds eller iframes uden reserveret plads, så elementerne ikke placeres korrekt og skaber ekstra layout shifts.
- Dynamisk indhold, der indsættes over eksisterende elements og skaber et uforudsigeligt skift.
For at forbedre din sides CLS-score og opnå bedre ydeevne, bør du altid reservere plads til billeder og andre elements, så designet og den samlede stabilitet bevares, og brugerens user experience forbliver optimal.
Hvordan skal du arbejdes med Cumulative Layout Shift (CLS)?
For at arbejde effektivt med Cumulative Layout Shift (CLS) og sikre en stabil og optimal user experience på din hjemmeside, bør du følge disse bedste praksisser:
- Angiv altid dimensioner på billeder og videoer Sørg for, at alle billeder, videoer og andre medier har fastsatte bredde- og højdeattributter i HTML eller CSS. På den måde reserveres der plads til dem, før de indlæses, og layoutet forbliver stabilt med minimalt designskift og layout shifts, som er vigtige for ydeevne og user experience.
- Reserver plads til annoncer og embeds Annoncer, iframes og andre eksterne elements kan ofte forårsage layout shifts. Giv dem en fast størrelse eller brug CSS-containere, så der altid er plads til dem – også hvis de indlæses langsomt. Denne metode bidrager til en forbedret stabilitet og et mere gennemført design.
- Undgå at indsætte nyt indhold over eksisterende Hvis du tilføjer nyt indhold dynamisk (fx via JavaScript), så sørg for, at det ikke skubber eksisterende indhold nedad. Indsæt i stedet nyt indhold under det, der allerede er synligt for at forhindre uønskede layout shifts og sikre en konsekvent user experience.
- Brug font-display: swap for webfonts Når webfonts indlæses, kan tekst springe eller ændre størrelse, hvilket påvirker både design og ydeevne. Brug font-display: swap i din CSS for at minimere denne effekt og sikre, at teksten vises hurtigt og stabilt.
- Test og overvåg din side Brug værktøjer som Google PageSpeed Insights, Lighthouse eller Chrome DevTools til at måle og overvåge din sides CLS-score. Disse værktøjer kan hjælpe dig med at identificere præcis, hvilke elements og layout shifts der forårsager problemer, og dermed forbedre den samlede stabilitet og ydeevne.
- Optimer animationer og overgange Undgå at animere egenskaber, der påvirker layoutet (som bredde og højde). Brug i stedet transformeringer som transform: scale() eller opacity, som ikke forårsager layout shifts og sikrer et tidligere nævnt glat design.
Ved at følge disse trin kan du minimere cumulative layout shift og sikre, at dine brugere får en mere behagelig, stabil og effektiv user experience.
Hvorfor er CLS vigtigt?
CLS er vigtigt, fordi det direkte påvirker brugeroplevelsen på din hjemmeside. Når elements på siden pludselig flytter sig (layout shifts) under indlæsning, mens brugeren læser eller forsøger at interagere, kan det føre til frustration, fejlklik og i værste fald, at brugeren forlader siden. Denne ustabilitet i designet kan skade din sides samlede ydeevne.
Her er de vigtigste grunde til, at CLS betyder noget
- Brugervenlighed: Uventede layout shifts kan forstyrre navigationen og interaktionen med siden, hvilket betyder, at selv om designet er flot, kan et enkelt skift gøre det svært for brugere at udføre de ønskede handlinger.
- Troværdighed: En side, der hopper rundt, virker uprofessionel og utroværdig. Et konsekvent og gennemtænkt design skaber stabilitet og giver en bedre user experience, hvilket også kan have en positiv effekt på ydeevnen.
- Konverteringer: Dårlig user experience kan koste dig salg, tilmeldinger eller andre vigtige handlinger, fordi brugerne bliver irriterede og forlader siden. Et minimalt antal layout shifts bidrager til en mere stabil og pålidelig brugeroplevelse.
- SEO og rangering: Google bruger CLS som en del af deres Core Web Vitals, som påvirker din sides placering i søgeresultaterne. En lav CLS-score betyder, at dine cumulative layout shift-problemer er under kontrol, og det kan give dig en konkurrencefordel i søgemaskinerne.
Stabil og professionel oplevelse
En lav CLS-score giver en mere stabil, behagelig og professionel oplevelse for dine besøgende, og det kan mærkes både på bundlinjen og i søgeresultaterne.
Når din side ikke hopper rundt, kan brugerne nemmere fokusere på indholdet og gennemføre de handlinger, du ønsker, som for eksempel at købe et produkt eller udfylde en formular.
Viser fokus på den gode brugeroplevelse
Det øger sandsynligheden for, at de bliver længere på siden og vender tilbage, hvilket afspejler et godt design og optimeret ydeevne.
Samtidig sender en god CLS-score et signal til Google om, at din side prioriterer brugerens user experience, hvilket kan forbedre din placering i søgeresultaterne og give dig en fordel over konkurrenterne. Med andre ord er det en god SEO-strategi.
Hvad er en god CLS-score?
En god CLS-score er ,1 eller lavere. Det betyder, at din side kun har minimale eller slet ingen uventede layout shifts, hvilket giver en stabil og behagelig oplevelse for brugerne. Ved at have styr på cumulative layout shift sikrer du, at både elements og design forbliver konsistente, og at ydeevnen ikke påvirkes negativt af utilsigtet skift.
Google anbefaler følgende grænser for CLS:
- God: ,1 eller lavere
- Behov for forbedring: Over ,1 og op til ,25
- Dårlig: Over ,25
Hvis din side ligger på ,1 eller derunder, kan du være tryg ved, at dine besøgende oplever et stabilt layout og en forbedret user experience, samtidig med at det samlede design og ydeevnen er optimeret.
Andre vigtige score i Core Web Vitals
Udover CLS (Cumulative Layout Shift) er der to andre centrale målinger i Core Web Vitals, som du bør holde øje med:
1. Largest Contentful Paint (LCP) LCP måler, hvor lang tid det tager, før det største synlige indholdselement (fx et billede eller en stor tekstblok) er indlæst og synligt for brugeren. En god LCP-score er 2,5 sekunder eller hurtigere. Det sikrer, at siden føles hurtig og brugervenlig med en konsekvent stabilitet i designet.
2. First Input Delay (FID) FID måler, hvor hurtigt siden reagerer, når brugeren første gang forsøger at interagere med den (fx klikker på en knap eller et link). En god FID-score er 100 millisekunder eller hurtigere. Det betyder, at siden føles responsiv og klar til brug, uden unødvendige layout shifts, der kan forringe user experience.
Bemærk: Fra marts 2024 erstattes FID af en ny måling kaldet Interaction to Next Paint (INP), som giver et mere nuanceret billede af sidens samlede interaktivitet. En god INP-score er 200 millisekunder eller hurtigere.
Disse tre målinger – LCP, CLS og INP (tidligere FID) – udgør tilsammen Core Web Vitals og er afgørende for både brugeroplevelse og din sides placering i Googles søgeresultater.
Hvordan måler og overvåger du CLS?
Når du vil finde og overvåge problemer med Cumulative Layout Shift (CLS) på din hjemmeside, er der flere effektive værktøjer, du kan tage i brug. Disse værktøjer hjælper dig med at identificere og afhjælpe uønskede layout shifts, så både design og ydeevne forbliver i top. Her får du en trin-for-trin guide til de mest populære:
Google PageSpeed Insights
- Gå til PageSpeed Insights.
- Indtast din hjemmesides URL og klik på “Analyser”.
- Scroll ned til sektionen “Core Web Vitals” og find din CLS-score.
- Se detaljerede forslag til forbedringer under “Muligheder” og “Diagnostik”, så du kan minimere de identificerede layout shifts og sikre bedre stabilitet.
Lighthouse (indbygget i Chrome DevTools)
- Åbn din hjemmeside i Google Chrome.
- Højreklik på siden og vælg “Inspicér” for at åbne DevTools.
- Gå til fanen “Lighthouse”.
- Vælg “Performance” og klik på “Analyser side”.
- Når analysen er færdig, får du en rapport med din CLS-score og konkrete anbefalinger til, hvordan du kan forbedre designet og minimere uønskede layout shifts.
Chrome DevTools – Performance-fanen
- Åbn DevTools (højreklik → “Inspicér”).
- Gå til fanen “Performance”.
- Klik på optageknappen, genindlæs siden, og stop optagelsen efter indlæsning.
- Se efter “Layout Shift”-events i tidslinjen for at finde præcis, hvilke elements der forårsager problemer – og så justeres disse for at opnå bedre ydeevne og stabilitet i designet.
Google Search Console – Core Web Vitals-rapporten
- Log ind på din Google Search Console-konto.
- Vælg din ejendom og klik på “Core Web Vitals” i menuen til venstre.
- Her får du et overblik over alle sider, der har CLS-problemer, samt hvilke URL’er der skal optimeres.
- Klik på de enkelte problemer for at se detaljer og følge udviklingen over tid, så du kan identificere og rette de layout shifts, der påvirker den samlede user experience og ydeevne.
Ved at bruge disse værktøjer får du både et hurtigt overblik og mulighed for at dykke ned i de specifikke elements, der skaber layout shifts.
Det gør det langt nemmere at prioritere og løse de problemer, der påvirker din brugers oplevelse og sikrer et gennemført design med høj stabilitet.
Mobil vs. desktop: CLS-udfordringer
CLS på mobil vs. desktop – derfor skal du teste på tværs af enheder
Cumulative Layout Shift (CLS) kan opføre sig meget forskelligt på mobil og desktop, selv på den samme hjemmeside.
Skærmstørrelse, netværkshastighed og hvordan indholdet tilpasses spiller alle en rolle. På mobil er pladsen mere begrænset, og elements som billeder, annoncer eller pop-ups kan nemt skubbe andet indhold ud af position, hvis der ikke er reserveret nok plads – hvilket forårsager uventede layout shifts og et pludseligt skift i designet.
Smartphone og desktop
Desuden kan langsommere forbindelser på mobilen forstærke effekten af layout shifts, fordi elements indlæses i forskellig rækkefølge.
På desktop er der ofte mere plads, og layoutet kan være mere stabilt, men store skærme kan også afsløre problemer, der ikke ses på mobil – for eksempel hvis et banner pludselig ændrer størrelse eller en sidebar indlæses sent, hvilket påvirker både ydeevne og user experience.
Derfor er det afgørende at teste og optimere CLS på både mobil og desktop. Brug værktøjer som PageSpeed Insights og Lighthouse til at se, hvordan din side klarer sig på forskellige enheder.
Giv en stabil og behagelig oplevelse
På den måde sikrer du, at alle brugere – uanset skærmstørrelse eller platform – får en stabil og behagelig oplevelse uden irriterende layout shifts, og at designet samt ydeevnen konsekvent lever op til høje standarder.
Forebyg, at elementer på din hjemmeside hopper rundt som et loppecirkus.
Ham med skrivekløe
Mit navn er Claus Enghuus, og jeg er forfatter af dette blogindlæg om “cumulative layout shift”. Jeg er også ham med skrivekløe. Jeg har arbejdet med hjemmesider og online synlighed siden 2014 og har siden 2018 haft fokus på digital marketing, SEO og markedsføringsstrategier.
Du finder flere informationer om mig på min personlige profil på LinkedIn.
De bedste hilsner
Claus Enghuus
Tlf. 41434455
