In deze handleiding lees je hoe je alles uit WP Rocket haalt! Stap voor stap laten we zien hoe je de setup van de plugin doorloopt en hoe je jouw website sneller maakt. We gebruiken onze eigen website om te zien hoe veel sneller de site wordt na het installeren en configureren van WP Rocket.
Wat is WP Rocket?
Grote kans dat je al een idee hebt waar WP Rocket voor bedoeld is: het is een caching- en performanceplugin die je helpt om je WordPress-website sneller te maken. Het mooie is dat je daarvoor niet zelf in de code hoeft te duiken. Met de juiste instellingen regelt de plugin dit voor jou.
WP rocket is een populaire plugin. Inmiddels staat de plugin, volgens WP rocket zelf, op meer dan 5 miljoen websites wereldwijd. En dat terwijl er géén gratis versie van de plugin is. Voor veel site-eigenaren is de investering in snellere laadtijden en betere prestaties dus zonder twijfel de moeite waard.
Eeen losse licentie bij WP Rocket kost 59 dollar, dat is op het moment van schrijven met de huidige wisselkoers €52.61
Installatie van de WP Rocket plugin
Omdat WP Rocket een premium plug-in is, vind je hem niet in de standaard WordPress pluginbibliotheek. Je koopt de licentie rechtstreeks op de website van WP Rocket. Daarna krijg je een downloadlink om de plugin te downloaden. Op je WordPress website kun je de plugin installeren door het zip-bestand te uploaden. Ga naar Plugins > Nieuwe plugin, en kies daar voor Plugin uploaden.
Aan de slag met WP Rocket
WP Rocket instellen is helemaal niet zo moeilijk. De plugin is lekker overzichtelijk, maar je moet wel weten welke instellingen je wel en niet aanzet. Sommige opties geven direct resultaat, andere kunnen juist dingen op je site stukmaken als je ze verkeerd gebruikt. Daarom is het slim om elke aanpassing te testen, het liefst eerst in een testomgeving van je website.
Er zijn een paar dingen waar je extra goed op moet letten. Heb je een webshop of een site waar de inhoud per bezoeker anders is? Dan moet je oppassen met caching, want niet op iedere pagina wil je caching gebruiken. De winkelmandpagina, die voor iedere bezoeker die producten toevoegt anders is, wil je bijvoorbeeld niet cachen. Ook als je veel animaties gebruikt die zijn gebouwd met JavaScript moet je oppassen. WP Rocket heeft namelijk een optie om deze bestanden pas op een later moment in te laden, waardoor de website sneller wordt, maar waardoor deze animaties vaak niet meer werken.
Het handige is dat het dashboard van WP Rocket duidelijk is ingedeeld in verschillende onderdelen, zoals caching, bestanden, media en preload. In deze handleiding lopen we die onderdelen stap voor stap door en laten we je zien welke instellingen je het beste kunt gebruiken en waar je rekening mee moet houden.
Dashboard – tabblad
Het tabblad met de naam ‘Dashboard’ heeft eigenlijk geen optimalisatie-instellingen die je kunt aanpassen. Dit tabblad dient alleen als overzicht en laat bijvoorbeeld je licentie zien en je kunt er de cache opschonen en herladen. Handig, want pas nadat de oude cache verwijderd is kun je zien of nieuwe aanpassingen werken. Overigens verwijderd WP Rocket automatisch zelf de cache na iedere aanpassingen van instellingen. Je hoeft hier zelf dus niet op de letten.
Bestandsoptimalisatie – tabblad
In het tabblad Bestandsoptimalisatie kun je CSS- en JavaScript-bestanden te optimaliseren. Let op: sommige instellingen kunnen voor problemen zorgen. Test na het aanpassen van instellingen altijd goed je website.
- CSS-bestanden verkleinen: Verwijdert onnodige spaties en opmerkingen uit CSS-bestanden.
- CSS-levering optimaliseren: Voegt meerdere CSS-bestanden samen om het aantal HTTP-verzoeken te verminderen.
- JavaScript-bestanden verkleinen: Verwijdert onnodige spaties en opmerkingen uit JavaScript-bestanden.
- Combineer JavaScript-bestanden: Voegt meerdere JavaScript-bestanden samen om het aantal HTTP-verzoeken te verminderen.
- JavaScript uitgesteld laden: Zorgt ervoor dat JavaScript-bestanden pas na de pagina-inhoud worden geladen, wat de laadtijd verbetert.
- JavaScript-uitvoering uitstellen: Stelt in dat JavaScript pas na een korte vertraging wordt uitgevoerd, wat de initiële laadtijd verkort.
Omdat CSS zorgt voor de visuele opmaak van je website en omdat JavaScript bewegende elementen (zoals o.a. animaties) in gang zet, moet je goed controleren wat deze aanpassingen met je website doen. Het is slim om iedere optie apart te testen. Dus wanneer je een van de opties aanvinkt, controleer je eerst wat het doet met je website.
Open je website na iedere aanpassing en doorloop dan verschillende pagina’s. Kijk of de styling nog goed staat en kijk of functionaliteiten op je website nog goed werken. Werkt alles goed, dan kun je door naar de volgende instelling. Zo niet, dan is het beter om de instellingsoptie uit te laten staan of om bepaalde bestanden uit te sluiten.
Zo zie je onder de verschillende opties de mogelijkheid om bestanden uit te sluiten van optimalisatie. Dit is nogal wat speurwerk omdat je moet achterhalen welke bestanden noodzakelijk zijn voor de styling of voor de functionaliteit die niet meer werkt door de optimalisatie. Ook moet je enigszins wat verstand hebben van code om te achterhalen om welke bestanden dit gaat.
URL’s van bestanden vinden
Je kunt de bestanden op de volgende manier vinden: open met de F12 toets op je toetsenboard de dev-tools van je browser. Nu kun je in de code van de website op zoek gaan naar de juiste bestanden.
In het voorbeeld dat ik hieronder uitleg gaan we op zoek naar het CSS-bestand en het JavaScript-bestand dat ervoor zorgt dat de carrousel/slider die op onze homepage staat goed werkt. Hypothetisch gezien zouden bepaalde instellingen van WP Rocket de carrousel kunnen breken. Wanneer de instelling ‘JavaScript uitgesteld laden’ aan staat, werkt de carrousel ook daadwerkelijk niet meer! Hier kwamen we achter door de website zelf met WP Rocket te optimaliseren.
CSS-bestand url opsporen
Ik gebruik Google Chrome als browser om op zoek te gaan naar de bestanden. Om CCS-bestanden te vinden gebruik ik in dev-tools het tabblad ‘elements’. Daar kies ik in de linker bovenhoek voor de optie ‘Select an element in the page to inspect’.
Vervolgens selecteer ik de carrousel om bij het juiste stukje code te komen.
In de code zie je staan dat de carrousel de CSS-class ‘brxe-carousel slider-smooth’ heeft. Wanneer je dit stukje code aanklikt zie je in het ‘Styles paneel’, dat aan de rechterkant staat, de link naar het CSS-bestand dat styling geeft aan de carrousel. Klik hier met de rechtermuisknop op de link en kies dan voor de optie ‘Copy link adres’.
Vervolgens kun je deze link toevoegen binnen de instellingen van WP Rocket om het bestand uit te sluiten van de CSS-optimalisatie.
JavaScript url’s opsoren
In het tabblad ‘Sources’ vind je JavaScript-bestanden. Helaas is daar niet direct duidelijk welk bestand bij de carrousel op onze homepage hoort. Daarom is het belangrijk om na te gaan of de carrousel bij je thema of bij bijvoorbeeld een plugin hoort. In ons geval is de carrousel onderdeel van Bricks, en dat is het thema dat op onze website staat.
Wellicht werk je zelf met een plugin zoals Elementor of gebruik je een andere plugin die het mogelijk maakt om een slider in Gutenberg te plaatsen. In dat geval moet je in het mapje met plugins kijken om het juiste bestand te vinden.
Zoals je hieronder ziet hebben we het bestand kunnen vinden met de naam ‘swiper.min.js?ver=8.4.4’.
Ook hier kunnen we weer de url van het bestand kopiëren en plakken op de plek waar JavaScript-bestanden worden uitgesloten.
Conclusie bestandsoptimalisatie:
Het vergt dus wat kennis om de instellingen bij het tabblad ‘Bestandsoptimalisatie’ helemaal goed in te stellen. Je zou ervoor kunnen kiezen om bepaalde opties gewoon uit te laten staan. Wanneer je toch alles uit de plugin wilt halen is het vaak een kwestie van veel testen en proberen.
Misschien lukt het niet om direct het juiste bestand uit te sluiten van optimalisatie. Probeer dan meerdere url’s uit te sluiten en kijk of de functionaliteit daarna wel goed werkt. Zo ja, verwijder dan stapsgewijs url’s uit de lijst die je hebt toegevoegd totdat je erachter komt welke de juiste is om toe te voegen.
Media – tabblad
Het Media-tabblad helpt je om afbeeldingen en andere media-elementen te optimaliseren. Je vindt binnen dit tabblad de volgende opties:
LazyLoad
Dit laadt afbeeldingen pas wanneer ze in beeld komen. Wat de laadtijd verkort voor de bezoeker omdat de rest van de pagina vast ingeladen kan worden. Je kunt dit inschakelen voor afbeeldingen, CSS-achtergronden en voor iframes en video’s. Ook hierbij is het verstandig om na het aanvinken van de instellingen te testen en controleren of het geen negatieve effecten op de website heeft.
Gebeurt dat wel, dan kun je afbeeldingen uitsluiten van Lazyload door de bestands-url in het vak te plaatsen voor uitsluitingen.
Afbeeldingen optimaliseren
Met deze optie zorgt WP Rocket ervoor dat alle afbeeldingen op je pagina een breedte- en hoogteattribuut krijgen. Dit betekent dat de browser al weet hoeveel ruimte een afbeelding inneemt, nog voordat deze volledig is geladen. Het voorkomt dat de layout van je pagina tijdens het laden gaat verschuiven, waardoor je bezoekers een stabielere en prettiger leeservaring krijgen.
Fonts
Hier kun je instellen dat fonts (de lettertypes op je website) boven de vouw (het gedeelte van de website dat direct in beeld is) sneller worden ingeladen. Ook kun je Google Fonts, als je deze gebruikt, op je eigen website hosten. Dat betekent dat WP Rocket deze fonts direct op je website plaatst en dat deze bij het aanroepen van de pagina niet opgehaald hoeven te worden bij Google zelf. Dit scheelt een hoop qua laadsnelheid.
Preloaden – tabblad
Het Preloaden-tabblad zorgt ervoor dat je website sneller laadt door bepaalde gegevens vooraf te laden.
- Cache voorladen: Laadt de cache voor alle pagina’s op basis van je sitemap, zodat bezoekers altijd een snelle ervaring hebben.
- Preload links: Laadt links die de gebruiker waarschijnlijk gaat volgen alvast in de achtergrond.
Geavanceerde regels – tabblad
In het tabblad Geavanceerde regels kun je WP Rocket precies vertellen hoe het met bepaalde pagina’s of gebruikers moet omgaan. Dit is handig voor grotere of complexere sites, zoals webshops.
Nooit URL’s cachen: Hier geef je pagina’s op die je nooit in de cache wilt laten zetten. Denk bijvoorbeeld aan de winkelwagen of de afrekenpagina. Zo krijgt iedere bezoeker altijd de meest actuele versie te zien.
Cookies nooit cachen: Soms maken websites gebruik van cookies om bepaalde pagina’s dynamisch te laten zijn. Voeg die cookies hier toe, zodat die pagina’s ook nooit gecached worden.
Nooit user agents cachen: Je kunt specifieke apparaten of browsers (user agents) uitsluiten van caching. Handig als bepaalde bezoekers altijd een verse versie moeten zien.
Altijd URL’s legen: Dit zijn pagina’s die je altijd wilt verversen, bijvoorbeeld je homepage. Zo zorg je dat bezoekers nooit een oude versie te zien krijgen.
Query strings cachen: Sommige pagina’s hebben extra informatie in de URL, zoals filters of zoekopdrachten. Hier kun je aangeven welke van die pagina’s wél gecached mogen worden, zodat ze sneller laden.
Database – tabblad
Het Database-tabblad helpt je om je database schoon en geoptimaliseerd te houden. Een schone database zorgt voor snellere laadtijden en betere prestaties.
- Berichten opschonen: Verwijdert concepten, revisies en prullenbak-items.
- Reacties opschonen: Verwijdert ongewenste of gemarkeerde reacties.
- Transients opschonen: Verwijdert verlopen transients die onnodig ruimte innemen.
- Database opschonen: Verwijdert onnodige gegevens zoals pingbacks en trackbacks.
- Automatisch opschonen: Stelt in dat de database automatisch op gezette tijden wordt opgeschoond.
CDN – tabblad
Een CDN (Content Delivery Network) is een netwerk van servers over de hele wereld dat je websitebestanden opslaat en levert vanaf de server die het dichtst bij je bezoeker staat. Dat is handig als je bezoekers hebt op jouw website die zich niet in de Nederland bevinden. Deze optie is dus vooral fijn wanneer er bijvoorbeeld veel internationaal bezoekersverkeer op jouw website komt.
In WP Rocket vind je in dit tabblad de volgende instellingen:
- RocketCDN: WP Rocket heeft een eigen CDN dat je makkelijk kunt inschakelen. Zodra je het activeert, worden je afbeeldingen, scripts en andere bestanden automatisch via dit netwerk geleverd. Je hoeft zelf bijna niets te doen.
- Eigen CDN gebruiken: Heb je een andere CDN? Dat kan ook. Je vult gewoon de gegevens van je CDN-provider in. WP Rocket zorgt er dan voor dat je bestanden via dat netwerk worden geleverd.
- Cloudflare: Gebruik je Cloudflare? Voeg dan je API-sleutel toe. WP Rocket koppelt zich dan automatisch, zodat alles soepel werkt.
Kortom: met een CDN zorg je dat je site sneller laadt, voor iedereen, overal. RocketCDN is de makkelijke optie, maar je kunt ook je eigen CDN of Cloudflare gebruiken als je dat wilt.
Heartbeat – tabblad
De Heartbeat-API van WordPress is een klein systeem dat je browser en de server met elkaar laat praten. Zo weet je site bijvoorbeeld of iemand nog actief is in de backend. Het nadeel is dat deze communicatie soms extra serverkracht kost.
In het Heartbeat-tabblad kun je dit beheren:
- Frequentie aanpassen: Je bepaalt hoe vaak deze communicatie plaatsvindt. Minder vaak betekent minder belasting voor je server.
- Uitschakelen op bepaalde pagina’s: Je kunt de Heartbeat-API uitzetten op plekken waar het niet nodig is, bijvoorbeeld op de backend of op specifieke pagina’s. Zo bespaar je serverbronnen zonder dat het je sitefunctionaliteit beïnvloedt.
Kortom: met deze instellingen houd je de server lekker licht, zonder dat je iets breekt op je site.
Overige tabbladen
WP Rocket heeft nog een aantal andere tabbladen. We gaan deze hier niet in detail bespreken, omdat ze vooral bedoeld zijn om extra producten aan te bieden. Als je nieuwsgierig bent, kun je ze altijd zelf even bekijken – maar voor de meeste websites zijn de instellingen die we hebben behandeld het belangrijkst.
Optimalisatie van onze eigen website
Als test hebben onze eigen website geoptimaliseerd met WP Rocket. Als eerste hebben we een test gedaan om te kijken hoe snel de website is zonder caching-plugin. De score voor mobiel kwam daarbij uit op 72 punten. Deze test hebben we gedaan met Lighthouse, een functie die in de dev-tools staat van je Chrome browser.
Om toegang te krijgen tot deze tool open je weer je dev-tools door op F12 van je toetsenboard te klikken. Daar vind je het tabblad dat ‘Lighthouse’ heet. Zorg ervoor dat je niet ingelogd bent op je website en gebruik bij voorkeur in een incognito tabblad om de test zo goed mogelijk uit te voeren.
Tijdens de optimalisatie liepen we tegen een aantal dingen aan. Zo was de carrousel, die we eerder besproken hebben, ineens niet meer zichtbaar toen we de optie ‘JavasScript-uitvoering uitstellen’ aanvinkte. De instelling ‘Javascript uitgesteld laden’ zorgde er vervolgens weer voor dat de carrousel vast stond en niet meer rouleerde. Door de bestands-url’s uit te sluiten van deze widget werkte hij weer zoals het hoort.
Uiteindelijk hebben we eens score van 93 weten te behalen voor het laden op mobiel. Een goede score dus waarmee duidelijk wordt dat de plugin de website echt een boost heeft kunnen geven!
Conclusie
Snelheid is belangrijk, maar niet allesbepalend. Hoe meer er op je website gebeurt – zoals interactieve elementen, carrousels of animaties – hoe trager deze vaak wordt. Websites die vrij eenvoudig zijn qua ontwerp laden daardoor vaak sneller, maar dat betekent niet dat ze aantrekkelijk zijn voor bezoekers. Het gaat dus om een middenweg: een site die er goed uitziet en genoeg biedt, maar nog steeds lekker snel is.
