WordPress caching

De complete gids over server en browser website caching

WordPress caching, alles wat je moet weten over server en browser caching. 1

door Lisa Springer

Assistent Manager van WP supporters

Je kunt pas 100% genieten van een WordPress website wanneer hij ook volledig voor website snelheid is geoptimaliseerd. Een website die traag laadt, kan je namelijk klanten kosten.

Een goede manier om dit te voorkomen is door te gebruik te maken van caching. Wat dit precies is en wat je er allemaal mee kunt doen gaan we in dit artikel verder uitleggen.

Onderwerpen die aan bod komen:

Voordat we verder gaan wil ik je er eerst op wijzen dat als je de snelheid van je site wil versnellen het erg belangrijk is om een goede hosting tot je beschikking te hebben. Daarbij is het misschien handig om gebruik te maken van een CDN en vergeet het optimaliseren van je afbeeldingen niet voordat je hieraan begint.

Wat is WordPress website caching?

Dat is een goede vraag!

Ik ga het je uitleggen aan de hand van het onderstaande voorbeeld.

Wanneer iemand onze website bezoekt, is het de bedoeling dat de website in 1x op het scherm van de gebruiker komt. Alle inhoud, afbeeldingen en scripts gaan dan van onze server naar hun browser. Dit gaat al volgt:

  1. De bezoeker laadt www.wpsupporters.com in hun browser
  2. Het browser stuurt een verzoek naar onze server (dit heet een http verzoek).
  3. De server verzamelt vervolgens de gevraagde materialen en stuurt deze door. Dit is tevens ook de plek waar de vertraging kan ontstaan wanneer afbeeldingen en scripts niet zijn geoptimaliseerd.
  4. Nadat de bestanden zijn
    verzonden, geeft het browser van de gebruiker de website weer.

WordPress caching, alles wat je moet weten over server en browser caching. 2

Voor iedere pagina geldt bovenstaande steeds weer opnieuw. Je snapt dus wel waarom optimalisatie hiervan daarom zo belangrijk is.

Wanneer je gebruik maakt van caching gaat het proces bijna hetzelfde maar toch net even anders.

De bezoeker laadt www.wpsupporters.com in hun browser

  1. Het browser stuurt een verzoek naar onze server.
  2. Onze server ziet dat hij deze pagina al eens geladen heeft naar een bezoeker en dat deze niet gewijzigd is. Daarom stuurt hij dezelfde pagina door naar deze bezoeker. En dat is dus caching.
  3. Nadat de bestanden zijn verzonden, geeft het browser van de gebruiker de website weer.

Bij cachen wordt er dus gebruik gemaakt van de ongewijzigde inhoud die al eerder is geladen. Hierdoor kun je informatie veel sneller van je server naar het browser van de gebruiken versturen.

3. Solved the Problem

Zelf WordPress onderhouden?

Leer al onze ins en outs van WordPress onderhoud en upgrade jouw website naar een 2.0 versie met onze GRATIS WordPress training.

Een Must-Do voor eenieder die met WordPress werkt. 

Voordelen van website server caching

Naast dat je website sneller geladen wordt door middel van caching, heb je er nog veel meer voordelen van , namelijk:

  • Een snellere website betekend dat je beter gevonden wordt door Google
  • De algemene ervaring van bezoekers gaat vooruit, hierdoor daalt het bounce percentage
  • Door caching komt er meer geheugen vrij op je hosting server

Server caching versus browser caching

Als WordPress gebruiker zul je je voornamelijk richten op caching op de server. Dit proces gaat zoals ik hierboven hebt uitgelegd. Het gaat hierbij om alle informatie die de server normaal moet laden, wat we in de cache kunnen opslaan.

Echter bestaat er ook een andere manier om gebruik te maken van caching, namelijk browser caching.

Browser caching is iets heel anders dan server caching omdat er niet zoveel bestanden in een browser kunnen worden opgeslagen. Toch blijft het proces er omheen hetzelfde. Wanneer iemand een pagina al eerder heeft geladen, kan hiervan een kopie opgeslagen worden in het browser. Wanneer diezelfde persoon opnieuw op de website komt, zal vanuit deze plek de pagina geladen worden.

Wanneer de opgeslagen browserversie van de pagina verloopt of wanneer de gebruiker deze verwijderd, zal het gehele proces opnieuw moeten plaatsvinden. Je kunt hierdoor soms op je scherm een melding krijgen dat het langer kan duren voordat de pagina geladen wordt.

server en browser

Website caching technieken

Om je wat meer inzicht te geven in de caching manieren aan de server zijde, gaan we dat hier verder uitleggen. Je kunt deze manieren namelijk ook weer opdelen in verschillende technieken: de volledige pagina caching, object caching en fragment caching.

Volledige pagina caching
De volledige pagina caching is de standaard caching methode die we hierboven al hebben besproken. De gekopieerde (gecachte) versie van een volledige pagina wordt in de browser van de bezoeker afgeleverd.

Veel websites maken hier gebruik van. Het fijne hierbij is dat wanneer bezoekers snel doorklikken naar verschillende pagina’s, dit minder belasting op je server zal geven. Hierdoor is het proces meer gestroomlijnder en sneller.

Object caching
Een andere vorm van caching is object caching. Hierbij wordt slechts een deel van de pagina opgeslagen voor toekomstig gebruik. Object caching kan als standaard worden geprogrammeerd voor datgene dat veel informatie bevat en op verschillende pagina’s terug komt.

Fragment caching
Fragment caching kun je eenvoudig gebruiken wanneer je wilt dat alleen bijvoorbeeld widgets of afbeeldingen worden opgeslagen op de server. Zo hoef je niet een deel of de gehele pagina te gebruiken maar alleen specifieke onderdelen.
Bedenk wel dat bij voorwerp en fragment caching het belangrijk is dat deze onderdelen niet vaak gewijzigd worden op de website. Anders zul je er immers weinig voordeel van hebben wanneer je hierop de caching instelt.

Hoe maak je gebruik van website browsercaching in WordPress?

Hier gaan we verder in op de implementatie van website browser caching. Zo weet je precies hoe je dit kunt instellen en gebruiken.

Zoals ik al eerder aangaf is browser caching iets anders dan server caching. Toch is het belangrijk om dit in te stellen op je WordPress website omdat je hiermee zorgt dat de bezoeker zijn browser gecachet wordt. Dit is voornamelijk van toepassing wanneer je veel gebruik maakt van afbeeldingen of andere belastende content.

HTTP Cache control
De eerste update die je voor je bestanden moet maken, is het instellen van een max-age-richtlijn. Kort gezegd vertelt dit browsers hoelang ze een kopie van een webpagina moeten bewaren.

Open hiervoor het .htaccess-bestand in de hoofdmap van je website. Hierbij raden we aan om de volgende code in te voeren, na de regel # END WORDPRESS.


<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

In feite wordt hiermee vertelt aan de browsers van bezoekers dat elk mediabestand of script dan met hen wordt gedeeld, gedurende 84.600 seconden in de cache kan worden bewaard. Je kunt dit natuurlijk aanpassen naar het tijdsbestek wat voor jouw van toepassing is.

Verlopen Headers
Een andere manier om je caching te beïnvloeden, is door aan te geven wanneer de gecachte inhoud moet verlopen. Dit lijkt misschien onnodig, maar er zijn bepaalde browsers die hier naar op zoek gaan. Daarom raden we je aan om beide in te stellen.

Open je .htaccess-bestand opnieuw. Ga nogmaals na de # END WORDPRESS staan en vul het volgende in:

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

Het is niet nodig om alle regels toe te voegen wanneer je website dat niet bevat. Kijk dus naar wat voor jouw van toepassing is.

ETags
Tenslotte zijn ETags belangrijk om uit te schakelen. Een ETag is een tag die pagina’s alleen in de browser cache opslaan wanneer zij denken dat dat nodig is. Wanneer je deze uitschakelt in het .htaccess bestand, zal de browser de caching regels opvolgen zoals jij hierboven hebt aangegeven.

Voor hiervoor de volgende code in, in het .htaccess bestand:

# TN - BEGIN Turn ETags Off
FileETag None
# TN - END Turn ETags Off

Nadat de wijzigingen zijn opgeslagen is jouw WordPress website browsercaching klaar voor gebruik.

De 5 beste caching plugins voor een optimale WordPress servercaching

Om gebruik te kunnen maken van server caching, kun je het beste een WordPress caching plugin gebruiken. Let hierbij op een aantal dingen voordat je dit doet.

  • Beoordeel de kwaliteit van de plugin op basis van reviews en ervaringen van anderen. Het is uiteindelijk de bedoeling dat het je website sneller maakt en niet langzamer.
  • Bekijk altijd welke plugins volgens jouw hosting niet zijn toegestaan. Soms is dit het geval omdat die plugins niet matchen met de prestaties van je website en soms komt dit omdat je hosting zelf al server caching levert.
  • Zorg dat je caching plugin alle functies bevat die je nodig hebt, bijvoorbeeld object caching.
  • Bekijk altijd de prestaties van je website nadat je de cachingplugin hebt geïnstalleerd. Is je website sneller geworden? Of valt de laadtijd tegen? En zie je nog steeds een suggestie ‘leverage caching’ staan?

Eigenlijk moet je bij iedere WordPress plugin die je gebruikt, voorzichtig zijn met de installatie. Je wilt namelijk niet dat je website slechter gaat presteren door een plugin. Test daarom altijd de prestaties voor en na de plugin installatie.

Hieronder zullen we een aantal suggesties noemen voor plugins die je kunt gebruiken. 



Let op! Wij raden aan om maar 1 caching plugin per website te gebruiken. Als je meerdere caching plugins installeert zullen deze met elkaar in conflict komen en de site vertragen.

WP Rocket

WordPress caching, alles wat je moet weten over server en browser caching. 3

WP Rocket is 1 van de meest gebruiksvriendelijke caching plugins die er is. Daarbij bevat het ook nog eens vele andere functies, zoals:

  • Eenvoudige installaties
  • De cache wordt vooral geladen om de index en zoekmachines te verbeteren
  • Het bij elkaar houden van statische CSS-, Javascript en HTML bestanden
  • Afbeeldingen worden lui geladen
  • Bevat een Cloudflare CDN intergratie

Voor de WP Rocket plugin moet je wel betalen. De prijs hangt af van hoeveel websites je bij hun onder wilt brengen.

Autoptimize

Autoptimize is een handige en simpele plugin die gespecialiseerd is in het verwerken van scripts en stylesheets van je website. Daarbij stroomlijnt het ook de communicatie van scripts en stylesheets naar je browser. Het is dus erg handig om deze bij de hand te hebben voor de snelheid optimalisatie van je website.

Litespeed Cache

Litespeed Cache heeft zich voornamelijk gespecialiseerd in browser en object caching. Daarbij bevat het nog meer functies die je kunnen helpen met de snelheid optimalisatie van je website.

Zo bevat Litespeed Cache ook een CDN intergratie en kan het afbeeldingen “lazy” laten laden.

W3 Total Cache

W3 Total Cache is zoals je het al in de naam hoort, een ‘totaal’ plaatje van een caching plugin. Het bevat functies als:

  • Browser, database en object caching
  • Javaschript, CSS, post en pagina optimalisatie
  • CDN intergratie
  • Ondersteuning van mobiele pagina caching
  • Ondersteuning voor Google AMP en SSL

Naast dit alles, is het belangrijk om te weten dat W3 Total Cache een lastige plugin is om in te stellen. Enige technische kennis is dus wel vereist.

WP Fastest Cache

Naast dat je WP Fastest Cache super snel kunt installeren, kan het gelukkig nog veel meer. Deze gebruiksvriendelijk plugin bevat namelijk ook geavanceerde caching en een CDN intergratie.

De plugin is heel eenvoudig in te stellen omdat je na installatie een aantal sheets krijgt waar je simpelweg je eisen op kunt aankruisen. Vervolgens gaat hij na 1 druk op de knop direct voor je aan de slag.

WordPress caching, alles wat je moet weten over server en browser caching. 5

WP Super Cache

WP Super Cache is 1 van de meest populaire caching plugins die er is. Dit komt onder andere omdat het 3 verschillende caching instellingen bevat.

Dit is een expert instelling, een eenvoudige instelling en een comfort instelling. Het beste hiervan is, dat elke instelling de configuraties geeft die je nodig hebt om je pagina’s te cachen.

Onze aanrader

Caching is best een lastig onderwerp als je kijkt naar snelheid optimalisatie van je website. Toch is het zoals ik hierboven uitleg, redelijk eenvoudig op te lossen.

Zelf maken wij gebruik van browser en server caching. We hebben volgens bovenstaande uitleg onze browser caching uitgevoerd en onze server caching laten organiseren door de plugin WP Rocket.

WP Rocket bevat namelijk naast caching nog veel andere voordelen die je kunnen helpen bij de snelheid optimalisatie van je website. Wij gebruiken deze dagelijks en zijn hier nog steeds erg tevreden over.

Mocht je er niet uitkomen qua caching of heb je problemen met snelheid optimalisatie, stuur dan eens een mailtje naar: [email protected] en ontvang een gratis antwoordt van een professional.

Geef ons een beetje support, en deel met belangstellenden.

Facebook
Google+
Twitter
LinkedIn
WhatsApp

Lees ook:

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *