Praktische tips voor een hogere Google Ranking

Wat houd dit nou werkelijk in?

Een voorbeeld: Je website is aan het inladen en de CSS is nog niet ingeladen. Het menu is al wel als een lijst aanwezig en wordt als zodanig in de browser getoond:

• Home

• Over ons

• Nieuws

• Contact

Dan wordt de CSS ingeladen en verspringt deze lijst naar hoe je het in het design hebt afgestemd. Alles netjes naast elkaar horizontaal:

Home          Over ons             Nieuws               Contact

Het hele element is nu van 100 pixels hoog naar 20 pixels hoog gegaan. Dit wordt Layout Shift genoemd. En alle Layout Shifts bij elkaar opgeteld worden weergegeven in een score die van 0.0 tot 0.25+ gaat. (Alles boven de 0.25 wordt als een slechte score gezien).

Hoe vind ik het element dat zorgt voor een hoge CLS score?

Op een pagina kunnen meerdere shifts voorkomen, de ene met een zwaardere impact op CLS dan de andere. Om erachter te komen welke van de shifts de grootste impact hebben, kun je de DevTools in Google Chrome gebruiken.

DevTools Gebruiken

1. Open de Performance tabblad in DevTools.
2. Start een recording van het inladen van je webpagina.
3. Bekijk de gedetailleerde weergave van alle zaken waar Google Pagespeed op controleert.

In dit overzicht staat een rij genaamd Layout Shift. In deze rij zitten allemaal roze blokjes. Elk blokje is een losse shift. Door op zo’n blokje te klikken krijg je meer inzicht in de shift.

Analyseren van shifts

In de summary staan er twee waardes waar je uit kunt opmaken wat voor impact deze shift heeft op de gecombineerde CLS waarde:

• Score: geeft aan wat de score van deze enkele shift is.
• Cumulative Score: geeft aan wat de score tot op dat moment is.

In het voorbeeld hebben we de eerste shift aangeklikt, dus hier zijn beide gelijk, namelijk 0.9311.

Vergelijking van shifts

Wanneer we de tweede shift selecteren, is dit anders. Hier zien we een score van 0.008395 en een cumulative score van 0.9395.

Als we de cijfers van de eerste en tweede shift naast elkaar leggen, kunnen we al direct zien welke van de twee de meeste impact heeft:

• De eerste shift heeft een score van 0.9311.
• De tweede shift heeft een score van 0.008395.

Oplossen van hoge CLS scores

Het element dat de eerste shift veroorzaakt is in dit geval het bedrijfslogo linksboven in de header. Dit is een logo van 70×70 pixels. Dit relatief kleine element is de oorzaak van de hoge CLS score van deze pagina. Dit komt doordat dit element helemaal bovenaan de pagina staat. Omdat dit element eerst op de pagina staat maar niet als eerste wordt opgehaald, verschuift alles wat hieronder staat op het moment dat het wel ingeladen wordt. Het te laat inladen van een klein element heeft dus een grote shift tot gevolg.

In dit geval is het pre-loaden van de afbeelding afdoende en is de layout shift opgelost. In sommige gevallen kan het zijn dat de Critical CSS niet afdoende is om dit soort grote header shifts af te handelen. In zo’n geval zal er aan de Critical CSS gesleuteld moeten worden.

Verbeter jouw CLS score nu!

Het optimaliseren van de Cumulative Layout Shift (CLS) is een essentieel onderdeel van het verbeteren van de gebruikerservaring en de prestaties van je website in zoekmachines. Elke website heeft unieke ontwerpelementen die specifieke uitdagingen met zich meebrengen op het gebied van CLS. Door gebruik te maken van tools zoals Google Chrome DevTools, kun je effectief identificeren welke elementen de grootste layout shifts veroorzaken en gerichte aanpassingen maken om deze te minimaliseren.

Het proactief aanpakken van deze verschuivingen, zoals het pre-loaden van kritieke resources en het optimaliseren van je CSS, kan aanzienlijk bijdragen aan een soepelere, stabielere gebruikerservaring. Wil je meer weten over hoe je jouw website kunt optimaliseren voor een betere CLS-score? Neem dan contact op!