Cache: wat is het en hoe ga je ermee om?

Als je eerder met ons hebt samengewerkt zal je vaker de vraag gehoord hebben: heb je je cache al geleegd? In dit artikel leggen we uit wat cache is, waarom het belangrijk is, wat er fijn aan is en wat niet en hoe je er het beste mee om kunt gaan.

Wat is cache?

Om dit uit te leggen geef ik eerst een simpel voorbeeld. De eerste keer dat je optelsommetjes leerde, gebruikte je waarschijnlijk een telraam of je vingers om te tellen. De juf voeg: wat is 2 + 2? Je telde je vingers en kwam uit op 4. De keren daarna gebruikte je steeds je vingers om tot hetzelfde resultaat te komen. Tot de dag dat de juf het zo vaak had gevraagd dat je het antwoord wist zonder het uit te rekenen. Je riep gelijk: 4!. Een stuk sneller dan toen je het moest uitrekenen. Dat is vergelijkbaar met cache.

Dit werkt als volgt: Een webpagina die door een bezoeker wordt aangeroepen moet worden samengesteld uit verschillende elementen. De PHP-bestanden die op de server staan genereren HTML, halen data op uit de database, roepen javascripts en stylesheets aan en tonen afbeeldingen en video’s. De browser moet dit allemaal interpreteren en er een pagina van maken. Dat is vergelijkbaar met de som uit het vorige voorbeeld. Deze som kan echter behoorlijk ingewikkeld worden en daardoor duurt het vaak langer om alles uit te rekenen. Gelukkig is een webserver in staat om snel te rekenen én het resultaat al na 1x berekenen te onthouden. Maar snel is voor ons niet snel genoeg en daarom gebruiken we cache.

Hoe werkt cache dan?

Er zijn twee varianten die ik wil bespreken:

1. Servercache
2. Browsercache

Servercache

Wanneer een bezoeker jouw homepage heeft bezocht, wordt de ‘berekening’ gemaakt van alle benodigde elementen. De PHP genereert de HTML en haalt de benodigde data uit de database. Het resultaat van deze berekening wordt naar de browser van je bezoeker verstuurd maar kan ook op de server worden opgeslagen. Dat is servercache. Er staat dan een HTML bestand klaar in een tijdelijke map op de server. De eerstvolgende bezoeker die dezelfde pagina op de website bezoekt krijgt dit resultaat geserveerd. De server hoeft de berekening niet opnieuw te doen en daarmee wordt kostbare tijd bespaard.

Browsercache

De HTML die naar jouw browser wordt verstuurd op het moment dat je een webpagina bezoekt, roept op zijn beurt weer andere bestanden aan. Denk hierbij aan javascripts voor functionaliteit, stylesheets voor vormgeving en afbeeldingen. Al deze bestanden worden tijdelijk in jouw browser opgeslagen. En dat is handig. Op veel sites worden op meerdere pagina’s bijvoorbeeld dezelfde stylesheets, scripts en afbeeldingen gebruikt. Die zijn door de browser al gedownload en in een tijdelijke map op jouw computer geplaatst. De browser is zo ingesteld dat hij eerst in die map kijkt of het bestand al binnen is voordat hij het opnieuw downloadt. Ook hiermee wordt dus veel tijd bespaard.

Cache legen

Cache kan in de weg zitten tijdens het ontwikkelen of aanpassen van een website. Misschien herken je dit: je doet een aanpassing op je website maar ziet die vervolgens niet. In dit geval is de aanpassing wel opgeslagen in de site, maar kijk je nog naar de oude bestanden die in de server of in je browsercache zijn opgeslagen. Bijzonder irritant, maar gelukkig ook heel eenvoudig op te lossen. Om zeker te weten dat je naar de laatste versie van de site kijkt, dien je dus de cache te legen. Hieronder lees je hoe.

Servercache legen

Op de websites die wij ontwikkelen gebruiken we WP-Rocket om cache mee te genereren. Om de servercache te legen doe je het volgende:

1. Log in op je website
2. Ga bovenin beeld met je muis over “Wp Rocket”
3. Klik op “Cache legen” om alle gecachde pagina’s van jouw website te legen

Wil je enkel de cache van 1 pagina legen? Dan ga je in WordPress naar de betreffende pagina en klik je op de knop “cache legen”.

Browsercache legen

Wanneer je de cache van je browser wilt legen doe je het volgende:

• Windows: In Chrome, Firefox en Microsoft Edge of Internet Explorer: druk op je toetsenbord tegelijkertijd op de knoppen Ctrl en F5. Hiermee forceer je de browser om een nieuwe versie van de bestanden op te halen.
• Mac: In Chrome, Firefox of Safari: : druk op je toetsenbord tegelijkertijd op de knoppen CMD en r
• Mac: Safari:Activeer het Ontwikkel-menu. Vanuit daar kun je altijd snel de cache legen. Dit is vooral handig als je vaak een cache clear moet uitvoeren (bijvoorbeeld als je met je website bezig bent).
  • Ga in Safari naar’ Voorkeuren’.
  • Open het tabblad ‘Geavanceerd’.
  • Vink onderaan de optie ‘Toon Ontwikkel-menu in menubalk’ aan.
  • Klik in het nieuw verschenen menu ‘Ontwikkel op ‘Leeg caches’.
    Hou er rekening mee dat je na het legen van de cache overal opnieuw moet inloggen. Daarnaast moet je op alle websites cookies opnieuw accepteren en zijn advertenties minder afgestemd op je surfgedrag.
• Android & iOS (iphone/iPad): Hier is niet echt een geschikte oplossing voor. De snelste methode is om een incognito (privé) venster te openen in de browser en daarin de website nogmaals te bezoeken. Dat werkt niet altijd feilloos. Daarom kan je ook het volgende proberen:
  • Ga vanaf het home-scherm naar ‘Instellingen’.
  • Scroll naar onder en tik op ‘Safari’.
  • Tik onderaan op de optie ‘Wis geschiedenis en websitedata’.
  • Bevestig dit door op ‘Wis’ te drukken.

Let op: cache kan erg hardnekkig zijn. Soms is het nodig om de pagina meerdere malen te verversen voordat je de juiste versie ziet.

Cache is niet altijd de oplossing

Het gebruik van cache is een goede oplossing voor veel sites om deze sneller te laten laden. Maar het is zeker niet heilig. Bij dynamische websites met veel wisselende content wil je niet teveel gebruik maken van cache. Je wilt immers dat bezoekers bijvoorbeeld de laatste berichten of vacatures zien en niet die van gisteren. Daarom is efficiënt programmeren nog belangrijker dan het gebruik cache. Wij zorgen ervoor dat onze websites strak geprogrammeerd zijn en geen onnodige code inladen. Alleen om het laatste beetje te optimaliseren maken we gebruik van cache.

Heb je vragen over het gebruik van cache of het versnellen van de laadtijd van je website? Neem dan contact met ons op.

 

Photo by Crissy Jarvis on Unsplash