Optimaliseren snelheid - WooCommerce caching instellen (aanbevolen)

Onderstaand de uitleg om de optimalisatie voor je website uit te voeren voor WooCommerce webshops die draaien op een Hoasted server die gebaseerd is op de ‘Litespeed’ technologie. Door gebruik te maken van de Litespeed Cache plugin voor WordPress is je site sneller dan met andere caching plugins van WordPress.

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:
litespeed-instellingen.data

Stap 1: cPanel instellingen

Log in op de betreffende cPanel
Ga naar 'Select PHP version' onder het kopje Software > SELECT PHP VERSION
Daar vink je OPCACHE + APCU aan als dat nog niet het geval is
Klik op save/opslaan

Stap 2: Optimaliseren WooCommerce op de LiteSpeed server

Voordat je gaat optimaliseren is het vaak verstandig om een aantal benchmark tests uit te voeren zodat je weet of de performance vooruit gegaan is. Je kunt de volgende tools gebruiken hiervoor. Let op, je kunt vaak een locatie kiezen van waaruit getest wordt. Kies een locatie die zo dicht mogelijk bij Amsterdam ligt voor de meest accurate meting https://gtmetrix.com
Log in op je wp-admin omgeving.
Let op: Verwijder alle bestaande caching en optimalisatie plugins.

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

Installeer en activeer de plugin “LiteSpeed Cache” (https://wordpress.org/plugins/litespeed-cache/) Als deze correct is geinstalleerd, zie je ‘LiteSpeed Cache’ in het WordPress admin menu staan.
Als de plugin is geïnstalleerd, open je vervolgens een Chrome Incognito Window (windows: Ctrl+Shift+N, Mac: Cmd+Shift+N) en ga naar je website.
Indien je Woocommerce gebruikt is het verstandig om even te testen of alle unieke pagina's zijn uitgezonderd. Je kunt deze pagina's vinden via WooCommerce > Status.
Zonder deze pagina's vervolgens uit van de caching via Litespeed Cache > Cache > Uitsluitingen
Ga vervolgens naar het tabblad 'WooCommerce' en schakel ESI in, en configureer in welke mate de cache leeggemaakt wordt na het wijzigen van product of voorraad status
Wanneer je gebruikt maakt van een wat oudere database raden we aan om deze om te zetten naar InnoDB. Hiermee kan de database sneller doorzocht worden. Ga hiervoor naar LiteSpeed Cache > Database
Standaard staat LiteSpeed Cache al prima qua instellingen. Wil je echt het maximale eruit halen ga dan naar LiteSpeed Cache > Pagina Optimalisatie, alles standaard behalve:

[1] CSS instellingen:
CSS Minify > Aan (Goed testen op eventuele conflicten anders uit.)
Inline CSS Minify > Aan (Goed testen op eventuele conflicten anders uit.)
CSS Combine > Aan (Goed testen op eventuele conflicten anders uit.)
CSS HTTP/2 Push > Aan

[2] JS instellingen
JS Minify > Aan (Goed testen op eventuele conflicten anders uit.)
Inline JS Minify > Aan (Goed testen op eventuele conflicten anders uit.)
JS Combine > Aan (Goed testen op eventuele conflicten anders uit.)
JS HTTP/2 Push > Aan

[3] Optimalisatie instellingen
HTML Minify > Aan (Goed testen op eventuele conflicten anders uit.)
Remove Comments > Aan (Goed testen op eventuele conflicten anders uit.)
Remove Query Strings > Aan
Remove WordPress Emoji > Aan

LiteSpeed Cache > [7] Browser:
Browser Cache > Aan

Let op: De minify/combine hangt erg af van welk theme / plugins je gebruikt en of deze goed zijn geprogrammeerd. Het is met iedere optie even testen of dat goed werkt en anders uitzetten. De object caching kan je het best uitlaten. Wij zien maar weinig gevallen waarbij dit echt snelheid toevoegt en hiervoor moet je een aparte service afnemen.
Voer nu opnieuw de benchmark uit en bekijk of de “Time to First Byte” (TTFB) sneller is geworden. LiteSpeed zorgt met name voor een optimalisatie in de TTFB.
Laad nu de pagina de eerste keer in je Incognito window, dit zal wat langer duren aangezien alle cache nu geleegd is. Test of alle JS en CSS naar behoren werkt na het Minifyen.
Voer alle benchmark tests nu nog een keer uit en bekijk het verschil in snelheid.
Als alles is doorgelopen is de optimalisatie afgerond!

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):

Heb je maar een of enkele pagina's gewijzigd in een website met veel pagina's, dan is het efficiënter om de betreffende pagina te flushen. Ga in je dashboard naar de site, dan naar de betreffende pagina en klik bovenin op het LiteSpeed ikoon en kies Schoon dee pagina op (Purge this page):

Controle

Zodra alle instellingen zijn doorgevoerd raden we nog aan om de website goed te controleren met behulp van bijvoorbeeld de Chrome Developer tools. Wanneer je hier JavaScript meldingen in voorbij ziet komen kun je het best even alle minimalisatie en combine settings uitschakelen om te achterhalen waar dat precies mis gaat.

Mocht je geen meldingen meer in de console tegenkomen raden we aan een testbestelling te doen om zo alles goed door te testen.