Optimaliseren snelheid - WordPress caching instellen (aanbevolen)
Om je website vele malen sneller uit te laden raden we aan om caching in te stellen op de website. Op die manier worden de pagina's direct in het geheugen van de server geplaatst, en kunnen deze vele malen sneller uitgeladen worden. Wij raden hiervoor de LiteSpeed Cache plugin aan in WordPress, gezien deze naadloos aansluit op onze LiteSpeed servers, en bovendien ook tal van optimalisatie instellingen beschikbaar heeft om de website nog sneller te maken.
Wat is Caching?
Een cache is een onderdeel van het geheugen van de server. Hier wordt recent en/of veelgebruikte informatie opgeslagen. Wanneer een webpagina wordt opgevraagd, worden alle onderdelen om de website uit te serveren aangeroepen (database, PHP-scripts, afbeeldingen, CSS bestanden etc), en wordt het resultaat van alle scripts uitgeserveerd. Via dat proces, wat nog steeds maar van korte duur is (gemiddeld tussen de 200ms en 3 seconden) duurt, worden alle PHP-scripts aangeroepen en worden berekeningen opnieuw uitgevoerd.
Wanneer een site gecached is, betekent dat enkel het resultaat (de cache) van de scripts wordt getoond (je website wordt uit de cache geserveerd). Dit is een zeer efficiënte manier om je website zeer snel te maken. Bijvoorbeeld wanneer je 10 website bezoekers ontvangt op een gegeven moment, dan wordt bij de eerste bezoeker de website normaal uitgeladen en vervolgens meteen in de cache gezet. Bij de volgende 9 bezoekers wordt de website dan enkel uit cache geladen, waardoor de laadtijd vele malen korter is.
Standaard instellingen
Om direct aan de slag te gaan hebben we onderstaande import bestand alvast voor je aangemaakt. Hierin zijn alle caching instellingen al correct gezet en hoef je enkel nog de optimalisatie opties aan te passen.
Je kunt dit bestand inladen via de pagina 'LiteSpeed Cache > Toolbox > Import/Export'.
Voorbereidingen voor instellen cache
Allereerst is het noodzakelijk om een aantal zaken te activeren in het hosting account (standaard zullen deze al ingeschakeld zijn), en om eventuele huidige caching oplossingen in de website te deactiveren.
- Log in op cPanel en ga naar 'Select PHP version' onder het kopje Software
- Vink hier de OPCACHE en APCU module aan en sla de pagina op
- Log in op het WordPress dashboard en deactiveer en verwijder alle bestaande caching plugins (W3 Total Cache, Fastest Cache, WP Rocket, Autoptimize, WP Super Cache etc)
- Zorg ervoor dat je .htaccess bestand schoon is (enkel de basis htaccess inhoud zoals hieronder) en dat er geen caching configuratie is overgebleven. Vaak is alleen het volgende over, en misschien nog een redirect rule voor SSL:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond%{REQUEST_FILENAME} !-f
RewriteCond%{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
Instellen LiteSpeed cache
- Installeer en activeer de plugin “LiteSpeed Cache” (https://wordpress.org/plugins/litespeed-cache/)
- In principe is de caching hiermee al correct ingesteld. Voor de volledigheid raden we echter aan nog wat extra instellingen in te schakelen om ook de browsercache te activeren.
Open 'LiteSpeed Cache > Cache' en controleer of 'Enable Cache' geactiveerd is
Open vervolgens het tabblad '[7] Browser', en vink hier ook de Browser caching aan
LiteSpeed optimalisatie instellingen
Standaard staat LiteSpeed Cache enkel ingesteld om de pagina's in de cache te plaatsen. Indien gewenst kun je ook de code optimaliseren voordat deze in de cache geplaatst wordt. Dit zal zorgen voor een veel betere score en snelheid van de website, maar afhankelijk van de functionaliteiten binnen de website kan hier wel wat extra finetuning voor nodig zijn.
Zie onderstaand de optimale instellingen om te gebruiken. Let wel op dat je na het instellen hiervan de website goed controleert op juiste werking. Je kunt deze instellingen vinden via 'LiteSpeed Cache > Pagina optimalisatie'.
[1] CSS instellingen
Met de CSS-instellingen kun je de opmaakcode van je website optimaliseren. LiteSpeed kan CSS-bestanden samenvoegen, verkleinen (minify) en asynchroon laden. Hierdoor hoeft de browser minder data te downloaden, wat de laadtijd van de website verkort.
[2] JS instellingen
De JavaScript-instellingen bepalen hoe scripts op de website worden geladen. Door ze te verkleinen, samen te voegen of uit te stellen tot na het laden van de pagina, kan de website sneller reageren. Let op: sommige functies (zoals sliders of menu’s) kunnen extra controle vereisen na optimalisatie.
[3] HTML instellingen
Hiermee kun je de HTML-code van de website optimaliseren. LiteSpeed verwijdert onnodige spaties, regels en opmerkingen, waardoor de code compacter wordt. Dit helpt om de laadtijd iets te verkorten en de score in snelheidstests te verbeteren.
[4] Media instellingen
De Media-instellingen richten zich op afbeeldingen en video’s. LiteSpeed kan afbeeldingen automatisch verkleinen, comprimeren en in moderne formaten (zoals WebP) aanbieden. Ook kun je lazy loading inschakelen zodat media pas geladen wordt als deze in beeld komt.
[5] VPI
De VPI-functie bepaalt welke afbeeldingen direct zichtbaar zijn bij het laden van de pagina (boven de vouw). LiteSpeed optimaliseert deze eerst, zodat de gebruiker sneller iets te zien krijgt — wat de “First Contentful Paint” score verbetert.
[6] Media excludes
Met Media Excludes kun je specifieke afbeeldingen of mediabestanden uitsluiten van optimalisatie. Dit is handig als bepaalde beelden niet correct worden weergegeven of als je ze bewust in originele kwaliteit wilt behouden.
[7] Localizations
De Localizations-instellingen zorgen dat vertalingen en dynamische inhoud (zoals door plugins geladen teksten) correct worden verwerkt. Je kunt hiermee ook bepaalde scripts of tekstbronnen uitsluiten van optimalisatie om vertaalproblemen te voorkomen.
[8] Tuning
In Tuning stel je fijnere optimalisatieparameters in, zoals het uitsluiten van specifieke pagina’s, scripts of stijlen van optimalisatie. Hiermee kun je conflicten oplossen en de prestaties per onderdeel verder verbeteren.
[9] Tuning - CSS
Dit onderdeel is een verfijning van de algemene Tuning-instellingen, specifiek gericht op CSS. Je kunt hier bepaalde stijlen uitsluiten van samenvoegen of optimalisatie, wat handig is als bepaalde opmaak niet goed wordt weergegeven na optimalisatie.
Cache legen
Let op: Als je wijzigingen hebt doorgevoerd in je website en je wilt dat dat direct voor alle bezoekers in beeld komt, moet je de LiteSpeed Cache legen. Log in op je WordPress Dashboard, klik LiteSpeed Cache en kies Verwijder alle cache (Purge All):
