Wat zijn de Core Web Vitals?
De Core Web Vitals van Google zijn drie metrics waarmee de gebruikerservaring op websites wordt gemeten. De drie metrics zijn als volgt:
- Largest Contentful Paint (LCP) / laadprestaties
- First Input Delay (FID) / responsiviteit
- Cumulative Layout Swift (CLS) / visuele stabiliteit en frequentie
Largest Contentful Paint (LCP)
De LPC meet de laadprestaties van een webpagina. De waargenomen laadsnelheid wordt hierin gemeten. Met deze laadtijd bedoelen we de tijd die het duurt voordat het grootste element op het scherm van de gebruiker verschijnt. Dit (grootste) element is meestal de uitgelichte afbeelding of video op de pagina, maar kan ook een groottekstelement, zoals de H1 zijn.
Een ideale score is hierbij een maximale laadtijd van 2.5 seconden. Dit klinkt misschien enorm snel, maar wees nou eerlijk: niemand heeft zin om lang te wachten voordat ze op een pagina kunnen.
Het LCP-element kan je vinden op de PageSpeed Insights pagina van Google. Hier staat onder ‘diagnostische gegevens’ het ‘LCP-element (grootste weergave met content)’.
Optimalisatie van de LCP kan je op vier manieren doen:
- De reactietijd van de server versnellen. Dit doe je door een CDN te gebruiken. Hiernaast kan het ook helpen om de caching te verbeteren.
- De laadtijd van je afbeeldingen versnellen door de afbeeldingen te comprimeren.
- Het verminderen van render-blocking bronnen.
- Het verwijderen van ongebruikte plugins. Kijk naar welke plugins je niet (meer) nodig hebt en verwijder deze.
First Input Delay (FID)
De FID meet de ‘responsiviteit’ van een pagina. Hierbij gaat het niet om inzoomen of scrollen, maar worden echte interacties bedoeld, zoals het klikken op een knop, tekst invullen of een drop-down menu aanklikken. Ook hierbij is het weer belangrijk dat dit snel gebeurd, want het is frustrerend wanneer het lang duurt voordat je daadwerkelijk iets kan doen op een pagina. Een goede score hierbij is een responsiviteit van maximaal 100ms.
De grootste oorzaak van een slechte FID score is het uitvoeren van zware JavaScript. Het uitvoeren van deze zware JavaScript op de voorgrond zorgt er namelijk voor dat de browser niet kan reageren op de interactie van de gebruiker.
De meeste pagina’s passeren FID-controles eenvoudig, maar wanneer je aan FID wilt werken, kan je maar een paar dingen doen. Wanneer je de mogelijkheid hebt om het JavaScript te verminderen, dan moet je dit doen.
Wanneer je gebruik maakt van een JavaScript framework, dan is er veel JavaScript dat geladen moet worden op hezelfde moment. Dit kan een tijdje duren en zorgt voor vertragingen. Wanneer je gebruikt maakt van prerendering, kan je dit verschuiven van de browser naar de server.
Een andere mogelijkheid is door JavaScript op te splitsen. Lange taken die de reactie op interacties vertragen moeten worden hiermee verdeelt in kleinere taken die minder tijd blokkeren. Dit kan je doen met code splitsing.
Ten slotte kan je er ook voor kiezen om een web worker te gebruiken. Dit is een stukje code dat ervoor zorgt dat JavaScript in de achtergrond geladen kan worden. Hierdoor zorg je ervoor dat de primaire thread niet wordt onderbroken en dit zal de tijd tot interactie verkleinen.
Cumulative Layout Swift (CLS)
De CLS meet de visuele stabiliteit en de frequentie waarmee gebruikers onverwachte layout wijzigingen zien. Zo’n layout shift ontstaat doordat bepaalde elementen later worden ingeladen op een pagina, waardoor bijvoorbeeld teksten of knoppen naar beneden worden gedrukt. Hierdoor kan je op dingen klikken die niet de bedoeling zijn. De score heeft een waarde tussen nul en een willekeurig positief getal. Nul = geen verschuiving, hoe hoger het getal is = hoe groter de verschuiving op de pagina.
Deze CLS-elementen kan je vinden op de PageSpeed Insights pagina van Google. Hier staat onder ‘diagnostische gegevens’ het ‘Grote indelingsverschuivingen vermijden’.
Er zijn een aantal dingen die je kan doen om een CLS op te lossen:
- De grootte van afbeeldingen en video’s instellen zorgt ervoor dat er geen verschuiving zijn wanneer de afbeelding is gedownload.
- Een laadindicator kan er voor zorgen dan onaangename lay-out verschuivingen worden voorkomen wanneer het laden van een pagina is voltooid.
- Door fonts sneller in te laden minimimaliseer je de kans op een verschuiving. Echter kan je een layout shift door een font niet volledig voorkomen.
- Het plaatsen van (banner) advertenties lader op de pagina zorgt ervoor dat er minder content is die naar beneden kan verschuiven.
Feitjes over de Core Web Vitals
Feit 1: De metrics worden opgesplitst tussen desktop en mobiel. Mobiele signalen worden gebruikt voor mobiele rankings, desktop signalen worden gebruikt voor rankings op de desktop.
Feit 2: De data komt uit het ‘Chrome User Experience Report’ (CrUX). De data hierin wordt gemeten van opted-in Chrome gebruikers. De beoordeling van die field data is op ten minste 75% van de scores. Dus wanneer 75% van je bezoekers in de gele score voor LCP, FIP of CLS komt, is je score geel. Dat zal vast ook betekenen dat wanneer 74% een gele score haalt op je webpagina, je helaas in rood zit.
Feit 3: De metrics worden gemeten voor elke losse pagina, maar als er niet genoeg data is, dan kunnen er (volgens John Mueller) signalen van de gehele website worden gebruikt.
Feit 4: De metrics kunnen in de toekomst nog veranderen.
Feit 5: Je kan de resultaten van de core webvitals vinden in Google Search Console en op de Page Speed Insights pagina van Google. Hiernaast zijn er ook nog andere websites, maar het is makkelijk om gewoon een van deze te gebruiken.
Aandachtspunten
Wanneer je verbeteringen doorvoert en de score daarmee van rood naar geel gaat of van geel naar groen, is een eventueel SEO-effect vrijwel direct zichtbaar. De verbeterde score zie je alleen niet direct in Google Search Console. Dit komt doordat GSC zich baseert op gebruikersdata. Deze data wordt iedere 28 dagen ververst en dus zie je de veranderingen pas na 28 dagen terug in GSC. Om teleurstellingen te voorkomen moet je dit dus niet vergeten.
Het lijkt zo logisch: als er drie onderdelen zijn waarop je beoordeeld wordt, moet je toch op alle drie goed scoren? Bij de Core Web Vitals dus niet. Als je op een van de onderdelen groen scoort, kan dat al een rankingboost geven. Natuurlijk wil je wel op alle drie de metrics goed scoren om het beste resultaat neer te zetten voor jouw website.
Echter blijft de content op je website natuurlijk het belangrijkst Hoe goed je ook weet te scoren op de Core Web Vitals, wanneer de content op je website slecht is ga je niet goed ranken in de zoekmachines.