WordPress: Performance Optimalisatie, de vijf meest gebruikte tools en tips

Er zijn vijf tools die we in de praktijk het meest gebruikt worden door onze klanten of onszelf; Google Pagespeed, DeveloperTools, Webpagetest.org, NewRelic en Query Monitor.

De voorspelbare nummer één op deze lijst is Google Pagespeed. Er bestaat alleen een misconceptie in wat deze tool precies meet. Pagespeed kijkt naar onderdelen die zij “Web Vitals” noemen en baseren hier een score van 0 tot 100 op. Belangrijke onderdelen zijn bijvoorbeeld First Content Paintfull (FCP) dat meet hoe snel het eerste zichtbare stuk content geladen is, First Input Delay (FID) meet hoe snel een pagina interactief is nadat hij zichtbaar is en Cumulative Layout Shift (CLS) kijkt of onderdelen op de pagina van positie verspringen nadat ze geladen zijn. Pagespeed meet hoe je pagina wordt opgebouwd. In praktijk kan een pagina die in 2 seconden geladen is daarom een betere Pagespeed score krijgen dan een website die binnen één seconde laad maar slechter scoort op de Web Vitals van Pagespeed. Deze tool gebruik je om de front-end van je applicatie te meten. De voorgestelde oplossingen gaan meestal over het optimaliseren van je afbeeldingen, CSS of JS.

DeveloperTools is een van de beste tools om live naar performance te kijken zit (in de meeste gevallen) in je eigen browser. Deze tool wordt meestal gebruikt voor probleem analyse. F12 is bij de meeste browsers de knop om DevTools te openen. De tool kent verschillende functies maar om performance te meten gebruik je het tabblad Network. Bij het herladen van de pagina krijg je vervolgens een waterval te zien van de verschillende requests die gebruikt worden om de website in te laden. Uit deze waterval kan je live opmaken of er wellicht requests lang duren en mogelijk oorzaak zijn van vertraging. Naast de waterval kan je ook zaken als cookies en headers bekijken. DevTools werktzowel in de front-end als in de back-end waar veel online tools alleen de voorkant van een website kunnen meten.

Webpagetest is een onbekende tool bij de meeste maar als je performance in (milli)seconden wilt meten dan is er geen betere (gratis) tool die je hiervoor kan gebruiken. Het geeft veel van dezelfde informatie als DeveloperTools maar het voordeel is dat het losse sessies zijn die worden opgeslagen. Je kan de resultaten daarom terug kijken en vergelijken met nieuwe resultaten. Webpagetest is onlangs uitgebreid met meerdere nieuwe features en kan bijvoorbeeld ook de Webvitals meten maar het belangrijkste voordeel en nadeel van deze tool is dat deze veel informatie geeft waarmee je zelf objectieve conclusies kan trekken. Wil je concreet meten in hoeveel milliseconden je website in een specifieke browser vanaf een specifiek device in een specifiek land laad? Webpagetest is naar mijn mening de ideale toolvoor gevorderden.

Hoewel je een gratis account aan kan maken is bij het optimaal gebruik van NewRelic de betaalde versie nodig. Voor het gebruik van deze tool moet er software op de server geïnstalleerd worden en verbind je met een API om de data in het portal van NewRelic te laden. Als je bereid bent te investeren in een tool om performance te meten en gericht problemen op te lossen binnen de server of applicatie dan raden wij NewRelic aan. De reden waarom wij deze tool noem is omdat optimalisatie bij WordPress in de meeste gevallen het oplossen van problemen betekent en de uitdaging daarbij het vinden van de oorzaak is. Wanneer je met normale middelen zoals logs of statistieken de oorzaak niet kan vinden dan is NewRelic de redder in nood. Deze tool kan de performance van zowel de back-end als de front-end van de applicatie en de interactie met de server meten.

Query Monitor is een gratis plugin voor WordPress. Deze tool kan je het beste gebruiken wanneer je de performance van de back-end wilt meten. Het kijkt hierbij naar de PHP en database queries en toont hoelang iedere query duurt of eventuele errors. De tool is vrij simpel te gebruiken maar het verreist wel enige kennis van WordPress om de data uit deze plugin te vertalen naar actie. Waar DeveloperTools de reactie van de browser meet kijkt deze tool voornamelijk naar de interactie tussen de applicatie en de server. De tool wordt meestal gebruikt om de performance van PHP en de database te meten.

Als je vanuit een probleem werkt dan helpen de bovenstaande tools je de oorzaak te vinden. De onderstaande tips zijn algemene WordPress performance optimalisatie tips die in de praktijk de meeste performance winst kunnen opleveren voor vrijwel iedere website of webshop.

Het klinkt wellicht makkelijk maar dit is dé meest voorkomende oorzaak van problemen. Plugins die niet up to date zijn en/of niet verwijderd worden. Het zelfde geld voor de WordPress core en thema. Zorg dat je WordPress installatie volledig up-to-date is en inactieve onderdelen worden verwijderd voordat je verder gaat met optimaliseren. Hoe minder plugins, hoe beter!

Het belangrijkste onderdeel van performance is caching en hoe groter de website is, of hoe meer bezoekers je krijgt, hoe meer de website hierop zal leunen. Caching gebeurt op verschillende lagen zoals op de server of vanuit de applicatie. Hoe hoger de laag waar in caching actief is, hoe eerder deze geserveerd kan worden aan de browser. Controleer of de caching op iedere laag actief is. Op server niveau; FastCGI, Varnish en/of Redis en in de applicatie een plugin als WP Rocket of Autoptimize. Je kan in de meeste gevallen naar de headers kijken om te zien vanuit welke cache een request geserveerd wordt.

Heb je wel eens last van 502 of 503 errors? WordPress bied de d.m.v. plugins de mogelijkheid om niet alleen een website met statische content te bouwen maar ook uitgebreidere webshops, e-learning platformen of meertalige multisites. In sommige gevallen betekent dit dat je veel minder goed op caching kan leunen doordat je met user specifieke data of ingelogde gebruikers werkt, hetzelfde geld voor websites waar veel in de back-end gewerkt wordt. Een server heeft in de meeste gevallen beperkte resources en is daarom belangrijk om te weten hoeveel resources jouw applicatie gemiddeld van de server vraagt. Hoe goed caching ook kan helpen, soms heb je gewoon een sterkere server nodig. Onlangs deden wij een performance benchmark voor WordPress op onze servers zonder caching en hier zaten opvallende resultaten tussen.

Afbeeldingen en media zijn over het algemeen onmisbare elementen binnen een website maar dit is ook vaak een valkuil. Soms worden afbeeldingen te groot of niet in het juiste formaat geupload waardoor een browser er langer over doet om deze afbeeldingen te laden. Tegenwoordig wordt WebP format voor afbeeldingen steeds meer gezien als de geaccepteerde standaard. Er zijn meerdere afbeelding optimalisatie plugins die bestaande afbeeldingen automatisch kunnen optimaliseren en converteren zoals Smush of Imagify. Vaak is hier wel wat hulp van je hosting partij voor nodig betreft server instellingen uniek per plugin.

Cloudflare is gewoon een fantastische tool om je website o.a. extra caching mogelijkheden te geven. Ongeacht welke type website je hebt. Zelfs als het geen WordPress is. Wij hebben geen deal met Cloudflare. De reden waarom hosting partijen van Cloudflare houden is omdat het makkelijk werkt, goed werkt en dit de druk op de server verminderd. Voor onze klanten hebben we het gebruik van Cloudflare geautomatiseerd en kan je met één klik op de knop onze Cloudflare nameservers gebruiken, mits de domeinnaam bij ons geregistreerd staat. Uiteraard kan je ook zelf een account aanmaken en zelfstandig aan de slag gaan. Het zal hoe dan ook een waardevolle toevoeging zijn voor de performance van je website.

Blijf je problemen houden met je WordPress performance? Als je de bovenstaande tips al hebt geprobeerd dan is het misschien tijd om onze servers een kans te geven. Vul het onderstaande formulier in om een gratis trial te proberen!