Als internetbureau zijn wij steeds op zoek naar mogelijkheden om WordPress websites sneller te maken. De afgelopen jaren hebben wij vooral voor een combinatie van WP Super Cache, Autoptimize en soms ook Cloudflare gekozen. In het begin van dit jaar is hier verandering in gekomen. In plaats van deze twee WordPress cache plugins gebruiken wij nu nog maar één plugin: WP Rocket

In deze blogpost vertellen wij o.a. welke aanpassingen wij met WP Rocket hebben gedaan en welke stappen onze website sneller hebben gemaakt.

Maar eerst:

Waarom je altijd een WordPress cache plugin moet gebruiken

De installatie van een WordPress cache plugin zorgt in het algemeen niet alleen voor een snellere website, maar ook dat er meer bezoekers tegelijkertijd je website kunnen bezoeken. Je zal je misschien afvragen hoe dit werkt. 

Elke keer wanneer een pagina in WordPress wordt geladen, zorgt PHP code er o.a. voor dat de gegevens vanuit de MySQL database worden opgehaald. Zowel voor het uitvoeren van de PHP code als ook voor het uitvoeren van de database queries, wordt RAM geheugen en CPU gebruikt. Beide bronnen zijn maar beperkt beschikbaar op een webserver en wanneer er te veel bezoekers (of bots) tegelijk je website bezoeken, wordt deze traag of zelfs onbereikbaar!

Door het installeren van een WordPress cache plugin worden de pagina’s met de gehele HTML code opgeslagen. Voor het tonen van een HTML of statische pagina wordt namelijk veel minder RAM geheugen en CPU gebruikt, waardoor veel meer bezoekers op je site terecht kunnen.

Waarmee hebben wij onze WordPress website eerder geoptimaliseerd?

Zoals eerder genoemd, gebruiken wij al jaren WP Super Cache. Voor een aantal websites hebben wij naast deze cache plugin ook nog Autoptimize geïnstalleerd.

WP Super Cache

Deze cache plugin voor WordPress bestaat al heel lang en wordt intussen door Automattic onderhouden. De plugin heeft twee opties voor een page cache:  Simple (via PHP) en Advanced (via Apache’s mod_rewrite module). De Advanced optie heeft altijd onze voorkeur. Hierdoor worden de statische cache bestanden aangemaakt en via rewrite rules naar de browser gestuurd. Door de cache preload optie te gebruiken is er altijd een cache versie voor elke pagina beschikbaar.

Autoptimize

Met Autoptimize zorg je o.a. voor de optimalisatie van je CSS en Javascript bestanden. De plugin minimaliseert de bestanden en voegt deze samen tot 1 bestand. Dat wil niet zeggen dat voor de verschillende pagina’s er maar één bestand wordt aangemaakt. Autoptimize controleert op welke pagina welke CSS / JS bestanden worden gebruikt en maakt zo verschillende bestanden aan. Verder zijn er nog opties voor:

  • JS bestanden via de footer laden (of juist niet)
  • Kritische CSS style code inline via de header plaatsen (handmatige actie)
  • HTML broncode minimaliseren
  • LazyLoad voor afbeeldingen
  • Optimalisatie voor Google fonts
  • Verwijderen van Emoji en de versie informatie bij CSS/JS bestanden
  • Preloading van specifieke bronnen

Een aantal belangrijke website optimalisaties kan je via deze twee plugins regelen. Sommige zijn eenvoudig aan of uit te zetten en voor anderen is het nodig om eerst wat onderzoek te doen, bijvoorbeeld door een test via GTmetrix.

Optimalisaties met behulp van Cloudflare

Cloudflare is een dienst met veel verschillende functies. Je kan je DNS bij Cloudflare hosten en dan verschillende functies inschakelen, waaronder: Web application firewall, website optimalisatie, CDN/cache en nog veel meer. Een groot aantal van de functies mogen gratis worden gebruikt.

Voor websites die extra beveiliging nodig hebben of bezoekers ontvangen van buiten Europa, gebruiken wij Cloudflare. 

De gratis versie van Cloudflare werkt prima voor “normale” websites. Heb je een webshop met WooCommerce, dan kan je de gratis versie van Cloudflare niet gebruiken omdat ook belangrijke cookies door Cloudflare worden gecached en hierdoor werkt je winkelwagen niet meer. 

Voor de andere soorten websites is vooral de CDN interessant, hierbij worden de statische bestanden via de Cloudflare servers geserveerd. Dat is vaak sneller dan via de server van de website.

Wil je ook een snelle Website?

Gebruik dan voor je WordPress website, net als wij, WP Rocket. Versnel je website met maar enkele stappen. Je hoeft hiervoor geen code aan te passen.

Waarom wij zijn overgestapt naar WP Rocket

Voordat wij zijn overgestapt, was onze eigen website eigenlijk al heel snel. 

Tijdens het testen van WP Rocket op andere sites, hebben wij gezien dat de configuratie eenvoudiger was dan bij de combinatie van WP Super Cache met Autoptimize. 

Dat wij uiteindelijk zijn overgestapt heeft te maken met de volgende functies en eigenschappen.

  • Duidelijk interface voor alle instellingen – Wanneer je meer dan 1 website beheert, is een duidelijk interface erg belangrijk. Na de optimalisatie van de eerste website weet je voor een groot deel hoe het werkt, maar toch is bij een “slecht” interface de kans op fouten groter. Bij WP Rocket is elke optie duidelijk uitgelegd.
  • Veel functies en toch flexibel – Met WP Rocket kan je (bijna) alle aanpassingen doen die je website beter en sneller maken. Vergeleken met andere tools kan je de functies niet alleen aanzetten, maar heb je (indien nodig) ook nog opties om de instellingen voor de functie aan te passen. Neem als voorbeeld de bestandsoptimalisatie voor Javascript bestanden: je kan de bestanden verkleinen en samenvoegen, maar ook uitzonderingen opgeven of het laden uitstellen voor sommige bestanden. Je hebt altijd het idee dat jij de “baas” bent over elke functie die je wil gebruiken.
  • Werkt perfect met Lazy Loading – De Lazy Loading functie zit sinds versie 5.5 ook in WordPress. Tijdens het updaten van diverse websites hebben wij gemerkt dat vooral oudere WordPress themes soms wel problemen hebben met deze “nieuwe” functie in WordPress. Door deze functie via WP Rocket aan te zetten, hebben wij ook gelijk dat probleem opgelost. WP Rocket zet in dit geval de WordPress core functie uit en plaatst daarvoor eigen image tags die beter werken. 
  • Koppeling met Cloudflare – Wij gebruiken Cloudflare voor verschillende websites en een irritatie was altijd het aanzetten van de development modus of het verwijderen van cache via de Cloudflare website. Met WP Rocket heb je gelijk een koppeling die deze en andere functies mogelijk maakt.
  • Cache voor ingelogde gebruikers – WP Rocket ondersteunt helaas geen object caching, maar heeft een goed werkende cache functie voor gebruikers die je website achter een login gebruiken. Denk hierbij aan forums, leden websites of andere dynamische omgevingen. Met de cache functie voor ingelogde gebruikers kan je server veel meer leden aan.

WP Rocket screenshot met instellingen

Over welke functies beschikt WP Rocket?

WP Rocket heeft veel functies die je helpen om je website te optimaliseren. Naast de functies die je website verbeteren zijn er ook functies die de werking van WordPress aanpassen. Hieronder vind je een lijst met de functies die wij regelmatig voor onze websites gebruiken. Wil je meer weten over deze en andere functies, dan kan je hiervoor de website van WP Rocket bezoeken.

  • Cache – Page cache voor desktop en mobile, cache functie voor ingelogde gebruikers
  • Bestandsoptimalisatie – Verklein en optimaliseer CSS en Javascript bestanden
  • Lazy loading – Betere functie dan in WP Core, LazyLoad voor iframes en videos
  • JavaScript uitgesteld laden – Door de Javascript bestanden uitgesteld te laden voorkom je “render-blocking”.
  • Remove Unused CSS – Je CSS bestanden worden geoptimaliseerd zodat er alleen de nodige CSS style wordt geladen
  • Preloading cache – Op het moment dat er een wijziging heeft plaatsgevonden wordt de cache bijgewerkt
  • Preloading  links – Hierdoor staat de volgende pagina al klaar voor de bezoeker
  • Preloading fonts – Google fonts worden geladen zonder te blokkeren. Andere fonts kan je pre loaden.
  • Browser cache – Hier heb je geen omkijken naar, deze instelling wordt tijdens de installatie gelijk aangezet.
  • Addons – Koppeling met Cloudflare, Sucuri en WebP.

Database functies, CDN en Heartbeat 

De database optimaliseren wij via een eigen script dat direct op de server (in één keer) voor alle sites of applicaties wordt uitgevoerd. De andere database functies gebruiken wij momenteel niet.

Op dit moment gebruiken wij naast Cloudflare geen andere CDN. De mogelijkheid om een CDN te configureren, is een belangrijke functie voor een cache plugin. Naast een externe CDN kan je ook kiezen voor RocketCDN. Deze extra dienst kost $7,99 per maand en domein.

Het interface voor het configureren van de Heartbeat API hebben wij nog niet gebruikt, omdat de standaardinstellingen in WordPress voor ons goed werken.

Wat zijn de verbeteringen na de installatie van WP Rocket?

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:

  • JavaScript uitgesteld laden – WP Rocket gebruikt bij deze optie de “defer” attribute waardoor een browser deze bestanden zonder te blokkeren kan laden. 
  • Sommige JavaScript bestanden vertraagd uitvoeren – JavaScript functies van externe diensten zoals Clicky, Google reCAPTCHA en Analytics worden pas later uitgevoerd.
  • Fonts pre loaden – De Google fonts hebben wij eerder lokaal gehost en met WP Rocket gebruiken wij deze nu weer in de cloud. Voor icon fonts gebruiken wij de pre load optie. 
  • DNS Prefetching – Eerder hebben wij de host names van externe diensten handmatig ingevoerd. Met WP Rocket gebeurt dat nu automatisch.
  • Verbeterde Cache Preloading – WP Super cache heeft deze functie ook, maar deze is erg basic. Bij WP rocket weet je altijd wanneer er iets gebeurt en start preloading op het moment dat iets in je website is veranderd.
  • LazyLoad voor iframes en video’s – Door de LazyLoad functie worden iframes en videos pas geladen wanneer deze in zicht komen. Deze functie hadden wij eerder alleen voor afbeeldingen.
  • Maar 1 plugin voor verschillende taken – WP Rocket beschikt over functies die op sommige sites door meer dan 5 afzonderlijke plugins worden mogelijk gemaakt. Minder WordPress plugins betekent minder onderhoud en zo wordt het risico verkleind dat plugins niet meer goed werken na de update van een andere plugin.

GTmetrix resultaat voor finalwebsites

Is WP Rocket de oplossing voor elke WordPress website?

Op dit moment kunnen wij maar weinig situaties bedenken waar WP Rocket niet geschikt is als cache en optimalisatie plugin. Wanneer WP Rocket geen echte verbetering oplevert, kan je overwegen om toch een gratis cache plugin te gebruiken. Maar ook dan kan WP Rocket nog steeds ervoor zorgen dat je minder plugins gebruikt of dat je een beter interface hebt voor instellingen die je anders via je WordPress thema moet regelen.

Gebruiken wij WP Rocket ook voor de websites van klanten?

Ja, dat doen wij zeker. Wij zien flinke verbeteringen voor websites die gebruik maken van Elementor en andere page builders. Ook voor webshops met WooCommerce is WP Rocket een verbetering.

Welke WordPress cache plugins hebben wij nog getest?

De afgelopen jaren hebben wij natuurlijk ook andere WordPress cache plugins getest. De volgende 3 plugins (en 1 functie) hebben wij wel vaker geprobeerd.

NGINX FastCGI cache

Voor eenvoudige websites (die niet zo vaak veranderen) gebruiken we regelmatig de cache functie van NGINX. Dat is geen cache plugin maar een functie van onze webservers. NGINX Cache is zeer snel en belast de server op een mindere mate dat de meeste WordPress cache plugins. Helaas zijn er ook nadelen, de functie is namelijk niet zo slim en optimaliseert niet je CSS of JS bestanden. Omdat de functie best wel “statisch” werkt gebruiken we momenteel NGINX Cache niet voor webshops met WooCommerce.

Simple Cache

Zoals de naam het al zegt, de plugin is erg simpel en eenvoudig in gebruik. Installeer je de plugin, dan hoef je hem alleen in te schakelen en worden voor de webpagina’s een page cache bestand aangemaakt. Maar deze cache plugin heeft ook nog extra opties:

  • Object cache – Ondersteunt je hosting Redis of Memcached? Dan kan je via de object cache functie o.a. je backend versnellen. Ook hier zijn geen extra instellingen nodig en het werkt “out of the box”. Helaas kan je de object cache functie niet samen met de page cache functie gebruiken.
  • Pagina URL’s uitsluiten – Heb je een aantal pagina’s die je niet wil laten cachen? Deze kan je deze uitsluiten. Je kan volledige URL’s invoeren of regular expression patterns invoeren.
  • Gzip compressie – De meeste hosting providers bieden deze compressie via de Apache of NGINX webserver aan. Is dat niet het geval, dan kan je Gzip compressie alsnog aanzetten.

Wij vinden deze plugin ideaal voor eenvoudige website die maar weinig opties nodig hebben. Simple Cache is een van de weinige WordPress cache plugins die je vrij eenvoudig voor NGINX kan configureren.

Swift Performance

Deze cache en optimalisatie plugin is opgebouwd zoals WP Rocket. Met Swift kan je ook in weinig stappen je website sneller maken. Via een wizard kan je de verschillende modules eenvoudig configureren. Daarnaast kan je voor elke functie ook geavanceerde instellingen kiezen. Naast cache en optimalisatie functies beschikt Swift over een aantal functies die je in andere cache plugins niet snel zal vinden.

  • Image optimizer – Deze functie is zeker niet uniek, maar meestal moet je deze als extra plugin installeren. Bij Swift worden je afbeeldingen geoptimaliseerd (lossless compressie) zonder daarbij een extra dienst te gebruiken. Dat is zeker voordelig wanneer je veel afbeeldingen binnen je website gebruikt.
  • Plugin organizer – Via deze functie kan je regels bepalen of plugins voor bepaalde pagina’s en functies moeten worden gebruikt of niet.
  • Use Presets van voorinstellingen – Via de wizard functie heb je de keuze uit 4 verschillende opties. Naast manueel, import en automatische configuratie heb je ook de optie “Presets”. Hier heb je de keuze uit 5 verschillende configuraties. Ga je voor een van deze instellingen, dan hoef je volgens de aanbieder niets meer te doen.

De eerste keer dat wij Swift Performance (Pro) hebben gebruikt, waren wij niet zo overtuigd van de resulterende snelheid. Je hebt heel veel opties zonder een goede documentatie en van een aantal opties kan je beter afblijven (is onze mening). 

Swift Performance is een functionele WordPress cache plugin, maar vergeleken met WP Rocket is de plugin minder geschikt voor de “normale” gebruiker. Je kan Swift voor je hosting met NGINX gebruiken, maar dan moet je eerst alle Apache regels “vertalen” voor gebruik in de NGINX configuratie.

W3 Total Cache 

Jaren geleden waren er naast WP Super Cache nog niet zoveel WordPress cache plugins. Maar W3 Total Cache bestond toen ook al. Qua functies heeft de plugin veel meer opties dan WP Super Cache en toch was W3 Total Cache nooit onze eerste keuze. 

De plugin heeft verschillende cache modules. Naast page cache zijn er ook opties voor object cache, database cache, fragment cache, Opcode cache en browser cache. Voor de verschillende cache types kan je de meest verschillende instellingen kiezen.

Om je website te optimaliseren zijn er opties voor het minimaliseren van CSS en Javascript bestanden en kun je Lazy Loading voor afbeeldingen inschakelen.

In de WordPress community wordt W3 Total Cache regelmatig aanbevolen. Dat verklaart waarom er meer dan 1 miljoen websites deze plugin gebruiken. De websites met W3 Total Cache die wij hebben gezien, waren meestal niet goed geconfigureerd en ook niet bijzonder snel. 

W3 Total Cache is zeker een goede cache plugin voor website eigenaars die geavanceerde cache functies willen gebruiken, zoals fragment, database of object caching. De rest kan beter iets anders kiezen.

Vraag en antwoord voor (toekomstige) WP Rocket gebruikers

Hieronder een aantal vragen en antwoorden die wij op social media en forums vaker tegenkomen.

Wat heb ik naast WP Rocket nog meer nodig om mijn website te optimaliseren?

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.

Wat kan ik doen wanneer bron-bestanden de weergave blokkeren?

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.

Wil je de blokkerende CSS bronnen vertraagd laden? Bespreek deze aanpassing eerst met je website bouwer.

Ik gebruik al WP Rocket, maar ik zie geen (groot) verschil. Wat doe ik fout?

Werkt WP Rocket niet zoals verwacht? Dan kan dit verschillende oorzaken hebben:

  • Je hosting is traag – WP Rocket kan je website nog zo goed optimaliseren, maar de plugin zal je hosting niet sneller maken.
  • Je gebruikt te veel plugins – Wij hebben sites gezien die naast Elementor ook nog verschillende uitbreidingen voor Elementor gebruiken. Elke uitbreiding heeft zijn eigen JS/CSS bestanden die moeten worden geladen en dat kost laadtijd.
  • De afbeeldingen zijn te groot – Met te groot bedoelen wij niet de compressie, maar de afmetingen. Stel je voor je gebruikt een foto dat een maximale breedte gebruikt van 300 pixel, maar je hebt een bestand geüpload dat vele malen groter is. Zo’n fotobestand is dan veel te zwaar en vertraagt je website.
  • Je thema of plugins vertragen je website – Niet alle thema of plugin ontwikkelaars werken volgens de “WordPress regels”. Dat wil zeggen dat een thema of plugin geen of weinig rekening houd met het werk van anderen of functies gebruikt die tijd nodig hebben wanneer deze steeds opnieuw worden uitgevoerd.
  • Je gebruikt (te veel) externe tools – Gebruik jij op je website een live chat tool, Facebook widgets of Google advertenties? Dan is het goed mogelijk dat je website hierdoor minder snel is. De snelheid van deze externe tools heb je namelijk niet onder controle. Gebruik zo weinig mogelijk externe tools en diensten. Heb je maar weinig tijd om mensen via live chat te helpen? Verwijder deze tool dan als eerste.

Hoe kom ik erachter of mijn thema en/of plugins de problemen veroorzaken?

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.

Werkt WP Rocket ook met de web server software NGINX?

Dat WP Rocket ook voor servers functioneert die met NGINX werken, was één van de voorwaarden dat wij deze plugin gingen gebruiken. 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 moet het aan je hosting provider vragen.

Ondersteunt WP Rocket ook een object cache zoals Memcached of Redis?

Helaas is er (nog) geen directe ondersteuning voor een object cache in WP Rocket. Je kan wel samen met WP Rocket een ander object cache plugin installeren zoals Redis Object Cache.

Is er ook een gratis versie van WP Rocket?

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.

Gepubliceerd in: Website verbeteren