Resolving Issues with File Optimization

So you have activated one or more options to minify or combine files, removing query strings, or un-render-block CSS/JS, and your website is toast? Broken layout? Misplaced items? Links or forms not working?

Here is the one simple step to fix all of those:

1. Deactivate all the options!

Seriously, do it. Uncheck all those options for minifying and combining files, removing query strings, render-blocking CSS/JS, and save changes. Your pages will still load (nearly) as fast as before, and your website will be back as beautiful as ever again.

Heads up! If the issue has NOT gone away at this point, it is caused by something else than file optimization, and you don’t need to follow this tutorial any further.

2. First aid

Which option causes the issue exactly?

Re-activate your options one by one and check your website in a logged out window after each step. Once the issue re-appears, you know which option exactly causes it. Now you can simply keep that option deactivated, or continue troubleshooting.

Does your website currently display a “coming soon” page to visitors?

If so, file optimization will not work. Continue to configure file optimization once your website or staging site can be viewed even when you are not logged-in as a WordPress user.

Does minification actually work?

In this article we assume that the technical process of file optimization (i.e. generating minified files) works as it should. If that is not the case, for example if you do not see any minified files on your server, check out this document:
Pages are not cached or CSS and JS minification are not working

Learn the basics of how to understand “PageSpeed”!
Before you continue troubleshooting, we strongly recommend you educate yourself on how to understand the “performance grade” from Google PageSpeed Insights, GT Metrix and other tools.

Read these 2 articles before you proceed:
Google Page Speed Grade does not improve
How to correctly measure your website’s page load time

Skipping this step can result in a waste of your time, energy, and even money.

3. Troubleshooting

By now, you have completed these steps:

  • You have excluded other possible causes for the issue you’re seeing.
  • You know which option(s) exactly causes the issue.
  • You have actually decided to troubleshoot instead of just leaving some options deactivated.

Let’s get on with it then!

We are going to assume you have a basic idea about these things:

  • what “minification” is;
  • what “concatenation” is;
  • what the “HTML document” is and how to read it (at least basically);
  • what a “file URI” is and how to find it in the browser;
  • what the “development tools” (or “dev tools”) in the Chrome or Firefox browser are, and how to open them.

Should you actually be doing this? If any of the terms listed above are complete news to you, you may not be the person who should worry about troubleshooting here, unless you are keen to educate yourself about some of the more technical aspects of websites.
None of the things covered in this article are actually mandatory in order to have a faster website.However, if you choose to go on, be sure to bring the required tech skills.

Minify HTML

  • Can reduce page size.
  • Strips all (or most) of the line-breaks and unnecessary spaces from the HTML document.
  • If you notice any issues with Google Analytics or any other scripts using CDATA comments in the source code, try if deactivating HTML minification solves the issue.

If you need to exclude any files from the following options, you will need to find the original URIs unprocessed by WP Rocket. To do this while the plugin is active you can load the unoptimized page with original URIs intact, by adding a query string, like ?nocache to any url, e.g. http://example.com/sample-page/?nocache

Minify CSS/JS

  • Can reduce page size.
  • Strips all (or most) of the line-breaks and unnecessary spaces from CSS or JavaScript files.
  • No general known issues.
  • You can exclude specific file URIs from the minify/combine process by copy-pasting them into the respective exclusion fields in your settings.
  • If you exclude files, make sure you exclude original file URIs, not the ones generated by WP Rocket! The file URI you enter in the exclusion field must not contain “/cache/min” or “/cache/busting”.

Combine CSS/JS

  • Can reduce the number of HTTP requests.
  • Combines all CSS and JavaScript files into one (larger) file per file type; 1 for CSS, and 1 for JS.
  • Should not be used when site runs on HTTP/2. See this article:
    Configuration for HTTP/2
  • ⚠️ Can cause issues when themes/plugins have not defined correct dependencies for enqueued scripts or stylesheets.
  • You can exclude specific file URIs from the minify/combine process by copy-pasting them into the respective exclusion fields in your settings.
  • If you exclude files, make sure you exclude original file URIs, not the ones generated by WP Rocket! The file URI you enter in the exclusion field must not contain “/cache/min” or “/cache/busting”.
  • Follow this tutorial in order to find the file URIs you need to exclude:
    Find the right JS files to exclude from optimization

Heads up! Your website may load scripts from external services. Those do not get combined, but they might get moved up the HTML document. In order to prevent issues related to external JavaScript, exclude it from the process as described here:
Excluding external JS from file optimization

Remove query strings

  • Can improve the performance grade (though rather cosmetically).
  • Removes the default WordPress “?ver” query parameter from file URIs, encodes it into the file name, and stores the new file in a dedicated cache folder. (“/cache/busting”)
  • You can exclude specific file URIs from this process by using a helper plugin:
    Exclude files from Remove Query Strings option

Render-blocking CSS/JS

  • Can improve loading time and performance grade.
  • Reduces the number of initial HTTP requests.
  • ⚠️ Can cause numerous issues when not done correctly. Make sure you read this article about it:
    Render-blocking JavaScript and CSS (PageSpeed)
  • Requires advanced knowledge of website development. Render-blocking resources may vary on each and every page of your website. So getting this to work can become a highly complex task while the result may not even make your website load that much faster. Skipping this option might be your best choice unless you’re an experienced web developer who already knows how to handle render-blocking resources in general.