Wanted to cache css/js files in WordPress in the browser as much as possible (for faster loading). However, (atleast Chrome) won't cache if there is a query string apparently. But putting version in query string is very useful and besides there are css files in WordPress code and other modules such as tinymce where I don't have control (they all use version query string). Is there a way still files can be cached?
There are lots of places your file may get cached between the source and the user. The browser is just one of these.
The recommendation to avoid query string arguments is based on many popular cache servers not caching if there is a query string. We're talking about servers that sit in front of your web server. (Some, like Cloudflare let you choose how you handle query strings).
On the whole, browsers still cache a resource that has a query string if you send the appropriate headers.
The common way to get the best of both worlds is the version that actual name:
script-3.4.2.js
This gives you versioning without a query string and makes you agnostic to the caching technology.
If you are a WordPress user, the chances are you have a script loaded from:
https://www.example.com/wp-includes/js/wp-embed.min.js?ver=4.8.2
As with all scripts, you gotta get it on the first load. But it should have some form of cache control headers.
cache-control:public, max-age=172800
content-encoding:gzip
content-type:text/javascript
date:Thu, 19 Oct 2017 18:26:18 GMT
etag:W/"576-543356dcbb9ba"
expires:Sat, 21 Oct 2017 18:26:18 GMT
last-modified:Fri, 09 Dec 2016 08:20:37 GMT
status:200
vary:Accept-Encoding
When you navigate to another page that references the script (i.e. you can't test this by loading the file directly as the browser behaves differently)... it loads it from the cache:
If you find it isn't caching, double check the headers being sent with the file as they are more likely to be a problem than the query string.
