Kumulativt layoutskift (CLS)

Hvad er Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) er en Core Web Vitals-metrik, der er udviklet af Google til at måle den visuelle stabilitet på en webside. Den kvantificerer summen af alle uventede layoutskift, der opstår i løbet af hele sidens levetid. Layoutskift sker, når et synligt element ændrer position fra en renderet frame til den næste.

Sådan måles CLS

CLS-scoren går fra 0, som betyder ingen forskydning, til værdier over 0, som indikerer forskellige grader af ustabilitet. Formlen tager højde for påvirkningsfraktionen og afstandsfraktionen for hvert skift og beregner, hvor meget elementerne bevæger sig, og hvor stor en del af visningsvinduet de dækker.

Fortolkning af CLS-score

• God: 0 - 0,1
• Behov for forbedring: 0.1 - 0.25
• Dårlig: Over 0,25

Hvorfor er CLS vigtigt?

CLS er afgørende for brugeroplevelsen, da uventede layoutskift kan føre til brugerfrustration. Hvis en bruger f.eks. er ved at klikke på en knap, og layoutet skifter, så de utilsigtet klikker på noget andet, kan det resultere i en dårlig brugeroplevelse og et potentielt tab af konverteringer.

Almindelige årsager til dårlig CLS

1. Billeder uden dimensioner:

   • Hvis du inkluderer billeder i din HTML uden at angive deres bredde og højde, kan det forårsage layoutforskydninger, da browseren ikke ved, hvor meget plads der skal afsættes til at begynde med.

2. Annoncer, indlejringer og Iframes uden dimensioner:

   • Disse elementer kan indlæses dynamisk og forårsage layoutforskydninger, hvis deres dimensioner ikke er angivet på forhånd.

3. Dynamisk injiceret indhold:

   • Tilføjelse af indhold over eksisterende indhold i DOM'en kan skubbe elementer nedad og forårsage forskydninger.

4. Webfonte, der forårsager FOIT/FOUT:

   • Flash of Invisible Text (FOIT) og Flash of Unstyled Text (FOUT) kan forårsage layoutforskydninger, når browseren indlæser webfonte.

Bedste praksis for at minimere CLS

1. Inkluder størrelsesattributter på billeder og videoer:

   • Definer altid bredden og højden på billeder og videoer i HTML for at reservere plads i layoutet, før de indlæses.

2. Reserver plads til annoncer og indlejringer:

   • Brug CSS til at indstille dimensioner for annonceslots, iframes og indlejringer for at undgå layoutskift, når de indlæses.

3. Undgå at indsætte indhold dynamisk over eksisterende indhold:

   • Tilføj nyt indhold under folden eller i containere, der allerede har reserveret plads.

4. Brug strategier for indlæsning af skrifttyper:

   • Brug CSS-egenskaben font-display til at styre, hvordan webfonte vises, og minimere forskydninger på grund af FOIT/FOUT.

5. Brug CSS Transform til animationer:

   • Brug transform-egenskaben i stedet for top, bund, venstre eller højre for at animere elementer uden at forårsage layoutforskydninger.

Konklusion

Cumulative Layout Shift (CLS) er et vigtigt mål for at sikre en stabil og visuelt tiltalende brugeroplevelse. Ved at forstå de faktorer, der bidrager til layoutskift, og implementere bedste praksis for at minimere dem, kan du forbedre din websides CLS-score og øge den samlede brugertilfredshed.

Hvis du vil have flere oplysninger om forbedring af CLS og andre Core Web Vitals, kan du overveje at udforske Googles Web Vitals-dokumentation.