layer5 icon indicating copy to clipboard operation
layer5 copied to clipboard

Fix optimize cache headers for static assets

Open Fireentity opened this issue 1 month ago • 11 comments

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

  • [x] Yes, I signed my commits.

Fireentity avatar Nov 10 '25 12:11 Fireentity

🚀 Preview for commit 40d969d53beb08bfc7f0f6607fe6ae0048ef0d48 at: https://6911d9ea85ef234e69c41743--layer5.netlify.app

l5io avatar Nov 10 '25 12:11 l5io

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:

Rajesh-Nagarajan-11 avatar Nov 16 '25 16:11 Rajesh-Nagarajan-11

🚀 Preview for commit 057b1ac93b7da0c8ad23fe0d362b6d8fb421d531 at: https://691bd56d25e7d35a91a0c64c--layer5.netlify.app

l5io avatar Nov 18 '25 02:11 l5io

@Rajesh-Nagarajan-11 I'm freeing up some time to participate in the next session

Fireentity avatar Nov 20 '25 20:11 Fireentity

🚀 Preview for commit 05901adc1fcf407b715b7f07133d25471356bada at: https://6920b5074693ba2542c24e7b--layer5.netlify.app

l5io avatar Nov 21 '25 18:11 l5io

🚀 Preview for commit 4a1b5efb022bedda7531d271a1ac9fdc1fbfe18d at: https://69238de481038ad905b0727a--layer5.netlify.app

l5io avatar Nov 23 '25 22:11 l5io

🚀 Preview for commit ad28e0b80b00adfa7f5d1fe089e1f751b52268dc at: https://692d443c290bfdacd26849fb--layer5.netlify.app

l5io avatar Dec 01 '25 07:12 l5io

🚀 Preview for commit bc65c220dee8c8ff90eb30080264229ecef3be0e at: https://692d521cd8a8d81349e20366--layer5.netlify.app

l5io avatar Dec 01 '25 08:12 l5io

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.

Fireentity avatar Dec 01 '25 10:12 Fireentity

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.

SplinterSword avatar Dec 08 '25 13:12 SplinterSword

🚀 Preview for commit fda2f78e9fc56bdd716df480c81c6fa95afbba91 at: https://69370b6370ba50ba92320460--layer5.netlify.app

l5io avatar Dec 08 '25 17:12 l5io