Wat is CLS
Wat is een layout shift?
Cumulative Layout Shift, afgekort CLS, meet hoe sterk de inhoud van een pagina onverwacht verschuift terwijl die laadt. Je kent het misschien: je wilt op een knop klikken, maar de pagina schuift net op het moment van de klik, en je tikt ergens anders op.
Elke verschuiving van een zichtbaar element telt mee. De CLS-waarde is het resultaat van al die verschuivingen tijdens het bezoek, afhankelijk van hoe groot het element is en hoe ver het verspringt. Een lage waarde betekent een rustige pagina. Dat verspringen is vervelend, omdat de bezoeker zijn plek moet terugvinden en soms een verkeerde klik maakt.
Wat veroorzaakt verspringen?
- Afbeeldingen zonder afmetingen: de browser weet dan niet hoeveel ruimte hij moet reserveren, dus de tekst schuift op zodra de foto laadt.
- Advertenties en embeds: een advertentie of video die later in de pagina wordt ingevoegd, duwt de inhoud eronder omlaag.
- Laat ladende lettertypen: als een webfont wordt vervangen door een ander, kunnen regels van lengte veranderen. Zie webfonts en laadsnelheid.
- Inhoud die later verschijnt: een banner of melding die bovenaan de pagina wordt ingevoegd.
Wat is een goede CLS?
Google noemt een CLS van 0,1 of lager goed. Een waarde tussen 0,1 en 0,25 heeft verbetering nodig, en daarboven is de stabiliteit slecht. Het gaat om de ervaring van echte bezoekers, dus de waarde kan verschillen per apparaat en per bezoek.
Verspringen is meestal goed te voorkomen. Door afmetingen op te geven aan afbeeldingen en ruimte te reserveren voor advertenties en embeds, blijft de pagina op zijn plek. Test ook op een telefoon, want op een klein scherm vallen verspringingen vaak sterker op. Meer over afbeeldingen die zich aanpassen aan het scherm lees je bij responsive afbeeldingen.
Veelgestelde vragen
Moet mijn CLS altijd exact 0 zijn?
Nee. Een CLS onder 0,1 is al goed, en een perfecte nul is niet nodig voor een prettige pagina. Het gaat vooral om verschuivingen die de bezoeker echt storen, zoals een knop die net voor de klik verspringt. Zorg dat die zo weinig mogelijk voorkomen. Een kleine verschuiving onderaan de pagina is minder storend dan een sprong bovenaan, vlak voor de klik.
Wat is het verschil tussen CLS en LCP?
LCP meet hoe snel het belangrijkste element verschijnt. CLS meet of de pagina stabiel blijft terwijl hij laadt. Een pagina kan snel zijn en toch hard verspringen, en een stabiele pagina kan traag zijn. Voor de snelheidskant van het verhaal lees je wat LCP is.