Datum: 31/07/23
Laatst bijgewerkt: 27/10/23

Wat is cumulative layout shift (cls)?

Cumulative Layout Shift (CLS) meet hoeveel en hoe ver elementen op je webpagina onverwacht verschuiven terwijl deze laadt. Een lage score wijst op een stabiele website, wat bijdraagt aan een positieve gebruikerservaring.

CLS is een onmisbaar metriek voor web-ontwikkelaars en eigenaren, omdat het direct de gebruikerservaring beïnvloedt. Een instabiele pagina, waar elementen plotseling verschuiven, kan leiden tot onbedoelde klikken en een gefrustreerde gebruiker.

Meten van de cumulative layout shift

CLS wordt berekend door de impactfractie en de afstandsfractie te vermenigvuldigen. De impactfractie meet het percentage van het viewportgebied (het direct zichtbare deel van een webpagina op het scherm van de gebruiker) dat wordt beïnvloed door verschuivingen tijdens het laden. De afstandsfractie meet de afstand die de elementen verschuiven. Een score van 0,1 of lager wordt als goed beschouwd.

Oorzaken en gevolgen van een hoge score

Advertenties, embeds en iFrames: deze elementen kunnen de lay-out verschuiven als ze worden geladen zonder vooraf gereserveerde ruimte. Hierbij zijn ’embeds’ ingesloten elementen zoals video’s of andere media van externe bronnen. ‘iFrames’ zijn stukken webpagina’s die binnen een andere pagina zijn ‘ingebed’. Beide kunnen de visuele stabiliteit van een pagina beïnvloeden als ze niet correct zijn geïmplementeerd.
Web fonts: online lettertypen, kunnen tekst verschuiven als ze na andere content laden.
Dynamische content: content die na het laden wordt toegevoegd en automatisch verandert of wordt bijgewerkt. Dit is zonder dat de pagina opnieuw wordt geladen en kan bestaande elementen verplaatsen.

Meettools

Google Search Console: deze tool biedt een rapport dat de CLS-score van je website weergeeft en helpt bij het identificeren van pagina’s die verbetering behoeven.
PageSpeed Insights: analyseert de inhoud van een webpagina en genereert suggesties om de pagina te versnellen, inclusief een CLS-score.

CLS optimaliseren

Verbeteren van de website stabiliteit, gemeten met CLS, vraagt om enkele stappen. Ten eerste, stel afbeeldingen en video’s correct in. Ten tweede, beheer dynamische content, ofwel inhoud die na laden verandert, op een slimme manier. Ten derde, laad de lettertypen van de website (webfonts) gebruiksvriendelijk. Dit houdt in: bepaal vooraf de grootte van afbeeldingen en video’s. Reserveer ruimte voor advertenties om plotselinge verschuivingen te vermijden. Gebruik een specifieke techniek (‘font-display: swap’) om tekst snel zichtbaar te maken, zelfs als het bijbehorende lettertype nog niet geladen is.

Praktische tips voor veelvoorkomende problemen

Afbeeldingen zonder afmetingen: zorg ervoor dat afbeeldingen altijd breedte- en hoogteattributen hebben.
Advertenties: reserveer ruimte om plotselinge verschuivingen te voorkomen.
Web fonts die traag inladen: gebruik in de CSS de code font-display: swap om tekst direct weer te geven.
Dynamische content: injecteer content zonder bestaande items te verplaatsen.

De invloed van CLS op SEO

Cumulative Layout Shift is niet alleen een indicator van de gebruikerservaring, maar speelt ook een belangrijke rol in zoekmachine optimalisatie (SEO). Google heeft webprestaties, waaronder CLS, opgenomen als een rankingfactor in hun zoekalgoritme. Hier zijn enkele manieren waarop een slechte CLS de SEO kan beïnvloeden:

Bounce Rate: een hoge CLS-score kan leiden tot een frustrerende gebruikerservaring, waardoor bezoekers de website mogelijk snel verlaten, wat resulteert in een hogere bounce rate.
Paginaweergaven: als gebruikers moeite hebben met het navigeren door een pagina vanwege verschuivende elementen, kunnen ze minder geneigd zijn om door te klikken naar andere pagina’s, wat resulteert in minder paginaweergaven.
Conversieratio: een instabiele lay-out kan leiden tot onbedoelde klikken en een verminderde gebruikerservaring, wat de conversieratio negatief kan beïnvloeden.

CLS en de gebruikerservaring

De gebruikerservaring op een website is belangrijk voor het vasthouden van bezoekers en het stimuleren van conversies. CLS kan deze interacties op verschillende manieren beïnvloeden:

Onbedoelde Interacties: verschuivende elementen kunnen leiden tot onbedoelde klikken, wat frustrerend kan zijn voor gebruikers.
Leesbaarheid: als tekstblokken of afbeeldingen tijdens het lezen verschuiven, kan dit de leesbaarheid verminderen en gebruikers ontmoedigen om verder te lezen.
Vertrouwen: een instabiele website kan het vertrouwen van de gebruiker in de website verminderen, wat invloed kan hebben op hun bereidheid om te converteren.