HTTP headers (for cache-control)


#1

Is this statement correct?

css and js should use private for proxy caching
https://developers.google.com/speed/docs/best-practices/caching#LeverageProxyCaching

I’m intending to use this directly for my hosting and alt. through a CDN, and wish to have the best settings for speed optimization, TTFB.

private indicates for the files not to be cache-able. My question was how would that improve the optimization if you don’t allow a CDN to cache your css and js? Don’t you want your CDN to cache these files?

<IfModule mod_headers.c>
Header set Connection keep-alive
<filesmatch "\.(ico|flv|gif|swf|eot|woff|otf|ttf|svg)$">
    Header set Cache-Control "max-age=2592000, public"
</filesmatch>
<filesmatch "\.(jpg|jpeg|png)$">
    Header set Cache-Control "max-age=1209600, public"
</filesmatch>
# css and js should use private for proxy caching https://developers.google.com/speed/docs/best-practices/caching#LeverageProxyCaching
<filesmatch "\.(css)$">
    Header set Cache-Control "max-age=31536000, private"
</filesmatch>
<filesmatch "\.(js)$">
    Header set Cache-Control "max-age=1209600, private"
</filesmatch>
<filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "max-age=600, private, must-revalidate"
  </filesMatch>

#2

I believe you are wrong in that, first I do not find the statement over there and I would assume so as it is incorrect.

A private Cache-Control header means that only the user’s browser is allowed to cache the resource, while a public one means everyone can cache, including CDNs, proxies, browsers.

You should allow caching whenever possible and safe to do so (usually JS and, especially, JS files should be cacheable) with the highest value you deem acceptable. In case you want to change the resource it’s better to add a query string (which could prevent some caches to save the resource, not Cloudflare unless you tell it to not do so) or better yet add a cache-busting method, like a change in the file name via a versione number or an hash of the file.


#3

From the Google link:

The CSS is allowed to be cached by browsers and intermediate caches (for example, a CDN), and is set to expire in 1 year. Note that you can use the “far future expires” of 1 year safely because you embed the file fingerprint in its filename: if the CSS is updated, the URL changes as well.

The JavaScript is also set to expire in 1 year, but is marked as private, perhaps because it contains some private user data that the CDN shouldn’t cache.

Apart from that if I remember right regarding the CSS and JS caching to put it on private was that it would create a overhead between your server and the proxy cache, that traffic would go back and forth between them.


#4

That piece of info is not in that link, but here https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#cache-control

That is an example though given the requirements of the site in the image above. That is not the recommendation.


#5

This topic was automatically closed after 14 days. New replies are no longer allowed.