WordPress versnellen met WP Rocket
Heb je een website, dan wil je natuurlijk snelheid. Je bezoekers haken anders snel af. Trage laadtijden kun je dus best zoveel mogelijk vermijden. Nu heb jij als website-eigenaar hier flink wat invloed op. Optimalisatie is het sleutelwoord. Gelukkig hoef je daar niet per se zelf diep voor in de code te duiken. Zo belooft de plugin WP Rocket je WordPress-website in een paar klikken te versnellen. Klinkt goed, maar hoe doe je dit? Ik help je graag op weg en geef je de beste instellingen.
WP Rocket is een plugin voor WordPress die helpt om je website te versnellen. In 2013 zag dit project op Franse bodem het levenslicht. De visie was helder: het hebben van een snelle website moet zijn weggelegd voor iedereen. Sindsdien bleef die filosofie gelijk, maar groeiden de mogelijkheden. Wat begon als een caching plugin is uitgegroeid tot een complete optimalisatietool. En met veel succes. Inmiddels maken wereldwijd zo’n 1.500.000+ websites en 170.000+ mensen gebruik van WP Rocket.
WP Rocket lost prestatieproblemen op, zonder dat jij daar werk aan hebt. Zo verbetert het de snelheid van je website en bespaar jij tijd en moeite. In het kort zijn dit de belangrijkste redenen om deze plugin te gebruiken.
Hieronder leg ik vijf belangrijke functies uit die WP Rocket heeft en wat ze precies doen. Stuk voor stuk schakel je ze gemakkelijk in via het dashboard van de plugin.
Elke website heeft overtollige code die niet noodzakelijk is om een pagina weer te geven. WP Rocket verzamelt vanzelf alle stylesheets en scripts binnen je pagina’s en stript de overbodige CSS uit de HTML. Dat heeft positieve impact op je laadtijd en specifieke onderdelen van metingen in Google Lighthouse, zoals Largest Contentful Paint (LCP) en Total Blocking Time (TBT). De LCP is ook een Core Web Vital – één van de signalen die je SEO beïnvloeden sinds de Google Page Experience Update.
Iedere website heeft JavaScript die het weergeven van een pagina vertraagt. WP Rocket laat de browser pas JavaScript laden, wanneer de belangrijkste content alvast is gedownload en wordt weergegeven. Zo kan de bezoeker de pagina gebruiken zonder problemen. Deze functie elimineert JavaScript die niet direct noodzakelijk is en anders het weergeven van een pagina vertraagt. Binnen Lighthouse zie je hierdoor een positief effect op de Largest Contentful Paint en Total Blocking Time.
JavaScript-bestanden beïnvloeden de laadtijd en interactiviteit van een pagina. Het is belangrijk dat ze alleen geladen worden als een gebruiker de interactie uitvoert. Denk hierbij aan scrollen of het klikken op een knop. WP Rocket is in staat om dat te regelen. De tijd die JavaScript nodig heeft om uit te voeren staat in nauw verband met de First Input Delay (FID). Dat duidt de interactiviteit en de reactiesnelheid van een pagina aan. Ook dit is een Core Web Vital.
WP Rocket kan CSS en JavaScript verkleinen. Dat betekent dat je spaties en opmerkingen uit de code haalt. Het doel daarvan is het verkleinen van de bestandsgrootte. Dit vermindert de laadtijd en het bandbreedtegebruik.
Een pagina is vaak langer dan wat je in eerste instantie op je scherm ziet. Het deel dat je direct ziet, wordt aangeduid met ‘boven de vouw’. Wat je nog niet ziet, is het deel ‘onder de vouw’. Met lazy load laadt WP Rocket afbeeldingen die zich onder de vouw bevinden pas in, wanneer de essentiële onderdelen boven de vouw volledig zijn geladen. Zo versnel je de laadtijd en verlaag je de First Input Delay en Total Blocking Time.
Nadat je een licentie hebt gekocht voor WP Rocket, is het tijd om de plugin te installeren. Hiervoor dien je eerst de plugin te downloaden (in de vorm van een .zip-bestand). Downloaden kan direct na aankoop of via je accountpagina.
Als de download klaar is, log je in op het dashboard van je WordPress-website. Daar ga je links in het menu naar Plugins → Nieuwe plugin. Klik nu op Plugin uploaden en dan op Bestand kiezen. Selecteer het eerder gedownloade .zip-bestand en klik op Nu installeren om de installatie te starten.
Vergeet na de installatie niet om op Plugin activeren te klikken. Gebruik je momenteel een andere caching plugin, zoals WP Super Cache of W3 Total Cache? Schakel die dan eerst uit, voordat je WP Rocket activeert.
Goed, je hebt WP Rocket geïnstalleerd en geactiveerd binnen WordPress. Je vraagt je nu vast af: “Hoe behaal ik het beste resultaat voor mijn website?” De realiteit is dat iedere website een ander thema, een andere set aan plugins en andere content heeft. De beste instellingen zullen daardoor verschillen van site tot site.
Dit betekent dat je moet experimenteren. Laten we kijken naar de veiligste manier om dit te doen. Het doel is om je website te versnellen. Merk daarbij op dat meer opties activeren niet altijd gelijk staat aan een snellere website. Maak je dus geen zorgen als je bepaalde instellingen niet kunt inschakelen.
Ga je WP Rocket instellen, houd dan rekening met de volgende best practices.
Nu gaan we kijken naar de daadwerkelijke instellingen binnen WP Rocket, voornamelijk onder het tabje ‘Bestandsoptimalisatie’. Ik leg je uit wat het doet en wat de maker van de plugin aanbeveelt.
Door CSS te verkleinen, reduceer je de bestandsgrootte. Ook kun je alle CSS-bestanden die je website gebruikt combineren tot een enkel bestand. Stel dat je eerst acht CSS-bestanden had, dan zorgt deze optie ervoor dat dit er nu eentje wordt.
Het combineren van CSS kan je score in benchmarks verbeteren, maar hoeft de daadwerkelijke snelheid van je site niet per se te beïnvloeden. Dat is met name het geval als je HTTP/2 gebruikt. Controleer daarom altijd goed de snelheid met en zonder de combineer-optie aan om te achterhalen wat het beste werkt voor jouw website.
Hier is Remove Unused CSS de aanbevolen optie – zeker sinds versie 3.11. In die update is de RUCSS-functie flink herschreven. Het resultaat is dat dit nu de beste manier is om je CSS te optimaliseren en zo snelheidswinst te behalen. Vanwege de sterk verbeterde compatibiliteit met populaire page builders als Elementor, Divi en Beaver Builder kun je daarom het beste deze instelling gebruiken.
De andere optie Load CSS asynchronously is een geavanceerde instelling die niet per se geschikt is voor elke website. Vink je de optie aan, dan zal een externe tool van WP Rocket elke pagina van je website bezoeken om de zogeheten Critical path CSS te genereren. Dit heeft flinke impact op hoe snel je website aanvoelt, maar kan afhankelijk van de door jou gebruikte plugins en thema’s problemen geven.
Naast CSS is ook het verkleinen van JavaScript aan te raden. Aanvullend kun alle JavaScript-bestanden combineren tot een enkel bestand. Voor dat laatste geldt hier eveneens dat dit afhangt van het gebruik van HTTP/2. Test dus goed de snelheid met en zonder de combineer-optie aan en kijk wat voor jou het meeste voordeel oplevert.
De optie eronder zorgt dat JavaScript uitgesteld wordt geladen en je pagina niet blokkeert op het moment dat die wordt opgebouwd. Zet je dit aan, controleer dan daarna of alle interactieve onderdelen binnen je website nog werken. Denk aan bijvoorbeeld je menu of fotogalerij. De optie Delay JavaScript execution is voor geavanceerde gebruikers. Het stelt het inladen van alle JavaScript-bestanden en inline scripts uit – totdat de gebruiker ermee interacteert. Het is aanbevolen goed te testen of dit binnen je website geen problemen geeft, voordat je dit aangevinkt houdt.
WP Rocket schakelt bij activatie ook gelijk page caching in. Verzeker jezelf er daarom van dat je niet tegelijkertijd andere caching plugins gebruikt, zoals WP Super Cache. Juist dit heeft namelijk vaak een averechts effect. Nu is het zo dat je bij Antagonist ook Redis kunt gebruiken. Dit valt wel te combineren met WP Rocket, omdat Redis een andere vorm van caching is (object caching). Het voordeel hiervan is dat je pagina’s kunt versnellen waar de page caching van WP Rocket niet bij kan. Denk aan de back-end van je WordPress-website. WP Rocket zelf adviseert hier de plugin Redis Object Cache voor
Onze page cache stond eerder al goed door de installatie van WP Super Cache en wij hadden een aantal zaken al goed geregeld met Autoptimize. Deze aanpassingen hebben wij met WP Rocket natuurlijk overgenomen. De volgende functies en opties hebben onze website nog verder verbeterd:
Controleer je website met tools zoals GTMetrix of PageSpeed Insights van Google. Deze vertellen je duidelijk waar de problemen zitten. Sommigen kan je via het interface van WP Rocket oplossen en voor andere zaken moet je soms je thema aanpassen of de afbeeldingen optimaliseren.
Dit probleem heeft bijna elke WordPress website. Met WP Rocket kan je bijna alle bronnen (fonts, CSS en Javascript bestanden) vertraagd laden. Dat gebeurd meestal door deze aan het einde van de pagina te laden.
Voor de stijlinformatie (CSS) is dat meestal geen optie omdat de noodzakelijk stijl ergens in een groter bestand staat. Wil je dit probleem verkleinen dan zou je per pagina de belangrijke stijlinformatie in het begin kunnen laden en de rest pas onderaan. In theorie is dat geen probleem en zou je deze code met behulp van WP Rocket kunnen plaatsen. Maar in de praktijk betekent dit, dat je de algemene stijl informatie uit je thema eerst moet ontleden.
Test dan je website met een standaard thema en schakel 1 voor 1 de plugins uit. Wordt de site plotseling sneller, dan weet je welk onderdeel de problemen veroorzaakt.
Dat WP Rocket ook voor servers functioneert die met NGINX werken, was één van de voorwaarden dat ik deze plugin wil aanraden. Is je hosting gebaseerd op NGINX, dan is het wel nodig dat je een aantal instellingen zelf in de NGINX configuratie moet plaatsen. Met de nodige kennis kan je dat zelf doen of je kan het ook aan mij vragen indien je site op mijn servers is gehost.
Nee, een gratis versie is er niet. Je kan WP Rocket wel 14 dagen testen en wanneer je tijdens deze periode niet tevreden bent, de aankoop terugdraaien.
Wanneer je WP Rocket koopt via deze knop steun je ook mijn site én kan je gebruik maken van mijn helpdesk diensten voor instelling van je plug in.
