Layoutstabiliteit

Layoutstabiliteit is de mate waarin de visuele lay-out van een webpagina stabiel blijft tijdens het laden en bij interacties, zodat elementen zoals tekst, afbeeldingen en knoppen niet plotseling verschuiven. Een lage layoutstabiliteit zorgt voor onverwachte bewegingen die de leeservaring kunnen belemmeren en foutieve klikken tot gevolg kunnen hebben. In de webwereld wordt vaak gesproken over cumulatieve lay-outverschuiving (CLS) als belangrijkste maatstaf voor layoutstabiliteit.

CLS meet hoeveel en hoe snel elementen tijdens het pad van laden en renderen van een pagina verschuiven. Een lage CLS wordt als goed beschouwd, bijvoorbeeld een waarde onder 0,1; tussen 0,1 en 0,25 wordt vaak gezien als verbetering nodig, en boven 0,25 als problematisch. CLS is een kernonderdeel van de Core Web Vitals van Google en is relevant voor pagina-rankings en gebruikservaring.

Oorzaken van instabiliteit zijn onder meer afbeeldingen of video’s zonder duidelijke afmetingen, fonts die tijdens het laden veranderen, advertenties of embeds die dynamisch bovenop bestaande inhoud worden geplaatst, en JavaScript die inhoud toevoegt na het eerste renderen. Ook bronnen die laat laden en zo afmetingen beïnvloeden, kunnen verschuivingen veroorzaken.

Praktische richtlijnen om layoutstabiliteit te verbeteren, omvatten het reserveren van ruimte voor media via width/height-attributen of CSS-voorwaarden zoals aspect-ratio, het bieden van duidelijke afmetingen voor afbeeldingen en video’s, het gebruik van placeholders of skeletons, het kiezen van betrouwbare font-fallbacks en font-display: swap, en het beperken van inhoudsinhoud die bovenop bestaande content wordt geïntroduceerd. Daarnaast kunnen animaties die verschuivingen corrigeren bij voorkeur via transform of opacity verlopen.