Site optimization: caching (step 2/3)

Modified on Thu, 03 Feb 2022 at 06:36 PM

What is caching?

In our manual on front-end optimization, we briefly touch on the subject of caching. We also describe here how a request to a website is handled. When you visit a page without caching, all the information you want to receive must be retrieved from various files, databases and external sources. Just like a warehouse employee who has to pick up his orders in different places, this can take some time. The solution: caching. In its basic form, caching ensures that all requests are already available in packages, within easy reach, to be issued to the website visitor. Please note that when you post new messages on your site, the packages will of course be renewed, otherwise your new content will not be there. In this case, the cache must be emptied and can then be refilled.

Caching can be done on several layers. First of all, 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 extra 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, as browser caching is a specialty.

Wordpress caching plugins in de Wordpress Codex.

Varnish caching

Varnish is an open-source caching solution that we run on all our servers. All sites can and may use it, but we notice that this does not always happen. This is because websites are made very personal for all visitors and therefore want to provide specifically created content. Returning to the packages that the server prepares to give to the visitors, you can perhaps imagine that this does not work if each package has to have something special for each visitor. Think of webshops with separate shopping baskets for each visitor. Sometimes this happens deliberately (as with the webshops), but also the varnish cache sometimes does not work unconsciously because there is a plugin that blocks it. It is good to check if the varnish cache is active.

Checking if your site is using Varnish caching successfully

We give headers to the pages that our servers publish. You can check the headers by opening the developer tools of your browser and view the headers there. It varies per browser where you can find these Developer Tools. For Google Chrome you can find an example of this at the bottom of this article. Our header for Varnish looks like this:

X-Varnish-Cache: HIT

If this header gives HIT as a reaction, then the page is provided with our Varnish caching. If you see MISS here then 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 another MISS then there is probably something blocking the Varnish caching. This can have several causes, but the most common one is a PHP Session cookie. These cookies make each page unique to each visitor and therefore Varnish is not used. You can check if this cookie is being used by looking at the headers again, but this time you are looking:

Set-Cookie:PHPSESSID=######**********************

Do you see this header standing? Then a part of your website makes use of it. Think of social media plugins or other plugins that offer unique content to customers. In that case you can look for the relevant theme or plugin and see if you can disable this feature. There is no 'easy' way to find out which part of your site uses the PHP session cookie (see also this page).

The developer tools from Google Chrome (press the F12 key). Here you will find the headers of the site you are visiting.

Plugin caching

Varnish provides complete page caching and does not do this for unique visitors. Now all logged in visitors are unique, so the backend of your site will not be cached by Varnish. For this (and for other more advanced caching possibilities) you can use caching plugins, such as:

W3 Total Cache: if your site is on a VPS One or higher and you want to use the working memory of your private server. This working memory is faster at publishing cached files than a standard caching on hard disk (on our shared platform). In this blog article you will find the different settings you can use for this plugin.

WP Rocket: use it for the 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 cached. Watch out for this and don't use it on large (webstore) sites that are already reacting slowly. This can cause the site to attack itself and break down. Read this blog article for the default settings and features of WP Rocket.

In addition to these two plugins, there are many more to be found in the Wordpress codex. For all caching plugins: test and compare! All sites are different, so each caching plugin can have a different effect on this. So experiment with the settings to get the best performance.