Nieuwe ranking factoren: Google's Core Web Vitals

Lars Ruiterkamp Lars Ruiterkamp
22 - 07 - 2021

Misschien heb je al gehoord over Google's Core Web Vitals. Zo niet, dan is het nu tijd om je erin te gaan verdiepen. De Core Web Vitals zijn een ongelooflijk handig hulpmiddel om te controleren hoe goed je website of webshop presteert op het gebied van sitesnelheid en gebruikerservaring. Sinds afgelopen maand (juni 2021) zijn ze officieel een ranking factor voor de organische positie van je website in Google. Wat ons betreft een goede ontwikkeling. Niet alleen zijn de factoren duidelijk en concreet, ook de aandacht voor gebruikerservaring (in plaats van alleen techniek en content) is top. In deze blog lees je wat Core Web Vitals zijn, waarom ze belangrijk zijn en vind je tips om ze te optimaliseren en monitoren.

Wat zijn Google's Core Web Vitals?

Google Core Web Vitals zijn gebruikersgerichte metingen van je website of webshop. Ze zijn gericht op het beoordelen van laadsnelheid, interactiviteit en visuele stabiliteit van een website. Deze :

  • Largest Contentful Paint (LCP): de tijd die nodig is om de belangrijkste inhoud van de pagina te laden. LCP moet 2,5 seconden of lager zijn.
  • First Input Delay (FID): de tijd die nodig is voordat een gebruiker kan interacteren met een pagina. Dit moet minder dan 100 milliseconden zijn.
  • Cumulative Layout Shift (CLS): de tijd die nodig is voordat alle visuele content op een pagina geladen is en een pagina ‘stabiel’ is. Er worden geen extra elementen op de pagina meer geladen (die een ‘lay-outverschuiving’ veroorzaken). CLS is idealiter minder dan 0,1 seconde.
Google Core Web Vitals
Core Web Vitals elementen: LCP, FID, CLS

Waarom is het belangrijk om hoog te scoren?

Zoals gezegd zijn de Core Web Vitals een ranking score sinds vorige maand. Dit betekent dat, om hoog te scoren in Google, je scores op de Core Web Vitals goed moeten zijn. Goede Core Web Vitals scores leiden bovendien niet alleen tot betere organische posities in Google. Het heeft verschillende andere voordelen:

  • Het leidt tot een betere gebruikerservaring
  • Betere gebruikerservaring leidt tot betere conversie
  • Betere websiteprestaties leiden tot betere resultaten op betaalde advertenties

Met goede Core Web Vitals scores kom je dus hoger in Google, heb je gelukkigere gebruikers, hogere conversiepercentages en betere betaalde advertenties.

Hoe goed scoort jouw site in Core Web Vitals?

Tijd om in Core Web Vitals te duiken voor je website of webshop. Ga naar https://developers.google.com/speed/pagespeed/insights, vul de URL van je website in en voer de scan uit. In de linkerbovenhoek kun je schakelen tussen Mobiel en Desktop. Je ziet meteen of de scores goed zijn, of er verbetering nodig is, of dat ze slecht zijn.

Wat zijn realistische scores?

Een kleine kanttekening. Optimaliseren voor Core Web Vitals betekent ook een balans vinden tussen UX, UI en performance. Soms zijn er modules die cruciaal zijn voor de functionaliteit van je website of webshop, maar die zwaar drukken op de laadtijden. Deze kun je niet zomaar uit zetten. Ondanks dit, zouden scores van 90-95 voor desktop en 60-70 voor mobiel haalbaar moeten zijn.

Hoe optimaliseer ik mijn scores?

Er zijn een heleboel dingen die je kunt doen, zowel technisch als inhoudelijk. Hieronder gaan we op beide aspecten in. De lijst met tips is verre van volledig, maar het is zeker een goed begin.

Tips om de technische prestaties van Core Web Vitals te optimaliseren

Het optimaliseren van de technische prestaties van je website of webshop komt eigenlijk maar op één ding neer: ervoor zorgen dat je website zo basic mogelijk is. Het laden van veel scripts kan nadelige gevolgen hebben voor de prestaties van je website of webshop. Tips:

  • Zorg in ieder geval voor goede, snelle hosting. Het spreekt voor zich dat vertragingen die je hebt door trage hosting invloed hebben op de laadsnelheid van de hele website/webshop.
  • Plaats alleen fundamentele scripts (zoals Google Analytics/Google Tag Manager) in de <head>-sectie.
  • Verwijder scripts die niet noodzakelijk zijn.
  • Update je website of webshop CMS. Elk nieuw CMS zal zich meer richten op de Core Web Vitals scores. Om een idee te geven: de laatste versie van Magento (op het moment van schrijven is dit 2.4) heeft standaard een Core Web Vitals score van 90 tot 95 voor desktop, zonder er iets aan te verbeteren.

Tips om je content te optimaliseren voor Core Web Vitals

Wanneer je de Core Web Vitals scan uitvoert, zul je zien dat een deel van de aanbevelingen betrekking heeft op de afbeeldingen op je website. Waarschijnlijk zijn ze niet in een nieuwe bestandsindeling en waarschijnlijk zijn ze te groot (teveel KB/MB). Tips:

  • Plaats afbeeldingen in een nieuwe bestandsindeling. Voor afbeeldingen betekent dit JPEG2000 of WebP formaat.
  • Comprimeer afbeeldingen. Dit is echt een must. Vaak worden afbeeldingen op de website gezet zonder de afbeeldingsgrootte te optimaliseren. Er zijn twee dingen die je moet doen. Allereerst, kijk naar het formaat van de afbeelding. Het heeft geen zin om een afbeelding die heel klein wordt weergegeven op de website (zoals een logo) te uploaden met afmetingen als 1600x1200. 400x300 is dan meer dan genoeg. Ten tweede, gebruik altijd tools zoals www.compressjpeg.com om je afbeeldingen te comprimeren. Dit verkleint je afbeeldingen zonder kwaliteit te verliezen.
  • Implementeer lazy loading op de website. Met lazy loading worden afbeeldingen pas geladen vlak voordat mensen ze te zien krijgen (bijvoorbeeld als ze over de pagina scrollen). Dit klinkt logisch, maar toch worden normaal gesproken alle afbeeldingen al ingeladen tijdens het laden van de pagina. Met lazy loading neem je die laadtijd aan het begin weg en zorg je voor een kortere laadtijd van je pagina.
  • Een alternatief voor het bovenstaande is om lazy loading over te laten aan webbrowsers (Chrome, Firefox, Edge). Nieuwe browsers hebben de mogelijkheid om afbeeldingen automatisch lazy te loaden. Het enige wat je hoeft te doen is 'loading = lazy' aan afbeeldingen toevoegen. De browser doet de rest. Deze optie is makkelijker, maar niet 100% waterdicht. Je bezoekers kunnen immers een oudere browser gebruiken - zonder de automatische lazy loading optie.

Hoe hou je de Core Web Vitals scores bij?

Als je de prestaties van je website of webshop optimaliseert voor Core Web Vitals, is het cruciaal om bij te houden hoe scores in de loop der tijd veranderen. Hier kun je verschillende tools voor gebruiken.

Search Console

Search Console is ideaal om te ontdekken welke pagina's fouten of optimalisatiekansen hebben. Om dit te controleren log je in op Search Console en klik je op Experience - Core Web Vitals in het menu aan de linkerkant. Hier zie je scores voor Mobiel en Desktop, en het aantal URL's dat slecht is, verbetering behoeft, en goed is.

Opmerking: niet alle URL's worden hier getoond, vanwege de manier waarop dit rapport wordt gegenereerd.

Search Console Core Web Vitals overview
Search Console Core Web Vitals overzicht


Search Console Core Web Vitals improvements tab
Search Console Core Web Vitals optimalisaties

CrUX dashboard

Naast Search Console raden wij aan om een CrUX dashboard in Google Data Studio in te richten. Hiermee kun je per maand zien wat de totale score was op de Core Web Vitals en hoe je site scoorde op de afzonderlijke elementen.

CrUX report in Google Data Studio
CrUX rapport in Google Data Studio

Verbeter je Core Web Vitals scores

Bekijk om te beginnen je scores in Pagespeed Insights, installeer Search Console en maak een CrUX dashboard. Dan is het tijd om te optimaliseren. Wil je inzicht krijgen in wat je moet verbeteren? Wij helpen je daarbij. Vraag een gratis scan aan door op onderstaande button te klikken (en stuur Lars een email)

Wil je meer weten?

Bekijk voor meer info Google’s eigen documentatie over Core Web Vitals.

Ik wil een gratis Core Web Vitals scan

Lars Ruiterkamp. Lars is El Niño's marketing lead. Hij helpt klanten nog succesvoller te worden door digital marketing in te zetten Lars Ruiterkamp. Lars is El Niño's marketing lead. Hij helpt klanten nog succesvoller te worden door digital marketing in te zetten

Deel deze blog

Jouw partner voor digitalisering  en  automatisering

Bedankt voor je bericht! We nemen z.s.m. contact met je op. :)
We willen graag je naam en e-mailadres weten om contact op te kunnen nemen.

Laten we samen een keer brainstormen of vertel ons wat over jouw uitdaging. Laat je gegevens achter en we nemen z.s.m. contact met je op.