Fix optimize cache headers for static assets
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.
- [x] Yes, I signed my commits.
🚀 Preview for commit 40d969d53beb08bfc7f0f6607fe6ae0048ef0d48 at: https://6911d9ea85ef234e69c41743--layer5.netlify.app
Thank you for your contribution! Let's discuss this during the website call tomorrow ( 17/11/2025 ) at 6:30 PM IST | 8 AM CT
Add it as an agenda item to the meeting minutes, if you would :slightly_smiling_face:
🚀 Preview for commit 057b1ac93b7da0c8ad23fe0d362b6d8fb421d531 at: https://691bd56d25e7d35a91a0c64c--layer5.netlify.app
@Rajesh-Nagarajan-11 I'm freeing up some time to participate in the next session
🚀 Preview for commit 05901adc1fcf407b715b7f07133d25471356bada at: https://6920b5074693ba2542c24e7b--layer5.netlify.app
🚀 Preview for commit 4a1b5efb022bedda7531d271a1ac9fdc1fbfe18d at: https://69238de481038ad905b0727a--layer5.netlify.app
🚀 Preview for commit ad28e0b80b00adfa7f5d1fe089e1f751b52268dc at: https://692d443c290bfdacd26849fb--layer5.netlify.app
🚀 Preview for commit bc65c220dee8c8ff90eb30080264229ecef3be0e at: https://692d521cd8a8d81349e20366--layer5.netlify.app
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.
I don't think these changes will apply in the actual website deployment, To my knowledge the website is deployed using github pages and github pages don't support:-
- Netlify-style _headers files
- Custom cache rules
- Custom security headers
gatsby-plugin-netlify only works when the hosting provider supports these features (Netlify does).
As a result, none of the caching or security configurations added in this PR take effect when deployed to GitHub Pages.
If staying on GitHub Pages, if possible Cloudflare can be used to inject headers:
This allows us to set:
- Cache-Control for assets
- CSP
- X-Frame-Options
- Long-term caching for fonts/images
Any other required response header
This approach keeps GitHub Pages as the static host while adding full control over security and caching.
🚀 Preview for commit fda2f78e9fc56bdd716df480c81c6fa95afbba91 at: https://69370b6370ba50ba92320460--layer5.netlify.app