Wat is CLS en hoe verbeter je het?

CLS staat voor Cumulative Layout Shift en meet hoeveel elementen op de pagina verspringen terwijl hij laadt. Iedereen kent het effect: je gaat een knop aanklikken, er laadt nog iets boven, en je klikt op iets anders. De drempel voor goed ligt onder de 0,1.

De oplossing is bijna altijd hetzelfde: ruimte reserveren. Geef elke afbeelding, video, iframe en advertentieblok een vaste breedte en hoogte, zodat de browser de plek al vrijhoudt voordat de inhoud er is. Laad lettertypen met font-display swap en reserveer ruimte voor content die later binnenkomt, zoals cookiebanners en meldingsbalken.

Dit is de makkelijkste van de drie om op te lossen. Categorie- en productpagina’s zakken er het vaakst op, door inhoud die dynamisch wordt bijgeladen.