Kumulativ layoutförskjutning (CLS)

Vad är Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) är ett Core Web Vitals-mått som utvecklats av Google för att mäta den visuella stabiliteten på en webbsida. Det kvantifierar summan av alla oväntade layoutförändringar som inträffar under sidans hela livslängd. Layoutförskjutningar inträffar när ett synligt element ändrar position från en renderad ram till nästa.

Hur CLS mäts

CLS-poängen sträcker sig från 0, vilket innebär ingen förskjutning, till värden över 0 som indikerar varierande grad av instabilitet. Formeln tar hänsyn till effektfraktionen och avståndsfraktionen för varje förskjutning och beräknar hur mycket elementen rör sig och hur stor del av bildrutan de täcker.

Tolkning av CLS-poäng

• Bra: 0 - 0,1
• Behöver förbättras: 0.1 - 0.25
• Dålig: Över 0,25

Varför är CLS viktigt?

CLS är avgörande för användarupplevelsen eftersom oväntade layoutförändringar kan leda till frustration hos användarna. Om en användare till exempel är på väg att klicka på en knapp och layouten ändras så att användaren oavsiktligt klickar på något annat, kan det leda till en dålig användarupplevelse och potentiell förlust av konverteringar.

Vanliga orsaker till dålig CLS

1. Bilder utan dimensioner:

   • Om du inkluderar bilder i din HTML utan att ange deras bredd och höjd kan det orsaka layoutförändringar eftersom webbläsaren inte vet hur mycket utrymme som ska tilldelas initialt.

2. Annonser, inbäddningar och Iframes utan dimensioner:

   • Dessa element kan laddas dynamiskt och orsaka layoutförskjutningar om deras dimensioner inte anges i förväg.

3. Dynamiskt injicerat innehåll:

   • Att lägga till innehåll ovanför befintligt innehåll i DOM kan trycka ner element och orsaka förskjutningar.

4. Webbtypsnitt som orsakar FOIT/FOUT:

   • Flash of Invisible Text (FOIT) och Flash of Unstyled Text (FOUT) kan orsaka layoutförändringar när webbläsaren laddar in webbteckensnitt.

Bästa praxis för att minimera CLS

1. Inkludera storleksattribut på bilder och videor:

   • Ange alltid bredd och höjd för bilder och videor i HTML-filen för att reservera utrymme i layouten innan de laddas.

2. Reservera utrymme för annonser och inbäddningar:

   • Använd CSS för att ange mått för annonsluckor, iframes och embeds för att undvika layoutförändringar när de laddas.

3. Undvik att dynamiskt lägga in innehåll ovanför befintligt innehåll:

   • Lägg till nytt innehåll under vecket eller i behållare som redan har ett reserverat utrymme.

4. Använd strategier för laddning av teckensnitt:

   • Använd CSS-egenskapen font-display för att styra hur webbteckensnitt visas och minimera förskjutningar på grund av FOIT/FOUT.

5. Använd CSS Transform för animationer:

   • Använd transform-egenskapen i stället för topp, botten, vänster eller höger för att animera element utan att orsaka layoutförskjutningar.

Slutsats

Cumulative Layout Shift (CLS) är ett viktigt mått för att säkerställa en stabil och visuellt tilltalande användarupplevelse. Genom att förstå de faktorer som bidrar till layoutförändringar och implementera bästa praxis för att minimera dem kan du förbättra din webbsidas CLS-poäng och öka den övergripande användarnöjdheten.

Om du vill ha mer information om hur du förbättrar CLS och andra Core Web Vitals kan du läsa Googles dokumentation om Web Vitals.