Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance

caching is a good way to speed up page load for most of your users for a period of time introduction when you load a page, a key metric is server response time the time it takes for the server to deliver an html page to the browser this can be slightly higher for a page which relies on dynamic content, because the server has more work to do caching is one way you can reduce this time for most of your users there are a few different ways to cache liquid, but here we will cover fragment caching, as it doesn't require siteglide cli and is the easiest to get started with here's how it works the developer implements fragment caching around a block of code which includes some liquid when the next visitor arrives on the page, it will load as normal, but a snapshot of that liquid code (a cache) is taken by siteglide it is stored on the server with an expiry time and a "key" the cache remains in place until either the expiry time runs out or the cache "key" is changed during that time, visitors to the page will enjoy a faster experience because instead of running the liquid, the server will deliver the snapshot of html instead this does mean that they won't receive any updates made to content while the cache is active we'll discuss this below once the cache expires, the next user to visit will have to wait for liquid content to load and another cache snapshot will be taken syntax cache key you'll need to create a cache key this is a string that effectively names the cache that is taken of your site changing it will bust the cache and cause a new cache snapshot to be taken the liquid capture tag just creates a string with the contents you include inside it, so you don't need quote marks you can give the variable any name you like, so here i've gone for my cache key {% capture my cache key %}\<! add a string here >{% endcapture %} you can include dynamic content in your cache key a really useful thing to do is to include the url of your page in the cache key this will allow things like pagination to bust the cache and load a new one without it, changing page will keep loading the same content this is the same for things like search queries {% capture category cache key %}{{context headers path info}}{% endcapture %} the cache tag you can use the cache tag to wrap the block of liquid code that is slowing your page down you can wrap languages like javascript too, but it will have no effect on performance, as they will run on the browser long after the cache has loaded {% cache category cache key, expire 60 %} {% endcache %} the expire parameter getting this right is a fine art it really depends on your site and what you are trying to achieve an integer is needed to determine the number of minutes a cache will be active for before it expires and a new cache is made set this as a large number of minutes (e g a day 300000) if performance is essential to your page's purpose content is not updated regularly lots of liquid is used on the page, especially several `{% include 'webapp' %} tags you have a low traffic rate if only a few users visit each day, you will need a longer expiry in order for the difference to be noticed set this as a small number of minutes (e g 60) if content is regularly updated you just want to protect against ddos attacks or you have high traffic and want to improve the experience for a large number of users busting the cache using the key what if you want the cache to last from a long time normally, but you want content to be updated immediately when there is an update to a key piece of dynamic content? you may even just want to bust the cache while you are developing something to do this, you want to change the cache key let's say the cache key is just the url of the site {% capture category cache key %}{{context headers path info}}{% endcapture %} to bust the cache manually, you can either add a parameter to the url ?test=test change the cache key e g add a number at the end {% capture category cache key %}{{context headers path info}} 1{% endcapture %} to change the cache key dynamically, add dynamic liquid to the cache key, e g from a custom graphql query, a webapp or a module