WordPress optimaliseren

Optimaliseer WordPress met de 10 belangrijkste maatregelen

Het web wemelt van de tips en trucs om de prestaties van je WordPress te optimaliseren. Helaas vallen uitleg en evaluaties van de relevantie van de verschillende stelschroeven snel in het niets. Wij laten je de belangrijke uitgangspunten en stelschroeven zien - in een verstandige volgorde en met context. Zo kun je bijzonder snel succes boeken.

In de tussentijd hebben we veel WordPress projecten gehost. Daarbij hebben we veel gegevens verzameld. En steeds weer krijgen we de vraag hoe de laadtijd van een WordPress website verder kan worden verkort. Dus hebben we onze bevindingen van de afgelopen jaren systematisch verwerkt. Het resultaat: 10 maatregelen waarmee je snel en eenvoudig je WordPress pagespeed kunt optimaliseren.

Eén ding is bijzonder belangrijk: sommigen worden snel afgeschrikt door de optimalisatiesuggesties van tools als Google PageSpeed Insights. Laat me je vertellen: De meeste laadtijd win je niet met ingewikkelde optimalisatiemaatregelen, maar met eenvoudig toe te passen methoden.

WordPress optimization suggestions by Google
Slechts een paar mensen kunnen daadwerkelijk iets met dit bericht. Daarom is het bijzonder belangrijk dat je je eerst concentreert op de eenvoudige optimalisatiestappen en pas in de tweede stap de ingewikkelder maatregelen aanpakt.

Natuurlijk is laadtijdoptimalisatie geen doel op zich. Naast een betere gebruikerservaring levert een kortere laadtijd ook voordelen op voor de zichtbaarheid van je aanbod in Google. Daarom zal ik ook kort schetsen wat de afzonderlijke optimalisatiestappen eigenlijk inhouden om de juiste context te scheppen.

In theorie kun je van boven naar beneden werken en zo stap voor stap de laadtijd van je website verbeteren. Overigens verwijzen de eerste zeven punten ook naar de typische verbetersuggesties van Google PageSpeed Insights, waar we in dit artikel bijvoorbeeld dieper op ingaan.

#1 Caching - de belangrijkste prestatiefactor voor snelle laadtijden

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 meeste gebruikers gebruiken een caching plugin, zoals W3 Total Cache of WP Super Cache. Deze zijn soms gemakkelijker, soms ingewikkelder in te stellen. In elk geval is hier een zekere mate van handmatig werk vereist.
  • Over de hoster: Sommige hosters, waaronder Raidboxes, bieden server-side caching. Dit betekent dat je bijna altijd zonder caching plugins kunt. Dit komt omdat je hostingprovider de cache al voor je heeft geconfigureerd.

Als je een krachtige caching hebt ingesteld, heb je de belangrijkste stap naar het optimaliseren van WordPress al gezet. Bekijk voor meer details ons artikel over caching basics.

#2 WordPress opruimen - "Ordnung muss sein"

In onze ervaring is een van de meest voorkomende oorzaken van lange laadtijden een overbelaste WordPress installatie. En omdat dit verbeterpunt niet door Google PageSpeed Insights wordt genoemd, komt het direct op de tweede plaats in mijn top 10.

Een rommelige WordPress installatie betekent in de meeste gevallen: Er zijn te veel plugins geïnstalleerd. In principe geldt: hoe minder plugins, hoe sneller de website. Natuurlijk zijn plugins belangrijk en kun je niet zonder, maar je moet altijd nagaan welke plugins je echt nodig hebt.

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

WordPress optimaliseren: Je pluginoverzicht laat je precies zien hoeveel plugins je hebt geïnstalleerd, geactiveerd en nog moet bijwerken.
In je pluginoverzicht kun je precies zien hoeveel plugins momenteel gedeactiveerd zijn. In principe zou er altijd een nul moeten staan naast "Inactief". 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 thema voegt PHP-code toe aan je website. Dit geldt ook voor gedeactiveerde plugins. Dit maakt je website helemaal omvangrijker en dus trager (en kwetsbaarder voor aanvallen). Dit komt omdat PHP een zeer trage scripttaal is. Hoe minder ervan, hoe beter.

Plugins en themes die niet meer nodig zijn, zijn vaak restjes van functionele en designtests. Daarom is het een goed idee om je WordPress websites regelmatig op te schonen en nieuwe functies en ontwerpen te testen in een testomgeving in plaats van op de website zelf. Zo kun je voorkomen dat je te veel plugin restanten ophoopt.

#3 Afbeeldingen: de onderschatte laattijdrem

Een van de meest effectieve en eenvoudigste maatregelen om de laadtijd te verminderen is het verkleinen van afbeeldingen. Hier kun je grote hoeveelheden gegevens besparen. Lossless image compression" verkleint de bestandsgrootte van je afbeeldingen zonder zichtbaar kwaliteitsverlies. Dit betekent dat je pagina nauwelijks verandert en tegelijkertijd kun je de grootte aanzienlijk verminderen door middel van beeldoptimalisatie.

Afbeeldingen vormen vaak het grootste deel van het datavolume van een website. Het verkleinen van je afbeeldingen moet daarom een van de eerste optimalisatiestappen zijn. Je kunt afbeeldingen handmatig optimaliseren of een compressieplugin gebruiken.

Het gebruik van een plugin is zeker de handigere oplossing. Met plugins kun je niet alleen nieuwe afbeeldingen en hun miniaturen comprimeren, ze zorgen ook automatisch voor alle bestaande afbeeldingen op je website. Aan deze dienst zijn echter vaak kosten verbonden.

#4 CSS en JavaScript - klinkt omvangrijk, maar is eenvoudig te optimaliseren

De op één na grootste hoeveelheid gegevens op je website zijn meestal JavaScript- en CSS-bestanden. Hier komt veel angst naar voren. Maar zelfs zonder codevaardigheid kun je gemakkelijk begrijpen wat het optimaliseren van CSS en JavaScript inhoudt. In principe zijn hier drie dingen te doen:

  • Samengevat: CSS en JavaScript zijn verborgen in vele kleine afzonderlijke bestanden. Normaal gesproken moet elk van deze bestanden afzonderlijk door de browser worden opgevraagd bij de webserver. Dit genereert HTTP-verzoeken die de laadtijd van je website doen toenemen. Als scripts echter worden gecombineerd, wordt het aantal te laden bestanden en dus het aantal verzoeken verminderd. Zo worden 53 afzonderlijke verzoeken slechts een tiental. Natuurlijk kunnen de bijbehorende plugins dit ook voor je doen.
  • Verkleinen: CSS- en JavaScript-bestanden zijn regels code die bepaalde functies en ontwerpen op je website mogelijk maken. Deze code is geschreven door mensen. Maar hij wordt gelezen door machines. Waarom is dit relevant? Veel van wat een mens nodig heeft om code goed te begrijpen, heeft een computer niet nodig. Spaties, commentaar en dergelijke zijn dus niet nodig om je pagina correct op te bouwen. Dit is waar plugins als Autoptimize om de hoek komen kijken. Ze zetten CSS en JavaScript om van menselijk leesbare naar machine leesbare code. Dit maakt de afzonderlijke gegevenspakketten kleiner en de overdracht ervan sneller.
  • Comprimeren: Na het samenvoegen en verkleinen is de laatste stap dan het comprimeren van de gegevenspakketten die van de webserver naar de browser worden gestuurd. Dit betekent dat de server de bestandsgrootte van de afzonderlijke verzoeken minimaliseert en de browser ze uitpakt en berekent. Dit is sneller dan het versturen van ongecomprimeerde gegevenspakketten. Je kunt zo'n GZIP compressie instellen, bijvoorbeeld via caching plugins, via handmatige instellingen in de .htaccess of je hoster heeft de compressie aan de serverzijde al geactiveerd.

Zelfs zonder kennis van de scripts is het eenvoudig te begrijpen wat de afzonderlijke maatregelen opleveren. En voor alle drie de stappen zijn er plugins waarmee zelfs niet-professionals CSS en JavaScript kunnen optimaliseren. In ons artikel over CSS en JavaScript optimalisatie lichten we verdere details toe en presenteren we verschillende plugins.

Vier op een rij!

Dit waren de vier gebieden waarop veel laadtijd kan worden bespaard. Met relatief weinig moeite kun je je prestaties al optimaliseren - door middel van caching, het optimaliseren van afbeeldingen, het optimaliseren van CSS & JavaScript en het opschonen van WordPress kun je al aanzienlijke verbeteringen bereiken.

#5 Hosting heeft een grote invloed op laadtijden

De eerste vier optimalisatiegebieden beloven een bijzonder grote vermindering van de laadtijd, maar kunnen op niets uitlopen als je hosting je vertraagt. Het gaat hier niet zozeer om de hardwarevereisten voor WordPress, maar eerder om bepaalde technologieën die laten zien dat een hoster je in staat stelt om WordPress dienovereenkomstig te optimaliseren.

Als vuistregel kun je onthouden dat goed presterende WordPress hosting deze kerngegevens moet hebben:

  • SSD harde schijf
  • PHP geheugenlimiet van minstens 64MB, beter 128MB
  • Datacentrum in de geografische nabijheid van je doelgroep
  • Huidige PHP-versie
  • HTTP/2 en gratis SSL-certificaat

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

Bij shared hosting deel je de server en zijn rekenkracht met andere websites. Meestal enkele tientallen tot enkele honderden. Met een eigen server hoef je de rekenkracht met niemand te delen. Het biedt daarom 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.

"*" geeft verplichte velden aan

Ik wil me abonneren op de nieuwsbrief om op de hoogte te blijven van nieuwe blogartikelen, ebooks, features en nieuws over WordPress. Ik kan mijn toestemming te allen tijde intrekken. Bekijk ons Privacybeleid.
Dit veld dient ter validatie en mag niet worden gewijzigd.

De finesse - minder slagkracht, meer inspanning

Alle prestatierelevante gebieden die ik tot nu toe heb genoemd kunnen door bijna iedereen worden geoptimaliseerd. Hetzij via plugins, eenvoudig vallen en opstaan of de aanschaf van overeenkomstige producten. Het wordt ingewikkelder als je deze gebieden al geoptimaliseerd hebt. Want dan moet je dieper ingaan op de paginastructuur. En individuele optimalisatiemaatregelen hebben niet meer hetzelfde effect.

#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.

Het probleem wordt duidelijk met een voorbeeld: Een slider bestaat uit afbeeldingen en het animatiecommando dat deze afbeeldingen laat draaien. Als het JavaScript-commando als eerste wordt geladen en de afbeeldingen als laatste, heeft je pagina al de functie van de slider, maar niet de plaatjes die getoond moeten worden. De webpagina zal er daarom langer over doen om te laden. Deze toestand kan voorkomen worden door de juiste laadvolgorde.

Hoewel er plugins bestaan om de laadvolgorde te optimaliseren, leert onze ervaring dat die niet altijd in staat zijn om je website volledig te optimaliseren. In feite worden de beste resultaten in zo'n geval meestal bereikt door een webdesigner die de website en zijn functies goed kent.

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

Naast de totale laadtijd van je website is de waargenomen laadtijd doorslaggevend. Met andere woorden, de tijd die visueel wordt waargenomen als laadtijd. Deze waargenomen laadtijd kan met een paar trucs worden verkort. Zo krijg je bijvoorbeeld de indruk dat de pagina al helemaal is opgebouwd, ook al vinden er op de achtergrond nog processen plaats.

Bijzonder belangrijk voor het optimaliseren van dit gebied, bekend als Above the Fold, is het optimaliseren van de laadvolgorde. Dit betekent dat u voorrang moet geven aan inhoud en functies die uw bezoekers op het eerste schermformaat te zien krijgen.

WordPress optimaliseren: Illustratie van Above the Fold van raidboxes.de
Het bovenste gedeelte wordt aan de bezoeker van raidboxes.de getoond zonder te scrollen. Dit is de zogenaamde Above the Fold. Voor alle verdere informatie moet de bezoeker interactief met de pagina omgaan en scrollen.

Dat kun je bijvoorbeeld bereiken door de laadvolgorde te optimaliseren. Maar er zijn ook plugins die ervoor zorgen dat je pagina efficiënter laadt. En dan alleen het zichtbare gedeelte. a3 Lazy Load is een voorbeeld van zulke plugins. Op deze manier krijg je nog steeds alle inhoud weergegeven, maar de laadtijd van de webpagina kan er wel bij varen, vooral als het een pagina met veel afbeeldingen is.

#8 Database schoonmaken

Naast afbeeldingen en scripts kan ook je database te groot worden. Er zijn praktische tools die je database mooi slank houden, waaronder de plugin WP-Optimize.

#9 Pingbacks en trackbacks

WordPress werkt standaard samen met andere websites die pingbacks en trackbacks toestaan. Elke keer dat jouw website of een van je blogposts op zo'n website wordt genoemd, wordt jouw website automatisch op de hoogte gebracht – waardoor de database extra wordt belast.

Als je deze functie niet nodig hebt (naar mijn mening is de toegevoegde waarde sowieso te verwaarlozen), dan kun je pingbacks en trackbacks beter uitschakelen. Ook hier helpt de WP-Optimize plugin. Voor de volledigheid moet hier wel vermeld worden dat dit meer een theoretisch probleem is. We hebben om deze reden nog geen ernstige prestatieverliezen ervaren.

#10 Hotlinking voorkomen

Hotlinking betekent dat iemand rechtstreeks naar een afbeelding op uw server linkt - in feite uw bandbreedte "steelt". Op een Apache webserver kunt u hotlinking voorkomen door de volgende code toe te voegen aan uw .htaccess bestand:

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourwebsite.com [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 regels code toe aan je NGINX 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 je wilt beschermen tegen hotlinking, als je bijvoorbeeld PDF-bestanden wilt beschermen, zou de coderegel er als volgt uitzien:
location ~ .(gif|png|jpeg|jpg|svg|webp|pdf)$

{valid_referers none blocked server_names
*.yourwebsite.com ~.google. ~.bing. ~.yahoo.;
Deze regels zijn wat uitgebreid, maar het helpt je om beter te begrijpen wat je met deze regel kunt doen. Deze regels geven aan welke domeinen sowieso je bestanden mogen hotlinken. In dit voorbeeld jewebsite.com met alle subdomeinen, evenals Google, Bing en Yahoo.

if ($invalid_referer) {
return 403;
}
Als er nu een verzoek binnenkomt en de verzoekbron staat NIET bovenaan je witte lijst, dan geeft de server een 403 foutmelding (Forbidden).

Andere methoden om hotlinking te voorkomen

Er zijn talloze beveiligingsplugins in de officiële WordPress plugin directory die je kunt gebruiken om hotlinking te voorkomen – bijvoorbeeld All In One WP Security & Firewall. Op Raidboxes kun je hotlinking ook voorkomen via de CORS headers in de instellingen van je Box. Als je vragen hebt over de headerconfiguratie van je Box, neem dan contact op met ons supportteam.

"En hoe zit het dan met CDN?"

Een van de meest gestelde vragen gaat over een Content Delivery Network (CDN). Bijvoorbeeld: "Maakt een CDN mijn website sneller voor bezoekers in Duitsland?", "Waarom heb ik eigenlijk een CDN nodig?", "Zou je me aanraden een CDN te gebruiken voor mijn blog of winkel?". In de meeste gevallen was het antwoord echter: nee.

Om een lang verhaal kort te maken: Een CDN is het meest zinvol als je gebruikers geografisch wijd verspreid zijn. Bijvoorbeeld als je klanten hebt in Midden-Europa, Zuid-Amerika en Australië. Als je kerndoelgroep beperkt is tot één land, kun je een CDN voor WordPress optimalisatie direct terzijde schuiven.

Overigens heeft de WordPress ontwikkelaar Ernesto Ruge een heel aardig artikel geschreven over dit probleem, dat ik je alleen maar kan aanbevelen.

Conclusie: Wees niet bang voor ingewikkeld ogende optimalisatiestappen

Er is vaak angst voor contact met dergelijke gebieden, waarin het bijzonder gemakkelijk is om laadtijd te besparen, of ze worden verwaarloosd. Andere, zoals CDN, komen echter steeds weer ter sprake tijdens adviezen, hoewel ze meestal geen enkel effect hebben op de laadtijd van de website.

Daarom kan ik alleen maar adviseren dat je je eerst concentreert op het "laaghangende fruit" van WordPress prestatieoptimalisatie. Met relatief weinig inspanning kun je al grote vooruitgang boeken in het verminderen 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:

  • Je website verkleinen
  • Vermindering van HTTP-verzoeken
  • Compressie van de afzonderlijke datapakketten
  • Optimalisatie van de waargenomen laadtijd

Als je dit begrepen hebt, dan kun je ook verstandig aan de 10 belangrijkste stappen van WordPress optimalisatie beginnen. En voor complexere optimalisatiestappen zijn er ook deskundigen die je website in vorm kunnen ranselen.

De laadtijd zal je dankbaar zijn!

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

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