.png)
Introduction
The Page Cache app lets you configure the HTML caching policy in Fasterize.
In particular, it allows you to:
- set the cache lifetime
- Enable the browser cache or CDN
- Exclude certain dynamic sections using SmartCache
- manage different cache versions based on the user context.
This configuration optimizes performance while retaining dynamic content when necessary.
Go to the Page Cache app
In the Fasterize console:
Settings > Page Cache
This interface allows you to define cache rules for:
- a specific page
- a page type
- or the entire site.
Configure cache policies
The Cache Policies section allows you to define how a page is cached.
Browser cache
Allows you to save the page directly in the user's browser.
This allows you to:
- to speed up future visits
- to reduce network requests.
CDN cache
Allows you to store the page in the CDN (contact Fasterize support to enable this option)
TTL
The TTL (Time To Live) determines how long the page remains in the cache.
During this time, the page is served from the cache.
Configure dynamic fragments (SmartCache)
Some pages contain dynamic elements that should not be cached.
Examples:
- shopping cart counter
- product price
- user information.
The " Dynamic Fragments " section allows you to exclude these elements from the HTML cache.
Each fragment is defined using a CSS selector.
Example:
.header.account.minicart-wrapper.product-price
Identify SmartCache fragments
When multiple elements match the same CSS selector (for example, a list of products), each element must have a unique identifier.
The Fasterize console now allows you to generate this identifier from an HTML attribute present on the page.
This ensures that each fragment remains properly identified even if the order of the elements changes in the DOM.
Fragment ID settings
Container ID Selector
A CSS selector used to find the element containing the `id` attribute.
The search traces back from the fragment to its parent elements.
ID attribute
An HTML attribute containing the value used to construct the fragment identifier.
Example:
product-id
ID prefix
A prefix added to the identifier to prevent conflicts between fragments.
Example:
product
An element with data-product-id="123" will generate a fragment with the ID:
product-123
Depth of research
Maximum number of parent elements searched to find the container.
Default value: 20
Advanced rendering options
Keep the original content
Allows the original HTML content to be preserved while the fragment is loading.
💡 This helps prevent layout shifts (CLS).
⚠️ Warning: Some data from the original content may remain visible.
Placeholder
Displays placeholder content while the fragment is loading.
For example:
- a loader
- a skeleton
- a custom HTML placeholder.
Loading fragments
There are two strategies available.
Async
The script is loaded asynchronously without blocking page rendering.
Defer
The script runs after the HTML has been fully parsed.
Configure cache variations
Some pages require multiple cached versions depending on the user's context.
The Cache Variation section allows you to manage these cases.
Anonymous caching
Allows a page to be served from the cache until the user has received cookies.
Types of cache
Allows you to define multiple cache versions based on the device type.
Responsive
2 versions: desktop and mobile
Adaptive
4 versions: desktop, mobile, tablet, and bot
Responsive — Bot-first
Version optimized for crawlers.
Variation script
Allows you to calculate a custom cache key in JavaScript.
This key is used to distinguish between different versions of the page in the cache.
Custom key (cookie)
Allows you to use a cookie's value to create a cache variant.
Example:
cookie currency
Each currency will then have its own cache version.
Conclusion
The Page Cache app allows you to precisely control a website’s HTML caching strategy.
In particular, it allows you to:
- set the cache lifetime
- Manage dynamic fragments with SmartCache
- create multiple cache versions based on the user context.