Du åbner en hjemmeside, vil trykke på en knap, og i sidste øjeblik rykker alt, fordi der indlæses en annonce eller et billede øverst. Resultat: du har trykket på noget helt andet. Irriterende. Det er præcis det problem, Google måler med CLS: Cumulative Layout Shift.
Hvilke CLS-værdier er gode?
- Under 0,1: godt. Siden står stille, mens den indlæses.
- 0,1 til 0,25: middel. De besøgende lægger mærke til det.
- Over 0,25: dårligt. Det er irriterende, og Google sænker dine placeringer.
Hvad giver en høj CLS?
- Billeder uden mål: står billedets størrelse ikke i din HTML, laver browseren et tomt felt og fylder det først ud, når billedet er indlæst. Alt nedenunder hopper pludselig ned.
- Annoncer, der indlæses senere: meget almindeligt på nyhedssider og ofte den største synder.
- Skrifttyper, der indlæses senere: teksten vises først med en systemskrift og skifter derefter til din egen skrifttype. Er størrelsen forskellig, flytter teksten sig.
- Indlejrede videoer eller iframes uden fast størrelse
Hvad kan din webudvikler gøre?
Konkrete tiltag:
- Altid angive
widthogheightpå billeder og iframes - Reservere pladsen til annoncer med en fast højde på containeren
- Bruge
font-display: swapmed en god reserveskrift - Indlæse indholdet i det synlige område (above the fold) først og uden afbrydelser
Hvorfor er det en rankingfaktor?
Google regner CLS med til »Core Web Vitals«. Siden 2021 tæller det officielt med i placeringerne. Mellem to hjemmesider med samme indhold vinder den med en CLS på 0,05 over den med en CLS på 0,4.