Caching static assets

The problem

Pagespeed insights gives https://www.freecodecamp.org/ a relatively poor score (50-60 for mobiles and 80-90 for desktops) indicating that there is room for improvement.

One of the issues is that we do not cache our static assets for very long:

while this does not directly impact our score it does directly impact our users. They’re wasting time and bandwidth downloading the same assets multiple times.

The cause of the problem

We rely on Cloudflare default browser cache, with a TTL of 4 hours. What they do is simply add cache-control: max-age=14400 to whatever they serve.

The (proposed) solution

Since webpack (both in our npm run build-workers and in Gatsby) adds content hashes to the name of each asset we can store them indefinitely. When the client is updated, it will request new versions of the assets, since they will have new content hashes. This should be true for everything except bootstrap.css and sass.sync.js. Every other asset can then be cached with Cache-Control: public, max-age=604800, immutable as discussed on MDN.

Since this is an aggressive caching strategy, we should make sure that all assets which do not include content hashes are accounted for.

Setting max-age via Cloudflare

If Cache-Control: max-age 31536000 is enough, then we can just let Cloudflare handle it. I’m not sure public or immutable is strictly necessary. That’s live right now on https://www.freecodecamp.dev/.

Controlling the headers ourselves

If fine-tuning is required, we can set them and Cloudflare will respect the headers we set. serve can set headers for both the 404 page and everything else. NGINX might be able to, but I don’t know the config.

404s

If the asset is missing, Cloudflare will cache it for 3 minutes, by default. If we set Cache-Control no-cache it will not be cached by Cloudflare. Ideally we should set this to minimise disruption for users when we deploy.

[raisedadead]

Ah, nice, I’d not thought about that, but it could be a big improvement. Are you looking into it or shall I?

I am not looking into any perf-related issues at all. Please feel free to explore.

[shadmankhan]

Hi guys, I understand the importance of caching static assets. I have a suggestion, that we can add this caching process in the service-worker at the client-side. This also has various pros, that at this moment FCC doesn’t have PWA (Progressive web app) support. We can bring the PWA feature as well as caching to the client-side. To achieve this, there are several ways, one of them is to use Google’s workbox.

I hope I am able to explain the idea. Please let me know your feedback. 😃