Bob de webbouwer bouwt en verbetert websites 040 848 80 69 bob@bobdewebbouwer.com

Core Web Vitals, wat is dat?

Core Web Vitals gaan over de gebruikerservaring die je bezoekers hebben op je website. Google wil voornamelijk websites tonen die een goede gebruikerservaring bieden, en hoe sneller de website, hoe beter die gebruikerservaring.

Website snelheid meten met Google Pagespeed Insights

Als je de snelheid van je website gaat optimaliseren is het belangrijk deze te meten met een objectieve tool, zodat het resultaat niet beïnvloed wordt door dingen als de snelheid van jouw computer en internetverbinding, of browsercache.

Er zijn diverse gratis tools om de snelheid van je website te meten, zoals Pingdom en GT Metrix, maar eigenlijk is Google’s eigen Pagespeed Insights de enige die echt belangrijk is.

Core Web Vitals zijn de 3 belangrijkste onderdelen die Google Pagespeed Insights meet:

Largest Contentful Paint (LCP)

De Largest Contentful Paint is de tijd die nodig is om het grootste zichtbare element in de viewport weer te geven.

Dit gaat erover hoe lang het duurt voordat alles wat direct zichtbaar is in de browser van de bezoeker geladen is. Het grootste zichtbare element zal vaak een afbeelding of video zijn, maar kan ook een tekstblok zijn. Het gaat dus alleen om de elementen “boven de vouw”.

First Input Delay (FID)

De First Input Delay meet hoe lang het duurt voordat de bezoeker iets kan doen op je pagina, zoals klikken op een link, scrollen of iets typen in een zoekbalk of formulier.

Bezoekers hebben nu eenmaal erg weinig geduld en scannen een pagina in eerste instantie op zoek naar iets wat ze interessant vinden. Vaak klikken ze daarvoor op links scrollen ze of maken ze gebruik van de zoekfunctie op je website. Maar ja, die moet het dan wel al doen natuurlijk… 

Cumulative Layout Shift (CLS)

Bij de Cumulative Layout Shift wordt gekeken in hoeverre elementen zich verplaatsen tijdens het laden.

Zo kan het bijvoorbeeld gebeuren dat een tekst direct wordt weergegeven, maar een grote afbeelding (of video) die boven die tekst staat er wat langer over doet om te laden. Als die afbeelding dan uiteindelijk wordt weergegeven verschuift de tekst naar onder die afbeelding. Erg irritant natuurlijk als je die tekst al aan het lezen was.

Core Web Vitals in Google Pagespeed Insights

Snelheid website verbeteren (en daarmee ook je Core Web Vitals score)

Nadat je de snelheid van je website hebt laten meten door Pagespeed Insights weet je dus hoe je ervoor staat. Zoals te zien in het screenshot hierboven geeft deze tool je een score op elk van de Core Web Vitals, en nog een paar andere elementen. Onderdelen met een groen bolletje zijn in orde (binnen de normen van Google dus), onderdelen met een oranje vierkantje zijn redelijk maar kunnen nog wel wat verbetering gebruiken, en onderdelen met een rood driehoekje scoren slecht en moeten dus verbeterd worden.

Gelukkig vertelt Google je ook in detail welke onderdelen voor problemen zorgen, en wat je daaraan kunt doen. 

Dat is echter gemakkelijker gezegd dan gedaan. Zo is er een kopje “Verwijder bronnen die de weergave blokkeren”. Als je daarop klikt krijg je te zien welke bronnen de weergave blokkeren… waarbij vaak ook dingen als Google Analytics, Google Site Tag, Google Fonts enzovoorts te vinden zijn. Ook jquery is een bekende “boosdoener”, maar dat is noodzakelijk voor veel functionaliteit in thema’s en plugins.

Er zijn echter ook veel problemen die je wel relatief eenvoudig kunt verhelpen.

Afbeeldingen optimaliseren

Het optimaliseren van je afbeeldingen is een goed voorbeeld daarvan. Niet geoptimaliseerde afbeeldingen is op veel websites één van de belangrijkste oorzaken van traagheid,
en iets wat vrij simpel te verbeteren is. Dat begint al met het uploaden van de afbeeldingen in het juiste formaat; als je ergens een afbeelding gebruikt van 300 x 200 pixels
hoef je echt geen afbeelding van 3000 x 2000 pixels die 3MB groot is te uploaden.

In een beeldbewerkingsprogramma zoals Photoshop (waar ook gratis alternatieven voor te vinden zijn) kun je een afbeelding eenvoudig resizen naar de benodigde afmetingen,
en ook kiezen in welke kwaliteit je de afbeelding wilt opslaan. Een afbeelding die je resized van 3000 x 2000 pixel naar 300 x 200 pixel hoef je echt niet in de maximale kwaliteit
op te slaan, die ziet er ook in een kwaliteit van 30 nog prima uit.

Er zijn ook WordPress plugins beschikbaar die je afbeelding optimaliseren tijdens het uploaden, zoals ShortPixel, Smush, Imagify en Optimole. Al deze plugins hebben ook een gratis versie – uiteraard wel met wat beperkingen. Meestal geldt er een limiet op het aantal afbeeldingen dat je gratis kunt optimaliseren, en/of op de maximale grootte van een afbeelding
(1 of 2MB). Nog een reden om de afbeelding al te optimaliseren voordat je deze upload dus.

Een andere hele simpele optimalisatie is het omzetten van je afbeeldingen naar WebP. WebP is een bestandsformaat, net als JPEG en PNG, maar dan speciaal bedoeld voor webbrowsers. Net als bij JPEG en PNG wordt ook nu het bestand flink gecomprimeerd zonder zichtbaar kwaliteitsverlies.

De bovenstaande optimalisatie plugins bieden allemaal een optie om je afbeeldingen te converteren naar WebP (Smush alleen in de pro versie), maar je kunt ook een gratis plugin als WebP Express gebruiken. Dit lost ook de melding “Lever afbeeldingen in moderne indelingen” in Pagespeed Insights op.

Let er verder bij het kiezen van een thema of plugin op dat lazy loading ondersteund wordt. Dat zorgt ervoor dat afbeeldingen pas geladen worden op het moment dat ze in beeld komen, in plaats van dat alle afbeeldingen meteen geladen worden als de pagina wordt opgevraagd. Lazy loading functionaliteit is standaard ingebouwd in WordPress, maar je thema en plugins moeten dat wel ondersteunen.

Gebruik een caching plugin

Het installeren van een caching plugin zorgt ook voor een enorme snelheid boost (en ook een enorme boost in je Core Web Vitals score). Dat heeft verschillende oorzaken.

Als een website voor het eerst geladen wordt moeten alle gegevens zoals teksten, afbeeldingen en code uit de database geladen worden.
Dit proces kost tijd, en moet voor iedere bezoeker opnieuw worden uitgevoerd.

Maar de meeste websites bevatten voor alle bezoekers exact dezelfde content, en die content verandert meestal ook niet elke 5 minuten (zoals bijvoorbeeld bij nieuwssites
wel het geval is). Daardoor is het helemaal niet noodzakelijk om voor iedere bezoeker al die gegevens opnieuw uit te database te laden.

Een caching plugin maakt een soort screenshot van de pagina als deze voor het eerst geladen wordt. De volgende keer dat die pagina wordt opgevraagd wordt dat screenshot getoond, wat veel sneller is dan het opnieuw laden van alle gegevens uit de database.

Het nadeel van caching is dat je niet altijd de meest recente versie van de pagina ziet. De cache wordt automatisch regelmatig ververst (bijvoorbeeld als je een nieuw bericht publiceert), maar soms is het noodzakelijk de cache handmatig te wissen. Ook als je problemen ondervindt op je website is het wissen van de cache de eerste stap die je moet doen.

Bekende gratis caching plugins zijn:

Naast het maken van zo’n screenshot kan een caching plugin ook andere optimalisaties uitvoeren, zoals:

  • Optimaliseren van HTML, CSS en JavaScript code.
  • Combineren van verschillende CSS en JavaScript bestanden in 1 bestand zodat de server maar 1 bestand in plaats van tientallen kleinere bestanden hoeft te downloaden.
  • Verkleinen van dat bestand door middel van GZip compressie (hoe kleiner het bestand, hoe sneller het gedownload is natuurlijk).
  • Uitstellen van het laden van niet noodzakelijke bestanden totdat de rest van de pagina geladen is (wat render blocking meldingen in PageSpeed Insights kan oplossen).

Voor dat soort taken gebruik ik echter ook vaak Autoptimize, in combinatie met een caching plugin.

Gebruik zo weinig mogelijk plugins

Eén van de voordelen van WordPress is dat er tienduizenden plugins beschikbaar zijn. Voor iedere functionaliteit die je kunt bedenken is er wel een plugin te vinden.
Maar elke plugin is een stukje software, dat weer extra CSS code en JavaScript code toevoegt aan het pakket dat van de server gedownload moet worden.

Soms is dat maar een paar kb aan code, maar soms ook heel veel, zoals bijvoorbeeld bij de webshop plugin WooCommerce, een page builder plugin zoals Elementor,
een slider plugin, een uitgebreide contactformulier plugin etcetera.

Het is dan ook aan te raden zo weinig mogelijk plugins te gebruiken. Overigens niet alleen in verband met de snelheid, maar ook in verband met het voorkomen van
problemen als conflicten tussen plugins of veiligheidslekken.

Elimineer bloat

Dit is wat technischer dan de bovenstaande dingen. Bloat is code die wel op een pagina geladen wordt, terwijl die helemaal niet nodig is op die pagina.

Een contactformulier plugin is daar een goed voorbeeld van. De meeste websites hebben alleen op de contactpagina een contactformulier staan.
De code die nodig is om dat contactformulier te laten werken wordt echter op iedere pagina geladen. Dat is natuurlijk helemaal niet nodig.

Dat is ook het grootste probleem met de meeste page builders. Die bevatten heel veel functionaliteit, zoals (wederom) contactformulieren, sliders, popups, animaties enzovoorts.
De code voor al die functionaliteit wordt op iedere pagina geladen, zelfs voor dingen die helemaal nergens op de site gebruikt worden.

Gelukkig heeft de Core Web Vitals update er wel voor gezorgd dat de bekende page builders (en andere thema en plugin ontwikkelaars) eindelijk wat gaan doen aan dit probleem.
Bijvoorbeeld door bij iedere pagina te kijken welke code daadwerkelijk noodzakelijk is op die pagina, en alleen die code te laden.

Zelf kun je ook wat doen aan dit probleem, met de Asset Cleanup plugin. Deze plugin voegt onderaan iedere pagina een vak toe met alle bestanden die op de betreffende pagina geladen worden. Vervolgens kun je voor ieder bestand instellen dat dit niet geladen moet worden op die specifieke pagina, of juist op de gehele website niet maar op die specifieke pagina wel. Hiermee kun je dus instellen dat de code voor je homepage slider alleen op de homepage geladen wordt, en de code voor je contactformulier alleen op de contactpagina. 

Goede hosting

De server waar je website op draait is natuurlijk ook een zeer belangrijke factor als je het hebt over de snelheid. Je wilt een hostingbedrijf dat:

  • Regelmatig investeert in nieuwe technieken, zoals de laatste generatie SSD schijven en HTTP/2.
  • Altijd de nieuwste MySQL en PHP versie aanbiedt, aangezien die sneller en veiliger zijn.
  • Niet teveel websites op 1 server zet, en het liefst iedere website eigen resources toekent.
  • Servers in Nederland heeft, of in elk geval dichtbij (Duitsland is ook prima bijvoorbeeld). *
  • Gratis SSL certificaten biedt (niet zoveel met snelheid te maken, maar wel ranking een factor).
  • Goede support biedt bij problemen.

* Als je jezelf niet (voornamelijk) op Nederland richt kun je beter een server kiezen in het land waaruit je de meeste bezoeker krijgt.

Idealiter kies je voor een hostingbedrijf dat gebruik maakt van Litespeed servers, aangezien die zeer snel zijn – maar vaak ook behoorlijk prijzig.

Voor betaalbare hosting die voldoet aan alle bovenstaande criteria kan ik Siteground aanbevelen.
Siteground is één van de grootste hostingbedrijven ter wereld, en hoewel het een Amerikaans bedrijf is hebben zij ook servers in Nederland en Duitsland.

Hulp nodig met het verbeteren van je website snelheid?

Dit artikel is geschreven door Bob de webbouwer, een allround website expert die regelmatig blogt over allerlei onderwerpen die je helpen bij (het bouwen van) jouw website. Heb je hulp nodig? Huur Bob de webbouwer dan in om de snelheid van jouw website te verbeteren.

Vraag direct een vrijblijvende offerte aan

Sommige links in dit artikel zijn affiliate links. Dat wil zeggen dat ik een vergoeding krijg als je een betaald abonnement koopt via een link op deze pagina. Dat kost jou verder niets extra’s, maar zorgt er wel voor dat ik jou kan blijven helpen met dit soort gratis artikelen.

Ga je voor een gratis oplossing maar wil je me toch bedanken voor dit artikel?
Dan kun je eventueel ook een kleine eenmalige donatie doen via de button hiernaast 🙂

 

Bedrag



Gerelateerde artikelen