Hvad betyder CLS?

Synonymer: Kumulativ layoutskift Layoutændringsmåling Stabilitetsmåling

CLS står for Cumulative Layout Shift, og det er en af de centrale målinger af Core Web Vitals, som bruges til at vurdere brugeroplevelsen på en webside. Specifikt måler CLS, hvor meget sidens layout skifter under indlæsningen. Store eller pludselige ændringer i layoutet kan være frustrerende for brugere, da de kan føre til utilsigtede klik eller læseforstyrrelser. En lav CLS-score indikerer en stabil side, mens en høj score antyder mange layoutændringer, hvilket kan forringe brugeroplevelsen.

Hvorfor er CLS vigtigt?

En god brugeroplevelse er afgørende for både brugertilfredshed og SEO. Søgemaskiner som Google bruger CLS som en del af deres algoritme til at rangere sider. Hvis en side har en høj CLS-score, kan det resultere i dårligere rangeringer i søgeresultaterne, da Google prioriterer sider, der giver en stabil og behagelig oplevelse. Desuden kan hyppige layoutskift forstyrre brugerne og føre til en højere bounce rate, hvor besøgende forlader siden hurtigt.

Hvordan beregnes CLS?

CLS beregnes ved at måle summen af alle individuelle layoutskift, der sker under sidens levetid. Et layoutskift opstår, når en synlig element ændrer position fra en ramme til den næste. To hovedfaktorer bruges i beregningen:

1. Impact Fraction: Denne måler, hvor meget af synsområdet (viewport) der er påvirket af layoutskiftet.
2. Distance Fraction: Denne måler, hvor langt elementerne har flyttet sig i forhold til synsområdet.

CLS-score beregnes ved at multiplicere disse to faktorer for hvert layoutskift og summere resultaterne.

Hvordan reducerer du CLS?

For at forbedre din sides CLS-score og sikre en stabil brugeroplevelse, kan du følge disse bedste praksisser:

1. Størrelsesangivelse for billeder og videoer: Sørg for, at alle billeder og videoer har definerede dimensioner (bredde og højde), så browseren ved, hvor meget plads de skal bruge, før de indlæses.
2. Undgå indlæsning af nye elementer over eksisterende indhold: Indlæs nye elementer, såsom annoncer eller dynamisk indhold, under det eksisterende indhold i stedet for over det.
3. Forudsigelige fonte: Brug systemfonte eller forudindlæs brugerdefinerede fonte for at undgå skift i tekstlayoutet, når fonte indlæses.
4. Fastsæt plads til dynamisk indhold: Reserver plads til dynamisk indhold såsom annoncer, der kan ændre størrelse, så de ikke skubber andet indhold rundt.

Ved at fokusere på at minimere layoutskift kan du forbedre både brugeroplevelsen og din sides rangeringer i søgeresultaterne.