Na het lezen van deze handleiding weet je exact hoe je alles uit de WP Rocket plug-in haalt. We laten je zien hoe je de plug-in download en installeert, hoe je de volledige setup doorloopt en welke snelheidsverbeteringen je met de plug-in ook op jouw WordPress gaat terugzien. Aan de hand van een ‘dummy webshop’ die we voor dit artikel in elkaar getimmerd hebben, laten we de power van WP Rocket zien.
Table of contents
Wat is WP Rocket?
De meesten van jullie die aan het lezen van deze handleiding beginnen, weten in hoofdlijnen waarschijnlijk al waarvoor je WP Rocket gebruikt. Het is een caching- en performanceoptimalisatie plug-in waarmee je de laadtijd van je website significant omlaag haalt. En dat allemaal zonder dat je zelf diep in de code duikt of ingewikkelde handelingen verricht.
Met al meer dan 1 miljoen actieve installaties heeft WP Rocket een aardige staat van dienst. Zeker met de gedachtegang dat de plug-in niet gratis is. Veel website-eigenaren vinden het dus geen probleem om hiermee te investeren in een snellere website.
Het verschil tussen de abonnementen van WP Rocket zit hem in het aantal installs per abonnement. De specs zijn hetzelfde.
Installatie WP Rocket
De premium WP Rocket plug-in staat niet in de WordPress repository. Je koopt de hem op de website van WP Rocket. Na aankoop ontvang je per mail de link om de plug-in te downloaden. Ga vervolgens in de back-end van je WordPress website naar Plugins. Kies daar links boven in het scherm voor Nieuwe toevoegen. Vervolgens kies je voor Upload plug-in en upload je het zip-bestand van WP Rocket. Na installatie kun je de plug-in direct activeren.
Test dummy webshop
Het mooie van WP Rocket is dat de plug-in na installatie direct zijn meerwaarde laat zien. Zelfs zonder ook maar één setup-instelling aan te raken, zie je direct verbetering in performance. Onderstaande Dummy Store hebben we gebouwd met de page-builder Elementor om de website extra log en zwaar te maken. Verder hebben we een video en wat onnodig grote afbeeldingen op de homepage geplaatst. In de shop zelf staan 500 dummyproducten.
Als testtool kiezen we voor GTmetrix. Het eerste testresultaat dat je ziet is afgenomen voordat de we WP Rocket plug-in installeerde. Zoals je ziet staat de paginagrootte op 2.11 mb, zijn er 80 requests nodig voor de opbouw van de homepage en duurt het 2.8 seconden voordat hij volledig laadt.
Het testresultaat hieronder geeft aan hoe de pagina presteert na installatie van WP Rocket. Je ziet direct een verschil in laadsnelheid doordat de paginagrootte omlaag gaat en het aantal requests vermindert.
Welke standaard aanpassingen brengt WP Rocket ‘straight out of the box’ aan?
Direct na installatie activeert de plug-in zijn caching-functionaliteit. Daarbij pre-load hij alle pagina’s van de website zodat deze direct in de cache worden opgeslagen. Normaal wordt ‘cache’ opgebouwd nadat iemand een pagina bezoekt. De volgende bezoeker kan dan rekenen op cache die uitgeserveerd wordt. De pre-load functie van WP Rocket zorgt ervoor dat de cache al vanaf het begin klaar staat. Dit zie je in de GTmetrix test direct terug in het aantal request dat is afgenomen.
WP Rocket setup
Cache instellen
Na installatie activeert WP Rocket direct zijn page-caching functionaliteit. Binnen de instellingen van de plug-in kan daar onder het kopje ‘Cache’ nog het een en ander verder aan getweaked worden.
‘Mobile first‘ staat ook bij WP Rocket hoog in het vandaal. De functionaliteit voor het uitserveren van cache aan mobiele gebruikers staat daarom standaard aan. Veel pagebuilders, zoals Elementor die we voor onze dummy webshop gebruiken, bieden responsieve designs voor mobiel gebruik. Stylingopties worden daarmee aan content meegegeven zodat mobiele gebruikers de website mobielvriendelijk te zien krijgen.
WP Rocket biedt de optie om deze mobielvriendelijke designs in een losse cache-map op te slaan. Bij het uitserveren van deze cache hoeft de browser van een mobiele gebruiker de opmaak daarmee niet meer te restylen. De rekenkracht die daarmee gepaard gaat, wordt bespaard. En daarmee boek je snelheidswinst voor je mobiel bezoekerspubliek.
Een andere caching-functionaliteit is het opslaan van zogenaamde ‘user cache’. Dit is gebruikersspecifieke informatie die je bijvoorbeeld graag wil opslaan als je een membership-website hebt. Dat zijn sites waar mensen op kunnen inloggen met een account waarna ze aan de achterkant toegang krijgen tot een platform. Denk aan social media- en educatiewebsites, blogs, betaalde nieuwsbibliotheken en meer..
Content die alleen relevant is voor de persoon die inlogt, wordt met deze optie in de cache gezet. Hiermee kunnen alle statische onderdelen van een pagina (die voor iedereen hetzelfde zijn) aangevuld worden met de dynamische/gebruikersspecifieke content van ingelogde gebruikers. Voor websites met veel gebruikerscontent dus een fijne uitkomst omdat deze data anders keer op keer opnieuw met extra verzoeken opgevraagd wordt.
Het is verstandig om cache geregeld te ‘flushen’ (verversen). Door de levensduur voor cache in te stellen wordt dit automatisch gedaan. Hiermee voorkom je dat oude webpagina’s waar je veranderingen in aanbrengt nog steeds worden uitgeserveerd aan bezoekers. Je wil immers dat bezoekers je nieuwe content zien.
Heb je een statische website waar je weinig aan verandert? De cache op een levensduur van 10 uur laten staan is dan prima. Bij nieuwssites, webshops of blogs waar vaak nieuwe content wordt geplaatst is het verstandig om de levensduur lager te zetten. Ieder uur, of om de paar uur de cache verversen is wenselijk.
Bestandsoptimalisatie
Onder het kopje ‘Bestandsoptimalisatie’ staan opties om CSS- en JavaScript-bestanden te optimaliseren. We beginnen bij de uitleg van CSS-bestanden.
CSS-bestanden verkleinen
Code die in CSS-bestanden staat, bevat vaak witregels en opmerkingen van de developer om het document overzichtelijk te maken. Dit is ruimte waar eigenlijk niets mee gedaan wordt. Handig voor developers die aan de code sleutelen, maar niet zo relevant voor de meesten van ons. Deze blanco regels zorgen ervoor dat het langer duurt voordat het bestand ‘gelezen’ wordt. Met de optie ‘CSS-bestanden verkleinen’ zorgt WP Rocket ervoor dat deze witregels verdwijnen. Daarmee worden CSS-bestanden sneller verwerkt door de webbrowser.
Let wel op! Zoals de waarschuwing in onderstaand voorbeeld al aangeeft, kunnen er websiteonderdelen breken wanneer je deze functie instelt. Controleer je site dus goed nadat je deze functionaliteit inschakkelt. Merk je dat websiteonderdelen verspringen of dat er andere functionaliteiten op de site niet meer werken, schakel de functie dan gewoon weer uit. WP Rocket zorgt ervoor dat alle bestanden worden hersteld. Flush je cache en de website is weer terug bij het oude.
Combineer CSS bestanden
Het combineren van CSS maakt het mogelijk dat verschillende CSS-bestanden samengevoegd worden tot één bestand. Handig omdat daarmee alle bestanden in één keer door een webbrowser gedownload worden. Let wel op of je website HTTP/2 gebruikt. Vraag dit desnoods na bij je hostingprovider. HTTP/2 maakt het mogelijk om meerdere bestanden tegelijkertijd te ontvangen. Daarmee duurt het vaak langer om één groot bestand binnen te halen dan meerdere kleine bestanden. Gebruik GTmetrix om het verschil te bekijken.
Wanneer je merkt dat bepaalde CSS-bestanden ervoor zorgen dat een pagina niet meer goed laadt na optimalisatie, kun je deze specifieke bestanden uitsluiten. Daarmee zorg je ervoor dat alleen deze bestanden niet bewerkt worden. Hierdoor hangt de optimalisatie van je site niet af van één of een aantal bestanden die niet meewerken.
JavaScript-bestanden
Bij de opties om JavaScript-bestanden te optimaliseren zien we voor een groot deel dezelfde functionaliteiten terug als bij de optimalisatie van CSS. Het is mogelijk witregels en reacties/aanwijzingen uit de code van bestanden te halen en meerdere JavaScript-bestanden samen te voegen tot één bestand.
Daarnaast kun je de ‘jQuery Migrate file’ met WP Rocket verwijderen. Vanaf WordPress 3.6 wordt dit bestand standaard op iedere pagina geladen. In veel gevallen gebeurt er echter niets met dit bestand. Sommige verouderde thema’s en plug-ins hebben hem nog wel nodig. Zorg er dus wederom voor dat je controleert hoe je website reageert op deze aanpassingen. Staat na toepassing alles goed, dan is het aan te raden om het bestand te verwijderen. Het is onzinnig om een extra HTTP request op je pagina te hebben voor met een bestand dat geen functie heeft.
JavaScript later stadium laden
Om het laden van webpagina’s te verbeteren is het verstandig om JavaScript-elementen in de footer te plaatsen, of om het laden ervan uit te stellen. Vaak is het niet nodig dat JavaScript-bestanden volledig laden voordat een webbezoeker op een pagina al aan de slag kan gaan. Bij het aanvinken van ‘JavaScript uigesteld laden‘ plaatst WP Rocket een zogenaamd ‘defer-attribuut’ achter JavaScript-bestanden. Daarmee weet een webbrowser dat hij eerst andere bestanden moet downloaden voordat hij terugkomt op bestanden met dit extra attribuut.
Met de optie ‘Delay JavaScript execution’ worden JavaScript-elementen pas geladen als de webbezoeker een interactie heeft met het paginaonderdeel waarin het script staat. Voorbeelden hiervan zijn wanneer iemand op een element klikt of wanneer iemand omlaag scrolt op de pagina en elementen tevoorschijn komen. In het tekstvak onder deze functionaliteit geef je aan welke elementen deze functionaliteit krijgen. Standaard staat hier al een lijst van scripts in.
Media
Onder het kopje media vind je functionaliteiten als Lazyload, gebruik van emoji’s, embed-versleuteling en WebP-cache.
Lazyload
Waarom zou je afbeeldingen en video’s die ‘onder de vouw‘ staan bij bezoek direct laden? Met Lazyload breng je eerst de bovenkant van een pagina in beeld. Het zorgt ervoor dat pagina’s sneller klaar staan voor bezoekers die daarmee niet hoeven wachten tot de hele pagina laadt. Met WP Rocket gebruik je Lazy Load voor afbeeldingen en video’s. Het heeft daarnaast de optie om een voorbeeldafbeelding te plaatsen op de plek waar een embedded YouTube-video staat. Het Iframe (dat bestaat uit veel code) en de video worden daarmee pas opgehaald wanneer iemand op de afbeelding klikt.
Emoji
Voor veel sites zal dit niet van toepassingen zijn. Maar run je bijvoorbeeld een blog, dan is de kans groter dat je in teksten emoji’s gebruikt. Met deze functionaliteit schakel je de mogelijkheid uit om emoji’s te gebruiken die vanaf WordPress.org ingeladen worden. Daarmee verplicht je jezelf om emoji’s te gebruiken die tot de standaard emojiset van webbrowsers zelf behoren. Daarmee kan een webbrowser dus emoji’s ophalen uit eigen repertoire, en dat is een stuk sneller.
Embeds
Je hebt vast wel gemerkt hoe makkelijk het is om video’s, tweets en andere bronnen op pagina’s of in berichten te plaatsen. Door simpelweg de URL-link in een tekstvak te zetten embed WordPress de content die erachter staat. WordPress maakt hierbij gebruik van de zogenaamde oEmbed feature. Deze functionaliteit bouwt als het ware een frame waar de content zichtbaar in naar voren komt.
In het voorbeeld hieronder zie je dat WordPress na het plaatsen van deze link: https://www.youtube.com/watch?v=82PAqFeLi_c automatisch de YouTube video embed op de pagina.
Hoewel deze feature het embedden van externe content ontzettend makkelijk maakt, levert het ook een nadelen op. Het frame van oEmbed, waarin de content verschijnt, zorgt voor een extra HTTP request. Daarbij wordt het stukje script dat nodig is voor de functionaliteit ook in de header van iedere andere pagina gezet. Op iedere pagina, ook de pagina’s waar geen video’s of tweets ingesloten staan, wordt dit script ingeladen.
Je kunt WP Rocket gebruiken om deze oEmbed-functie uit te schakelen. De overweging kan dan zijn om zelf met een stukje html-code een frame op te bouwen. Meer over hoe je dat doet lees je in dit artikel.
WebP compatibility
Deze optie maakt het mogelijk WebP-afbeeldingen in een aparte cache-map op te slaan. Let wel op dat het niet slim is om al je afbeeldingen in dit bestandsformaat op te slaan. Safari ondersteunt op dit moment bijvoorbeeld nog geen WebP-afbeeldingen, terwijl andere grote browsers dat wel doen. Daarom kun je beter een plug-in als IMAGIFY gebruiken die JPEG en PNG-bestanden omzet tot WebP als de ontvangende webbrowser ze accepteert.
Door een aparte map te maken met WebP-afbeeldingen kan deze cache bij ondersteunende browsers direct worden uitgeserveerd. Daarmee boek je dus extra snelheidswinst omdat WebP-afbeeldingen kleiner van formaat zijn.
Preloaden
De preload-opties geven je mogelijkheden voor het vooraf inladen van functionaliteiten.
Preload Cache
Pagina’s worden met deze functie direct in de cache gezet. Normaal gesproken wordt cache opgebouwd nadat iemand een pagina bezoekt. Bij dat bezoek wordt de cache opgeslagen waarna het aan de volgende bezoeker uitgeserveerd wordt. Door cache te preloaden staat het direct klaar.
Bij het preloaden van cache start WP Rocket het crawlen vanaf je homepage. Alle gelinkte onderliggende pagina’s worden vervolgens meegenomen. Je kunt ook een sitemap opgeven waarmee je het voor WP Rocket makkelijker maakt om sneller en accurater te crawlen.
Preload links
Een optie die de bezoeker het gevoel geeft dat de pagina achter een link super snel laadt. Wanneer een bezoeker met zijn muis voor minimaal 100 milliseconden boven een link zweeft, wordt aan de achterkant het HTML-document van de onderliggende pagina al opgehaald. Wanneer je daadwerkelijk op de link klikt, lijkt het alsof de onderliggende pagina vrijwel direct op je beeldscherm verschijnt.
DNS verzoeken voorladen
Op webpagina’s staan vaak bestanden die inladen via een externe URL. Met deze feature kun je het domein al voorladen van waar het bestand opgehaald wordt. Hiermee verkort je het proces voor het opzetten van de verbinding en komen bestanden sneller binnen.
Preload fonts
Met deze feature geef je de webbrowser de opdracht om fonts alvast op te halen. Normaal gesproken komt de browser hier pas later bij uit omdat de referentie naar het font verwerkt staat in een CSS-bestand waar meer info in staat. De specifieke URL die verwijst naar het font verwerk je in het tekstvak. Fonts die snel inladen versnellen het laadproces.
Geavanceerde regels
In het menu van geavanceerde regels vind je opties om uitzonderingen aan te brengen in het normale cache-proces
Nooit URL(s) cachen
Hier kun je de URL’s van pagina’s plaatsen die nooit gecached moeten worden. Dat kunnen bijvoorbeeld pagina’s als de winkelwagen, checkout of inlogomgeving op webshops zijn. Deze wil je vaak niet in de cache zetten omdat er informatie op staat die voor iedere bezoeker uniek is.
Cookies nooit cachen
Met deze optie geef je aan welke cookies niet gecached moeten worden. Je hebt bijvoorbeeld cookies die de logged-in/logged-out status van bezoekers bijhouden. Dat is gebruikersspecifieke informatie die je niet in de cache wil hebben.
Nooit user agent(s) cachen
Hiermee kun je aangeven welke browsers op welke apparaattypen geen cache moeten ontvangen. In theorie kan het bijvoorbeeld zo zijn dat via Internet Explorer op mobiel een pagina niet fatsoenlijk laadt vanuit de cache. Daar kun je dan rekening mee houden door hier geen cache aan te serveren.
Altijd URL(s) legen
Vaak heb je pagina’s op je website staan waar je vaak aanpassingen op aanbrengt. De URL’s van deze pagina’s kun hier opgeven, zodat iedere keer wanneer je een aanpassingen aanbrengt de cache voor deze pagina ververst wordt. Daarmee zijn aanpassingen voor de volgende bezoeker direct zichtbaar.
Query string(s) cachen
WP Rocket zet query strings niet standaard in de cache. Toch is dat soms wel handig om pagina’s met specifieke parameters uit te serveren. Een voorbeeld daarvan zijn pagina’s waarbij een vertaling wordt meegegeven. Dat kan er zo uit ziet:
voorbeeld.com/t-shirts/?lang=english
De query string op het eind van de URL geeft aan dat de pagina naar het Engels vertaald wordt. Wanneer deze vertaalde pagina al in de cache klaarstaat, hoeft een vertaalmechanisme niet opnieuw zijn werkt te doen.
Database
In dit menu vind je verschillende opties om je database op te schonen. Voordat je hier aan begint is het belangrijk dat een back-up van de database klaar staat, want na de optimalisatie kunnen aanpassingen niet meer ongedaan gemaakt worden.
Berichten Opschonen
Vaak staan er onnodig veel revisies, concepten en verwijderde berichten in de database. Deze nemen ruimte in beslag en maken je database extra zwaar. Gebruik je ze niet? Verwijder deze bestanden dan.
Reacties opschonen
Hetzelfde geldt voor spamreacties en verwijderde reacties. Deze hebben geen toegevoegde waarde voor je websitebezoekers en nemen onnodig ruimte in binnen je database.
Transients Opschonen
Transients zijn kleine stukjes gecachte informatie die zich in de database bevinden. Veel plug-ins maken hier gebruik van. Door informatie op te slaan die de plugin nodig heeft, hoeft deze niet meer extern opgevraagd te worden. Daarmee kan een plug-in dus sneller aan het werk.
Vaak staat een database echter vol met verlopen transients die geen functie meer hebben. Het is verstandig om deze periodiek op te verwijderen zodat je database schoon blijft.
Database opschonen
Met het opschonen van de database zorg je ervoor dat tabellen geen onnodige informatie bevatten. Hiermee maak je het makkelijk voor WordPress om snel informatie uit de database te halen. WP Rocket laat bij aanvang al zien hoeveel tabellen geoptimaliseerd kunnen worden.
Automatisch opschonen
Alle bovenstaande handelingen kun je automatisch van start laten gaan. Gebruik daarvoor de plannen en bepaal met welke frequentie (dagelijks, wekelijks of maandelijks) de opschoontaken worden uitgevoerd.
CDN
Wellicht maak je gebruik van een Content Delivery Netwerk en wil je deze combineren met de caching-mogelijkheden van WP Rocket. Beide systemen vullen elkaar namelijk goed aan. WP Rocket herschrijft alle URL-links van statische paginaonderdelen als afbeeldingen, CSS- en JavaScript-bestanden. Daarmee haalt de webbrowser deze elementen uit de cache van je CDN. De rest van de pagina-onderdelen komt dan uit de cache van WP Rocket.
Je CDN-provider voorziet je van een CNAME. Deze voeg je toe aan WP Rocket zoals je op bovenstaande afbeelding ziet. Meer uitleg over de werking van verschillende CDN’s in combinatie met WP Rocket vind je hier.
Let op! Vul geen CDN-gegevens van CloudFlare of Securi in. Deze CDN’s werken op een andere manier en fungeren als proxy-server die meer dan alleen statische content cached. Onder het kopje ‘ADD-ONS’ binnen WP Rocket vind je de mogelijkheid om WP Rocket met deze CDN’s te configureren.
Heartbeat
Wanneer je als gebruiker in de back-end aan een bericht werkt of aan een pagina sleutelt, zie je dat WordPress automatisch de pagina-inhoud en revisies opslaat. Ook houdt hij bij hoe lang je als gebruiker ingelogd bent en of iemand anders aan de achterkant dezelfde pagina opent. Deze functionaliteit (genaamd Heartbeat) wordt mogelijk gemaakt door periodieke AJAX-calls die vanaf jouw computer naar de server gaan. Als je met veel mensen tegelijkertijd bezig bent in de back-end kan dit belastend zijn voor de server.
Door met WP Rocket de frequentie van deze verzoeken aan te passen, zorg je ervoor dat de server minder belast wordt. Ga bij jezelf na met hoeveel collega’s je tegelijkertijd in de back-end zit. Beheer je zelf in je eentje een website, dan levert het aanpassen van deze instelling waarschijnlijk niet veel op.
Optimalisatie Dummy webshop
Om de proef op de som te nemen, hebben we onze eigen Dummy webshop met WP-rocket geoptimaliseerd. Zoals onderstaand testresultaat laat zien is de laadsnelheid aanzienlijk verbetert. Het aantal requests is teruggebracht tot 14 en de paginagrootte is teruggebracht tot 1.01 MB. Daarmee is de laadsnelheid van 2.8 seconden naar 1.3 seconden gegaan.
Welke optimalisaties staan ingesteld:
WP Rocket Cache
CSS-bestanden verkleinen
Combineer CSS bestanden
Remove jQuery Migratie
JavaScript-bestanden verkleinen
Combine JavaScript files
JavaScript uitgesteld laden
Delay JavaScript execution
Lazyload
Eindoordeel
WP Rocket is een fijne plug-in waarmee je relatief simpel een significant snelheidsverschil op je website aanbrengt. De prijs die je per jaar betaalt zou je af kunnen zetten tegenover de kosten die je maakt wanneer een developer je website onderhanden neemt. Dan valt een bedrag van 49 dollar (licentie voor één site) wel mee.
Met WP Rocket houd je de touwtjes zelf in handen. Er worden geregeld nieuwe optimalisatiefeature’s toegevoegd en op ieder moment kun je instellingen aapassen en je websitesnelheid verbeteren. In combinatie met een CDN heb je met deze plug-in een hele fijne caching-/optimalisatietool in handen.
Reactie achterlaten