What is caching?
In our manual on front-end optimization we already mentioned on the subject of 'caching'. In that article, we also describe how a request to a website is processed. When visiting a page without caching, all the information you want to receive must be requested from various files, databases and external sources. Just like a warehouse employee who has to pick his orders in various places, this can take some time. The solution: caching. Caching ensures in its basic form that all requests are already ready in packages, within reach, to be served to the website visitor. Please note that when you post new messages on your site that the packages are of course renewed, otherwise your new content would not be visible. In this case, the cache should be emptied and can then be refilled.
Caching can happen on different layers. First, all our websites at Savvii have the possibility to use Varnish caching. This is caching that takes place on the server itself. In addition, there are additional caching layers that can be added by plugins for Wordpress. Finally, the visitor of your site also has a local browser cache. In this manual we only focus on the first two, since browser caching is a separate discipline.
Wordpress caching plugins in de Wordpress Codex.
Varnish is an open-source caching solution that we run on all of our servers. All sites can and may use this, but we see that this doesn't always happen. This is because websites are made very personal for all visitors and therefore want to deliver specifically created content. Coming back to the packages that the server prepares to give to the visitors, you can imagine that this does not work if each package has to have something special for every visitor. Think of webshops with a separate shopping basket for each visitor. Sometimes this happens consciously (for instance with forementioned webshops), but it also happens that varnish cache doesn't work because there is a plugin blocking it. It is a good thing to check whether the varnish cache is active.
Verify that your site is using Varnish caching successfully
We serve headers to the pages that our servers present. You can check these headers by opening the browser's developer tools and viewing the headers there. It differs per browser where you can find these developer tools. For Google Chrome, you can find an example at the bottom of this article as an example. Our header indicating whether Varnish is used looks like this:
If this header shows HIT as a reaction, then the page is equipped with our Varnish caching. If you see MISS here, the page is not published by Varnish. This can happen if this is the first time the page is viewed, in which case you can refresh the page and check the headers again. If you see a MISS again then there is probably something that blocks the Varnish caching. This can have various causes, but the most common is a PHP Session cookie. These cookies make each page unique for every visitor. In this case, Varnish is not used. You can check if this cookie is used by looking at the headers again, but this time you are looking for:
Do you see this header? Then a part of your website uses this. Think of social media plugins or other plugins that offer unique content to customers. In that case you can search for the relevant theme or plugin and see if you can switch off this function. There is no 'easy' way to find out which part of your site uses the PHP session cookie (see also this page).
Varnish provides complete page caching and does not work for unique visitors. Keep in mind that logged in visitors are unique, so the backend of your site is not cached by Varnish. For this (and for other more advanced caching options) you can use caching plugins, such as:
W3 Total Cache: you can use this if your site is on a VPS One or higher and you want to use the memory of your private server. This memory is faster in issuing cached files than a standard hard disk cache (on our shared platform). In this blog article you will find the different settings that you can use for this plugin.
WP Rocket: you can use this for a more simple caching and is available in Dutch. WP Rocket has a "preloading" or "polling" function where the different pages of your site are visited by a bot, so that they are loaded into the cache. It's important to know what you're doing when using this, and not to use this on large (web shop) sites that are already responding slowly. This allows the site to attack and break itself. Read this blog article for the standard settings and possibilities of WP Rocket.
In addition to these two plugins, there are many more to be found in the WordPress codex. To all caching plugins, the following applies: test and compare! All sites are different, so each caching plugin can have a different effect . Experiment with the settings to achieve the best performance.
De developer tools van Google Chrome (druk op de F12 toets). Hier vind je de headers van de site die je bezoekt.
- Varnish doesn't seem to work, extra information: https://support.savvii.nl/en/support/solutions/articles/1000148492-jullie-caching-lijkt-niks-te-doen-kan-dat-kloppen-
- Varnish blocks dynamic content: https://support.savvii.nl/en/support/solutions/articles/1000148491-mijn-dynamische-content-wordt-niet-geupdate-hoe-kan-dat-
- A nice illustration of caching (English): https://cachingexplained.com/
Alle steps in this three step plan
Updating and cleaning up all extra elements of your website.
Step 2: caching (this article)
Setting up our Varnish caching and own caching plugins
A more technical approach for analyzing further speed delays.