Wat jij moet weten over de core web vitals

Dat snelle laadtijden belangrijk zijn voor de prestaties van je website of webshop, is natuurlijk niets nieuws. Een snelle, functionele site kan goed scoren in de zoekresultaten, maar snelle sites zijn ook beter voor de user experience waardoor ze beter converteren. In 2021 komt er een Google update aan die zich gaat richten op de Core Web Vitals. Wij vertellen je wat jij moet weten over deze Core Web Vitals, zodat jij aan de slag kunt gaan met het optimaliseren van de laadtijden voor jouw site.

Op 29 mei 2020 heeft Google een nieuwe update aangekondigd die in 2021 wordt uitgerold. Deze Google update is gericht op de user experience van gebruikers. Of in de woorden van Google zelf:

“The page experience signal measures aspects of how users perceive the experience of interacting with a web page. Optimizing for these factors makes the web more delightful for users across all web browsers and surfaces, and helps sites evolve towards user expectations on mobile. We believe this will contribute to business success on the web as users grow more engaged and can transact with less friction.”

Zodoende spreken we ook wel van de ‘Page Experience update’. Om de page experience te beoordelen van een website, hanteert Google bij deze update de ‘core web vitals’ als metrics. Waarschijnlijk worden laadtijden met deze update een nieuwe ranking factor van het Google algoritme.

Wat zijn core web vitals?

De Core Web Vitals bestaan eigenlijk uit 3 verschillende metrics die Google hanteert bij het beoordelen van de page experience op verschillende pagina’s. Wij vertellen je welke metrics dit zijn en waar deze aan moeten voldoen.

Largest Contentful paint – LCP

De ‘largest contentful paint’ is simpel gezegd het grootste element binnen je viewport, oftewel het deel wat direct zichtbaar is op je scherm (desktop of mobiel). Wanneer een bezoeker jouw site bezoekt, moeten de verschillende pagina’s natuurlijk zo snel mogelijk ingeladen worden. Dan is het natuurlijk wel zo belangrijk dat alles wat je direct kunt zien, zo snel mogelijk zichtbaar is op een site. Om te bepalen hoe snel een site ‘above the fold’ geladen is, hanteert Google de LCP.

Simpel gezegd, wordt bij deze metric gekeken hoe lang het duurt om het grootste element binnen een pagina te laden. Om te voldoen aan deze metric, moet dit element binnen 2,5 seconden geladen zijn. Duurt het langer dan 4 seconden om dit element in te laden, dan wordt deze metric als ‘slecht’ beoordeeld.

De LCP achterhalen en optimaliseren

Wil je weten of jouw site voldoet aan de LCP richtlijnen? Dan kan je een Pagespeed Insight test doen of een Google Lighthouse report aanmaken. Deze rapporten tonen welk element op jouw site wordt gehanteerd als LCP. In veel gevallen is dit een banner of een slider bovenaan je homepage of categoriepagina, maar dit kunnen ook andere elementen zijn. Vaak worden te grote afbeeldingen gebruikt of wordt zo’n banner of slider ingeladen met gebruik van Javascript, waardoor het inladen van de LCP onnodig lang kan duren.

Cumulative Lay-out Shift – CLS

De cumulative lay-out shift is een metric die de visuele stabiliteit tijdens het laden van een pagina beoordeelt. Dit is een duidelijke metric die de user experience behoorlijk beïnvloedt. Tijdens het inladen van de verschillende elementen op een site kan het zo zijn dat de gehele lay-out van een pagina verandert. Dit kan ertoe leiden dat mensen per ongeluk de verkeerde elementen aanklikken of openen en dat leidt natuurlijk tot irritatie bij bezoekers.

De CLS is een waarde die idealiter niet hoger is dan 0,1. Scoor je hoger dan 0,25, dan beschouwd Google dit als ‘slecht’. Dat betekent dat je site tijdens het inladen slechts een minimale aanpassingen mag maken in de lay-out.

Er kunnen meerdere oorzaken zijn, waardoor de cumulative lay-out shift te hoog is. Denk hierbij aan:

Afbeeldingen zonder afmetingen die voor elk scherm opnieuw geschaald moeten worden.
Advertenties, embedded content, iframes of promotiebanners die worden ingeladen.
Dynamisch ingeladen content die tekst of afbeeldingen naar beneden drukt.
Lettertypes die niet vertoond worden of niet direct juist weergegeven worden (FOIT/FOUT).

Om te achterhalen welke elementen zorgen voor een lay-out shift op een site kan je een Google Lighthouse rapport genereren. Onder het kopje ‘avoid large lay-out shifts’ in Lighthouse, zie je de elementen die de grootste impact hebben op de cumulative lay-out shift. Door deze bronnen aan te pakken kan je ervoor zorgen dat jouw site voldoet aan de richtlijnen voor de CLS.

First Input Delay – FID

De ‘first input delay’ of FID meet de interactiviteit van jouw site. Als je site wordt ingeladen, kan het zijn dat het even duurt voordat je site ook reageert op interacties van klanten. Reageert je site niet wanneer bezoekers klikken op buttons of links? Dan kan dat leiden tot verwarring of irritatie. Hoe langer het duurt voordat je site interactief is, hoe sneller dat kan leiden tot frustraties bij klanten.

Volgens Google zou de FID niet hoger moeten zijn dan 100 milliseconds. Is de first input delay hoger dan 250 milliseconds, dan heb je een slechte score.

De oorzaken van een hoge FID zijn niet gemakkelijk op te lossen. Lange laadtijden voor grote Javascript taken kunnen veel tijd in beslag nemen. De tijd die het kost om deze taken uit te voeren wil je optimaliseren.

De grote hoeveelheid code die moet worden ingeladen, wil je daarom opdelen. Zo kan je bepaalde bronnen uitstellen, maar kan je ook gebruik maken van een web-worker. Terwijl je site één voor één de verschillende bronnen inlaadt, kan een web-worker cruciale Javascript bronnen tegelijk inladen. Daarmee kun je de FID optimaliseren.

Om te ontdekken welke bronnen de FID beïnvloeden, kan je binnen Chrome Devtools kijken bij ‘sources’ kijken. Hier vind je een overzicht van de verschillende bronnen die veel tijd kosten om in te laden.

Pagespeed als ranking factor

Al lange tijd werd beweerd dat sitespeed een ranking factor is voor SEO. Dit is echter altijd ontkend door Google. Meestal ging een hoge sitespeed ook hand in hand met andere SEO optimalisaties, waardoor de goede posities niet één op één te verklaren waren aan de hand van de snelle laadtijden van een site. Echter lijkt het erop dat deze core web vitals er wel degelijk voor gaan zorgen dat sitespeed een ranking factor wordt. Al wordt er dus heel goed gekeken door Google of langere laadtijden de user experience negatief beïnvloeden.

Dit wil dus niet zeggen dat deze metrics het belangrijkst zijn voor een goede sitespeed. Er zijn namelijk nog veel meer metrics die uiteindelijk de laadtijden van jouw site beïnvloeden.

Denk daarbij aan metrics als ‘First Contentful Paint’(FCP), ‘Time To Interactive’ (TTI) of ‘Time to first byte’ (TTFB). Wat je wel zult merken bij het optimaliseren van de snelheid van een site, is dat er enige overlap is tussen verschillende metrics. Waardoor je vrijwel nooit één metric optimaliseert, maar eerder een aanpassing maakt die ten goede komt van meerdere metrics.

Wil je er zeker van zijn dat je site geen last van de Page Experience update? Dan doe je er goed om de core web vitals van jouw belangrijke pagina’s te optimaliseren.