Add guidance on what Cache-Control headers should be used on assets

[Nooshu]

The example is specifically related to fonts, but is the same principle for all assets.

An issue raised by Ed on the x-gov channel where unstyled text is being seen between page loads. This is Arial to Transport changing over. In theory this shouldn't be occurring because by this point the font is already in the cache. But an assets actual usage is dictated by the Cache-Control headers. For example, if a font is already in a browser cache but it has Cache-Control: max-age=0 set, looking at the examples in the MDN docs:

Specifying no-cache or max-age=0 indicates that clients can cache a resource and must revalidate each time before using it. This means HTTP request occurs each time, but it can skip downloading HTTP body if the content is valid.

This revalidation is blocking the browser from using the font, even though it is in the cache. It takes 1-RTT (round trip time) from server to browser before the browser is allowed to use the font. This could be 100ms+ on poor performing servers / or users on poor connections.

We should add guidance on setting long-life Cache-Control headers for assets. For example, 1 year is set on fonts served from www.gov.uk:

cache-control: max-age=315360000

If it is that we want this revalidation to occur we can use the stale-while-revalidate directive. But as these font files have changed only once in many years, it really isn't needed.

[stevenjmesser]

Hi @36degrees, @claireashworth and I were discussing this and we're not sure if it's relevant for the Frontend docs. There's nothing in the docs about HTTP headers currently and it seems like something that would go in other technical guidance. (Although not sure where that sort of guidance re. web performance goes currently?)

[romaricpascal]

Now we've moved to Netlify, we've set our fonts to be set to the longest max-age and. immutable in #419, so closing this.