10 tips voor een snellere WordPress website

Niemand heeft belang bij een trage (WordPress) website waarbij het seconden duurt voordat een pagina volledig getoond wordt. Zowel je website bezoekers als Google verwachten dat je aandacht besteedt aan de performance van je website. Maar hoe verbeter je de snelheid van je website? We geven je 10 tips waarmee je de snelheidsproblemen inzichtelijk maakt en kan oplossen.

Disclaimer: in dit artikel worden een aantal plugins en technieken besproken die de snelheid van je website verbeteren. We kunnen geen garantie geven dat deze tools volledig compatible zijn met jouw WordPress website of webhoster. Maak daarom altijd een backup van je website voordat je deze tools gaat uitproberen.

1. Benchmark je website

Meten is weten, zeker als het gaat om de performance van je website. Je website kan traag zijn, maar, hoe komt het dat je website traag is? Het is cruciaal om inzicht te hebben in de performance van je website. Hoeveel data kost het om je website te tonen, binnen welk tijdsbestek gebeurt dat, in welke volgorde en hoeveel data verbruikt elk element van je website.

Er zijn meerdere manieren om inzicht te krijgen in de performance van je website. Zo zijn er een aantal online tests beschikbaar waarbij je website op diverse manieren wordt doorgemeten. Google heeft hiervoor de webpage speedtest tool ontwikkeld die een globaal beeld geeft van de performance. Dit advies is echter wel gekleurd, aangezien een deel van Google’s suggesties technisch niet haalbaar zijn.

Een beter beeld geeft bijvoorbeeld de Pingdom tool. Via deze website krijg je alle data inzichtelijk die je nodig hebt. Naast een performance-score is vooral de flowchart onderaan de pagina zeer waardevol. Deze flowchart geeft inzicht in de volgorde waarin bestanden geladen worden, hoe lang dit duurt en wat de bestandsgrootte is. Vaak zie je direct al een aantal pijnpunten waar je direct mee aan de slag kan.

Tip: staar je niet blind op de resultaten en cijfers die de verschillende tools geven. Er is een grote kans dat de verschillende tools afwijkende scores geven. Kijk welke gelijke pijnpunten er zijn en pak de volgende tips erbij. Wordt je site na deze aanpassingen binnen een seconde geladen dan heb je het meeste werk gedaan.

2. Verklein afbeeldingen

Een makkelijke manier om de laadtijd van je website te beperken, is het verminderen van de totale hoeveelheid aan data die geladen moet worden. Over het algemeen bestaat het grootste gedeelte van deze data uit afbeeldingen.

Er zijn meerdere manieren om de bestandsgrootte van afbeeldingen te verkleinen. Denk hierbij aan het bijsnijden van het formaat van de foto voordat je deze uploadt. Je hoeft echt geen foto van 3000 pixels breed te gebruiken.

Naast het formaat van de foto hoeft de kwaliteit van je foto ook lang niet altijd 100% te zijn. Exporteer daarom je foto’s via Photoshop of Affinity en verlaag hier de kwaliteit van 100% naar 70%. Vaak zie je nagenoeg geen kwaliteitsverlies ontstaan, maar bespaar je wel een hoop kostbare bytes.

Naast deze twee eenvoudige tips kan je er ook voor kiezen om de afbeeldingen nog verder te optimaliseren met een specifieke plugin. Wij zijn een groot fan van Imagify. Een commerciële plugin waarbij je in bulk afbeeldingen kan verkleinen. Dit levert vaak een extra besparing op van 50% in data doordat niet essentiële data die in de afbeelding verwerkt is verwijderd wordt.

Er zijn ook gratis online tools te vinden die je helpen met het verkleinen van afbeeldingen. Met TinyPNG kan je bijvoorbeeld .PNG-bestanden op een eenvoudige manier verkleinen.

Tip: WordPress biedt zelf ook de nodige mogelijkheden, die het tonen van onnodig grote afbeeldingen voorkomen. Denk hierbij aan het correct instellen van de grootte van de uitgelichte afbeelding binnen je thema.

3. Beperkt het aantal plugins

WordPress staat bekend om het grote aantal beschikbare plugins. Met een plugin voeg je extra functionaliteit aan je website toe die niet standaard in WordPress of in het thema zit. Er zijn een aantal zeer bekende plugins die door veel websites gebruikt worden en daar is niets mis mee.

Waar je wel op moet passen is een overdaad aan geïnstalleerde plugins. Heb je de functionaliteit die een plugin heeft echt nodig? Zit die functionaliteit niet al in een andere plugin verwerkt? Een voorbeeld is de bekende Yoast SEO plugin.  De plugin van Yoast biedt de mogelijkheid voor het tonen van zogenaamde ‘breadcrumbs’ op je website. Hiervoor is ook een aparte plugin beschikbaar. Alleen, waarom zou je deze plugin nog installeren als het ook al zit ingebakken bij Yoast?

Een overdaad aan plugins kan je website namelijk vertragen. Dit komt omdat veel plugins uit allerlei losse CSS en JavaScript bestanden bestaan die allemaal apart geladen moeten worden. Vooral social sharing plugins kunnen voor een behoorlijke extra ‘load’ zorgen vanwege hun vele connecties met de social media platforms. Kijk daarom kritisch naar de hoeveelheid plugins die je gebruikt en stel bij waar nodig.

4. Maak gebruik van caching

Caching is een techniek die de ‘uitkomst’ van verschillende handelingen van je website bewaard, de zogenaamde cache. Denk aan het laden van een specifieke dynamische pagina of een blog. Nadat een pagina voor de eerste keer bezocht wordt, wordt de uitkomst hiervan opgeslagen en gebruikt voor de volgende bezoekers van deze pagina. Dit levert een snelheidswinst op omdat een ‘statische’ pagina sneller wordt geladen dan een dynamische pagina.

Nadat er een wijziging heeft plaatsgevonden op een pagina wordt de cache geleegd en weer opnieuw dynamisch opgebouwd. Hierna wordt de cache weer gevuld en bewaard voor de volgende bezoekers van deze pagina.

De makkelijkste manier om caching voor je website in te stellen is met behulp van een plug-in. De plug-in slaat de gecachte data op de harde schijf van je server waardoor een behoorlijke performance winst geboekt wordt. WP Rocket is een premium oplossing die hiervoor gebruikt kan worden. Liever een gratis plug-in? Maak dan gebruik van WP Super Cache.

Naast caching door middel van een plugin kan je webhoster ook caching op serverniveau aanbieden. In dat geval worden de gecachte bestanden niet opgeslagen op de harde schijf van de server maar in het geheugen. Het uitlezen van data uit het geheugen is sneller dan het uitlezen van data op een harde schijf. Op deze manier kan je nog effectiever gebruik maken van de voordelen die caching biedt.

5. Vervang je slider door een statische afbeelding

Sliders zijn een discutabel onderwerp, niet alleen qua gebruiksvriendelijkheid maar ook qua performance. Het is bewezen dat sliders niet werken en niet gebruiksvriendelijk zijn. Daarnaast gebruiken sliders vaak ook meerdere grote afbeeldingen of zelfs een video die ingeladen moet worden. Ook is het nodige JavaScript nodig om de slider te laten functioneren. Al deze redenen zijn dan ook genoeg aanleiding om je slider de deur uit te doen. Sliders zijn prima te vervangen door een enkele statische afbeelding. Dat is niet alleen prettiger voor je bezoekers, maar ook voor de performance van je website.

6. Kijk kritisch naar je webfonts

Webfonts zijn lettertypes die vaak via een externe bron worden ingeladen. Het meest bekende voorbeeld hiervan zijn de webfonts van Google. Met webfonts is absoluut niets mis, maar wees wel kritisch met het uitkiezen van een webfont. Het ene webfont verbruikt meer data dan het andere om getoond te worden. Daarnaast heb je mogelijk lang niet alle stylen van het webfont nodig, denk hierbij aan cursief, bold en allerlei andere variabele letterdiktes. Google maakt het dataverbruik van webfonts zeer inzichtelijk, kijk hier dus goed naar.

7. Mimify en combineer CSS & JavaScript

Een WordPress website bestaat uit veel losse onderdelen en bestanden. Denk hierbij aan HTML voor de content, CSS voor de styling van deze content en JavaScript voor het toevoegen van allerlei extra functionaliteit. Hoe minder bestanden er geladen hoeven te worden en hoe kleiner deze bestanden zijn des te beter. Vaak kan een deel van deze bestanden worden verkleind en/of samengevoegd.

Bij het verkleinen van bestanden (mimify) worden alle overbodige tekens en loze ruimte verwijderd waardoor er een besparing in de bestandsgrootte optreedt. Bij het combineren worden losse CSS- en Scriptingbestanden tot één bestand gecombineerd. Dit resulteert in minder serververzoeken wat weer positief bijdraagt aan de performance van je website.

Het verkleinen en combineren van de CSS en JavaScript bestanden kan ook met een plug-in. Wij gebruiken hier WP Rocket voor wat een commerciële oplossing is. Een ander (gratis) alternatief is WP Super Mimify.

8. Wees kritisch in het uitzoeken van een thema

Voor WordPress zijn er veel kant-en-klare (commerciële) thema’s te vinden. Wees wel kritisch met uitkiezen van een kant-en-klaar thema. Kies een thema uit de WordPress theme directory of ga voor een gerenommeerde commerciële aanbieder.

Kijk goed naar welke functionaliteiten het thema heeft en vergelijk dat met wat je echt nodig hebt. Vaak zitten commerciële thema’s vol met functionaliteiten die je niet gebruikt, maar wel een deel van de performance opeisen. Dat je een functionaliteit niet gebruikt betekent niet dat deze niet meer in de code zit en geladen moet worden. Functionaliteiten zoals een slider of carrousel horen niet in een thema te zitten maar in een plug-in.

Kijk verder ook naar eventuele reacties van kopers van het thema. Hoe wordt het thema ervaren en wat wordt er gezegd over de performance van een thema? Reageert de aanbieder (snel) op vragen van de gebruikers van het thema?

Tip: Het beste resultaat krijg je als je een custom thema laat maken door een goede ontwikkelaar. Niet alleen op het gebied van performance maar ook qua (uitbreidings)mogelijkheden.

9. Update je site en plugins en maak gebruik van PHP 7

Het up-to-date houden van je WordPress website is zeer belangrijk. Niet alleen vanwege de veiligheid en nieuwe functionaliteit maar ook in het kader van performance. Hoe meer up-to-date je website is, hoe groter de kans dat je website op PHP versie 7 aankan. PHP is de codetaal waarin WordPress geschreven is en versie 7 biedt een grote performance boost vergeleken met de vorige versie. De recente versies van WordPress zijn 100% compatible met PHP 7 net als een groot deel van de bekende plug-ins. Dus heb je de kans om de stap te maken naar PHP versie 7; doe het dan ook!

10. Kies een goede hostingpartij

Veel van bovenstaande tips kunnen teniet worden gedaan door een trage hostingpartij. Het is daarom van groot belang dat je website wordt gehost op een snelle server, door een betrouwbare webhoster. Daarnaast is het van belang wat voor soort hostingpakket je afneemt. Heb je een shared hostingpakket waarbij je de performance van de server moet delen met andere websites die op die server staan? Of heb je een eigen (dedicated) server die helemaal van jou is en waarbij alle resources volledig beschikbaar zijn?

Verder is het belangrijk om te kijken naar de technische specificaties van de server. Wordt er gebruik gemaakt van server caching, NGINX en is PHP 7 (standaard) beschikbaar? Is je server ingericht voor het werken met grote databases en wordt een service als Memcached aangeboden? Dan weet je dat je over het algemeen bij een goede en serieuze hostingpartij zit.

Voor WordPress websites zijn er ook een aantal specifieke webhosters die zich alleen op WordPress webhosting richten. Vaak hebben deze hosters extra maatregelen genomen om ervoor te zorgen dat je WordPress website snel getoond wordt, of bieden deze extra diensten zoals een back-up en update functie. Dit zijn overigens ook zaken die een goede, niet WordPress specifieke, webhoster kan aanbieden.

Conclusie

Het optimaliseren van de performance van je website is een continue en belangrijk proces. Zowel tijdens de ontwikkeling van je website als tijdens het onderhouden. Met een trage website loop je de kans om zowel bezoekersaantallen als conversie te verliezen.

Met onze tips geven we je een aantal tools die de performance van je website te verbeteren, die geen diepgaande technische kennis vereisen om uit te voeren. Aan de slag dus!