Home About Blog

A novel way to cache HTML

section.io allows you to cache HTML documents as well as static assets. This reduces the number of requests to the origin as well as delivers faster response times to the user.

Normally to be able to cache HTML documents, all personalised information on each page needs to be replaced by AJAX calls to the origin, thus making the HTML generic and cacheable. However this is not always possible as some platforms embed personalised information such as cart information, logged user names and other information on the HTML document. In this scenario, anonymous user caching can be used to still serve HTML documents from the cache until personalised information is required.

Personalised information is only required once a user decides to perform an action that has personalisation. Users that are just landing on the site for the first time then browsing around are generally looking at pages that do not contain personalised content. It is now that we need to differentiate between an anonymous user and an user that is in session.

Most platforms issue a session cookies to every user as a way to keep track of a user’s state. This session cookie is generally unnecessary until the user needs to perform a personalised action. As long as the user does not have a session cookie set on the browser, they are considered to be in anonymous caching mode. So until that point, Anonymous User Caching can examine every request from the origin and prevent the session cookie being set on the user’s browser. As these responses are now generic they can be stored in cache and served to other users (which delivers incredible page load speeds). This is done by stripping set-cookies on origin response resources that are requested by anonymous users.

Once a user performs an action such as add to cart or login, the cache detects this and from then on all HTML document requests for that user pass through to the origin servers (Requests for that user are never served from cache). This time the set-cookie header from the origin response is allowed to be sent to the browser. Once the session cookie is set, subsequent requests from this user will bypass the cache, this users is no longer considered to be anonymous.


A basic Anonymous HTML caching setup would look similar to this.

What this means in pseudo-code

From this code, you can see that when a new user navigates to the site, they would not have a session cookie, in this case “ASP.NET_SessionId” but can be any session cookie such as “frontend” for Magento. They would belong in the “no_session_cookie” bucket in the cache and would be served from the cache. Any non personalised requests they make would be served responses from cache that have the Set-Cookie header stripped from the response.

As soon as they perform an action such as POST, or go to an URL that is excluded from caching for example /cart, the cache will now allow the the response from the origin through to the browser with a Set-Cookie header. Once the session cookie is set, future responses to their requests will fall into the else block on line 14 and be marked as uncacheable. Static assets such as images can still be served from the cache, but HTML pages containing personalisation will be served from origin.

1 Like

This is the same code for VCL 3.0

When implementing this configuration for Magento 1, Please checkout our note to disable CSRF: Magento 1 - CSRF