Zo configureer je de instellingen van W3 Total Cache voor je WordPress website

Met meer dan 1 miljoen actieve installaties is W3 Total Cache een van de populairste plugins voor caching en optimalisatie binnen de WordPress bibliotheek. Anders dan andere WordPress optimalisatieplugins, die vaak een vrij eenvoudige en minimalistische interface hebben, geeft W3 Total Cache (W3TC) je volledige controle over de instellingen voor caching binnen je WordPress website.

Doordat de instellingen van W3TC zo gedetailleerd zijn is het een perfecte plugin voor developers of ervaren gebruikers die maximale controle over hun WordPress website zoeken. In dit artikel zullen we de instellingen van W3 Total Cache onder de loep nemen en doen we aanbevelingen voor de instellingen waardoor de prestaties van je WordPress website nog beter worden.

Als je klant bent bij Kinsta zul je bepaalde instellingen bij W3 Total Cache niet hoeven te gebruiken omdat onze hostingstack standaard al veel optimalisaties verzorgt.

Bijvoorbeeld, als onderdeel van onze Cloudflare integratie, slaat Edge Caching je Kinsta site/pagina cache op in een van Cloudflare’s wereldwijde netwerk van 260+ datacenters.

Edge Caching is gratis inbegrepen bij alle Kinsta pakketten, vereist geen aparte plugin, en vermindert de tijd die nodig is om gecachete WordPress HTML te leveren met gemiddeld meer dan 50%!

Zo installeer je W3 Total Cache

Als je W3 Total Cache nog niet hebt geïnstalleerd op je website, kun je dat direct doen vanuit je WordPress dashboard. Zoek gewoon op “W3 Total Cache” binnen de pagina “Plugin toevoegen” en klik op installeren.

Er is ook een Pro versie van W3 Total Cache, die aangeschaft kan worden via de website van BoldGrid. De Pro versie biedt enkele extra features zoals REST API caching, Google Maps caching en extra uitbreidingen. In dit artikel zullen we de gratis versie uit de WordPress plugin bibliotheek gebruiken.

Waar worden de instellingen voor W3 Total Cache opgeslagen?

Na het installeren van W3 Total Cache zul je een tabblad “Performance” zien binnen de zijbalk van je WordPress admindashboard. Wanneer je klikt op het tabblad “Performance” zul je allerlei submenu’s te zien krijgen, zoals “General Settings”, “Page Cache”, “Minify” en nog veel meer.

Je kan de instellingen voor W3 Total Cache ook vinden via het tabblad “Performance” in je WordPress admintoolbar.

Zo leeg je W3 Total Cache

Voordat we het gaan hebben over het instellen van W3 Total Cache, zullen we eerst kijken hoe je je cache kan legen, oftewel purgen. Wanneer je je muis boven het tabblad “Performance” in de admintoolbar laat zweven, zul je twee opties zien voor het legen van je cache.

1. Purge All Caches – leeg alle caches in één keer.
2. Purge Modules – leeg een individuele cache (bijv. minified assets, page cache, object cache, etc.).

Algemene instellingen van W3 Total Cache

Nu gaan we verder kijken naar het menu “General Settings” van W3 Total Cache om enkele basisinstellingen goed te zetten.

Page Cache

Standaard wordt elk individueel verzoek aan je WordPress website in realtime verwerkt. Voor bepaalde typen websites, zoals webshops of forums is deze dynamische rendering ideaal. Maar voor bijvoorbeeld blogs, nieuwssites en andere sites zonder dynamische content, kan het toevoegen van een laag paginacaching helpen om de prestaties te verbeteren en het serververbruik te verminderen.

Als je site wordt gehost door Kinsta, hoef je niet naar paginacaching te kijken. We hebben een op hoge prestaties afgestemde configuratie die op serverniveau de caching regelt, waarmee de pagina’s van je website automatisch gecachet worden in statische HTML bestanden. Biedt je host geen paginacaching, dan kun je het hier via de W3 Total Cache plugin inschakelen.

Minify

Het minify-en oftewel verkleinen van je HTML, CSS en JavaScript assets kan de algehele grootte van je pagina’s verminderen, door onnodige witruimte te verwijderen. Voor de meeste WordPress websites is het genoeg om de “Minify” feature van W3 Total Cache in te schakelen met de optie “Auto” binnen de “Minify Mode”.

In sommige gevallen kan dit minifying van assets ervoor zorgen dat CSS of JavaScript code niet meer goed uitgevoerd wordt, waardoor je zichtbare fouten aan de voorkant van je website ziet. Wanneer je vreemde problemen op je website ziet na het verkleinen van assets, raden we je aan om met een developer te werken aan het identificeren van de bestanden die problemen veroorzaken. Nadat je weet waar de problemen vandaan komen kun je vervolgens de “Minify” feature in de “Manual” modus gebruiken, waarbij je specifieke bestanden kunt omzeilen.

Opcode Cache

WordPress is een dynamisch CMS, wat betekent dat PHP workers constant code uitvoeren op de achtergrond. Opcode cache maakt je website sneller door gecompileerde PHP code op te slaan, waardoor latere verzoeken die dezelfde code gebruiken worden versneld.

Wanneer je site wordt gehost door Kinsta, hoef je geen opcode caching in te schakelen via W3 Total Cache. We activeren standaard OPcache, een opcode cache – in alle live omgevingen. OPcache is uitgeschakeld in testomgevingen zodat gecompileerde PHP code niet gecachet wordt. Dit is namelijk onhandig tijdens het ontwikkelen van sites en debugging.

Wanneer jouw host geen opcode caching biedt, raden we je aan dit in te schakelen in W3 Total Cache. Wees je ervan bewust dat opcode cache alleen beschikbaar is binnen de Pro versie van W3TC.

Database Cache

De database van W3TC slaat de resultaten van MySQL databasequery’s op. Dat klinkt misschien handig, maar we raden je aan om deze optie uit te laten staan en in plaats daarvan een object cache te gebruiken.

We hebben gemerkt dat in sommige gevallen databasecache kan resulteren in erg hoog CPU verbruik. Je bespaart door het opslaan van databasequery’s wellicht CPU kracht, maar dit wordt vaak tenietgedaan doordat deze feature zelf óók CPU kracht vraagt.

Object Cache

Binnen de context van WordPress, bewaart een objectcache de resultaten van voltooide databasequery’s. WordPress heeft een ingebouwde objectcache, maar die bewaart de data van slechts één pagina. Hierdoor worden pagina’s efficiënter gerenderd, omdat het laden van een pagina geen CPU kracht kost wanneer deze wordt uitgevoerd aan de hand van al eerder uitgevoerde (en dus identieke) databasequery’s.

Alhoewel deze ingebouwde objectcache van WordPress zeker voordelen biedt wat prestaties betreft, is een objectcache die data bewaart van verschillende pagina’s natuurlijk nog beter. De “Object Cache” feature van W3TC voegt een custom cachingscript toe aan /wp-content, en zorgt ervoor dat de objectcache van WordPress voortaan data bewaart van verschillende pageloads.

We raden je aan om de objectcache van W3TC in te schakelen op je WordPress website zodat verzoeken die databasequery’s gebruiken worden versneld. Dit is niet nodig als je website wordt gehost door Kinsta.

Wanneer je site namelijk door Kinsta wordt gehost, bieden we een high-performance layer aan voor objectcaching die draait via onze Redis add-on. Redis is een open-source in-memory datastructuur die vaak gebruikt wordt voor toepassingen die een database of messagebroker gebruiken.

Aangezien Redis de data cachet in de RAM, kan WordPress de gegevens uit de cache laden uit een permanent object cache die veel sneller is dan traditionele objectcaches.

Browser Cache

Browsercaching kan ervoor zorgen dat je WordPress website veel sneller wordt, door statische assets zoals CSS, JavaScript, afbeeldingen en lettertypen lokaal op te slaan. Browsercaching gebruikt een vervaldatum om te bepalen hoe lang bestanden in de cache blijven. Tegenwoordig gebruiken de meeste developers een vervaltijd van één jaar voor statische assets.

Bij websites die door Kinsta gehost worden, wordt een cacheperiode van 1 jaar ingesteld voor statische bestanden. Dit kun je controleren door de cache-control header te bekijken van een statisch bestand dat door Kinsta gehost wordt. Als jouw webhost geen “far-future expiry time” oplegt voor browsercaching, kan je de “Browser Cache” feature van W3 Total Cache inschakelen en een vervaltijd instellen.

CDN (Content Delivery Network)

Gebruik je een CDN, oftewel Content Delivery Network, om statische bestanden te offloaden naar datacenters wereldwijd, dan kan je W3 Total Cache de juiste CDN hostname laten toevoegen aan de URL’s van je themabestanden, mediabestanden, CSS, JS en nog veel meer.

Wordt je site gehost door Kinsta, dan raden we je aan om het Kinsta CDN te gebruiken, een content delivery network dat hoge prestaties biedt en draait op Cloudflare. Wanneer het Kinsta CDN is ingeschakeld, zullen de URL’s van statische bestanden automatisch worden herschreven zodat ze vanaf het Kinsta CDN laden.

Ook krijg je toegang tot andere ingebouwde features, waaronder de codeminificatiefeature waarmee Kinsta klanten met een klik op de knop automatisch CSS en JavaScript minificatie rechtstreeks in het MyKinsta dashboard kunnen inschakelen.

Gebruik je liever een andere CDN provider of wordt je site niet gehost door Kinsta, dan kun je de “CDN” feature van W3 Total Cache gebruiken om je CDN URL toe te voegen.

Reverse Proxy

Een reverse proxy bevindt zich tussen je webserver en WordPress, en kan gebruikt worden om op basis van bepaalde voorwaarden veranderingen aan te brengen in inkomende verzoeken. W3TC ondersteunt Varnish, een populaire “HTTP accelerator” voor het cachen en laden van data, dat als doel heeft de back-end te ontlasten.

Om Varnish te kunnen gebruiken, moet je host eerst het Varnish pakket installeren. Bij Kinsta kan je de reverse proxy niet inschakelen, aangezien onze infrastructuur niet is ontworpen om met Varnish te werken.

User Experience

De “User Experience” optimalisatie van W3TC maakt lazy loading, het uitschakelen van emoji’s, en het uitschakelen van het wp-embed.js script mogelijk. We raden je aan om lazyloading in the schakelen voor je WordPress website om het laden van pagina’s sneller te maken. Als je nog geen lazyloading via een plugin of browsers gebruikt, raden we je aan om dit via W3 Total Cache in te schakelen.

De meeste besturingssystemen bieden tegenwoordig ingebouwde ondersteuning voor emoji’s. Gebruik je niet heel veel emoji’s, dan kun je dus het emojiscript van WordPress uitschakelen. Door W3TC te gebruiken voor het verwijderen van wp-emoji-release.min.js zul je ongeveer 10 KB van pagina’s afhalen én doe je een HTTP verzoek minder.

Ook manier kun je ook wp-embed.js uitschakelen met W3 Total Cache als je geen WordPress artikelen insluit. Het uitschakelen van dit script heeft geen effect op de oEmbed functie voor het insluiten van YouTube video’s, SoundCloud streams, etc.

Miscellaneous

W3 Total Cache heeft een aantal overige (Miscellaneous) instellingen voor verdere aanpassingen. Als je een Google Page Speed dashboardwidget in WordPress wilt weergeven, kan je je Page Speed API sleutel invoeren. Er is ook een mogelijkheid voor het weergeven van je Page Speed beoordeling in het menu van elke pagina van je WordPress website.

We raden aan andere instellingen, zoals “NGINX server configuration file path”, “enable file locking” en “optimize disk enhanced page and minify disk caching for NFS” te laten staan op de standaardinstellingen, tenzij je een specifieke reden hebt iets te veranderen.

Debug

Voor het oplossen van problemen op je website beschikt W3 Total Cache over een handig “Debug” menu waarmee je specifieke cachinglayers en optimalisatie-instellingen kan uitschakelen. Zie je bijvoorbeeld een visuele fout op je site, dan kan je de debugmodus inschakelen voor de “Minify” optie, waardoor er HTML comments worden toegevoegd aan de broncode van je pagina, om het makkelijker te maken fouten op te sporen.

Aangezien de debugmodus meer vergt van je server, raden we je aan het alleen te gebruiken binnen een testomgeving of tijdens periodes met weinig verkeer naar je website. En vergeet natuurlijk niet de debugmodus weer uit te zetten nadat je alle problemen hebt opgelost!

Import/Export instellingen

Na het configureren van alle instellingen, kun je de “Import/Export” functie van W3TC gebruiken om een back-up van je instellingen te maken. Zoals je gezien hebt heeft W3 Total Cache nogal veel instellingen, dus is het erg handig dit allemaal ergens op te kunnen slaan. Daarnaast kun je hiermee eenvoudig je voorkeursinstellingen gebruiken voor andere websites, zonder alles weer handmatig af te moeten gaan.

Instellingen van W3 Total Cache — Page Cache

We gaan nu gedetailleerder kijken naar de instellingen voor “Page Cache” van W3 Total Cache. Zoals gezegd hoef je niet aan de slag met paginacaching als je gehost wordt bij Kinsta, dan kun je dit stuk dus gewoon overslaan.

• Cache Front Page – Bij de meeste websites krijgt de frontpage het meeste verkeer. We raden je daarom aan deze instelling in te schakelen.
• Cache Feeds – WordPress genereert diverse RSS feeds, waarmee externe apps en diensten zoals Feedburner de content van je website kunnen weergeven binnen hun producten. Alhoewel RSS tegenwoordig al minder populair is dan eerder, raden we je nog steeds aan deze instelling in te schakelen.
• Cache SSL (HTTPS Requests) – Als je webserver geen HTTPS verplicht voor alle inkomende verzoeken, kan het helpen om deze instelling in te schakelen. Gebruik je al HTTPS op het niveau van de webserver, dan hoef je dit niet in te schakelen.
• Cache URIs with Query String Variables – Een querystring is een parameter die toegevoegd wordt aan het einde van een URL (bijv. /?version=123). Querystrings worden vaak gebruikt om specifieke data uit je WordPress database op te vragen en weer te geven. In het algemeen is het doel van een querystring om een unieke versie van een pagina op te vragen, dus we raden je aan om deze instelling uit te laten staan, tenzij je specifieke querystrings hebt die je in de cache wilt opslaan.
• Cache 404 (Not Found) Pages – Standaard heeft W3TC deze optie uitgeschakeld. Dat komt waarschijnlijk door het cachinggedrag dat ontstaat wanneer je de “Disk Enhanced” als methode van paginacaching gebruikt. In dat geval geven 404 pagina’s een 200 responscode Dit terwijl 404 pagina’s idealiter gewoon een 404 responscode terug moeten sturen. We raden je dus aan om deze instelling eerst te testen met jouw cachinginstellingen om te zien of alles naar wens werkt.
• Don’t Cache Pages for Logged In Users – We raden je aan om deze optie in te schakelen. Ingelogde gebruikers werken meestal aan het bijwerken van pagina’s. Wanneer caching voor hen is ingeschakeld, moeten ze eerst de cache legen voordat ze hun eigen updates kunnen zien.
• Don’t Cache Pages for Certain User Roles – Deze optie maakt het mogelijk de cache te omzeilen voor bepaalde WordPress gebruikersrollen. Als je de optie “don’t cache pages for logged in users” al hebt ingeschakeld, zal deze instellingen verder geen effect hebben.

Aliases

De “Aliases” functie van W3 Total Cache maakt het mogelijk om identieke content te cachen die beschikbaar is op verschillende domeinen. We raden je af om deze feature in te schakelen. Wanneer je WordPress site te vinden is op verschillende domeinen (denk aan domein.com en www.domein.com), kan je beter een 301 redirectregel instellen om verzoeken door te sturen naar je primaire domein, om te voorkomen dat je van Google en andere zoekmachines minpunten krijgt voor dubbele content.

Cache Preload

De “Cache Preload” feature doorzoekt je sitemap en maakt verzoeken aan voor alle pagina’s op je site om de paginacache te preloaden. Voor de meeste sites is het af te raden deze cachepreload te gebruiken, omdat het kan zorgen voor pieken in de belasting van je server, waarmee je direct eventuele voordelen teniet zou doen.

Wil je toch cachepreloading inschakelen, dan vraagt W3TC je om een sitemap URL, update-interval, en pagina’s per interval. Zet hierbij de “update interval” en “pages per interval” niet te hoog, om de kans om CPU pieken zoveel mogelijk te beperken.

Purge Policy

De “Purge Policy” van W3 Total Cache laat je instellen welke pagina’s en feeds automatisch moeten worden geleegd nadat er artikelen zijn gepubliceerd of bewerkt. Voor de meeste websites zouden de standaardinstellingen (front page, posts page en blog feed) goed moeten werken. Wil je extra pagina’s toevoegen aan deze policy, dan kun je verschillende opties instellen.

REST API

De REST API van WordPress maakt het mogelijk query’s voor JSON data uit te voeren. De REST API wordt gebruikt door allerlei plugins, en is van cruciaal belang voor headless WordPress set-ups. Afhankelijk van je precieze gebruik van de REST API, kan het een goed idee zijn om je queryresultaten te cachen. REST API caching valt in de categorie “als je het nodig hebt dan weet je dat”, dus als je twijfelt kun je het waarschijnlijk beter laten staan op “Don’t cache”.

Advanced

In de “Advanced” paginacachingsopties van W3TC kan je instellingen verder aanpassen, zoals “accepted query strings”, “rejected user agents”, “granular cache bypass” en nog veel meer. Als je bijvoorbeeld W3 Total Cache wilt instellen om nooit artikelen van een bepaalde categorie of tag te cachen, dan kun je dat hier doen.

Aangezien deze instellingen nogal variëren per site, kunnen we hier niet echt nuttige aanbevelingen voor doen. Dat gezegd hebbende, mocht je op zoek zijn naar een specifieke instelling van je paginacaching, dan kun je het waarschijnlijk onder deze geavanceerde instellingen vinden.

Instellingen van W3 Total Cache — Minify

Tijd om de “Minify” instellingen van W3 Total Cache verder te bekijken.

• Rewrite URL Structure – Deze instelling verandert de URL structuur van verkleinde assets. We raden je aan deze instelling ingeschakeld te houden zodat je URL’s er beter uit zien.
• Disable Minify for Logged In Users – Als je problemen aan het oplossen bent, kan het handig zijn om verkleining uit te schakelen voor ingelogde gebruikers. In alle andere gevallen kun je deze optie beter uit laten staan.

HTML & XML

In het gedeelte “HTML & XML” kan je de HTML minification-instellingen aanpassen.

• Inline CSS minification – We raden je aan deze optie in te schakelen om witruimte bij inline CSS te minimaliseren.
• Inline JS minification – We raden je aan om deze optie in te schakelen om witruimte bij inline JavaScript te minimaliseren. In sommige gevallen kan JS minification een fout in je code opleveren. Gebeurt dat bij jouw site, schakel deze optie dan eenvoudigweg uit.
• Don’t minify feeds – We raden je aan deze optie uit te houden. Feeds worden alleen gebruikt door RSS lezers en dergelijke diensten, dus het minimaliseren van deze feeds is niet echt nodig.
• Line break removal – Deze optie staat standaard uit, en we raden je aan om dat zo te houden, om ervoor te zorgen dat je website goed weergegeven wordt.

JS

In de sectie “JS” kan je JavaScript minification-instellingen aanpassen.

• Operations in Areas – Deze optie maakt het mogelijk om het “embed type” te selecteren voor minified JavaScript. Voor JS bestanden voor </head> en na <body> kan je kiezen uit “blocking”, “non-blocking”, “non-blocking using async”, en “non-blocking using defer”. Alhoewel non-blocking loading methodes meestal voor betere prestaties zorgen, zijn ze niet altijd volledig compatibel met alle JavaScript code. Daarnaast hebben “async” en “defer” erg verschillende use-cases. We raden je daarom aan deze instelling op de standaard “blocking” methode te laten staan, tenzij je goed bekend bent met de eigenaardigheden van non-blocking JavaScript.
• Minify or Combine Only – Hier kan je kiezen uit twee verschillende manieren voor het optimaliseren van JavaScript. Wanneer “Minify” is geselecteerd, zullen al je JS bestanden worden gecombineerd en verkleind. Selecteer je “Combine Only”, dan worden de gecombineerde bestanden niet nog verkleind. Heb je problemen bij het minimaliseren en wil je geen debugging uitvoeren om de oorzaak te vinden, dan kun je “Combine Only” kiezen om het probleem waarschijnlijk op te lossen.
• HTTP/2 Push – Als je server HTTP/2 Server Push ondersteunt kan deze optie ervoor helpen dat de laadtijden van je pagina’s worden verkort. HTTP/2 Server Push pusht bestanden naar bezoekers voordat ze aangevraagd worden. We raden je aan om dit eerst goed te testen voor je het binnen een productieomgeving gebruikt, omdat Server Push nogal eens misbruikt wordt. Zo is het suboptimaal voor grotere JavaScript bestanden, en wil je eerst controleren dat de voordelen opwegen tegen het laden van JS bestanden direct vanuit de browsercache van bezoekers.

CSS

In de sectie “CSS” kan je CSS minification-instellingen aanpassen.

• Combine Only – Anders dan bij de JavaScript bestanden, geven CSS bestanden meestal geen problemen bij het verkleinen. Daarom zul je meestal “Combine Only” uit kunnen laten staan.
• Preserved Comment Removal – Deze instelling verwijdert opmerkingen uit CSS bestanden. We raden je aan dit in te schakelen, omdat zo de bestanden nog weer iets kleiner worden.
• Line Break Removal – Deze instelling verwijdert regeleinden uit je CSS bestanden. We raden je aan om ook deze optie in te schakelen. Heb je problemen bij de weergave van je site nadat je “Line Break Removal” hebt ingeschakeld, zet het dan gewoon weer uit.

Advanced

Het deel “Advanced” bevat enkele extra instellingen voor het aanpassen van de minimalisatie.

• Update External Files Every – W3TC maakt het mogelijk in te stellen hoeveel tijd er moet zitten tussen updates van CSS en JS bestanden. Met de standaardinstellingen van 86400 seconden, zullen je bestanden elke 24 uur worden gedownload en vervolgens geminimaliseerd. Maar als je website minder vaak verandert, kan je gerust een langere periode instellen.
• Garbage Collection Interval – Deze instelling bepaalt hoe vaak de cache data wordt verwijderd. De standaardinstelling is elke 24 uur. Als je website beperkte opslagruimte heeft, dan raden we je aan deze tijd te verkorten.

De overige velden onder “Advanced” bieden ruimte om assetbestanden in te vullen die onder geen beding verkleind moeten worden. Er is ook een veld “Rejected User Agents” waarmee niet-verkleinde bestanden aan bepaalde user agents geleverd kunnen worden. Als laatste kan je externe bestanden toevoegen die in het minimalisatieproces van W3 Total Cache mee moeten worden genomen.

Instellingen van W3 Total Cache — Object Cache

Het volgende onderdeel is de instellingen voor Object Cache. Voor de meeste websites zullen de standaardinstellingen prima werken, maar we zullen ze toch even kort bespreken.

• Default Lifetime of Cache Objects – De vervaltijd voor onveranderde items in de cache. Een langere periode betekent een grotere objectcache. Maak je je zorgen over de opslagruimte op je server, dan raden we je aan dit op de standaardwaarde te laten staan, of deze verder te verlagen.
• Garbage Collection Interval – Deze instelling bepaalt hoe vaak de cachedata wordt verwijderd. De standaardwaarde van 3600 seconden (oftewel een uur) werkt meestal prima.
• Global Groups – Met deze instelling kun je gedeelde cachinggroepen instellen voor verschillende sites binnen een Multisite netwerk. We raden je aan dit op de standaardwaarde te laten staan, tenzij je een specifieke reden hebt dit te veranderen.
• Non-Persistent Groups – Deze instelling selecteert welke objectgroepen nooit gecachet moeten worden. Ook hierbij raden we weer aan alles op de standaardinstellingen te laten staan.
• Enable Caching for wp-admin Requests – Standaard is deze optie uitgeschakeld, en we raden je ook niet aan dit in te schakelen, omdat er onverwachte fouten kunnen optreden. Daarnaast zullen de meeste bezoekers van WordPress websites nooit met het wp-admin dashboard te maken hebben.

Instellingen van W3 Total Cache — Browser Cache

De meeste WordPress hosts, waaronder Kinsta, implementeren goede browsercachingheaders op het niveau van de webserver. Doet jouw host dat niet, of wil het het cachinggedrag van de browser verder aanpassen, dan kun je dat zelf doen via W3 Total Cache.

In de “Browser Cache” instellingen zijn de standaardinstellingen voor “General”, “CSS & JS”, “HTML & XML” en “Media & Other Files” meer dan genoeg voor de meeste WordPress sites. Aangezien er zoveel instellingen op deze pagina staan, raden we je aan om te overleggen met een developer voordat je veranderingen gaat maken aan de browsercaching. Met dat in je achterhoofd, zijn er wel een paar belangrijke instellingen waar je op kunt letten.

• Expires Headers Lifetime – Het configureren van een lange “expires headers lifetime” maakt browsercaching aanzienlijk efficiënter. Bij Kinsta leggen we een levensduur van 1 jaar op voor statische assets zoals CSS, JS, afbeeldingen en lettertypen. Gebruik je W3TC om je browsercaching in te stellen, zet deze waarde dan op 31536000 seconden (oftewel een jaar).
• Cache Control Policy – Om ervoor te zorgen dat je statische assets gecachet kunnen worden door browsers, moet je de “cache control policy” op “public, max_age=EXPIRES SECONDS” zetten.
• Enable HTTP (gzip) Compression – GZIP compressie verkleint HTML bestanden en assets aanzienlijk, voordat ze naar bezoekers worden gestuurd, dus zorg dat deze optie ingeschakeld is als de serverconfiguratie van je host GZIP ondersteunt. Wordt je site gehost op Kinsta, dan hoef je GZIP compressie niet in te schakelen via W3TC, aangezien we het standaard al hebben ingeschakeld.
• Remove query strings from static resources – Een querystring is een aantal extra tekens die toegevoegd wordt aan het einde van een URL om requestparameters mee te sturen, of een webserver te verplichten een nieuwe asset te leveren. Querystrings beginnen met ?, en de meeste webservers zijn zo geconfigureerd dat ze de cache omzeilen bij verzoeken met een querystring. Het verwijderen van querystrings van paginarequests is handig voor het verminderen van de belasting op de server, omdat deze verzoeken PHP gebruiken om pagina’s weer te laten geven. We raden je af om querystrings te verwijderen van statische resources via W3 Total Cache, aangezien deze strings ervoor zorgen dat de laatste versie van je CSS en JS bestanden wordt verzonden naar je bezoekers.

De instellingenpagina voor “Browser Cache” bevat nog allerlei instellingen die met de beveiligingsheaders te maken hebben, zoals Content Security Policy (CSP) en X-XSS Protection. We raden je aan om altijd met een goede developer te werken die deze instellingen goed begrijpt en door kan nemen, omdat een verkeerde configuratie de gebruikerservaring van je site kan verslechteren. Als je bijvoorbeeld de HSTS header inschakelt zonder een goed SSL certificaat en HTTPS configuratie, dan kan je site ontoegankelijk worden voor bezoekers.

Instellingen van W3 Total Cache — User Agent Groups

De feature “User Agents Groups” van W3 Total Cache is erg handig als je verkeer wil redirecten op basis van het gebruikte apparaat van de bezoeker. Zo kun je bijvoorbeeld een ander thema gebruiken wanneer een bezoeker vanaf een mobiele telefoon naar je website gaat. Ook kun je zo gebruikers doorsturen naar een compleet andere site als je mobiele site op een uniek subdomein zit.

In deze tijd van responsief webdesign, zien we weinig usecases voor deze feature. De best practice is tegenwoordig om je website vanaf het begin volledig responsief te maken.

Instellingen van W3 Total Cache — Referrer Groups

Een HTTP referrer is een optionele HTTP header die informatie geeft over waar een verzoek vandaan komt. Klikt een bezoeker bijvoorbeeld op je site vanuit Google Search, dan zou de HTTP referrer google.com zijn.

In W3 Total Cache kan je je eigen cachinggedrag specificeren op basis van de HTTP referrer van een verzoek, via de “Referrer Groups”. Zo kan je een referrer group maken die bestaat uit zoekmachines, en bepaald caching gedrag instellen voor verzoek die van dat soort domeinen komen.

Net als bij de “User Agent Group” waar we het hierboven over hadden, kan je ook op basis van een “Referrer Group” een verzoek redirecten naar een ander domein. De meeste WordPress websites hebben geen voordeel van referrer groups, dus we raden je aan deze optie links te laten liggen.

Instellingen van W3 Total Cache — Cookie Groups

De laatste caching group die W3 Total Cache ondersteunt heet “Cookie Groups”. Deze feature maakt het mogelijk om unieke “caching buckets” aan te maken en gedrag te baseren op de cookies van een verzoek. Net als bij de eerder genoemde “User Agent Groups” en “Referrer Groups”, hebben de meeste websites geen custom cookie-based caching nodig. Mocht je er toch naar op zoek zijn, dan raden we je aan om een goede developer in de arm te nemen die het voor je regelt.

Instellingen van W3 Total Cache — CDN

Tijd om door te gaan met de CDN instellingen van W3 Total Cache.

• Host Attachments – Door dit in te schakelen maak je het mogelijk om items uit je WordPress mediabibliotheek te leveren vanuit je CDN.
• Host wp-includes/ Files – Schakel deze optie in om bestanden uit je wp-includes map te leveren vanuit je CDN.
• Host Theme Files – In te schakelen als je je themabestanden via je CDN wil leveren.
• Host Minified CSS and JS Files – Schakel deze optie in om de CSS en JS bestanden die W3TC heeft verkleind te leveren vanuit je CDN.
• Host Custom Files – Als je bestanden hebt die niet in je themamap of mediabibliotheek zitten, kan je hier de bestandspaden toevoegen aan W3TC zodat ook die geleverd worden vanuit je CDN.
• Add Canonical Header – Een rel=”canonical” tag helpt zoekmachines om de originele bron of URL te identificeren. Aangezien CDN’s vaak een ander domein gebruiken, zorgt een canonical tag ervoor dat zoekmachines weten wat de originele locatie van het bestand waren. Je kan deze instelling gerust uit laten staan, omdat moderne zoekmachines slim genoeg zijn om CDN’s te identificeren, zonder dat je SEO ranking eronder lijdt.

Advanced

• Only Purge CDN Manually – We raden je aan om deze optie uit te schakelen zodat W3TC cachepurges automatisch afhandelt.
• Disable CDN on SSL Pages – Hou ook deze optie uitgeschakeld. Gebruik je een CDN, dan kun je die het beste actief hebben op zowel je HTTP als HTTPS pagina’s.
• Use CDN Links for Media Library on Admin Pages – We raden je af deze optie in te schakelen omdat het alle URL’s uit je mediabibliotheek zal herschrijven.
• Add CORS Header – Hou deze instelling ingeschakeld zodat je CDN assets ook op andere domeinen weergegeven kunnen worden.
• Disable CDN for the Following Roles – Deze optie maakt het mogelijk om het CDN uit te schakelen voor bepaalde WordPress gebruikersrollen. In de meeste gevallen kun je deze optie het beste uit laten staan.
• wp-includes File Types to Upload – Dit veld specificeert de bestandsformats in de wp-includes map die vanuit je CDN geleverd zullen worden. De standaardlijst met formats is meer dan genoeg voor de meeste sites. Mocht je bijzondere bestanden hebben in je wp-includes map, voeg dan hier de benodigde formats toe.
• Theme File Types to Upload – Dit veld specificeert de bestandsformat in je WordPress themamap die vanuit je CDN geleverd zullen worden. Ook deze standaardlijst bevat alle populaire formats voor assets, afbeeldingen en lettertypen. Maar voel ook hierbij je vrij om extra formats toe te voegen wanneer dat nodig is.
• Custom File List – Als je “Host Custom Files” ingeschakeld hebt, kan je hier een lijst met bestanden toevoegen die geleverd moeten worden vanuit je CDN.
• Rejected User Agents – In dit veld kan je user agents specificeren die de assets NIET geleverd krijgen via je CDN. We raden je aan dit veld gewoon leeg te laten, zodat je CDN optimaal gebruikt wordt.
• Rejected Files – Dit veld maakt het mogelijk om bestanden te noemen die niet vanuit je CDN geleverd moeten worden. Mocht je een dienst gebruiken die vereist dat assets vanuit je root domein geleverd worden, dan kan je hier het bestandspad toevoegen.

Instellingen van W3 Total Cache — User Experience

We gaan nu bezig met de instellingen voor “User Experience” , oftewel lazyloading, binnen W3 Total Cache.

• Process HTML Image Tags – Schakel deze optie in om ervoor te zorgen dat lazyloading wordt toegepast op afbeeldingen.
• Process Background Images – Gebruik je `background` om een afbeelding in CSS weer te geven, dan kan je deze optie inschakelen om lazyloading ook voor die afbeelding toe te passen.
• Exclude Words – In dit veld kan je tekst specificeren die genegeerd moet worden bij lazyloading. Zo zou je bijvoorbeeld no-lazy-load toe kunnen voegen aan dit veld, zodat lazyloading wordt toegepast op een afbeelding met <img src="image.jpg">.
• Script Embed Method – Met deze methode kan je de loadingmethode aanpassen voor het lazyloadingscript. De standaard async methode is ideaal voor de meeste sites. Bestaat je website alleen uit een enkele landingspagina, dan kan je de inline methode gebruiken om het aantal HTTP verzoeken van de pagina te beperken.

Beschikbare uitbreidingen voor W3 Total Cache

W3 Total Cache biedt diverse extensies om externe diensten te kunnen integreren. W3TC heeft momenteel extensies voor de volgende diensten.

• AMP
• Cloudflare
• Google Feedburner
• Fragment Cache
• Genesis Framework
• New Relic
• Swarmify
• Yoast SEO
• WPML

Als je één van deze diensten op je website gebruiken, raden we je zeker aan om de relevante extensie in te stellen om de compatibiliteit met W3 Total Cache te optimaliseren. In dit gedeelte, zullen we kijken naar de Cloudflare extensie voor W3 Total Cache.

Zo stel je W3 Total Cache in met de Cloudflare extensie

Om Cloudflare goed te integreren met W3 Total Cache, heb je twee stukjes data nodig van je Cloudflare dashboard, namelijk je accounte-mail en de API sleutel. Het accounte-mail is simpelweg het e-mailadres dat je gebruikt om in te loggen bij Cloudflare. De API key kan iets moeilijker te vinden zijn, namelijk zo:

In het Cloudflare dashboard, klik je op het tabblad “Overview”. Vervolgens scrol je naar beneden en klik je op Get Your API Token in de rechterbalk.

Scrol naar beneden, klik op View naast “Global API Key”, en je Cloudflare API sleutel verschijnt nu als het goed is. Let erop dat je deze API sleutel alleen deelt met W3 Total Cache, aangezien de sleutel gebruikt kan worden om je Cloudflare account te beheren.

Vervolgens activeer je de Cloudflare extensie binnen de “Extensions” pagina van W3 Total Cache, en klik daarna op “Settings”. In het deel “Credentials”, klik je op de knop Authorize.

In de pop-up die nu verschijnt, vul je nu de API sleutel en je Cloudflare accounte-mailadres in. Krijg je een foutmelding, controleer dan nog eens dat je zowel het (juiste) e-mailadres en de API sleutel goed gespeld hebt. Nadat de gegevens geaccepteerd worden, zou je extra instellingen voor Cloudflare moeten zien binnen de pagina.

Laten we even verder kijken naar deze Cloudflare instellingen in W3 Total Cache.

• Widget Statistics Interval – Specificeert de tijdsperiode die gedekt wordt door de Cloudflare widget van W3TC. De standaardinstelling is 30 minuten. Wil je graag een langere tijd, dan kun je dan hier instellen.
• Cache Time – Dit stelt in hoe lang de widgetdata van Cloudflare gecachet wordt. Verwacht je de widget niet veel te gebruiken, dan raden we je aan om dit getal te vergroten, zodat er minder verzoeken vanaf je website naar Cloudflare verzonden worden.
• Page Caching – Heb je Cloudflare zo ingesteld dat HTML pagina’s voor je WordPress website gecachet worden, schakel dan deze instelling in zodat de Cloudflare cache automatisch geleegd wordt nadat je een artikel veranderd hebt.

Cloudflare Caching

In deze sectie kan je de cachinginstellingen voor Cloudflare aanpassen.

• Development Mode – Hou deze optie uitgeschakeld, tenzij je Cloudflare in Development Mode nodig hebt. Wanneer Cloudflare in Development Mode staat, worden edge caching, minification en image optimization drie uur lang uitgeschakeld. Hierdoor zie je direct de updates aan CSS en JS bestanden, waardoor je problemen makkelijker kan oplossen.
• Cache Level – Voor de meeste websites is het “Standard” cacheniveau prima, waardoor er elke keer een andere bron geleverd wordt bij het veranderen van de querystring. Weet je 100% zeker dat je WordPress website geen querystrings gebruikt voor het verwerken van dynamische content, dan kan je dit ook op “Ignore Query String” zetten.
• Browser Cache TTL – We raden je aan om de browsercache van Cloudflare op 31536000 seconden te zetten, oftewel 1 jaar.
• Challenge TTL – Cloudflare biedt allerlei beveiligingsgerelateerde diensten, waaronder het monitoren van bezoekers. Wanneer Cloudflare een verdachte bezoeker of vreemd gedrag detecteert, zullen ze een Captcha sturen ter controle. De “Challenge TTL” instelling bepaalt hoe lang een gebruiker toegang heeft tot je website nadat ze een controle hebben gehad. Met de standaardinstelling van 3600 seconden heeft een gebruiker dus een uur lang toegang na het voltooien van een controle.
• Edge Cache TTL – Deze instelling bepaalt hoe lang assets worden gecachet op de edge servers van Cloudflare. We raden je aan deze instelling op de maximale waarde van 31536000 seconden te zetten, oftewel een jaar.

Cloudflare Content Processing

Laten we verdergaan met de instellingen van content processing door Cloudflare binnen W3 Total Cache.

• Rocket Loader – Cloudflare’s Rocket Loader maakt het laden van JavaScript sneller voor je WordPress site. We raden je aan om Rocket Loader in te schakelen als er veel JavaScript op je website staat.
• Minify JS/CSS/HTML – Heb je minification voor HTML, CSS, en JavaScript in W3 Total Cache al ingeschakeld, dan kun je gerust deze opties in Cloudflare uit laten staan, om dubbel werk te voorkomen.
• Server Side Exclude (SSE) – Deze optie maakt het mogelijk om gevoelige informatie te beperken voor verdachte bezoekers (zoals Cloudflare dat detecteert). Server-side excludes zijn handig voor het verbergen van informatie zoals e-mailadressen, telefoonnummers, en andere persoonlijke of contactinformatie. Om SSE te gebruiken schakel je deze optie in, en zet je  <!--sse--><!--/sse--> tags om gevoelige informatie heen binnen je HTML code of PHP thema sjabloon.
• Email Obfuscation – Met deze optie ingeschakeld zal Cloudflare automatisch e-mailadressen op je WordPress site onbruikbaar maken via JavaScript. Alhoewel dit niet spam volledig voorkomt, raden we je aan deze optie in te schakelen om in ieder geval alvast de eenvoudigste bots te weren.

Cloudflare Image Processing

Dan de instellingen van Cloudflare voor het verwerken van afbeeldingen.

• Hotlink Protection – Het inschakelen van hotlinkbescherming zorgt ervoor dat andere website jouw afbeeldingen niet kunnen insluiten. Zeker wanneer je tegen je limieten van bandbreedte aanloopt door ongeautoriseerde insluitingen, kan “Hotlink Protection” je helpen.
• Mirage (Pro Only) – Mirage optimaliseert het afleveren van afbeeldingen voor apparaten en netwerken met weinig bandbreedte. Deze feature is alleen beschikbaar vanaf het Pro pakket van Cloudflare.
• Polish (Pro Only) – Polish optimaliseert de afbeeldingen van je website, en kan ingesteld worden zodat er WEBP afbeeldingen naar ondersteunde browsers gestuurd worden. Deze feature is alleen beschikbaar vanaf het Pro pakket van Cloudflare.

Cloudflare Protection

De belangrijkste functie van Cloudflare is de geavanceerde firewall die je beschermt tegen DDoS aanvallen en kwaadwillende gebruikers. Laten we dus goed kijken naar de beveiligingsinstellingen.

• Security Level – Deze instelling bepaalt de algemene gevoeligheid van de firewall en regels van Cloudflare. Voor de meeste website raden we aan om het “Security Level” op Medium te zetten.
• Browser Integrity Check – Deze feature controleert op vreemd gedrag en verdachte user agents. Als er een verdachte gebruiker gedetecteerd wordt, stuurt Cloudflare automatisch een controle. We raden je aan om deze feature in te schakelen.
• Always Online – Met deze optie zullen er statische HTML pagina’s van je site geladen worden wanneer het origineel offline gaat. We raden je aan om dit in te schakelen als je Cloudflare hebt ingesteld om HTML te cachen.
• Web Application Firewall – Cloudflare’s WAF, oftewel web application firewall, scant inkomend verkeer en filtert verdacht verkeer voordat het op je site komt. We raden je aan om deze feature in te schakelen.
• Advanced DDoS Protection – Deze feature staat standaard ingeschakeld, en kan ook niet uitgezet worden zolang de Cloudflare proxy actief is. DDoS bescherming helpt bij het voorkomen van “distributed denial of service” aanvallen.
• Max Upload – Hiermee stel je de maximaal toegestane bestandsgrootte in van uploads naar je site. Je moet ervoor zorgen dat wat je hier instelt gelijk is aan of groter is dan de instelling van de uploadbestandsgrootte in WordPress.

Cloudflare SSL

Als laatste is het belangrijk ervoor te zorgen dat de Cloudflare SSL instellingen goed staan. In dit deel behandelen we dus de juiste configuratie.

• SSL – Wordt je site gehost op Kinsta, dan raden we je aan te kiezen voor “Full” of “Full (Strict)”. De optie “Flexible” is niet compatibel met onze infrastructuur. “Full Strict” vereist een SSL van een erkende autoriteit, terwijl “Full” ook zelfondertekende SSL’s ondersteunt. De optie “Flexible” vereist geen SSL-certificaat op de originele server, wat we ten zeerste afraden omdat het de meest onveilige optie is.
• TLS 1.2 Only – TLS, oftewel Transport Layer Security, is een beveiligingsprotocol voor het verzenden van data via een netwerk. Sommige PCI compliance standaarden vereisen dat je TLS 1.1 en ouder niet ondersteunt. Als dat ook een eis is voor jouw website, dan kan je de “TLS 1.2 Only” instelling activeren, zodat de minimale TLS versie altijd 1.2 is.

Leessuggestie: Zo stel je Cloudflare APO in op WordPress.

W3 Total Cache instellingen voor WooCommerce

WooCommerce is het meest populaire eCommerce platform voor WordPress website. Gebruik je W3 Total Cache bij een webshop die op WooCommerce draait, dan moet je zorgen dat je configuratie goed staat om te voorkomen dat je de gegevens van klanten cachet.

Bypass WooCommerce Cookies

Om page caching te voorkomen op pagina’s die WooCommerce-specifieke cookies hebben, ga je naar de instellingen “Page Cache” binnen W3TC, en scroll je naar “Rejected Cookies”, waar je de vier items hieronder toevoegt.

• woocommerce_items_in_cart
• woocommerce_cart_hash
• wp_woocommerce_session_
• wordpress_logged_in

Voor de zekerheid raden we je ook aan om WooCommerce-specifieke URL’s te negeren, zoals de pagina’s voor het winkelkarretje, afrekenen en account. Om te voorkomen dat deze pagina’s gecachet worden, ga je weer naar “Page Cache” in W3TC en voeg je de relevante URL’s toe in het veld “Never Cache the Following Pages”.

Zo reset je alle instellingen bij W3 Total Cache

In sommige gevallen moet je helemaal opnieuw beginnen met het instellen van W3 Total Cache. Zo zet je W3 Total Cache terug naar de standaardinstellingen. Ga naar het menu “General Settings” in W3TC, scroll naar beneden naar “Import/Export Settings” en klik op Restore Default Settings.

Samenvatting

Zoals je gezien hebt zit de W3 Total Cache plugin boordevol instellingen en features. Van paginacaching, minification van bronnen, tot Cloudflare integratie, W3TC biedt alles wat je nodig hebt om de prestaties van je WordPress website flink te verbeteren.

In dit artikel hebben we aanbevelingen gedaan voor de beste configuratie van W3TC. Heb jij ook een favoriete optimalisatieplugin voor WordPress? Laat het ons weten in de reacties hieronder.