See all tutorials

Tutorials » How to cache the web site resources

A web site application will have resources that can be shared across multiple web pages, these resources can be javascript files, css files, images, static web pages. Caching at the client side (browser level) plays an important role in the scalability, performance and user experience of the web application.

Webpagebytes CMS handles static and dynamic content. Dynamic content is defined as a content that might change in time or from a user to another. This tutorial covers only the caching of static content.

Webpagebytes CMS can define static content in two ways

  1. Site pages with plain text source interpretation
  2. Files uploaded under Files section
The caching applies the same in both ways and it is based on Cache-Control header, max-age directive.

The use of Cache-Control HTTP header and max-age directive can be done only when the resource is referenced through a version (build number, last modification timestamp, content hash).

...
<head>
    <script src="./site.js"></script>
    <link rel="stylesheet" href="./site.css">
</head>
...
In this example, ./site.js can use at most only ETag, If-None-Match header values.

Webpagebytes CMS provides a Freemarker directive to incorporate very easy the resource hash in the referenced url so that when the resource will change so will the referenced url, allowing in this case to use the max-age directive.
See below the query param cqp hash value (./site.js?cqp=56988623), when the resource will change the cqp query parameter value will change too, which will force the browser to request the resource again.

...
<head>
    <script src="./site.js?cqp=56988623"></script>
    <link rel="stylesheet" href="./site.css?cqp=875453378">
</head>
...

Caching site pages

Use the following Freemarker directive to produce the uri for ./site.js

<@wpbUri uriPattern="/site.js">./site.js</@>
It will produce the output
./site.js?cqp=760291390
When the browser will load resource at ./site.js?cqp=760291390, the server will return also the Cache-Control header with the max-age directive set.

uriPattern attribute must be a Site url that links to a site page with plain text source interpretation, in this way the CMS engine can obtain the resource hash value.

What is inside the directive body, between the tags <@wpbUri> and </@> will be returned together with the cache query parameter and the hash value.

Caching site files

Use the following Freemarker directive to produce the uri for ./js/jquery-2.1.3.min.js assuming that the jQuery is uploaded under /js/ folder.
<@wpbUri uriFile="/js/jquery-2.1.3.min.js">./js/jquery-2.1.3.min.js</@>
It will produce the output
./js/jquery-2.1.3.min.js?cqp=2795930625
When the browser will load resource at ./js/jquery-2.1.3.min.js?cqp=2795930625, the server will return also the Cache-Control header with the max-age directive set.

uriFile attribute must be the path to a file uploaded under Files section of Webpagebytes CMS administration interface, in this way the CMS engine can obtain the resource hash value.

What is inside the directive body, between the tags <@wpbUri> and </@> will be returned together with the cache query parameter and the hash value.

Changing the query parameters that trigger Cache-Control header

By default the query parameter that triggers the Cache-Control header is cqp.
To change the parameter name see Webpagebytes CMS customization documentation.

Fork me on GitHub