Fix optimize cache headers for static assets #7116
Conversation
Disables Netlify's default caching headers (mergeCachingHeaders: false) to implement a more granular and performant caching strategy. This change sets long-term immutable caching (1 year) for static assets like JS, CSS, fonts, and images. At the same time, it ensues HTML and page-data files are not cached (must-revalidate) to prevent stale content. Finally, the security headers (X-Frame-Options, CSP) are moved to the 'allPageHeaders' option for proper global application. Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
|
🚀 Preview for commit 40d969d at: https://6911d9ea85ef234e69c41743--layer5.netlify.app |
leecalcote
left a comment
leecalcote
left a comment
There was a problem hiding this comment.
Thanks for evaluating the site's performance in this way, @Fireentity. 👍
| "/*.js": [ | ||
| "Cache-Control: public, max-age=31536000, immutable", | ||
| ], | ||
| "/*.css": [ |
There was a problem hiding this comment.
Surely, we change our CSS many times within the span of a year and will find ourselves in trouble if we don't age this content much more aggressively.
There was a problem hiding this comment.
I've looked into this further, and while Gatsby's content hashing technically prevents broken styles even with a 1-year cache, a shorter duration is indeed better to avoid "cache bloating" in users' browsers given our frequent updates. I propose lowering the max-age to 30 days. This seems to be the ideal sweet spot because it is the minimum duration required to pass Google PageSpeed Insight's "Serve static assets with an efficient cache policy" audit without warnings, while still keeping the cache size manageable compared to the 1-year default.
Here are the references supporting this approach, including the NitroPack guide and Google's documentation:
nitro
screamingfrog
developer.chrome
There was a problem hiding this comment.
Specifically, I have configured
HTML and page-data to always revalidate (max-age=0) so users immediately see new deployments
CSS and JavaScript files are now set to 30 days (max-age=2592000) to prevent cache bloat.
Fonts and images remain at 1 year (max-age=31536000) since these assets rarely change
leecalcote
left a comment
leecalcote
left a comment
There was a problem hiding this comment.
More thought needs to be given to the extended caching duration proposed for some types of content.
The font file section is good to go. The rest is an open question that needs to be justified for each type of content.
|
Thank you for your contribution! Add it as an agenda item to the meeting minutes, if you would 🙂 |
|
🚀 Preview for commit 057b1ac at: https://691bd56d25e7d35a91a0c64c--layer5.netlify.app |
|
@Rajesh-Nagarajan-11 I'm freeing up some time to participate in the next session |
Update gatsby-config.js to lower the Cache-Control max-age from 1 year to 30 days (2592000 seconds) for .js and .css assets. Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
|
🚀 Preview for commit 05901ad at: https://6920b5074693ba2542c24e7b--layer5.netlify.app |
Update Cache-Control headers for the /static/ folder to must-revalidate. Since files in this directory do not use content hashing, long-term caching prevented users from seeing immediate updates. Signed-off-by: Lorenzo Croce <lorenzo.croce@arenastudios.it>
|
🚀 Preview for commit 4a1b5ef at: https://69238de481038ad905b0727a--layer5.netlify.app |
|
🚀 Preview for commit ad28e0b at: https://692d443c290bfdacd26849fb--layer5.netlify.app |
|
🚀 Preview for commit bc65c22 at: https://692d521cd8a8d81349e20366--layer5.netlify.app |
Fireentity
requested review from
ChetanFTW,
Rajesh-Nagarajan-11 and
saurabhraghuvanshii
|
I believe the PR is ready now. Regarding the cache settings, static files are not post-processed and do not carry content hashes in their filenames, so they require a max-age=0 directive to ensure the browser does not serve stale content unless the filename is manually changed. For JS and CSS files, I have set the duration to 30 days because they are updated frequently; this prevents cache bloat while still meeting the minimum caching requirement. Finally, since assets like SVGs and fonts change very rarely, a one-year cache duration is appropriate for them. |
4 participants
Description
I've disabled Netlify's default caching (mergeCachingHeaders: false) to implement a more granular policy. This change sets a long-term (1-year, immutable) cache for all hashed static assets (JS, CSS, images, fonts). Conversely, HTML and Gatsby's page-data files are now set to must-revalidate to ensure users always receive fresh content.
This approach aligns with caching best practices. As part of this, I also moved the global security headers (CSP, X-Frame-Options) to the correct allPageHeaders setting.
References:
https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl
https://jakearchibald.com/2016/caching-best-practices/
https://simonhearne.com/2022/caching-header-best-practices/
This PR fixes #6930
Notes for Reviewers
I'm addressing other open issues in separate PRs. Since this one affects caching for all pages, I felt it was best to keep it focused.
Signed commits