U kent het gevoel. U wilt een artikel lezen op uw telefoon, de tekst staat er, u begint, en dan schuift alles een halve centimeter naar beneden omdat er een afbeelding is bijgekomen. Nog een keer. En nog een keer als de cookiebalk verschijnt. Bij een webshop is het erger: u tikt op “In winkelwagen” en raakt het product ernaast.

Dit verschijnsel heet layout shift, en Google meet het als CLS, Cumulative Layout Shift. CLS oplossen is anders dan de meeste snelheidsklussen: het gaat niet om sneller laden, maar om ruimte reserveren. Alles wat later in beeld komt, moet van tevoren al een plek hebben. Dit artikel laat zien hoe u de oorzaak vindt en per oorzaak wat de oplossing is.

Wat CLS meet en wanneer het “slecht” is

CLS is een getal dat optelt hoeveel zichtbare oppervlakte verschuift, vermenigvuldigd met hoe ver. Onder 0,1 is goed, boven 0,25 slecht. Het is de enige Core Web Vital die niets met snelheid te maken heeft; een trage site kan een perfecte CLS hebben en een snelle site een dramatische.

Belangrijk om te weten: verschuivingen als gevolg van een handeling van de bezoeker, bijvoorbeeld een menu dat openklapt na een klik, tellen niet mee. Alleen onverwachte verschuivingen tellen. Google meet dit bij echte bezoekers, dus een perfecte score op uw desktop zegt weinig als het op mobiel misgaat.

Stap 1: vind wat er verschuift

Open PageSpeed Insights, kies Mobiel en zoek onder Diagnose naar “Vermijd grote verschuivingen in de lay-out”. Daar staat een lijst met elementen en hun bijdrage aan de score. Vaak is één element verantwoordelijk voor het grootste deel.

Wilt u het live zien, open dan Chrome, druk op F12, ga naar het tabblad Performance en vink “Layout Shift Regions” aan onder de instellingen (het tandwiel of via het commandomenu). Elke verschuiving licht dan blauw op terwijl de pagina laadt. Dit is de snelste manier om te begrijpen wat er gebeurt.

Oorzaak 1: afbeeldingen zonder afmetingen

De klassieker. Een afbeelding zonder width en height in de HTML neemt nul ruimte in totdat het bestand geladen is, en duwt dan alles naar beneden. WordPress voegt die afmetingen sinds versie 5.5 automatisch toe aan afbeeldingen in de inhoud, maar thema’s, page builders en widgets doen dat niet altijd.

De oplossing is dat elke afbeelding vooraf een verhouding heeft. In moderne CSS gebeurt dat met aspect-ratio of simpelweg door de afmetingen in de HTML te zetten. Bij Elementor, Divi en Bricks kunt u dit vaak aanzetten per afbeelding of via een thema-instelling. Controleer ook logo’s in de header en pictogrammen in de footer; die zijn klein maar staan hoog op de pagina, waardoor hun verschuiving zwaar telt.

Oorzaak 2: lettertypen die wisselen

De pagina toont eerst een standaardlettertype, en zodra het webfont geladen is, wisselt de tekst. Als het nieuwe lettertype breder of hoger is, verspringen alle regels. Dit heet FOUT, Flash of Unstyled Text, en op tekstzware pagina’s is het vaak de grootste CLS-oorzaak.

Drie maatregelen, in volgorde van effect:

  1. Host de lettertypen lokaal en laad ze met preload, zodat ze eerder klaar zijn dan de tekst.
  2. Gebruik font-display: swap of, beter voor CLS, optional. Bij optional wordt het webfont overgeslagen als het te laat komt, dus geen wissel.
  3. Kies een fallback-lettertype met vergelijkbare afmetingen, of gebruik size-adjust om het verschil te compenseren. Dit is preciezer werk en meestal iets voor een specialist.

Oorzaak 3: cookiebalken, meldingen en banners

Een cookiebalk die bovenaan de pagina wordt ingeschoven en de hele inhoud naar beneden drukt, is in Nederland een van de meest voorkomende CLS-boosdoeners. Hetzelfde geldt voor “gratis verzending vanaf”-balken in webshops en voor meldingen over vakantiesluiting.

De oplossing is simpel: laat de balk over de inhoud zweven (position fixed) in plaats van ervoor, of reserveer de ruimte vanaf de eerste weergave. De meeste cookieplugins, zoals Complianz en CookieYes, hebben een instelling om de banner als overlay onderaan te tonen. Dat kost u niets aan naleving en het scheelt direct in de score.

Oorzaak 4: inhoud die later wordt ingeladen

Advertenties, embeds van YouTube of Google Maps, beoordelingswidgets, chatknoppen, een Instagram-feed. Alles wat door JavaScript ná de eerste weergave wordt toegevoegd, verschuift de inhoud eronder. Reserveer een vaste hoogte voor het blok waar het in komt. Voor een YouTube-embed is dat een blok met de juiste verhouding (meestal 16:9); voor een chatwidget een vaste positie rechtsonder buiten de inhoudsstroom.

Sliders horen ook in dit rijtje. Een slider die eerst alle dia’s onder elkaar toont en ze daarna pas op elkaar stapelt, veroorzaakt een enorme verschuiving. Als u een slider nodig heeft, controleer dan of die vanaf het eerste moment de juiste hoogte heeft.

Oorzaak 5: cache en optimalisatieplugins

Dit is de verraderlijke. Soms is de site prima gebouwd, maar wordt CSS door een optimalisatieplugin uitgesteld of gecombineerd. Dan wordt de pagina eerst zonder opmaak getoond en springt hij daarna in vorm. Herkenbaar aan een kort moment waarin alles er “kaal” uitziet. Zet in dat geval de optie “CSS uitstellen” of “CSS asynchroon laden” uit, of sluit het kritieke stylesheet uit van die optie.

In de praktijk zien wij regelmatig dat een site na een onbedoelde verbetering van de laadtijd een slechtere CLS heeft gekregen. Snelheid en stabiliteit vragen om balans, en dat is precies waarom een complete snelheidsoptimalisatie beide meetwaarden samen bekijkt in plaats van één knop omzetten.

Praktijkvoorbeeld

Een fysiotherapiepraktijk in Zwolle had een CLS van 0,38 op mobiel. De oorzaken bleken, in volgorde van gewicht: een cookiebalk die bovenaan werd ingeschoven, een logo zonder afmetingen in de header, en een Google-lettertype dat pas na een seconde inviel. De balk werd een overlay, het logo kreeg vaste afmetingen en het lettertype werd lokaal gehost met preload. Nieuwe score: 0,02. Tijd: twee uur, inclusief testen.

Wat u zelf kunt doen en de volgende stap

De cookiebalk verplaatsen en afbeeldingen van afmetingen voorzien kunt u zelf, of met een korte instructie. Lettertypen en optimalisatieplugins zijn precisiewerk. Als u toch aan de slag gaat met snelheid, bekijk dan ook de aanpak voor een betere LCP; veel maatregelen overlappen, en het is zonde om twee keer aan dezelfde header te werken. En als u vooral benieuwd bent waarom de site traag reageert op klikken, dan is de uitleg over INP de logische volgende leesstap.

Begin bij stap 1: kijk wat er verschuift. Meestal is het één ding, en dat ene ding is in een middag opgelost.