[Common Issue] How does Netlify’s CDN handle caching files?

answered
#1

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 - the checksum changed, and thus, the reusability is gone. There are smarter cachebusting techniques that might not slow things down, but those are pretty common pitalls.

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!

1 Like
[Common Issue] Why do I see “Uncaught SyntaxError: Unexpected token <” errors? How can I use chunking or versioning for my assets at Netlify?
[Common Issue]: Frequently encountered problems during builds