Resolving Issues with Minification

If you have activated WP Rocket’s minification feature (File Optimization), you may see appearance issues on your website afterwards. This can happen when CSS/JS files from themes or plugins are not suitable to be minified. When your site looks “broken” after enabling minification, this is how you solve the problem.

Warning: If your website is currently using a coming soon/password protected plugin that is hiding the content to not logged-in users, or is behind an HTTP authentification, the minification will not work! You will have to disable the protection to be able to use it.

Detecting Problematic files

Not all files can be minified and combined. The solution to your site looking “broken” usually is to detect problematic files and exclude them from the minification process.

Follow these steps (same procedure for CSS and JavaScript):

1
Disable all minification.
2

Use our debug tool to generate a list of all CSS and JS files on your site:
wp-rocket.me/tools/wp-rocket/debug/minify

Simply paste in your website URL and the tool will detect the files for you.

Note: Some plugins/themes do not load all their CSS and JS files on every page of the site. If there is a specific page on your site that you are having an issue with, paste that specific URL into the debug tool.
If you use a security plugin like iThemes Security, our tool will not detect ANY file.

Textarea with CSS URLs from the debug form

3

Copy and paste all the CSS URLs into the CSS option field, or all the JS URLs into the JS option field:

WP Rocket options field for excluding URLs from minification

4

Re-enable minification.

5

Remove the URLs from the options field one by one, saving your options and checking your site in an icognito browser window each time. Once you see another conflict, that file needs to be excluded from minification.

If this doesn't help, the problem could be caused by an  external JS file, so you should follow this guide.