Resolving issues with combining CSS/JS and Varnish (URLs with ?f=)

⛔️ Deprecated: This document covers a potential issue with WP Rocket 2.10.x or lower.
It does not apply anymore for WP Rocket 2.11 or greater.

In rare cases WP Rocket’s combine CSS/JS feature does not seem to work properly if you use Varnish on your website. A solution can be to edit your Varnish configuration file, given that you have access to it.

The following example addresses Bitnami, however, technically advanced people may be able to apply it to their own environment.

Redirection breaks concatenation

When the concatenation script tries to collect the files to be combined, it does that by creating a URL like this:

https://example.com/wp-content/plugins/wp-rocket/min/?f=path/file.css,path/other/file.css

Note that URL contains the query parameter ?f=, followed by a string of relative file paths separated by commas.

This kind of URL contains all our concatenated file content, and WP Rocket is now ready to save that content as a static file in /wp-content/cache/min/.

However, on certain Varnish configurations, the URL with ?f= would get redirected to the home page, thus breaking the concatenation process.

Fix: Edit Varnish configuration

If you have access to your Varnish configuration file, you can modify it to exclude URIs that contain ?f=. This will solve the issue.

For our Bitnami example, you would have to modify the following lines of code in wordpress.vcl.

Change this:

if (req.url ~ "\.(gif|jpg|jpeg|swf|flv|mp3|mp4|pdf|ico|png|css|js)(\?.*|)$") {
	unset req.http.cookie;
	set req.url = regsub(req.url, "\?.*$", "");
}

to this:

if (req.url ~ "\.(gif|jpg|jpeg|swf|flv|mp3|mp4|pdf|ico|png|css|js)(\?.*|)$") {
	if(!(req.url ~ "\?f=")) {
		unset req.http.cookie;
		set req.url = regsub(req.url, "\?.*$", "");
	}
}

Note: Non-Bitnami users, please contact your hosting support if you need help adapting this example.