Cumulative Layout Shift (CLS) optimaliseren

Je website optimaliseren voor je gebruikers

Rik Smeets avatar
Geschreven door Rik Smeets
Meer dan een week geleden bijgewerkt

Waarom Cumulative Layout Shift optimaliseren?

CLS meet de tijd van het laden van onverwachte pop-ups of veranderingen op de webpagina. Dit kan er veel irritaties opleveren bij bezoekers. Bijvoorbeeld wanneer je op een link wil klikken waar uit het niets een pop-up voor komt te staan.

Om te voorkomen dat dit gebeurt moet je 0,1 scoren op de CLS schaal.

Wat is Cumulative Layout Shift?

CLS meet dus hoelang het duurt voordat er onverwachts iets verandert qua indeling op de site. Pop-ups en animaties kunnen hierbij een rol spelen.

Als je 0,1 scoort op de CLS schaal hoef je je niet zorgen te maken over onverwachte gebeurtenissen. Bij een score van 0,1 tot 0,25 heeft het wat verbetering nodig en bij 0,25 of meer moet er wat aan gedaan worden.

Hoe optimaliseer je Cumulative Layout Shift?

Cumulative Layout Shift optimaliseer je door te zorgen dat er zo min mogelijk elementen onverwacht bewegen op je pagina. Wanneer een beweging getriggered wordt door een bezoeker maakt het dus niks uit en hoeft je er niks aan te doen.

  1. Geen onverwachte personalisatieregels gebruiken, denk bijvoorbeeld aan een banner die na een paar seconde zichtbaar wordt.

  2. Geen onverwachte pop-ups gebruiken, zoals een melding dat je locatie tijdelijk gesloten is. Als deze pop-up pas na een paar seconden getoond wordt beïnvloed dit je CLS score. Mocht je een pop-up gebruiken op een landingspagina van een advertentiecampagne maakt dit minder uit. Gezien deze pagina niet per se goed vindbaar hoeft te zijn.

  3. ✅ Afbeeldingen altijd een grootte geven. Dit wordt al automaisch gedaan.

  4. ✅ iFrames altijd een grootte geven. Dit wordt al automatisch gedaan.

  5. ✅ Animaties elementen laten transformeren in plaats van verplaatsen. Dit wordt al automatisch gedaan. Je kan dus zoveel animaties gebruiken als je wilt😉.

  6. ✅ De cookiemelding onderaan plaatsen. Dit wordt automatisch gedaan. Het tonen wordt met een transformeer animatie gedaan zodat dit geen impact heeft op de CLS score.

  7. BELANGRIJK: doe je aanpassingen aan je site of shop dan wacht 2 tot 5 minuten voordat je de test doet zodat het systeem je site heeft gecacht én geoptimaliseerd op de achtergrond. Dit gebeurd NAdat je publiceert.

Wanneer je bovenstaande stappen hebt gevolgd, weet je Wat CLS inhoud. Mocht je nog vragen hebben, neem dan contact op door rechtsonder een chat te starten en wij helpen je graag.

Andere artikelen

Wil je meteen verdergaan met het optimaliseren van je Core Web vitals? We hebben hier alle artikelen voor je op een rijtje gezet:

Vindwoorden: CLS, Cumulative Layout Shift, Core Web Vitals, Google, Website optimalisatie.

Was dit een antwoord op uw vraag?