Handleiding WP Rocket instellen

Technische SEO

26 maart 2021 • 5 minuten leestijd

WP Rocket instellen

We kennen het allemaal: je wilt een website bezoeken, maar de laadtijd duurt ontzettend lang. Hierdoor besluit je maar een andere website te bezoeken die wel snel laadt. Uit onderzoek blijkt dat maar liefst 40% van de bezoekers een website verlaat als hij meer dan 3 seconden moet laden. Ook is een hoge laadtijd van nadelige invloed op de Core Web Vitals en daarmee je vindbaarheid.

Als beheerder van een WordPress website of webshop is dit makkelijk te voorkomen met het correct instellen van de plugin WP Rocket Hoe je dit precies doet, lees je in deze WP Rocket handleiding.

Wat is WP Rocket?

WP Rocket is een WordPress plugin die jou  helpt bij het verkorten van de laadtijd van je website door caching en andere technische SEO optimalisaties.

Caching en WP Rocket

Bij caching worden gegevens van je pagina’s opgehaald en bewaard op het apparaat van de bezoeker.  Wanneer je websitebezoeker meerdere pagina’s bezoekt hoeven onder andere opmaakbestanden niet opnieuw gedownload te worden. Deze worden opgehaald uit de cache. Dit zorgt ervoor dat de pagina sneller laadt.

Wat is de prijs van WP Rocket?

WP Rocket is een betaalde plugin en biedt geen gratis versie. Wanneer je gebruikmaakt van WP Rocket heb je de keuze uit drie pakketten:

  1. Het Single pakket voor €44 per jaar
  2. Het Plus pakket voor €88 per jaar
  3. Het Infinite pakket voor €222 per jaar

WP Rocket prijzen

 

Bij WP Rocket betaal je per jaar voor de plugin. De pricing is afhankelijk van het aantal websites waarvoor je WP Rocket gebruikt. Ben je blogger en wil je alleen je eigen website optimaliseren met de WP Rocket plugin? Dan is Single geschikt voor jou. Ben je de eigenaar van een marketingbureau of een webdevelopment bureau? Dan is het Infinite abonnement aan te raden, hiermee is het mogelijk om de plugin voor een onbeperkt aantal websites te gebruiken.

WP Rocket bekijken en downloaden

Kom je er in de eerste 14 dagen achter dat WP Rocket niet bevalt? Dan krijg je je geld terug en wordt je abonnement stopgezet. Bekijk de WP Rocket plugin en de pricing via de onderstaande button.

WP Rocket bekijken

WP Rocket installeren

Zodra je het geschikte abonnement hebt uitgekozen, kunnen we door naar de volgende stap: WP Rocket installeren in jouw WordPress omgeving. Als het goed is, heb je een e-mail ontvangen van WP Rocket met een link. Via de volgende stappen installeer je WP Rocket:

  • Download het zip-bestand via de ontvangen mail of via het dashboard van WP Rocket.
  • Ga via het dashboard van je WordPress website naar Plugins.
  • Bij Bestand kiezen selecteer je het zip-bestand van de WP Rocket plugin.
  • Installeer hem en hij staat in je WordPress omgeving.
  • Activeer de plugin via Plugins in het linkermenu.

Aan de slag met WP Rocket

Nu WP Rocket is geïnstalleerd en geactiveerd kan het echte werk beginnen: we gaan aan de slag met WP Rocket. Zonder dat je het doorhebt, gaat WP Rocket meteen voor je aan de slag. Direct bij het activeren van de plugin heeft WP Rocket al een aantal optimalisaties doorgevoerd, zoals het instellen van de caching.

Als het goed is, zie je al een aanzienlijk verschil in de laadtijd van je website. Dit controleer je makkelijk via PageSpeed Insights, Lighthouse of GTmetrix. Tip: test de snelheid voordat je de plugin hebt geactiveerd en nadat je de plugin hebt geactiveerd.

Om jou alles te vertellen over WP Rocket, gaan we in deze WP Rocket handleiding zeven belangrijke functies bij langs die je ziet in het linkermenu in de afbeelding hieronder.

WP Rocket instellen

1. Cache-instellingen van WP Rocket

Het eerste onderdeel in het menu is “Cache”. Hier vind je de-cache instellingen van WP Rocket. In de onderstaande afbeelding zie je de verschillende opties voor het instellen van de caching.

Cache instellingen van WP Rocket

Mobiele cache-instelling

De mobiele zoekopdrachten groeien en Google vindt mobielvriendelijkheid belangrijk. Om deze redenen raden wij sterk aan om caching voor mobiele apparaten in te schakelen. Zodra je dit hebt geselecteerd, krijg je de optie om cache-bestanden voor mobiele apparaten te scheiden. Zoals WP Rocket zelf al aangeeft, werkt mobiele cache het veiligst met beide opties geselecteerd.

Gebruikers Cache

Bij Gebruikers Cache schakel je caching voor ingelogde WordPress gebruikers in. Heb je een website waar bezoekers een account aanmaken en regelmatig inloggen? Dan raden we aan om deze optie te selecteren. Als je deze functie inschakelt, creëert WP Rocket voor iedere ingelogde gebruiker een aparte set met cache-gegevens.

Cache Levensduur

WP Rocket stelt de Cache Levensduur standaard in op 10 uur. Beschik je over een website waar niet zoveel veranderd? Dan is een cache-tijd van “0” of van meer dan 10 uur prima. Beschik je over een website waarbij regelmatig veranderingen plaatsvinden, zoals het uploaden van nieuwe blogs of het bijwerken van nieuwsberichten? Dan raden we aan om de cache-tijd op een lager aantal uren te zetten. Je voorkomt hiermee dat bezoekers oude informatie zien doordat de cache nog niet geleegd is.

Samenvatting

Samengevat selecteer je de volgende instellingen:

  • Caching voor mobiele apparaten inschakelen
  • Cache-bestanden voor mobiele apparaten scheiden

2. Bestandsoptimalisatie

In het onderdeel bestandsoptimalisatie verklein je HTML-bestanden, CSS-bestanden en JavaScript-bestanden. Doordat onnodige code, zoals witregels, uit deze bestanden worden gehaald én ze op een andere manier worden ingeladen verklein je de laadtijd van een pagina. We gaan eerst dieper in op de basisinstellingen die je ziet in de afbeelding hieronder.

Basisinstellingen bestandsoptimalisatie WP Rocket

HTML optimalisaties

HTML staat voor Hyper Text Markup Language en is de broncode van een webpagina. Wanneer je HTML te verkleint, verwijdert WP Rocket witruimte en commentaar in de programmeertaal. Dit vermindert de bestandsgrootte, wat een (kleine) positieve invloed heeft op de laadtijd. De code wordt op deze manier ook een stuk schoner.

Vervolgens kun je er voor kiezen om Google Fonts-bestanden te combineren, waardoor het aantal HTTP verzoeken vermindert. Een HTTP verzoek is een verzoek naar een webserver om informatie aan te vragen over de webpagina. Zo’n verzoek kost tijd, waardoor je het liefst zo min mogelijk verzoeken uitstuurt.

Tenslotte kun je query strings van statische bestanden verwijderen. Dit levert nogal eens problemen op en heeft geen effect op je laadsnelheid. Daarom raden we af om deze optie te selecteren.

Samenvatting

Samengevat selecteer je de volgende instellingen:

  • HTML verkleinen
  • Google Fonts-bestanden combineren

CSS en JavaScript optimaliseren

De belangrijkste instellingen in dit onderdeel is het optimaliseren van CSS-bestanden en JavaScript-bestanden, deze hebben het meeste invloed op je laadsnelheid. Naast de caching zit hier de meeste winst in voor de meeste websites. De opties voor de optimalisaties hiervan zien er zo uit:

CSS en JavaScript optimaliseren in WP Rocket

CSS-bestanden

Een CSS-bestand is een Cascading Style Sheet. Simpel gezegd is dit een bestandje met programmeertaal dat zorgt voor een goede opmaak van HTML-bestanden. Developers zetten hier informatie in, zodat een website er verzorgd uitziet. Om deze codes overzichtelijk te maken, voegen developers witruimtes en opmerkingen toe in zo’n CSS-bestand. De bezoekers zien dit (gelukkig) niet, maar deze extra witruimtes en opmerkingen beïnvloeden wel de laadtijd van je website.

Door CSS-bestanden te verkleinen met WP Rocket, worden de witruimtes en opmerkingen verwijdert. Maar let op: in sommige gevallen levert dit problemen op aan de voorkant van je website. Als je dit opmerkt, kun je de optie gewoon weer deactiveren, zodat de aanpassingen ongedaan worden gemaakt.

Wij adviseren om de optie Combineer CSS bestanden uitgeschakeld te laten. De meeste websites draaien op het HTTP/2 protocol. Wanneer je website niet op HTTP/2 draait, maar op HTTP/1.1, adviseren wij je om dit wel in te schakelen. Via de HTTP/2 test van KeyCDN zie je gemakkelijk of je website wel of niet op HTTP/2 draait.

Als laatste is het aan te raden om de functie CSS-levering optimaliseren wel in te schakelen. Hierdoor wordt je pagina sneller gerenderd, wat de Largest Contentful Paint (onderdeel van de Core Web Vitals) ten goede komt.

JavaScript-bestanden

JavaScript-bestanden zijn tekstbestanden met programmeertaal. Net zoals bij CSS-bestanden voegen developers witruimtes en opmerkingen toe in deze bestanden om het overzichtelijker te maken. Wil je deze JavaScript-bestanden verkleinen? Dat doe je in WP Rocket makkelijk met de optie: JavaScript-bestanden verkleinen. Hier geldt ook dat het problemen op kan leveren aan de voorkant van je website. Merk je iets opvallends op? Dan de-activeer je ook deze optie weer gemakkelijk.

Ook voor de JavaScript-bestanden geldt dat het meestal beter is om de optie Combine JavaScript files uitgeschakeld te laten, behalve wanneer je website niet op HTTP/2 draait. De optie JavaScript uitgesteld inladen raden wij wel aan. Dit heeft ook een positieve invloed op de rendertijd van je pagina.

Een nieuwere functie in WP Rocket is de functie Delay JavaScript execution. Wij zijn fan van deze functie, omdat dit ook voor de meeste websites positief werkt voor je laadsnelheid. Deze functie raden wij daarom aan. Standaard worden hier al een hoop scripts aan toegevoegd, waardoor je in de meeste gevallen zelf geen aanvullingen hoeft te doen.

Samenvatting

Samengevat selecteer je de volgende instellingen:

  • CSS-bestanden verkleinen
  • CSS-levering optimaliseren
  • JavaScript-bestanden verkleinen
  • JavaScript uitgesteld laden
  • Delay JavaScript execution

3. Media optimaliseren met WP Rocket

Een andere erg fijne functionaliteit van WP Rocket is het beter inladen van alle mediabestanden. We gaan dieper in op LazyLoad, het gebruik van Emoji’s, Embeds en WebP compatibiliteit. In de onderstaande afbeelding zie je de opties voor het optimaliseren van je mediabestanden.

Media optimaliseren WP Rocket

LazyLoad

LazyLoad laadt alleen de afbeeldingen en video’s die zichtbaar zijn voor de bezoekers. Pas als de bezoeker naar beneden scrolt en een afbeelding bijna in beeld komt, wordt deze geladen. Heb je dus in totaal 3 MB aan afbeeldingen op je webpagina maar is op het eerste gezicht nog maar 1 MB ‘in beeld’ voor de bezoeker? Dan hoeft er eerst maar 1 MB geladen te worden. De overige afbeeldingen komen later, wanneer deze ook ‘in beeld’ komen bij de bezoeker. Dit scheelt een hoop downloadtijd bij het bezoeken van je pagina’s.

Emoji

Als je emoji’s uitschakelt, worden de emoji’s niet uit WordPress.org gehaald, maar uit het besturingssysteem van de browser van de bezoeker. We raden aan om dit te selecteren, zodat de laadtijd lager kan worden. De functie Emoji vind je niet terug in de nieuwere versies van WP Rocket, op de plaats daarvan staat nu de functie Image Dimensions.

Image Dimensions

In de nieuwe versies van WP Rocket is de functie Image Dimensions toegevoegd. Hiermee worden er vaste breedtes en hoogtes toegevoegd aan afbeeldingen, waardoor er minder verspringingen plaatsvinden tijdens het laden. Wij raden aan deze functie in te schakelen, omdat dit de gebruikerservaring verbeterd.

Embeds

Naast LazyLoad en emoji’s uitschakelen, kun je overwegen om WordPress Embeds uit te schakelen. Door content te embedden, integreer je makkelijk externe content op jouw website. Echter creëert het ook nieuwe HTTP-aanvragen en is er JavaScript voor nodig, wat zorgt voor een langere laadtijd. Door WordPress Embeds uit te schakelen, voorkom je nieuwe HTTP-aanvragen en voorkom je onnodige laadtijd doordat er meer JavaScript benodigd is.

WebP compatibility

WP Rocket werkt samen met Imagify om de afbeeldingen van je website om te zetten naar het betere WebP-formaat. Er zijn meerdere plugins die dit binnen WordPress doen. Gebruik je geen Imagify, maar een andere plugin om WebP afbeeldingen in te laden? Dan wordt aangeraden om deze functie in te schakelen. Gebruik je Imagify of maak je geen gebruik van een andere plugin voor WebP afbeeldingen? Dan hoef je deze optie niet te gebruiken.

Samenvatting

Samengevat selecteer je de volgende instellingen:

  • Voor afbeeldingen inschakelen
  • Voor iframes en video's inschakelen
  • YouTube iframe met voorbeeldafbeelding vervangen
  • Emoji uitschakelen (indien beschikbaar)
  • Add missing image dimensions (indien beschikbaar)
  • WordPress Embeds uitschakelen

4. Preloaden met WP Rocket

Door pagina’s te preloaden, worden de pagina’s op de achtergrond al gedownload en hoeven je bezoekers dus minder lang te wachten. In WP Rocket selecteer je makkelijk welke URL’s je graag wilt preloaden. In de onderstaande afbeelding zie je hoe dit onderdeel eruit ziet.

Preloaden WP Rocket

Preloaden

Wanneer je WP Rocket hebt gedownload, is ‘Activeer preloading’ meteen geselecteerd. Hiermee daalt de laadtijd van je website meteen aanzienlijk. Wil je alle URL’s uit een bepaalde sitemap preloaden? Vink dan de optie: ‘ Op sitemap gebaseerde-cache preloading activeren’ aan. Automatisch worden de gegenereerde sitemaps door plugins als Yoast SEO of Rank Math SEO in kaart gebracht. Selecteer welke van toepassing is of voer handmatig een XML-sitemap in.

Preload Links

De functie Preload Links is een nieuwere functie binnen WP Rocket. Op het moment dat een bezoeker met zijn of haar muis op een interne link staat, wordt die pagina op de achtergrond alvast gedownload. Klikt de bezoeker vervolgens op de interne link? Dan laadt de pagina een stuk sneller, omdat de bezoeker de pagina niet dan pas download.

DNS verzoeken voorladen

Vervolgens zie je de optie om DNS-verzoeken te preloaden. Door deze optie in te schakelen in WP Rocket, laden externe bestanden sneller op jouw website. Geef handmatig aan welke externe hosts geprefetched moeten worden. Een aantal veelvoorkomende externe hosts voor prefetch zijn:

  • //ajax.googleapis.com
  • //cdnjs.cloudflare.com
  • //code.jquery.com
  • //connect.facebook.net
  • //fonts.googleapis.com
  • //fonts.gstatic.com
  • //google-analytics.com
  • //googleads.g.doubleclick.net
  • //maps.googleapis.com
  • //maps.gstatic.com
  • //maxcdn.bootstrapcdn.com
  • //platform.twitter.com
  • //ssl.google-analytics.com
  • //use.fontawesome.com
  • //www.google-analytics.com
  • //www.googletagmanager.com
  • //www.googletagservices.com
  • //youtube.com

Belangrijk is om goed te kijken welke DNS-verzoeken je website allemaal doet. Wanneer je hier onnodige verzoeken aan toevoegt heeft het een negatieve impact op de laadtijd. Via onder andere de tool GTmetrix zie je welke DNS-verzoeken je website uitvoert. Vul bij GTmetrix je website in en ga vervolgens naar de tab Waterfall. In dit tabblad zie je een overzicht vergelijkbaar met de afbeelding hieronder:

Waterfall GTmetrix

In de kolom “Domain” zie je alle domeinen waar een DNS-verzoek naar wordt gedaan. Kopieer deze domeinen, met uitzondering van je eigen domein, en plaats ze onder elkaar in de lijst van WP Rocket waarbij je voor het domein een dubbele slash plaatst. Een voorbeeld is //youtube.com.

Preload Fonts

Om de gebruikte fonts van je website sneller te laten laden gebruik je de optie Preload Fonts. In dezelfde Waterfall die je voor de DNS-verzoeken gebruikt zie je de fonts van je website staan. Fonts zijn de bestanden die eindigen op een .woff, .woff2, .ttf of .otf extensie. Kopieer deze fonts en voeg ze toe. De preloading van onze fonts ziet er als volgt uit:

Preload Fonts WP Rocket

Samenvatting

Samengevat selecteer je de volgende instellingen:

  • Activeer preloading
  • Op sitemap gebaseerde-cache preloading activeren
  • Yoast SEO XML-sitemap (indien beschikbaar) of Rank Math XML-sitemap (indien beschikbaar)
  • Preload Links (indien beschikbaar)
  • DNS verzoeken voorladen
  • Preload Fonts (indien beschikbaar)

5. Geavanceerde regels

Soms moet er een uitzondering gemaakt worden in het ‘normale’ cache-proces. Hoewel de algemene gebruiker van WordPress deze optie nauwelijks zal gebruiken, kan het voor geavanceerde gebruikers de uitkomst zijn die ze zoeken. De uitzonderingen geef je makkelijk aan in de WP Rocket plugin: per uitzondering vul je handmatig de URL’s in. Weet je niet zeker of dit wel of niet van toepassing is op jouw website? Vraag dit dan na bij je SEO bureau of je webdeveloper. Uitzonderingen in het ‘normale’ cache-proces zijn:

  1. inlog/ uitlog pagina’s die niet gecachet mogen worden;
  2. cookies mogen die niet gecachet mogen worden;
  3. user agent strings die niet gecachet mogen worden, zoals Internet Explorer of Google Chrome;
  4. overige URL’s die niet gecachet mogen worden, zoals de winkelwagen-omgeving of betaalpagina’s of
  5. query strings die juist wel gecachet moeten worden. WP Rocket zet query strings namelijk niet automatisch in de cache.

6. Database opschonen met WP Rocket

Het zesde onderdeel van deze WP Rocket handleiding is het opschonen van de database van je website. Na een paar jaar is de kans groot dat er aardig wat ‘troep’ op je website staat waar je eigenlijk helemaal niets aan hebt, of zelfs de functionaliteit van je website tegenwerkt. Deze ‘troep’ ruim je binnen een paar klikken op met WP Rocket. Maar let op: maak eerst een back-up van je database, want deze aanpassingen draai je niet meer terug.

Database opschonen WP Rocket

Met deze functie van WP Rocket ruim je makkelijk je website op. Alle onderdelen die je kan opschonen zijn:

  • Revisies
  • Automatische concepten
  • Verwijderde berichten
  • Spam reacties
  • Verwijderde reacties
  • Verlopen transients
  • Alle transients
  • Tabellen optimaliseren

Tenslotte kun je de optie selecteren om automatisch je website op te schonen. Maar aangezien je de aangebrachte wijzigingen niet meer terugdraait, kan dit tricky zijn. We kunnen het daarom niet vaak genoeg zeggen: maak eerst een back-up voordat je deze actie onderneemt.

7. CDN via WP Rocket

CDN staat voor Content Delivery Network. Kort gezegd is dit een systeem dat je helpt om de om de wereldwijde levering van je website te versnellen. Een CDN combineer je goed met de caching-mogelijkheden van WP Rocket. Met deze functie herschrijft WP Rocket alle URL’s van afbeeldingen en CSS- en/of JavaScript bestanden naar de CDN die je gebruikt. Hierdoor haalt de webbrowser deze gegevens uit de cache van je CDN en niet meer via je eigen server. Hierdoor wordt je eigen website minder belast, wat zorgt voor een kortere laadtijd. Een CDN is met name aan te raden wanneer je website internationaal bezocht wordt. Richt je je enkel op één land en staat je website daar ook gehost? Dan is een CDN meestal niet noodzakelijk.

In onderstaande afbeelding zie je hoe je deze functie inschakelt: zodra je de optie ‘Content Delivery Network inschakelen’ hebt aangevinkt, voeg je handmatig de CNAME toe. De CNAME heb je ontvangen van je CDN-provider. Onderaan sluit je handmatig URL’s of bestanden uit die bijvoorbeeld niet via je CDN kunnen worden ontvangen.

CDN inschakelen WP Rocket

Tip: gebruik je een CDN als Cloudflare of Sucuri? Hiervoor ontwikkelde WP Rocket speciale Rocket add-ons. Deze vind je bij Add-ons.

WP Rocket als succesvolle caching plugin

Je hoeft geen ervaren developer te zijn om deze plugin te gebruiken, nergens vul je ingewikkelde codes in. Heb je toch nog vragen? Kijk eens naar de tutorials van WP Rocket of neem gemakkelijk contact op met het team van WP Rocket. Door de vele features van WP Rocket is het een aantrekkelijke plugin om jouw WordPress website mee te verbeteren. Als je het aan ons vraagt is het de prijs die je betaald wel waard. Neem je een licentie op WP Rocket en bevalt het toch niet? Dan krijg je gemakkelijk je geld terug. Je loopt dus geen enkel risico.

Jarik Oosting - eigenaar SEO bureau SmartRanking

Dit artikel is geschreven door Jarik Oosting

Jarik is SEO consultant bij en eigenaar van SmartRanking. Met ruim 9 jaar SEO-ervaring helpt hij samen met het team SEO specialisten van SmartRanking bedrijven van klein tot groot beter vindbaar te worden. Jarik is onder andere bekend van publicaties bij IMU, Mediaweb, NOM, Slagter Media en ReneGreve.