CLS: verspringende pagina's en hoe je ze vastzet

CLS meet hoeveel zichtbare elementen op je pagina onverwacht van plaats veranderen tijdens het bezoek. Elke verschuiving krijgt een score op basis van hoe groot het verschoven blok is en hoe ver het opschuift. Al die kleine schokjes samen vormen je Cumulative Layout Shift.

Google hanteert een duidelijke lat: een CLS van 0,1 of lager is goed, tussen 0,1 en 0,25 is matig, en daarboven is het ronduit slecht. Net als bij de andere Core Web Vitals wordt gekeken naar de ervaring van 75 procent van je echte bezoekers, niet naar één test op een snelle computer.

Belangrijk om te weten: CLS gaat niet over laadtijd. Een pagina kan bliksemsnel laden en toch een slechte CLS hebben, omdat er ná het laden nog van alles bijschuift: een cookiebanner, een foto die laat binnenkomt, een lettertype dat wisselt. Het is dus een aparte controle naast je snelheid.

Verspringende pagina's hebben bijna altijd een van deze vijf oorzaken:

• Afbeeldingen zonder afmetingen: de browser weet niet hoe groot een foto wordt en reserveert er geen plaats voor. Zodra de foto binnenkomt, duwt hij alle tekst naar beneden.
• Webfonts die wisselen: eerst verschijnt de tekst in een tijdelijk lettertype, daarna springt alles een paar pixels op wanneer je eigen lettertype geladen is.
• Cookiebanners en meldingsbalken die zichzelf bovenaan in de pagina duwen in plaats van eroverheen te zweven.
• Embeds en advertenties: een YouTube-video, Instagram-post of advertentieblok zonder gereserveerde ruimte laadt laat en duwt de rest opzij.
• Inhoud die er later bij komt: een banner met een actie, een beoordelingswidget of een chatknop die na twee seconden bovenaan verschijnt.

Het patroon is telkens hetzelfde: er komt iets binnen waarvoor geen plaats gereserveerd was. De oplossing is dus ook telkens hetzelfde, en daar komen we zo op.

Vul je adres in bij PageSpeed Insights en kijk bovenaan bij de veldgegevens naar de regel Cumulative Layout Shift. Dat cijfer komt uit echte Chrome-bezoeken van de voorbije 28 dagen en is dus de score waar Google zelf naar kijkt.

Hoe doet de rest van het web het? Volgens het Web Almanac van HTTP Archive haalt op mobiel 81% van de pagina's een goede CLS, op desktop 72%. CLS is daarmee de best scorende van de drie Core Web Vitals. Dat is goed nieuws en slecht nieuws tegelijk: het probleem is oplosbaar, maar wie het niet oplost, zit meteen bij de slechtst scorende minderheid.

Het totaalplaatje blijft overigens streng: slechts 55,9% van de gemeten websites haalt alle drie de Core Web Vitals, op mobiel zelfs maar 42%. Een goede CLS alleen volstaat dus niet, maar een slechte CLS is wel een van de zichtbaarste manieren om bezoekers te irriteren.

De meeste verschuivingen verdwijnen met een handvol ingrepen. Geef deze lijst gerust door aan je webbouwer:

1. Geef elke afbeelding vaste afmetingen. Breedte en hoogte in de code, zodat de browser meteen de juiste ruimte vrijhoudt, ook als de foto pas later binnenkomt.
2. Reserveer ruimte voor embeds en advertenties. Een videoblok of widget krijgt een vast kader; laadt de inhoud later, dan valt hij netjes in dat kader.
3. Laat je cookiebanner zweven in plaats van de pagina naar beneden te duwen. Onderaan over de inhoud heen is prima en verschuift niets.
4. Tem je webfonts: kies een fallback-lettertype dat qua grootte goed lijkt op je eigen lettertype en laad je belangrijkste font vroeg. Zo wordt de wissel bijna onzichtbaar.
5. Voeg nooit inhoud toe boven bestaande inhoud, behalve als de bezoeker er zelf om vraagt. Een actiebanner hoort er vanaf de eerste weergave te staan, niet er twee seconden later bij te ploffen.
6. Animeer met transform. Beweging via de eigenschappen transform en opacity verschuift de rest van de pagina niet; animaties op hoogte of positie wel. Google legt dit uit in zijn gids over CLS optimaliseren.

Een verspringende pagina veroorzaakt misklikken, en misklikken op de verkeerde plek zijn niet onschuldig: iemand die per ongeluk op een advertentie of het verkeerde product tikt, is meteen een stuk minder geneigd om verder te doen. Bij formulieren en betaalknoppen is het nog erger, want daar voelt een verschuiving als onbetrouwbaarheid.

Een pagina die verspringt voelt kapot, ook al werkt technisch alles. En bezoekers vergeven een kapot gevoel zelden.

Reken daarbij dat je op mobiel al tegen een strenge klok vecht: 53% van de mobiele bezoekers haakt af als een pagina langer dan 3 seconden laadt. Wie die eerste horde neemt en de bezoeker daarna alsnog laat misklikken, verspilt zijn eigen snelheidswinst.

CLS is typisch zo'n probleem dat je zelf nooit opmerkt, tot je het één keer bewust ziet en het je daarna elke dag stoort. De goede kant: het is meestal met een paar gerichte ingrepen opgelost.

Wil je weten of jouw pagina's verspringen, te traag laden of nog andere afknappers bevatten? Doe de gratis marketing scan van Marketing Scan. Je krijgt binnen enkele minuten een verstaanbaar rapport met je grootste werkpunten, zodat je precies weet wat je aan je webbouwer moet vragen.