Core Web Vitals – website snelheid verbeteren

Vanaf mei 2021 is je positie in Google (nog meer) mede afhankelijk van je website snelheid. Vanaf dan telt je score op het gebied van Core Web Vitals namelijk ook mee als officiële ranking factor. Natuurlijk is het niet de enige ranking factor (Google gebruikt meer dan 200 factoren om te bepalen welke positie een website krijgt in de zoekresultaten), maar de verwachting is wel dat Core Web Vitals een belangrijke factor worden.

In dit artikel lees je:

• Dat Core Web Vitals gaat over de snelheid van je website.
• Dat je de snelheid van je website kunt meten met Google Pagespeed Insights.
• Dat de Core Web Vitals LCP, FID en CLS zijn, en wat die precies inhouden.
• Dat het optimaliseren van je afbeeldingen een makkelijke manier is om de snelheid van je website flink te verbeteren, en hoe je dat doet.
• Dat ook een caching plugin je snelheid en Core Web Vitals score een flinke boost geeft, waarom dat zo is en welke bekende caching plugins er zijn.
• Dat je zo weinig mogelijk plugins moet gebruiken, omdat iedere plugin weer extra code toevoegt aan het pakket dat gedownload moet worden.
• Dat “bloat” code is die wel geladen wordt op een pagina, terwijl die daar helemaal niet gebruikt wordt – en wat je daaraan kunt doen.
• Dat goede hosting ook zeer belangrijk is en waar je op moet letten bij het kiezen van een hostingbedrijf.
• Dat je Bob ook kunt inhuren om je website snelheid te verbeteren.

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:

•  WP Super Cache (van het bedrijf achter WordPress zelf)
• WP Fastest Cache
• W3C Total Cache (die laatste is vrij ingewikkeld en dan ook vooral interessant voor mensen die weten wat ze doen).
• Persoonlijk gebruik ik vaak Comet Cache, waarmee ik zeker in combinatie met Divi goede resultaten behaal.

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.