What is Browser Cache TTL? The Browser Cache Time To Live (TTL) is the amount of time the end-users browser will cache a resource. This resource will be served from browser local cache until the TTL expires, after which the browser will request the asset again.
Overview
When an end-user visits a website, the users' browser downloads the static content (images, etc.) of the website so that it may be displayed to the end-user. This content is stored in browser local cache for a certain amount of time, specified by the "max-age" value of the origin server's Cache-Control header. When the contents max-age is reached, it is purged from the browser local cache on the user's computer and will need to be fetched from the website's origin (or CDN if cached) the next time the user browses to the site.
The Browser Cache TTL function within StackPath's portal allows administrators to set a browser expiration time for cached assets that don't already have an expiration time set on the origin server. Please note that the CDN will follow the origin's Cache-Control headers if present.
The default value set within the StackPath portal for Browser Cache TTL is 1 hour. This value may be adjusted based on the needs of the website. If the static content of the website is changed or updated frequently, then a low TTL is recommended, however, if the static content does not change often then a much longer TTL can be used.
Cache-Control headers take precedence over Expires headers when both are present. If your website is being flagged for "Add Expires Headers", don't worry! They're antiquated, as Cache-Control headers have primarily replaced them.
How To Change Browser Cache TTL
- Log into the StackPath Control Portal
- Navigate to Sites > Domain > CDN
- Browser Cache TTL is located under the Client Browser Policy section. Use the dropdown box to select the desired TTL for browser-cached assets.
If a site is being flagged by speed tests for "Serve static assets with an efficient cache policy", try extending the browser cache TTL first!
Verifying The Header
To verify that the desired browser cache TTL has been applied, the response headers from a cached static asset can be checked. One of the response headers from the asset will be "Cache-Control", with the max-age set at the time specified in the portal for the browser cache TTL (in seconds). The following image shows a static asset that is being served directly from the origin server:
Notice the absence of the Cache-Control header. Now, we will activate the CDN and display the response headers for the same asset, with the browser cache TTL set to 1 hour (3600 Seconds):