Verbeter de snelheid van je WordPress website

Onlangs hebben we een artikel geschreven over het achterhalen van de oorzaak van een trage WordPress website. In dat artikel leggen we uit hoe de laadtijd van je website kan worden vertraagd door drie factoren: de server (of hosting), de afbeeldingen en de code. Maar als je eenmaal hebt achterhaald wat je WordPress website traag maakt, hoe verbeter je dan de snelheid van je WordPress website? Voor elke vertragende factor zijn verschillende verbeteringen mogelijk. In dit artikel leggen we in tien stappen uit welke optimalisaties je kan doen.

Het beste is om te beginnen met de informatie die GTMetrix jou biedt (lees hoe de test van GTmetrix werkt). Deze test ordent de bevindingen namelijk ook op prioriteit, waardoor je simpelweg bovenaan kunt beginnen. De optimalisatie met de meeste prioriteit is echter niet altijd de makkelijkste. Daarom behandelen we hieronder de stappen geordend van makkelijk naar moeilijk.

Stap 1) Server: Kijk kritisch naar de snelheid van de hosting

Hosting bepaalt voor een belangrijke deel hoe snel je website is. Als je een trage server hebt, dan heeft het überhaupt weinig zin om te beginnen met optimaliseren. Dat is het hetzelfde als het opvoeren van een brommobiel. Je kan optimaliseren wat je wilt, maar het zal je niet lukken om er volwaardig mee te rijden op de snelweg. Lees in dit artikel wat wij adviseren over hosting voor WordPress websites.

Stap 2) Server: WordPress opschonen

In de database van je WordPress website wordt alle dynamische content bewaard. Dat is content die makkelijk te veranderen moet zijn, zoals de inhoud van je pagina’s en berichten, maar ook reacties van bezoekers, thema-instellingen, etc. Voor elke pagina die je op een WordPress website bezoekt, worden al snel tientallen verbindingen met die database gemaakt om alle relevante dynamische content te kunnen tonen. Denk aan de titel van je site, de inhoud van je bericht, mogelijk nog extra informatie in een sidebar, reacties van bezoekers, etc. Elke aanvraag duurt een fractie tot een paar milliseconden, afhankelijk van de complexiteit van de aanvraag – maar ook afhankelijk van de grootte van de database. Daarnaast moet WordPress voortdurend rekening houden met alle plugins die op je website geactiveerd zijn; mogelijk hebben ze iets te maken met de huidige pagina, zijn er updates, of moeten er extra verbindingen gemaakt worden. Reden genoeg om te zorgen dat WordPress niet meer werk doet dan nodig; zorg voor een schone database en gebruik alleen de noodzakelijke plugins.

Ongebruikte plugins verwijderen

We komen vaak WordPress websites tegen met veel geïnstalleerde en geactiveerde plugins, terwijl die niet allemaal worden gebruikt. Let erop dat elke plugin (en je thema) in je WordPress website impact heeft op de snelheid. Deactiveer en verwijder daarom alle plugins die je niet gebruikt. Door alleen plugins te behouden die je ook echt gebruikt, verklein je bovendien de veiligheidsrisico’s voor je WordPress website. Heb je alle ongebruikte plugins verwijderd, maar vermoed je dat er nog steeds een plugin is met behoorlijke impact op de snelheid? Lees hoe je de snelheid van je plugins kan achterhalen.

Database opschonen

WordPress bewaart een revisie-historie van veel veranderingen die je aanbrengt aan je website. Op die manier kan je vaak eenvoudig een backup terugzetten, bijvoorbeeld van een per ongeluk verwijderd of gewijzigd nieuwsbericht. Als je je WordPress site echter al geruime tijd actief gebruikt en onderhoudt, dan is het goed mogelijk dat in de database inmiddels een behoorlijke revisiegeschiedenis is opgebouwd. De grootte van je database neemt toe, en daardoor neemt de doorzoeksnelheid van de database iets af.

Je kan de snelheid van je WordPress website daarom verbeteren door je prullenbakken te legen en de database op te schonen. Een handige gratis plugin om de database op te ruimen is WP-Optimize. Hiermee verwijder je bewaarde data van verwijderde berichten, maar ook de revisie-geschiedenis. Bedenk wel dat je – als je dit doet – geen revisies meer kunt terugzetten van vóór het moment van opschonen. Na het opschonen worden revisies overigens weer opnieuw opgebouwd, dus een jaarlijkse (of maandelijkse) schoonmaak kan geen kwaad. De plugin bevat de (experimentele) mogelijkheid om dit automatisch op regelmatige basis te doen.

Stap 3) Server: Statische content extern inladen met een CDN

Normaal worden afbeeldingen en scripts ingeladen vanaf je eigen server. Een Content Delivery Network (CDN) is een externe hosting partij die al jouw statische content (plaatjes, pdf’s, filmpjes, maar ook scripts die zelden veranderen) kopieert en aanbiedt. Wanneer een bezoeker je website bezoekt wordt de dynamische content (de code van je website die per request verandert) nog steeds door je eigen server geleverd, maar kan alle statische content ergens anders vandaan gehaald worden. Doordat de requests van een bezoeker zo verspreid worden over twee servers, wordt de belasting per server verlicht en kan een request sneller worden afgehandeld.

MaxCDN

Omdat een CDN al snel veel dataverkeer oplevert, zijn de meeste CDN’s niet gratis. Een goed en betrouwbaar CDN is bijvoorbeeld MaxCDN. Voor $9 per maand heb je CDN voor twee websites. Je krijgt dan 500 gigabyte. Onze ervaring is dat de gemiddelde Nederlandse website bij lange na niet aan deze limiet zal komen. Je kan MaxCDN instellen in combinatie met de WP Super Cache of W3 Total Cache (zie Stap 4).

Photon

Een gratis alternatief is Photon van Jetpack. In onze ervaring is Photon een beperktere oplossing dan MaxCDN. Afbeeldingen binnen pagina’s en berichten worden meestal wel goed meegenomen, maar scripts en overige afbeeldingen niet. Voor professioneel gebruik adviseren we MaxCDN, maar voor beperkte budgetten is Photon zeker een mooi alternatief.

Stap 4) Server: Caching installeren en instellen

Cache betekent ‘noodvoorraad’ en dat is eigenlijk precies wat caching plugins aanleggen. De uitkomst van elke request wordt ‘gecached’, zodat een identieke request die daarop volgt, niet opnieuw hoeft te worden berekend. Wanneer Bezoeker A bijvoorbeeld je homepage opent, slaat je server de homepage gelijk op in het geheugen. Vraagt Bezoeker B vervolgens ook de homepage op, dan hoeft de server niet opnieuw alle berekeningen te doen, maar wordt deze direct uit het geheugen geladen. We behandelen twee caching plugins die min of meer hetzelfde kunnen realiseren.

W3 Total Cache en WP Super Cache

De plugins W3 Total Cache en WP Super Cache bieden beide veel verschillende opties om de cache in te stellen. En dat is niet verwonderlijk, omdat de configuratie van de cache heel erg afhankelijk is van de server waarop je WordPress website staat. De praktijk is dan ook per situatie verschillend. Onze ervaring is dat je behoorlijk handig moet zijn om caching goed werkend te krijgen. Je kan geluk hebben dat het in één keer goed werkt, maar in de meeste gevallen is het een complex proces om de caching optimaal in te stellen voor je server en website. Tenzij je website al live is en moet blijven functioneren, kun je best met de instellingen spelen, totdat je een configuratie vindt die voor jou werkt. Laadt je website niet (goed) meer? Vink dan je laatst ingestelde vinkje weer uit en probeer het opnieuw. Kortom: neem er de tijd voor!

W3 Total Cache biedt ook de mogelijkheid om HTML, CSS en JavaScript te comprimeren. Hoewel de plugin dit in sommige gevallen prima doet, hebben wij meestal betere resultaten weten te behalen met AssetsMinify, vooral omdat die plugin beter in staat is om gecomprimeerde scripts te combineren tot één bestand. Meer informatie over het comprimeren van scripts vind je in Stap 7 en 8.

Stap 5) Afbeeldingen: Ga voor de ware grootte

Afbeeldingen spelen op veel websites een grote rol. Dit betekent vaak ook dat afbeeldingen de oorzaak zijn van een aanzienlijk deel van de laadtijd. We zien bovendien regelmatig dat er veel grotere foto’s worden gebruikt op een website dan noodzakelijk. Zo loopt de laadtijd onnodig nog veel verder op tot meerdere megabytes per pagina. Dat lijkt misschien niet zo veel, maar je bezoekers verwachten dat je website bij elke klik zo snel mogelijk opent. Daarom adviseren we de laadtijd van je website goed te testen en het formaat van onnodig grote afbeeldingen te verkleinen tot de ware grootte waarop je ze wil tonen in je website. WordPress helpt al een handje door elke afbeelding die je upload, op te slaan in verschillende formaten. Je kan afbeeldingen verder nog verkleinen en schalen in de mediabibliotheek van WordPress, maar ook – als je handig bent – op je eigen computer voordat je ze uploadt. Je kan hiervoor elke afbeeldingsbewerker gebruiken die bestaat; van Photoshop en Photopea.com tot Paint.

Stap 6) Afbeeldingen: Comprimeer ze

Wanneer je het formaat van je afbeeldingen goed hebt ingesteld, is er nog een tweede optimalisatieslag mogelijk voor de laadtijd van je afbeeldingen: compressie. Dit betekent dat de afbeeldingen zo goed mogelijk worden ‘ingepakt’ tot kleine pakketjes, zonder al te veel kwaliteit te verliezen. Zo bespaar je op tientallen afbeeldingen al snel enkele megabytes. We behandelen twee handige methodes.

Kraken.io

De laatst tijd gebruiken we de plug-in Kraken.io om afbeeldingen te comprimeren. Deze werkt beter dan WP Smush.it en TinyPNG. Binnen WordPress kan je de plug-in van Kraken.io installeren, waarna je binnen je media-bibliotheek makkelijk afbeeldingen kan laten verkleinen. De optie om je hele mediabibliotheek in één keer te comprimeren werkt erg goed. Geüploade afbeeldingen worden ook direct verkleind. De plugin comprimeert niet alleen PNG, GIF en JPG, maar ook steeds meer voorkomende SVG-formaat. Licenties beginnen vanaf $9 per maand. Wij hebben zelf een licentie die we voor meerdere klanten kunnen gebruiken.

WP Smush Pro

Lange tijd was WP Smush.it een populaire plugin om afbeeldingen te comprimeren. De plugin maakte gebruikt van de gratis koppeling met Yahoo om afbeeldingen te comprimeren. Sinds Yahoo hier de stekker uit heeft getrokken, is ook WP Smush.it niet langer bruikbaar. De makers hebben wel een betaald alternatief op de markt gebracht: WP Smush Pro. De prijs begint bij $7,50 per maand. Dit is erg redelijk voor wat de plugin biedt, maar je kan de plugin eerst 7 dagen uitproberen. De plugin comprimeert automatisch al je geüploade JPG-, GIF- en PNG-bestanden. Als je de plugin hebt geïnstalleerd, gaat alles eigenlijk vanzelf. Afbeeldingen die je al hebt geüpload vóórdat je WP Smush Pro installeert, worden alleen niet automatisch gecomprimeerd. In de Media Library verschijnt wel een knop om alle bestaande afbeeldingen te comprimeren (‘Bulk Smush’), maar in onze ervaring lukt dat vaak niet met één druk op de knop. Je doet er dus verstandig aan om WP Smush Pro bij een nieuwe website eigenlijk als eerste plugin te installeren.

TinyPNG

Het gebruik van PNG-bestanden is soms onvermijdelijk, bijvoorbeeld wanneer een kleurrijke afbeelding (deels) transparant moet zijn. PNG-bestanden zijn echter vaak een factor vijf of zes groter dan JPG-bestanden. Wanneer je een enkele tientallen afbeeldingen op je pagina hebt staan, loopt de laadtijd dus snel op. Je kan de grootte van PNG-bestanden gelukkig wel nog wat verder beperken dankzij een slimme compressiemethode van het Nederlandse TinyPNG.org. Deze website biedt de mogelijkheid om gratis tot 20 PNG-afbeeldingen tegelijk voor je te comprimeren. Het resultaat liegt er niet om: meestal krijg je bestanden terug die 60-70% kleiner zijn zonder zichtbaar kwaliteitsverlies. Je kan TinyPNG ook op dezelfde manier gebruiken als WP Smush.it door de gratis plugin Compress PNG for WP te installeren. Daarvoor moet je een (gratis) API key aanvragen op de website van TinyPNG. Met de gratis variant mag je tot 500 PNG-afbeeldingen per maand comprimeren. Heb je er meer, dan biedt TinyPNG verschillende pakketten, beginnend vanaf $39,- per maand. Omdat WordPress elke geüploade afbeelding in verschillende formaten voor je opslaat, ben je in onze ervaring vrij snel door de gratis limiet van 500 optimalisaties heen.

Stap 7) Code: Maak statisch wat statisch hoort te zijn

Elke plugin en elk thema in WordPress bevat een versienummer. Zo kan WordPress automatisch controleren of al je WordPress plugins en thema’s up to date zijn. WordPress plaatst deze versienummers standaard echter ook in de broncode van je website, achter elk script dat geladen moet worden; CSS en JavaScript. De manier waarop dit wordt gedaan, spreekt de YSlow-test niet aan, omdat het de indruk geeft dat deze bestanden voortdurend aan verandering onderhevig zijn, terwijl dat alleen maar het geval is wanneer je een update hebt uitgevoerd. Zoekmachines denken dus dat de bestanden dynamisch zijn, terwijl ze eigenlijk statisch zijn. Gelukkig is er een kleine plugin waarmee je dit eenvoudig kan ondervangen.

Meta Generator and Version Info Remover

De Meta Generator and Version Info Remover verwijdert de versienummers uit je broncode. Dit levert extra score op bij de YSlow test, maar levert nog een voordeel op. Hackers scannen namelijk vaak websites af op zoek naar plugins met een specifiek versienummer. Doordat het versienummer niet meer in de broncode te vinden is, maakt dat het automatisch scannen een stuk lastiger. Je installeert de plugin, activeert deze, en de rest gaat eigenlijk vanzelf.

Stap 8) Code: Combineer scripts

Nu je de afbeeldingen van je website hebt geoptimaliseerd, is het de beurt aan de scripts van je WordPress website. Scripts zijn bestanden met code, die je browser moet verwerken voor de juiste weergave en functionaliteit van je website. Bijna elke plugin die je installeert, voegt minstens één script toe aan de inhoud van je website. Het laden van teksten gaat relatief snel, maar als je veel afbeeldingen en scripts gebruikt, kan de laadtijd aanzienlijk toenemen. Dit kan gelukkig behoorlijk goed geoptimaliseerd worden. Zo kunnen veel scripts – net als afbeeldingen – vaak gecomprimeerd worden, en kan het aantal requests worden verlaagd door losse scripts zoveel mogelijk te combineren tot één bestand. Omdat het comprimeren van scripts soms tot problemen leidt, beginnen we met de eenvoudige stap: het combineren van de scripts in je WordPress website.

Het principe is eigenlijk simpel: wanneer scripts gecombineerd worden, betekent dit niets meer dan dat alle losse bestanden in één bestand achter elkaar geplaatst worden. Het is eigenlijk alsof je de inhoud van drie Word-documenten samenbrengt door ze achter elkaar te plaatsen in één document. De bestandsgrootte van het ene gecombineerde script verschilt eigenlijk niet met die van de losse scripts bij elkaar opgeteld. Toch verbeter je de laadtijd, omdat je webbrowser voor het laden van elk bestand een nieuwe verbinding moet maken. En dat kost tijd. Doordat de browser nu niet voor drie scripts, maar slechts voor één script verbinding hoeft te maken, neemt snelheid van de laadtijd toe.

Combine JS en Combine CSS

Twee eenvoudige plugins die je de mogelijkheid bieden om JavaScript en CSS te combineren, zijn Combine JS en Combine CSS. Ook de plugin AssetsMinify biedt de mogelijkheid om scripts te combineren. De drie genoemde plugins bieden ook de mogelijkheid om scripts te comprimeren. In de volgende stap wordt uitgelegd hoe dat werkt.

Stap 9) Code: Comprimeer scripts door minifying

Wanneer je in de vorige stap alle scripts zoveel mogelijk hebt gecombineerd, kun je het gecombineerde bestand nu ook nog comprimeren. Voor scripts houdt het comprimeren vooral in dat onnodige spaties, commentaar, tabs en witregels uit de code worden verwijderd, zodat de totale bestandsgrootte afneemt. Dit wordt minifying genoemd. Er zijn talloze WordPress plugins te vinden die de code voor je website optimaliseren, maar in veel gevallen leveren ze meer problemen op dan ze oplossen. Hieronder behandelen we daarom meerdere plugins die eigenlijk hetzelfde doen.

CSS Crush

Een veelvoorkomend probleem dat zich bij minifying voordoet, is dat een script niet helemaal goed geschreven is, alsof er een spelfout gemaakt is. Als je een paar plugins hebt geïnstalleerd op je website, is er een redelijke kans dat één van die plugins een CSS-bestand bevat met zo’n klein foutje. Het minifyen loopt dan gelijk helemaal in de soep, waardoor het uiteindelijke gecomprimeerde bestand niet meer bruikbaar is voor de browser. Gevolg: de layout van je WordPress website ziet er niet meer uit, of bepaalde elementen werken niet meer zoals verwacht. De gratis plugin CSS Crush for WordPress voorkomt dit door enkel CSS-bestanden te comprimeren die wél goed op orde zijn. Door de plugin simpelweg te installeren verklein je daarmee al een deel van de laadtijd. CSS-bestanden die problemen op zouden kunnen leveren worden eenvoudigweg met rust gelaten.

AssetsMinify

Een andere, iets meer ingewikkelde plugin, is AssetsMinify. Deze plugin minified niet alleen, maar combineert alle gecomprimeerde bestanden ook nog eens tot één bestand. Dit versnelt de laadtijd van je WordPress website aanzienlijk, omdat je browser nu slechts een paar scripts hoeft te downloaden, in plaats van misschien wel dertig (lees hierover meer in de vorige stap). AssetsMinify kan zowel CSS als JavaScript comprimeren, maar controleert niet, zoals CSS Crush, of dit goed gaat. Die controle moet je dus zelf uitvoeren. Dit vereist eenmalig wat handigheid en inspanning, maar het is zeer de moeite waard. AssetsMinify biedt twee tekstvelden waarin je de bestanden kan benoemen die met rust gelaten moeten worden. Als je een beetje handig bent, kan je in de broncode van je website alle gebruikte JavaScript en CSS bestanden opzoeken in de broncode van je website. AssetsMinify is overigens wel afhankelijk van specifieke serverinstellingen. Mocht de plugin niet werken, dan kun je ook gebruik maken van CombineJS en CombineCSS. Hierover lees je meer in de vorige stap.

Oudere browsers

Soms kunnen Internet Explorer 8 en 9 onverwacht gedrag vertonen als scripts zijn gecomprimeerd en gecombineerd. Controleer daarom altijd goed of je website nog goed werkt in alle oudere browsers die belangrijk voor je zijn.

Stap 10) Code: Verplaats JavaScript naar de footer

JavaScript-bestanden bevatten code die betrekking hebben tot de functionaliteit van je website. CSS-bestanden zorgen ervoor dat de website op een bepaalde manier weergegeven wordt. Omdat zoekmachines het belangrijk vinden dat je website zo snel mogelijk goed weergegeven wordt, helpt het om CSS-bestanden zo snel mogelijk te laden en JavaScript-bestanden zo laat mogelijk. De gratis plugin Scripts to Footer plaatst alle JavaScript zo ver mogelijk onderaan de paginacode, terwijl het de CSS-bestanden bovenaan laat staan.

Let op: Deze stap staat niet voor niets onderaan dit lijstje. Het verplaatsen van scripts naar de footer levert namelijk bijna altijd problemen op. Controleer daarom goed of je website nog goed functioneert na het activeren van deze plugin. Vaak vereist het wat technische kennis om alle JavaScript-bestanden zo af te stellen dat ze geen problemen veroorzaken in de footer.

Lees verder: https://www.sowmedia.nl/wordpress/website-optimalisatie

WordPress website optimalisatie uitbesteden?