CODEWITHSUNDEEP
csswordpressgoogle-chromecaching
rysv
rysv

Reputation: 3440

WordPress enable browser cache of css/js files while preserving query string

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?

enter image description here

Upvotes: 1

Views: 1079

Answers (1)

Fenton
Fenton

Reputation: 251102

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.

Chrome Does Cache

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:

Chrome Caches URIs with a Query String

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.

Upvotes: 1

Related Questions