Resolving Issues with Minify CSS & Combine CSS

To resolve display issues that may occur when CSS Minify /Combine is active, please take the following steps:

  1. Go to: https://asset-detector.herokuapp.com/
  2. Enter the URL of the page with the CSS issue, and add ?nowprocket to the URL, e.g example.com/about?nowprocket.
    This bypasses WP Rocket, so that you can find the original URLs (unmodified by WP Rocket) of all CSS files. 
  3. Click List Assets and you will then see a list of all the CSS and JavaScript files on the page:

  4. Copy the list of CSS files, then go to WP Rocket Settings > File Optimization and paste the list into the Excluded CSS Files field:

  5. Excluding files from external domains
    Files from external domains can be excluded either by the domain name or the full file URL.
    e.g. to exclude: https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

    You may use either: stackpath.bootstrapcdn.com
    or https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

  6. Save the settings and check your site, in a logged-out or incognito window. It should now be displaying correctly.
  7. Now remove each file from the list, one-at-a-time. After each removal, save the settings and check your site. Repeat this until the website is broken again.
  8. When the website breaks, replace the last removed file back into the list and move onto the next file.

Note: this method can also be used for issues with JS Minify/Combine (using the JS Files and Inline JS results in the asset detector tool), but the method described here is faster.

You can also use the Blue Button Chrome extension to get the list of internal and external CSS and JavaScript files on your site. This is how it looks: 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.