De 10 belangrijkste parameters van je WordPress prestatievermogen

Torben Simon Meier Bijgewerkt op 21.10.2020
10 Min.
WordPress  Performance: De 10 belangrijkste stelschroeven
Laatst bijgewerkt op 21.10.2020

Het web wemelt van de tips en trucs om je WordPress-prestaties te optimaliseren. Helaas vallen relevante verklaringen en beoordelingen van de verschillende parameters al snel weg. We laten je de belangrijke uitgangspunten en instrumenten zien - in een zinvolle volgorde en met context. Op deze manier kun je zeer snel succes boeken.

Inmiddels hebben we al zo'n 15.000 WordPress-projecten gehost. Daarbij is een heleboel data verzameld. En we worden voortdurend door klanten gevraagd hoe ze de laadtijd van de pagina's van hun WordPress-projecten verder kunnen reduceren. Daarom hebben we onze bevindingen uit de analyse van onze klantensites uit voorgaande jaren systematisch verwerkt. Het resultaat: 10 maatregelen waarmee je snel en eenvoudig je WordPress-prestaties kunt optimaliseren.

Eén ding is vooral belangrijk: sommige gebruikers laten zich snel door de optimaliseringssuggesties van tools zoals Google PageSpeed Insights afschrikken. Laat me je een ding zeggen: je wint de meeste laadtijd niet met ingewikkelde optimalisatiemaatregelen, maar met methoden die eenvoudig te implementeren zijn.

WordPress -Prestatie-optimalisatie suggesties door Google
Slechts weinig website-eigenaren kunnen iets concreets doen met deze boodschap. Daarom is het vooral belangrijk dat je je eerst concentreert op de eenvoudige optimalisatiestappen en pas bij de tweede stap de meer gecompliceerde maatregelen aanpakt.

Natuurlijk is het optimaliseren van de laadtijd geen doel op zich. Naast een betere ervaring voor je gebruikers, brengt een kortere laadtijd ook voordelen bij de zichtbaarheid van je aanbod bij Google. Ik zal daarom kort aanstippen waar de individuele optimalisatiestappen eigenlijk over gaan om de juiste context te schetsen.

In theorie kun je je er dus van boven naar beneden doorheen werken en de laadtijd van je pagina stap voor stap verbeteren. De eerste zeven punten verwijzen overigens ook naar de typische verbeteringsvoorstellen van Google PageSpeed Insights, waar we bijvoorbeeld in dit artikel nog gedetailleerder op ingaan.

#1 Caching - de belangrijkste prestatiefactor van allemaal

Caching betekent dat je pagina niet eerst door de browser bij de webserver moet worden opgevraagd en vervolgens stap voor stap moet worden opgebouwd. In plaats daarvan wordt je pagina - al volledig gerenderd - vanuit een cache (tijdelijk geheugen) geladen.

Het voordeel van deze cache ligt voor de hand: WordPress hoeft niet bij elke klik de site opnieuw te berekenen. Omdat WordPress op de zeer langzame PHP gebaseerd is, is een cache hier elementair. Het voorkomt onder andere dat PHP moet worden uitgelezen.

In principe zijn er twee uitvoeringsvarianten voor caches:

  • Over caching-plugins: De meerderheid van de gebruikers gebruikt een caching-plugin, zoals W3 Total Cache of WP Super Cache. Deze zijn soms eenvoudiger, soms ingewikkelder in te stellen. In ieder geval is hier een zekere mate van handwerk vereist.
  • Over de hoster: Sommige hosters - dus ook RAIDBOXES - bieden serverzijdige caching aan. Dit betekent dat je bijna altijd afstand kunt doen van caching-plugins. Omdat je hostingprovider de configuratie van het cachegeheugen al voor je heeft overgenomen.

Als je een high-performance caching hebt ingesteld, heb je al de belangrijkste stap naar betere WordPress-prestaties gezet. Voor meer details kun je een kijkje nemen in ons artikel over de Caching basics .

#2 WordPress opruimen - "Ordnung muss sein"

Een van de meest voorkomende oorzaken van lange laadtijden is - volgens onze ervaring - een overbelaste WordPress-installatie. En omdat dit verbeteringspunt niet wordt genoemd door GooglePageSpeed Insights, komt het direct op de tweede plaats in mijn Top 10.

Een overbelaste WordPress-installatie betekent in de meeste gevallen: er zijn te veel plugins geïnstalleerd. In principe geldt: hoe minder plugins, hoe sneller de pagina. Natuurlijk zijn de plugins belangrijk en zonder gaat het niet, maar je moet van tijd tot tijd controleren welke plugins je echt nodig hebt.

En: je moet ervoor zorgen dat je de plugins niet alleen deactiveert, maar echt volledig verwijdert.

WordPress  Verbeteren van de prestaties: Uw plugin-overzicht laat u precies zien hoeveel Pluginsu er geïnstalleerd en geactiveerd heeft en nog moet bijwerken.
Je plugin-overzicht toont precies hoeveel plugins er momenteel uitgeschakeld zijn. In principe zou er bij "inactief" altijd een nul moeten staan. Zo niet, vraag jezelf dan af: heb ik de gedeactiveerde plugin überhaupt nodig?

Hetzelfde geldt voor themes: je hebt er niet meer dan één nodig.

De achtergrond is als volgt: elke plugin en elk theme voegt een PHP-code toe aan je pagina. Dit geldt ook voor gedeactiveerde plugins. Dit maakt je site in zijn geheel omvangrijker en dus langzamer (en kwetsbaarder voor aanvallen). PHP is een zeer langzame scripttaal. Hoe minder hiervan aanwezig is, hoe beter.

Vaak zijn de niet meer benodigde plugins en themes nog een overblijfsel van functie- en ontwerptesten. Daarom is het aan de ene kant zinvol om WordPress-pagina's regelmatig op te ruimen en aan de andere kant moet je nieuwe functies en ontwerpen toevoegen in een testomgeving en niet op de live-pagina. Zo kunnen zich al helemaal geen plugin-restjes ophopen.

#3 Afbeeldingen: de onderschatte laattijdrem

Een van de meest effectieve en eenvoudige maatregelen om de laadtijd van pagina's te verkorten is het verkleinen van de afbeeldingen. Want hier kun je deels grote hoeveelheden gegevens besparen. Met de zogenaamde "lossless image compression" wordt de bestandsgrootte van je afbeeldingen verminderd zonder zichtbaar kwaliteitsverlies. Je pagina verandert dus nauwelijks, maar tegelijkertijd kun je door beeldoptimalisatie hun grootte aanzienlijk verkleinen.

Volgens schattingen van HTTP Archive vormen afbeeldingen regelmatig het grootste deel van het datavolume van een website. Het verkleinen van je afbeeldingen moet daarom een van de eerste optimalisatiestappen zijn. Je kunt een beeldoptimalisatie handmatig uitvoeren, of je kunt gebruik maken van een compressie-plugin.

Het gebruik van één plugin is zeker de handigste oplossing. Niet alleen laten plugins het toe om nieuwe beelden en hun thumbnails te comprimeren, ze pakken ook automatisch alle bestaande afbeeldingen van je site aan. Voor deze dienst wordt echter vaak een vergoeding gevraagd.

#4 CSS en JavaScript - klinkt onhandig, maar is gemakkelijk te optimaliseren

De op één na grootste hoeveelheid gegevens op je site zijn meestal JavaScript- en CSS-bestanden. Veel gebruikers zijn vooral bang om deze bestanden aan te raken. Maar ook zonder code-expertise kun je gemakkelijk begrijpen waar het bij CSS en JavaScript-optimalisatie om gaat. Want in principe moet je eerst drie dingen doen:

  • Samenvatten: CSS en JavaScript zijn verborgen in vele kleine afzonderlijke bestanden. Normaal gesproken moet elk van deze bestanden individueel door de browser worden opgevraagd bij de webserver. Dit genereert HTTP-aanvragen, die de neiging hebben om de laadtijd van je pagina te verhogen. Wanneer scripts echter worden gecombineerd, wordt het aantal te laden bestanden en dus het aantal aanvragen verminderd. Zo worden 53 individuele verzoeken iets meer dan een dozijn. Natuurlijk kunnen de bijbehorende plugins dat voor jou doen.
  • Verminder: CSS- en JavaScript-bestanden zijn coderegels die bepaalde functies en ontwerpen op je pagina mogelijk maken. Deze code is geschreven door mensen. Maar het wordt uitgelezen door machines. Waarom is dit relevant? Veel van wat een mens nodig heeft om code goed te begrijpen, heeft een computer niet nodig. Spaties, opmerkingen, etc. zijn niet nodig om je pagina correct op te bouwen. Juist hier zetten plugins zoals Autoptimize op in. Ze converteren CSS en JavaScript van menselijke naar machineleesbare code. Dit maakt de afzonderlijke gegevenspakketten kleiner en hun overdracht sneller.
  • Comprimeren: Na het samenvoegen en verkleinen is de laatste stap het comprimeren van de gegevenspakketten die van de webserver naar de browser worden gestuurd. Dit betekent dat de server de bestandsgrootte van de individuele aanvragen minimaliseert en de browser deze uitpakt en berekent. Dit gaat sneller dan het verzenden van ongecomprimeerde gegevenspakketten. Je kunt een GZIP-compressie bijvoorbeeld instellen via caching-plugins, via handmatige instellingen in de .htaccess of je hoster heeft een compressie al op de server geactiveerd.

Zelfs zonder kennis van de scripts is het daarom gemakkelijk te begrijpen wat de afzonderlijke maatregelen bereiken. En voor alle drie de werkstappen zijn er plugins, die het ook leken mogelijk maken om CSS en JavaScript te optimaliseren. In onze artikelen over CSS en JavaScript-optimalisatiezullen we je verdere details uitleggen en een aantal plugins voorstellen.

Vier op een rij!

Dit waren de vier gebieden waarop onze klanten bijzonder veel laadtijd konden besparen. Met relatief weinig moeite kun je je WordPress-prestaties dus verbeteren door caching, beeldoptimalisatie, het optimaliseren van CSS & JavaScript en het opschonen van WordPress.

#5 Zonder hosting kom je nergens

De eerste vier optimalisatievelden beloven weliswaar de laadtijd te verkorten, maar kunnen tegenvallen als de hosting jou vertraagt. Dit betekent niet zozeer de hardwarevereisten voor WordPress, maar eerder bepaalde technologieën die je laten zien dat een hoster het überhaupt mogelijk maakt om WordPress te optimaliseren.

Als vuistregel kan je onthouden dat een krachtige WordPress hosting deze kerngegevens zou moeten hebben:

  • SSD-harddisk
  • PHP geheugenlimiet van minstens 64MB, beter 128MB
  • Datacentrum in Europa
  • Huidige PHP-versie (7.4)
  • HTTP/2 en gratis SSL-certificaat

Dan is er nog het verschil tussen Shared Hosting en een eigen (virtuele) server.

Met Shared Hosting deel je de server en zijn rekenkracht met andere sites. Meestal enkele tientallen tot een paar honderd. Als je een eigen server hebt, hoef je de rekenkracht met niemand te delen. Het biedt dus vooral het voordeel van prestatiezekerheid.

Hoewel een eigen server niet synoniem is aan meer prestaties, leert de ervaring wel dat vooral de goedkope hostingtarieven, die slechts enkele euro's per maand kosten, qua prestaties niet kunnen concurreren met virtuele servers.

De finesse - minder slagkracht, meer inspanning

Alle performancerelevante gebieden die ik tot nu toe heb genoemd, kunnen door vrijwel elke WordPress-gebruiker worden geoptimaliseerd. Hetzij via plugins, eenvoudig uitproberen of de aankoop van geschikte producten. Het wordt ingewikkelder als je deze gebieden al hebt geoptimaliseerd. Want dan moet je dieper ingaan op de structuur van de site. En individuele optimaliseringsmaatregelen hebben niet meer dezelfde slagkracht.

#6 Renderblocking - verkeerde volgorde bij het laden

Een punt dat door tools zoals Google PageSpeed Insights herhaaldelijk bekritiseerd wordt, is een laadvolgorde die de rendering blokkeert.

Dit voorbeeld illustreert het probleem: een Slider bestaat uit afbeeldingen en het animatiecommando dat deze afbeeldingen laat draaien. Als het JavaScript-commando eerst wordt geladen en de afbeeldingen als laatst, beschikt je pagina weliswaar over de functie van de Slider, maar niet over afbeeldingen die weergegeven moeten worden. Het laden van de pagina duurt dus langer. Deze toestand kan voorkomen worden door de juiste laadvolgorde.

Er zijn weliswaar plugins om de laadvolgorde te optimaliseren, maar onze ervaring leert dat deze niet altijd in staat zijn om je site volledig te optimaliseren. De beste resultaten bereikt in dit geval meestal een webdesigner die de site en zijn functies goed kent.

#7 Above the Fold - optimaliseer het zichtbare gedeelte van de pagina

Naast de totale laadtijd van je pagina, is vooral de waargenomen laadtijd beslissend. Dus de tijd die een bezoeker van je site als laadtijd waarneemt. Deze waargenomen laadtijd kan met enkele trucjes worden verkort. Zo krijgt een gebruiker de indruk dat de pagina al volledig is opgebouwd, ook al wordt er op de achtergrond nog steeds gerekend.

Vooral belangrijk voor de optimalisatie van dit als Above the Fold aangeduide gebied is het optimaliseren van de laadvolgorde. Dit betekent dat de inhoud en de functies die je bezoekers op het eerste scherm moeten zien, voorrang krijgen.

WordPress  Voorstelling: Illustratie van de Above the Fold door raidboxes.de
Het bovenste gedeelte wordt de bezoekers van raidboxes.io zonder scrollen getoond. Dit is de zogenaamde Above the Fold. Voor alle andere informatie moet de bezoeker interactie met de pagina hebben en scrollen.

Dit kun je bijvoorbeeld bereiken door de laadvolgorde te optimaliseren. Maar er zijn er ook plugins die ervoor zorgen dat je site efficiënter laadt. En wel alleen het zichtbare gebied. Lazy Load of a3 Lazy Load zijn voorbeelden van dergelijke plugins. Op deze manier krijgt de gebruiker altijd alle inhoud te zien die hij of zij nodig heeft, maar de laadtijd van de pagina kan daarvan nog steeds profiteren, vooral als de pagina veel afbeeldingen heeft.

#8 Database schoonmaken

Naast afbeeldingen en scripts kan je database ook te groot worden. Ook hiervoor zijn er handige tools die je database mooi slank te houden. Bijvoorbeeld de plugin WP-Optimize.

#9 Pingbacks en trackbacks

Standaard interageert WordPress met andere pagina's die Pingbacks en Trackbacks toestaan. Elke keer dat je site of een van je blogposts op zo'n pagina wordt vermeld, wordt je site automatisch op de hoogte gebracht - en daarmee de database extra belast.

Als je deze functie niet nodig hebt (de toegevoegde waarde is naar mijn mening te verwaarlozen) moet je Pingbacks en Trackbacks uitschakelen. Ook hier helpt weer de plugin WP-Optimize. Voor de volledigheid moet hier worden vermeld dat dit meer een theoretisch probleem is. Geen van onze klanten heeft hierdoor ernstige prestatieverliezen geleden.

#10 Hotlinking voorkomen

Hotlinking betekent dat iemand direct linkt naar een afbeelding op je server - dus uiteindelijk wordt jouw bandbreedte "gestolen". Op een Apache-webserver kun je Hotlinking voorkomen door de volgende code toe te voegen aan het .htaccess-bestand:

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?deineseite.de [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.de [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]

RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

Om hotlinking op een NGINX server te voorkomen, voeg je deze coderegels toe aan je NGINX wp-config bestand:

location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
     valid_referers none blocked server_names
	 *.example.com example.* www.example.org/galleries/ ~\.google\.;
     if ($invalid_referer) {
        return 403;
    }
}

Specificatie van de code:
location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
specificeert de bestandsextensies die jou tegen Hotlinking beschermen, als je bijvoorbeeld nog pdf-bestanden wilt beschermen, dan zou de coderegel er als volgt uitzien:
location ~ .(gif|png|jpeg|jpg|svg|webp|pdf)$

{valid_referers none blocked server_names
*.deineseite.dedeineseite.de ~.google. ~.bing. ~.yahoo.;
Deze regels zijn een beetje uitgebreid, maar het zal je helpen om beter te begrijpen wat er allemaal met deze regel gedaan kan worden. Deze regels geven aan welke domeinen je bestanden mogen hotlinken. In dit voorbeeld yoursite.com met alle subdomeinen, zoals Google, Bing en Yahoo.

if ($invalid_referer) {
return 403;
}
Als er een aanvraag binnenkomt en de aangevraagde bron staat NIET bovenaan je whitelist stuurt de server een 403 (Forbidden) terug.

Heb je geen toegang tot wp-config?

Je vraagt je af wat je kunt doen als wijzigingen in het wp-configuratiesysteem bij je hoster (zoals bijvoorbeeld bij RAIDBOXES ) niet mogelijk zijn? In dit geval zijn er tal van Security-Plugins beschikbaar in de officiële WordPress Plugin Directory, die Hotlinking voorkomen. Een plugin die deze functie biedt is bijvoorbeeld All In One WP Security & Firewall. De plugin is actief op meer dan 800.000 WordPress-pagina's en heeft een gemiddelde beoordeling van 4,8 op 5 sterren (bij bijna 1.000 beoordelingen).

"En hoe zit het met CDN?

Een van de meest gestelde vragen gaat over een CDN. Bijvoorbeeld: "Maakt een CDN mijn site sneller voor bezoekers in Nederland", "Waarom heb ik een CDN nodig", "Zou je het gebruik van een CDN voor mijn blog of winkel aanraden? Maar in de meeste gevallen was het antwoord: Nee.

Om een lang verhaal kort te maken: een CDN heeft de meeste zin als je gebruikers geografisch verspreid zijn. Bijvoorbeeld als je klanten hebt in Centraal-Europa, Zuid-Amerika en Australië. Als je kerndoelgroep beperkt is tot één land, kun je een CDN voor het optimaliseren van je WordPress-Performance direct ad acta leggen.

De WordPress-ontwikkelaar Ernesto heeft over deze thematiek trouwens een heel mooi artikel geschreven, dat ik alleen maar kan aanbevelen.

Conclusie: Wees niet bang voor schijnbaar gecompliceerde optimalisatiestappen

Vaak zijn gebruikers bang om aan dergelijke gebieden te zitten waar bijzonder gemakkelijk laadtijd kan worden bespaard. Of ze verwaarlozen deze gebieden. Andere gebieden daarentegen, zoals CDN, komen steeds weer naar voren tijdens adviesgesprekken, hoewel ze meestal geen effect op de laadtijd van de pagina hebben.

Daarom kan ik alleen maar adviseren dat je je eerst op de "low hanging fruits" van de optimalisatie moet concentreren. Met relatief weinig moeite kun je hier al grote vooruitgang boeken in het verkorten van je laadtijd. En dat zelfs als je een leek bent.

Laat je daarom niet door adviezen van tools zoals Google PageSpeed Insights onzeker maken.

Want in de kern gaat het bij de optimalisatie van de laadtijd slechts om een paar onderdelen:

  • Verminder de grootte van je pagina
  • Vermindering van HTTP-aanvragen
  • Compressie van de afzonderlijke datapakketten
  • Optimalisatie van de gebruikerservaring

Als je dit hebt begrepen, dan kun je ook de 10 belangrijkste parameters van de WordPress-Performance nuttig verstellen. En voor complexere optimalisatiestappen zijn er ook experts die je site op orde kunnen brengen.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een opmerking

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.