Caching instellen WooCommerce

Op het moment dat je de PHP en caching settings in je cPanel en WordPress website correct instelt, ervaar je nog betere performance. Je website wordt niet alleen vele malen sneller, maar kan ook veel meer verkeer tegelijkertijd aan. Deze functionaliteit is kosteloos inbegrepen en kun je middels onderstaande stappen zelf instellen. Onderstaande de stap voor stap uitleg wat caching is en hoe je het op de optimale manier toe kunt passen voor WooCommerce websites gehost bij Hoasted.

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.

De cache van jouw webshop wordt automatisch opnieuw aangemaakt op het moment dat er een wijziging aan de website doorgevoerd wordt.

Stap 1: cPanel instellingen

  1. Log in op de betreffende cPanel
  2. Ga naar 'Select PHP version' onder het kopje Software > SELECT PHP VERSION
  3. Daar zet je OPCACHE + APCU aan
  4. Klik op save/opslaan

WordPress caching settings

Stap 2: LiteSpeed cache installeren

Optimaliseren WordPress op de LiteSpeed server

  1. 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 resultaten:- https://www.webpagetest.org/- https://tools.pingdom.com/- https://gtmetrix.com
  2. Log in op je wp-admin omgeving.
  3. Let op: Verwijder alle bestaande caching en optimalisatie plugins.
  4. 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:
  5. # 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
    	
  6. Installeer en activeer de plugin “LiteSpeed Cache” (https://wordpress.org/plugins/litespeed-cache/) Als deze correct is geïnstalleerd, zie je ‘LiteSpeed Cache’ in het WordPress admin menu staan.


  7. 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.

  8. Indien je Woocommerce gebruikt is het niet nodig pagina's uit te sluiten, al is het wel verstandig om even te testen. Enkel bij custom functies zien we nog wel eens een issue.

  9. Standaard staat LiteSpeed Cache al prima qua instellingen. Wil je echt het maximale eruit halen ga dan naar LiteSpeed Cache > Configuration > Advanced view, alles standaard behalve:

    [5] Optimize:
    CSS Minify > ON (Goed testen op eventuele conflicten anders uit.) 
    Inline CSS Minify > ON (Goed testen op eventuele conflicten anders uit.) 
    CSS Combine > ON (Goed testen op eventuele conflicten anders uit.) 
    CSS HTTP/2 Push > ON 
    JS Minify > ON (Goed testen op eventuele conflicten anders uit.) 
    Inline JS Minify > ON (Goed testen op eventuele conflicten anders uit.) 
    JS Combine > ON (Goed testen op eventuele conflicten anders uit.) 
    JS HTTP/2 Push > ON 
    HTML Minify > ON (Goed testen op eventuele conflicten anders uit.) 
    Remove Comments > ON (Goed testen op eventuele conflicten anders uit.) 

    [6] Tuning:
    Remove Query Strings > ON 
    Remove WordPress Emoji > ON 

    Advanced
    Browser Cache > ON 

    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.

  10. Bij Woocommerce installaties is het belangrijk om de volgende pagina’s toe te voegen aan de ‘Do Not Cache Rules’. Deze vind je onder de ‘Settings’ > ‘Do Not Cache Rules’ van de Litespeed plugin, of onder ‘Excludes’. Voeg de voor jouw van toepassing zijnde url’s toe.
    Ter illustratie:
    /winkelwagen
    /betalen
    /mijn-account
    /winkelmand
    /shop
    /cart
    /checkout
    /my-account
    /wishlist	
  11.  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.
  12. 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.
  13. Voer alle benchmark tests nu nog een keer uit en bekijk het verschil in snelheid.
  14. 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 Purge All:

Let op 2: in uitzonderingsgevallen krijg je toch problemen met de LiteSpeed cache, gebruik in dat geval W3 Total Cache, zie onze handleiding: Woocommerce Caching instellen met W3 Total Cache.

Nog steeds hulp nodig? Contact ons Contact ons