Caching is one of the most effective techniques for having fast pages and for improving loading speeds by several hundred milliseconds.
This time scale may seem minuscule, but cumulatively, all of those milliseconds can add up to seconds… and 1 extra second of loading time results in fewer conversions. It’s worth noting that in the retail sector, 1 extra second of loading time can make conversions fall by up to -20%.
For a fast website, efficient cache management is crucial
Each HTML page is made up of many files, like images, fonts, items coded in CSS or JavaScript, etc. These resources take time to load on the network and potentially to be generated on the server side. This significantly increases the loading times of pages.
Even when a network has more bandwidth, remaining efficient is a priority for favouring fast loading and good interactivity. Indeed, each resource generates a request and that takes time that can’t be compressed: this is called latency (we’ll return to this in the section on the back end).
Thus, for a page to load faster, you have to reduce the number of resources loaded, but also reduce the response time for each request. To do that, a good caching strategy is essential.
In practice, the HTTP protocol allows you to use various coexisting caches:
- The browser cache (also called the client cache) – this enables data to be saved in the browser directly to avoid re-downloading the resource during subsequent browsing sessions.
- The CDN-level cache (we’ll explain what a CDN is and how it works in a dedicated section) – this allows you to save resources on geographically distributed networks of cache servers.
- The origin-side cache (also known as the server cache) – this saves the results of a long operation, such as the generation of a page or optimisation of an image, to avoid duplicating the processing time for such operations.
These caches are managed with HTTP headers, for example: Cache-Control, Expires, Last-Modified, etc. In general, the header Cache-Control is the most useful for managing the different layers of caching.
How to effectively manage the various caches
So, for efficient management, you have to implement a strategy to skilfully manage the different layers of caching. Now, let’s look at two examples:
- for the caching of static resources
- and for the caching of dynamic resources.
Caching a versioned static resource
Static resources can be cached with the option of setting a maximum duration.
In this screenshot taken from our dashboard, you can see that static resources (images, JS, CSS, etc., in this case optimised by our engine) are cached for a duration of 1 month (our engine enables fine-tuned management of caching for your server-side cache, the shared CDN cache, and the browser cache). Note that, in practice, the browser cache is volatile and will not keep a resource for such a long time.
The HTTP header Cache-Control: max-age=2592000 then indicates that the resource is valid for a duration of 2,592,000 seconds (or about 1 month).
It’s worth noting that while browser caching is the most beneficial from a performance standpoint, it has the downside of being fixed and cannot be invalidated later. To avoid inconsistencies in the loading of resources after an update on the host side, our engine increases the version number present in the URL.
Caching static pages
Let’s look at another common scenario: caching a page. Unlike versioned static resources, pages can be updated without modifying the URL. This means you have to invalidate the copy of the page in the cache to retrieve a new version.
An effective strategy (the one that we use) involves caching the optimised page in our engine and in the CDN, but not in the browser.
In this example, which also comes from our dashboard, all of the pages containing “/fleuristes/” will be cached in our engine and in the CDN for 7 days, but they will not be cached in the browser.
The HTTP header used in this case is cache-control: max-age=0, s-maxage=432000. The caches shared between the CDN and our engine follow the instruction s-maxage and cache for 432,000 seconds (about 7 days).
As for the browser, it follows the instruction max-age=0. In other words, it can keep a copy, but it has to check with the server if the copy is still up to date.
There are many cases where pages are not cacheable (for example, basket pages on e-commerce websites) or are only partially cacheable (product pages).
Our engine takes this into account and addresses it with our SmartCache feature, in addition to the caching techniques for our internal engine and CDN service.
As you can see, in order to optimize the loading speed of your site and the quality of the experience for your users, you need to implement webperf best practices, and cache management is one of them!
If you have not yet implemented a caching strategy, don’t delay, we are here to help you.
Discover our improved caching system,
and all our automated optimizations for your frontend:
