WordPress optimalisatie 101 voor de Core Web Vitals

Wie hoog wil scoren in Google kan er tegenwoordig bijna niet meer omheen, een technisch geoptimaliseerde website is onmisbaar in een succesvolle digital marketing strategie. Om de haverklap worden de technische vereisten voor een goede website weer door Google en andere zoekmachines aangepast.

Zodoende is het essentieel dat jouw website met deze nieuwe vereisten meegroeit. In dit artikel ga ik je op een praktische wijze meenemen bij het optimaliseren van je professionele WordPress website en/of webshop.

Met de introductie van de Core Web Vitals wil Google een uniforme manier voor het testen van de gebruikerservaring simuleren, zodat website beheerders een goede richtlijn hebben voor het verbeteren van hun website. We willen tenslotte allemaal dat de bezoeker naast een prettige ervaring ook op een efficiënte manier zijn doel kan bereiken.

Naast content en backlinks wordt het dus ook steeds belangrijker om de bezoeker te voorzien van een kwalitatief goede gebruikerservaring tijdens het bezoek aan je website. Naast het hebben van een goed uitziende website, is het dus ook van belang deze op de juiste manier qua techniek op te bouwen.

Wat zijn de Core Web Vitals nou precies?

Kort samengevat zijn de Core Web Vitals een set van factoren die Google belangrijk acht voor de algehele gebruikerservaring van een bezoeker van een website. De Core Web Vitals bestaan uit drie factoren Largest Contentful Pain (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS) die samen de paginasnelheid en gebruikersinteractie van een webpagina evalueren.

Om de Core Web Vitals beter te begrijpen, raad ik voordat je begint met de optimalisaties van je WordPress website, de uitgebreide uitleg over de Core Web Vitals van onze collega Stef Dijkstra te lezen. Door te begrijpen wat je doet kun je nog meer uit deze optimalisaties halen.

Voordat we beginnen…

Er zijn een aantal makkelijke stappen die je kunt nemen om je WordPress website/webshop te optimaliseren, de optimalisatie kunnen echter wel tot problemen leiden. Daarom is het altijd aan te raden een back-up van je website bestanden en database te maken, voordat je de optimalisaties doorvoert.

Niet alle optimalisaties zijn zonder gevolgen en door het maken van een back-up heb je altijd jouw data beschikbaar voor als je een stap terug wilt of moet zetten. Zodra je de back-up hebt gemaakt kun je beginnen met de website/webshop optimalisaties. We gaan starten met het maken van een nulmeting.

De nulmeting

De eerste stap op weg naar een technisch geoptimaliseerde website is het maken van een nulmeting. Het is tenslotte belangrijk om te weten waar je NU staat, zodat je realistische doelen kunt stellen en op basis van deze doelen optimalisaties kunt doorvoeren.

Niet alle onderdelen hebben evenveel invloed op de Web Core Vital score, daarom is het verstandig om te prioriteren en de punten te kiezen die voor jou het meeste verschil gaan bieden.

Als een snelheid optimalisatie ten koste gaat van de gebruikerservaring, is deze optimalisatie het vaak niet waard, het doel is tenslotte een snelle, maar gebruiksvriendelijke website.

Een aantal handige tools die je kunnen helpen bij het verzamelen van data voor je nulmeting zijn:

• Google PageSpeed Insights
• Google Search Console

Google PageSpeed Insights

Met deze tool krijg je direct inzicht in de performance van je website op basis van de Core Web Vitals voor een opgegeven URL. Naast de scores krijg je ook direct actiepunten waarmee je aan de slag kunt.

Google Search Console

Als je van Google Search Console gebruikmaakt scant Google je website op een aantal punten die weer in verband staan met de Core Web Vitals. Aan de hand van deze informatie kun je specifieke pagina’s optimaliseren, die je misschien zelf niet snel door de PageSpeed Insights tool zal halen.

De optimalisaties doorvoeren

Na de Google PageSpeed Insights test zou je een goed beeld moeten hebben van mogelijke optimalisaties voor jouw WordPress website. Voor iedere website zullen de stappen die je moet zetten anders zijn. Om handvatten te bieden gaan we optimalisaties aan de hand van het onderstaande voorbeeld doorvoeren.

Dit zijn punten die we vaak tegenkomen in de praktijk en die uiteindelijk vaak voor ‘problemen’ kunnen gaan zorgen.

Stap 1. Caching

Als we kijken naar de lijst hierboven zien we dat er een aantal dingen uitspringen, de eerste reactietijd van de server (Time Till First Byte ofwel TTFB) is erg hoog. Er worden veel verschillende (ongebruikte) javascript bestanden ingeladen en er zijn verzoeken naar andere servers die de weergave blokkeren.

Dit zijn problemen die je vaak tegenkomt als er nog geen gebruik van caching wordt gemaakt. Via WordPress heb je een aantal manieren om deze problemen tegen te gaan. Je kunt bijvoorbeeld handmatig de scripts die je inlaadt later op de pagina inladen, zodat deze de HTML en CSS niet hindert. Je kunt ook gebruikmaken van een caching plugin. Deze kan bestanden combineren en verkleinen, zodat deze in één request worden gedaan.

Om uit te leggen wat caching is gebruik ik de analogie van Peter Chester. Hij vroeg in een zaal, wat is 3.485.250 gedeeld door 23.235? De zaal werd stil en enkelen begonnen het uit te rekenen op een rekenmachine, na enig moment kwam iemand met het juiste antwoord. Daarna herhaalde hij dezelfde vraag, iedereen wist direct het juiste antwoord. Het initiële proces van het uitrekenen was al gedaan, dus mensen hoefden het alleen nog maar op te noemen in plaats van uit te rekenen. Dit is nou het concept van caching.

De eerste bezoeker laadt de website in, zodat de volgende bezoekers de kant-en-klare antwoorden kunnen bezoeken, zodoende hoeft de server niet elke keer het initiële proces uit te voeren en krijg je een gecachte versie van een pagina te zien.

In WordPress zijn er veel mogelijkheden qua caching plugins, iedere plugin heeft zo weer zijn voor- en nadelen. Bij Dtch. Digitals zijn wij een groot fan van WP Rocket, het is één van de uitgebreidste betaalde caching plugins die je voor WordPress kunt krijgen. Het biedt alle functionaliteiten om je website of webshop voor de Core Web Vitals te optimaliseren.

Denk hierbij aan de caching zelf, het verkleinen van de HTML, CSS en JavaScript bestanden en het optimaliseren van de levering hiervan. Een goed alternatief voor WP Rocket is W3 Total Cache, in de gratis versie bieden zij ook al een breed scala van functionaliteiten aan.

Bij het installeren van een caching plugin is het goed om te testen wat de effecten zijn van bepaalde instellingen, het kan zijn dat de caching voor problemen zorgt, bijvoorbeeld omdat een script niet op tijd wordt ingeladen en dit de functionaliteit van je website breekt.

Na het hebben ingesteld van WP Rocket hebben we al een mooie slag gemaakt op een aantal van de toegelichte problemen.

Stap 2. Afbeeldingen optimaliseren

Na het hebben toegepast van caching, zou je website na het eerste bezoek al een stuk sneller moeten aanvoelen. De tweede stap bestaat uit het optimaliseren van de afbeeldingen binnen je website. Een website met goede foto’s zegt meer dan 1000 woorden, daarom is het belangrijk dat je hoge kwaliteit foto’s op je website gebruikt.

Voor het mooiste resultaat kun je het beste een hoge resolutie foto gebruiken en deze door WordPress terug laten schalen naar de afmetingen die binnen jouw WordPress thema van toepassing zijn. Je wil tenslotte niet een 1920px keer 1080px op een plek waar een kleinere afbeelding nodig is, dit kost namelijk extra bandbreedte.

Comprimeren en omzetten naar .WEBP

De eerste stap in het optimalisatie proces van afbeeldingen is het comprimeren(verkleinen) van afbeeldingen. Hiervoor is een aantal mogelijkheden beschikbaar. Je kunt ervoor kiezen om je afbeelding handmatig te comprimeren via tools zoals Compression Jpeg of Kraken. Of je maakt gebruik van een plugin (het voordeel van WordPress).

Een enkeling geeft je ook de mogelijkheid je afbeeldingen direct naar .WEBP om te zetten en deze op je website te tonen. Het .WEBP bestandstype is een steeds beter ondersteund bestandstype wat afbeeldingen op een nog efficiëntere manier codeert dan de gebruikelijke .jpg en .png bestandstypen.

Voor het optimaliseren van afbeeldingen maken wij gebruik van Imagify. Het voordeel van Imagify is dat het naast het comprimeren, de afbeeldingen ook kan omzetten naar het .WEBP bestandstype en deze op de website kan tonen. Na het comprimeren en omzetten hebben we de volgende punten nog over.

Lazyloaden

De laatste stap is het lazyloaden van afbeeldingen, dit houdt in dat afbeeldingen die nog niet worden getoond, nog niet worden ingeladen. Pas als de gebruiker naar beneden scrollt zullen de afbeeldingen worden geladen.

In ons thema maken wij gebruik van een custom lazy loading script, op deze manier behouden wij hierover de controle en kunnen we dit zo goed mogelijk per situatie toepassen. Google geeft namelijk minpunten als je afbeeldingen boven en dicht bij de vouw lazy loadt.

Indien je website dit niet heeft doe je er verstandig aan dit toch binnen je website toe te passen. WP Rocket biedt dit bijvoorbeeld aan binnen de caching plugin. Er zijn ook andere aanbieders zoals Smush, die naast het comprimeren van afbeeldingen ook de .WEBP conversie en het lazyloaden op zich kan nemen.

Na het hebben toegepast van lazy loaden via ons script en het hebben geoptimaliseerd van onze afbeeldingen blijven de volgende punten over.

Stap 3. Onnodige stylesheets en javascript verwijderen

Na het hebben uitgevoerd van de bovenste twee stappen zou je website al een stuk sneller moeten aanvoelen, om je website verder te optimaliseren zul je wat geavanceerdere stappen moeten doorlopen.

Het probleem met het gebruik van veel plug-ins, libraries, externe scripts is dat het voor veel onnodige css en javascript code kan zorgen. Elke keer dat je website wordt geladen, zal er veel onnodige code moeten worden geladen. Het begint dus eigenlijk al in de basis. Als de website op maat voor jou is gebouwd zal dit al veel minder voorkomen, dan wanneer je een template builder gebruikt zoals Elementor of Divi.

Toch is het ook vaak dat je niet op elke pagina alle code nodig hebt, het is dan beter de code alleen in te laden op pagina’s waar je deze wel nodig hebt. Dit kun je doen door te kijken naar welke javascript modules/libraries je op enkele pagina’s gebruikt. Zodoende kun je dit aanpassen zodat deze alleen op de benodigde pagina’s worden geladen.

Stapsgewijs optimaliseer je je website elke keer iets meer. Om dit verder te optimaliseren gebruiken wij WP Rocket. Zij bieden verschillende mogelijkheden. Je kunt bijvoorbeeld kritieke CSS laden, waardoor alleen de gebruikte CSS voor een pagina wordt geladen. Of javascript bestanden uitgesteld laden, waardoor deze de rest van de content niet hindert.

De resultaten…

Na het hebben doorgevoerd van de drie optimalisaties hebben we de website goed weten te optimaliseren. Deze website is door ons in een custom thema gebouwd, dit betekent dat de website in de basis dus al is geoptimaliseerd voor snelheid en gebruikerservaring.

De enige aanbeveling die nog openstaat is de jQuery library, omdat deze impact heeft op de functionaliteit van de website is het het dus niet waard om deze later in de laden, omdat de gebruikerservaring hierdoor kan worden benadeeld.

En…? Is het gelukt?

Een website kan tot op een zekere hoogte worden geoptimaliseerd, maar als de basis al niet klopt, kan het erg lastig zijn deze te perfectioneren. Heb je aan de hand van deze handleiding goede stappen gezet en/of heb je vragen over dit artikel? Laat een reactie achter, ik ben benieuwd naar jullie bevindingen.

Ook als je niet tevreden bent met de resultaten horen we het graag, dan kunnen we samen kijken naar een oplossing die het beste bij jou aansluit. Kijken wat we voor jou kunnen betekenen? Vraag een gratis Quickscan aan. Samen met mijn collega’s buig ik mij graag over jouw website en de resultaten die je hiermee wel of niet behaalt.