Wat is Cumulative Layout Shift (CLS) en hoe los je het op?

Waarom is CLS belangrijk?

Gebruikerservaring Onverwachte verschuivingen in content kunnen frustrerend zijn. Denk aan het per ongeluk klikken op de verkeerde knop omdat de lay-out plotseling verschoof. Dit vermindert de gebruiksvriendelijkheid van je site.

SEO-rankings Google beschouwt een stabiele lay-out als essentieel voor een goede gebruikerservaring. Een slechte CLS-score kan leiden tot lagere posities in de zoekresultaten.

---

Wat veroorzaakt een hoge CLS?

Afbeeldingen zonder vooraf gedefinieerde afmetingen Wanneer een afbeelding wordt geladen zonder vaste breedte en hoogte, verschuift de rest van de pagina om ruimte te maken.

Advertenties of widgets Externe scripts, zoals advertenties, kunnen onverwachts verschijnen en bestaande content naar beneden of opzij duwen.

Lettertypewisselingen Custom fonts die later worden geladen, kunnen tekst doen verspringen zodra het nieuwe lettertype wordt toegepast.

Asynchroon geladen elementen Late toevoegingen zoals pop-ups, banners of video’s die dynamisch worden geladen, veroorzaken vaak beweging op de pagina.

---

Wat is een goede CLS-score?

Google heeft richtlijnen opgesteld om de stabiliteit van je pagina te beoordelen:

• Goed: ≤ 0,1 Kleine, nauwelijks merkbare verschuivingen.
• Verbetering nodig: 0,1 – 0,25 Merkbare verschuivingen die irritatie kunnen veroorzaken.
• Slecht: > 0,25 Grote, storende verschuivingen die direct moeten worden aangepakt.

Streef naar een CLS-score van 0,1 of lager voor een optimale gebruikerservaring.

---

Hoe meet je CLS?

Je kunt je CLS-score controleren met de volgende tools:

Google PageSpeed Insights

Analyseert je website en geeft een score voor CLS, samen met aanbevelingen voor verbeteringen.

Chrome DevTools

Laat in real-time zien welke elementen verschuivingen veroorzaken. Gebruik de “Performance”-tab om verschuivingen te identificeren.

Google Search Console

Biedt een Core Web Vitals-rapport waarin CLS-problemen worden opgesomd en prioriteiten worden aangegeven.

---

Hoe los je CLS-problemen op?

Hier zijn enkele praktische oplossingen om je CLS te verbeteren.

1. Reserveer ruimte voor afbeeldingen en media

Gebruik CSS om vaste breedte- en hoogtewaarden in te stellen voor afbeeldingen, video’s en advertenties.

Voorbeeld:

cssCode kopiërenimg { width: 600px; height: 400px; }

2. Optimaliseer advertentieweergave

Gebruik technologieën zoals AMP (Accelerated Mobile Pages) of zorg dat advertenties alleen in vooraf gereserveerde gebieden worden geladen.

3. Gebruik font-display: swap voor lettertypen

Voeg het font-display: swap attribuut toe aan je CSS. Hiermee wordt een standaardlettertype gebruikt totdat het gewenste font volledig is geladen.

Voorbeeld:

cssCode kopiëren@font-face { font-family: 'CustomFont'; src: url('customfont.woff2') format('woff2'); font-display: swap; }

4. Voorkom late toevoegingen van dynamische content

Laad pop-ups, banners en andere dynamische elementen pas nadat de gebruiker heeft ingescrolld. Gebruik een JavaScript-oplossing zoals lazy loading om de impact te minimaliseren.

5. Vermijd onverwachte lay-outaanpassingen

Gebruik CSS-tricks zoals flexbox of grid om te voorkomen dat elementen bewegen als gevolg van dynamische content of schermresizing.

---

Veelgemaakte fouten bij CLS

Onvoorziene advertentieproblemen Advertenties worden vaak dynamisch geladen en kunnen de lay-out verstoren. Dit is een veelvoorkomende oorzaak van een hoge CLS-score.

Geen vaste afmetingen voor afbeeldingen Ontbrekende dimensies voor afbeeldingen en video’s leiden vaak tot verschuivingen, vooral bij trage verbindingen.

Onjuist gebruik van JavaScript Scripts die elementen toevoegen of verwijderen zonder de lay-out te stabiliseren, kunnen voor problemen zorgen.

---

Tools om CLS te verbeteren

1. Web Vitals Extension Een Chrome-extensie die je CLS-score en andere Core Web Vitals real-time meet.

2. Lighthouse Lighthouse, ingebouwd in Chrome DevTools, geeft een overzicht van je CLS-score en hoe deze verbeterd kan worden.

3. WebPageTest Biedt uitgebreide prestatie-analyses, inclusief CLS-problemen en oplossingen.

---

Case study: CLS verbeteren

Situatie: Een nieuwssite had een CLS van 0,3 door verschuivende advertenties en afbeeldingen zonder vaste afmetingen.

Acties:

• Vaste breedte- en hoogte-instellingen toegevoegd aan alle afbeeldingen.
• Advertentieruimtes vooraf gedefinieerd met CSS.
• Custom fonts geoptimaliseerd met font-display: swap.

Resultaat: De CLS-score verbeterde naar 0,08, wat leidde tot een hogere gebruikerswaardering en een stijging in organisch verkeer van 15%.

---

Waarom CLS belangrijk blijft

Met de toenemende focus van Google op gebruikerservaring blijft CLS een belangrijke factor in SEO. Door je CLS te verbeteren, verhoog je niet alleen je rankings, maar bied je ook een stabiele en prettige ervaring voor je bezoekers.