Cumulative Layout Shift: hvordan man justerer

Cumulative Layout Shift (CLS) er en kritisk præstationsmetrik, der måler, hvor meget indhold, der flytter sig eller bevæger sig rundt på en webside, mens den indlæses. Denne bevægelse kan være frustrerende for brugerne, da den kan få dem til ved et uheld at klikke på de forkerte elementer eller miste deres plads på siden. Google har også for nylig annonceret, at CLS vil blive en rangeringsfaktor i maj 2021, hvilket gør det vigtigere end nogensinde for webstedsejere at optimere deres sider til denne metric. I denne artikel vil vi diskutere, hvad CLS er, hvordan det påvirker brugeroplevelsen og SEO, og de bedste måder at justere CLS på for at forbedre dit websteds ydeevne.

Hvad er Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) er en metrik, der måler, hvor meget layoutet på en side skifter, mens den indlæses. Denne forskydning kan være forårsaget af en række faktorer, herunder billeder og videoer, der indlæses sent, eller elementer, der dynamisk ændres, når siden indlæses. CLS beregnes ved at gange den afstand, som et layoutelement har bevæget sig, med dets størrelse. Derefter summeres disse værdier for alle layoutskift, der forekommer under sideindlæsning. Resultatet er en score mellem 0 og 1, hvor en lavere score indikerer mindre layoutskift.

Hvorfor er CLS vigtigt?

Cumulative Layout Shift er et vigtigt mål af to hovedårsager: brugeroplevelse og SEO. Fra et brugeroplevelsessynspunkt kan en side med høj CLS være frustrerende og forvirrende for brugerne. Når elementer på siden bevæger sig eller skifter rundt uventet, kan brugere miste deres plads på siden eller ved et uheld klikke på de forkerte elementer. Dette kan føre til en dårlig brugeroplevelse og få brugere til at forlade dit websted.

Fra et SEO-synspunkt har Google annonceret, at CLS bliver en ranking-faktor i maj 2021. Det betyder, at sider med en høj CLS-score kan blive straffet i søgerangeringer, mens sider med en lav CLS-score kan få et boost i rankings. Derfor er optimering til CLS altafgørende, hvis du ønsker at forbedre din hjemmesides søgemaskine synlighed.

Hvordan man kan måle Cumulative Layout Shift?

At måle Cumulative Layout Shift på dit websted, kan du bruge Googles PageSpeed Insights-værktøj eller Chrome DevTools. Begge værktøjer vil give dig en score mellem 0 og 1, samt en opdeling af årsagerne til eventuelle layoutskift, der opstod under sideindlæsning. Du kan også bruge et værktøj som WebPageTest til at måle CLS og andre præstationsmålinger for dit websted.

Hvordan justerer man CLS?

Her er nogle trin, du kan tage for at justere din CLS:

Optimer billeder. Store eller uoptimerede billeder kan forårsage layoutskift, når de indlæses. Sørg for, at billeder er korrekt størrelse og komprimeret for at reducere deres indvirkning på CLS.
Brug billedformater til medieelementer. Når du bruger et billedformat til et billede eller en video, ved browseren, hvor meget plads den vil optage, før den indlæses. Dette kan hjælpe med at forhindre layoutskift forårsaget af medieelementer.
Reserver plads til annoncer og indlejringer: Annoncer og indlejringer indlæses ofte asynkront, hvilket kan forårsage layoutskift. Ved at reservere plads til dem i dit layout kan du forhindre disse skift.
Undgå dynamisk injiceret indhold. Indhold, der injiceres på siden, efter den er indlæst, såsom pop op-vinduer eller chatbokse, kan forårsage layoutskift. Prøv at undgå at bruge denne type indhold. Sørg for, at den er indlæst på en måde, der ikke påvirker layoutet.
Indlæs skrifttyper asynkront. Hvis du bruger tilpassede skrifttyper på dit websted, kan indlæsning af dem asynkront hjælpe med at forhindre layoutskift forårsaget af skrifttypeindlæsning.
Brug en preloader. En preloader er en skærm, der vises, mens din hjemmeside indlæses. Det kan hjælpe med at forhindre layoutskift ved at give brugeren noget at se på, mens siden indlæses.

Ved at tage disse trin kan du hjælpe med at reducere virkningen af layoutskift på dit websted og forbedre brugeroplevelsen. Vi anbefaler Hosta Blanca Delt hosting or VPS server til dine webprojekter.