Home
Support Forums

[Support Guide] How does Netlify’s CDN handle caching files?

Last reviewed in August 2021.

While the topic of caching effectively is complex, Netlify’s solution is designed to be automatic and worry-free. It shouldn’t require any special configuration or build tools like cachebusting or service workers to deliver an optimal experience.

So what can go wrong? Some cachebusting techniques can make your site build and load more slowly. Scarier still, modifying Netlify’s default caching settings can break the atomic rollbacks and deploys :scream: which are some of the coolest things about Netlify’s CDN. So, you’ll want to check any custom configuration to override the defaults with some experts (right here in this thread), lest your next visitor accidentally get stuck with an out of date index.html cached in their browser for a year! Never fear - most folks won’t need to change the default settings which are designed to be safe and fast.

I made a pretty bold claim in the last paragraph - that cachebusting would make your site SLOWER on Netlify’s CDN. That’s counterintuitive, but it is true. Here are two ways that happens:

  1. The way Netlify caches, when you change a filename with every build, that means the browser can never reuse its cache for the old filename, since it isn’t smart enough to know this other filename’s cache should be checked!
  2. Further if the file with the always-different filename is a javascript or CSS file that is included in every html file - guess what, ALL of those files just changed and all need to be re-downloaded by the browser even though they are identical in content and function. There are smarter cache-busting techniques that might not slow things down, but those are pretty common pitfalls.

I wrote up this article about how Netlify caches for those who are interested in more in-depth details; feel free to ask questions about it in this thread. I’m excited to keep working making this post as useful as possible, so if you have feedback, please let me know!

5 Likes

Hi fool,

I am using a bundler that automatically appends a content hash as a suffix to all my JS and CSS files. This means that:

  1. The file name changes if the file content changes
  2. The file name DOESN’T change if the file content remains the same.

Now, from what I understand the default Netlify behavior is:

  1. Client checks with Netlify for each file if content changed (done via etag and optimized via HTTP2, but nonetheless a network roundtrip)
  2. If file content is unchanged client takes it from cache, otherwise it fetches updated version from Netlify

The relevant cache config AFAIK is max-age=0. Now, I am tempted to change the max-age for my CSS and JS files to something very high, like 604800 or even higher.
I don’t see any downside to this, as my file-content-aware fingerprinting (done by my bundler) should take care of cache invalidation.

Am I missing anything here?

UPDATE: I have now realized that I have asked this exact same question before :grinning_face_with_smiling_eyes:

Thank you for your extensive answer there. Overall, I am still thinking that increasing the max-age for JS and CSS makes sense for me, because cache busting is taken care of by content-aware fingerprinting of my bundler.

1 Like