BG

Curb your Netlify's Cache Control

2m

Since Netlify doesn’t deal with .htaccess files, you need special instructions to tune caching options.

I recently moved to self-hosting my webfonts for my personal site and encountered, that Chrome for Desktop would no longer cache webfont files even between subsequent page navigation.

Turned out Netflify applies custom caching rules in their CDN.

They apparently set cache-control: max-age=0 for most files but also keep possibility of caching without further configuration.

If you want to control caching by yourself to can set some Header Rules:

Example 1:

Via netlify.toml file in Repo Root

[[headers]]
for = "*.woff2"
[headers.values]
Cache-Control = "public, max-age=604800"
[[headers]]
for = "*.js"
[headers.values]
Cache-Control = "public, max-age=604800"

Example 2

Via _headers file in published public directory

/*.woff2
Cache-Control: max-age=604800, public
/*.js
Cache-Control: max-age=604800, public

More extensive examples:

Comment on twitter