Caching is a good way to speed up Page load for most of your Users for a period of time.

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: 

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 %}

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.

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:

Set this as a small number of minutes (e.g. 60) if:

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:

{% 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.