If your site looks broken after you activated WP Rocket or changed one of its settings, such as a menu that will not open, images that vanished or a layout that jumped, it is almost always a single optimization option that does not get along with your theme or another plugin. You do not need to delete the plugin. You find the problematic option, then either exclude the affected file or element from it, or turn it off only on the pages that are hit.
This is also the path that the plugin’s official documentation recommends: confirm that it is really the cause, turn off the optimization options, and turn them back on one at a time until the problem returns. In this guide I put the checks in order, and for each common setting I explain how to tell that it is the culprit and how to fix it.
Before anything else, you need a full backup of the files and the database. In the Tools tab of the plugin you can also download your current settings as a JSON file with the Download Settings button, so you can go back to exactly where you were.
Step 1: Confirm that the plugin is really the cause
Before you touch any settings, check that the problem is really related to the plugin’s optimizations.
The check is simple: open the broken page and add ?nowprocket to the end of the URL, for example https://yourdomain.com/page/?nowprocket. This parameter bypasses the optimizations. If the page looks fine in this version, one of the optimizations is causing the problem. If it is broken either way, the problem is somewhere else: in the theme, in another plugin or on the server.
If the optimizations are not to blame, move on to a regular conflict check: temporarily switch to a default theme and deactivate plugins one by one. If they are to blame, continue to step 2. And every time you change a setting you need to clear the cache. Do it in Settings > WP Rocket, on the Dashboard tab, by clicking Clear and preload cache, or through the same link in the plugin’s menu in the top admin bar. And if you have several different problems, the documentation recommends dealing with each one separately.
Step 2: Find which WP Rocket setting is breaking your site
Most problems with WP Rocket settings come from the File Optimization and Media tabs. The Minify CSS files and Minify JavaScript files options are turned on by default from the first installation, so even if you did not change anything, one of them could be the problem.
To find the culprit, turn off all the options in the File Optimization and Media tabs, clear the cache and check the page in a private browsing window where you are not logged in to WordPress. If the problem is gone, turn the options back on one at a time and check after each one. The option after which the problem returns is the culprit. If the problem does not go away even with everything off, one of the plugin’s automatic features may be responsible, and then you contact its support.
Once you find the option, the documentation suggests three ways to fix it, in this order. The first and most common is to exclude the affected file or element from it. The second is to turn it off only on the problematic pages, so the rest of the site stays fast. And the third, only if the problem appears on most of the site, is to turn it off completely. In the next steps I detail the settings most likely to break things.
Step 3: Delay JavaScript execution
This option postpones loading JavaScript files until the visitor does something on the page. It is powerful, and that is why it also breaks menus, sliders and forms.
It is the culprit if the problem appears when Delay JavaScript execution is on and all the other options in the File Optimization tab are off, and disappears when you turn it off. Common signs are an element that only appears after scrolling or moving the mouse, a theme preloader (loading spinner) that keeps spinning until you touch the page, or images that do not show up when the theme or another plugin does its own lazy loading.
The fix starts with One-click exclusions under the option, where you choose the relevant plugin, theme or service. If that is not enough, add the problematic files to the Excluded JavaScript Files box. If the theme has a preloader, turn it off in the theme settings. And if the theme lazy loads images, turn that off and keep the plugin’s lazy loading. The documentation distinguishes between a cosmetic problem, where an element just appears late, and a problem that breaks functionality, and for a functional problem you must add an exclusion. The full details are in the troubleshooting guide for Delay JavaScript execution.
Step 4: Remove Unused CSS
This option deletes from the page the CSS that looks unused. Sometimes it also deletes styles that are needed, and then part of the page loses its styling.
It is the culprit if the problem happens when Remove Unused CSS is the only option that is on, does not happen when it is off, and stays even after you regenerate the Used CSS. The option works in the background and not instantly, so give it time before you check. And if the problem appears only on mobile, make sure the Mobile Cache option is on.
For the fix there is a CSS Safelist box, where you add classes, IDs, CSS files or font families that must be kept. To test whether it is even worth working with the list, temporarily enter (.*) in it, save and wait for the Used CSS to be rebuilt. If the problem is solved, delete the (.*) and add only the missing styles. You add a font family with an @ before the name, for example @Poppins.
Step 5: Lazy loading of background images
The LazyLoad for CSS background images option is in the Media tab, and it loads background images defined in CSS only when they need to be displayed. It works automatically on all background images on the site, and according to the documentation it is not compatible with lazy loading of background images from another plugin.
A real case from my work: on a travel site, WP Rocket’s option for lazy loading CSS background images caused the off-screen slides in a carousel to stay blank. Turning the option off solved it.
The sign is a carousel, slider or section with a background image that appears empty, mostly in elements that are not visible right when the page opens. To check, turn the option off, clear the cache and look again.
If this is the cause, you can exclude the problematic images in the Excluded images or iframes box, by image file name, CSS file name, CSS class or domain, one per line (details in the option’s documentation). If the problem is on a single page, its edit screen has a box called WP Rocket Options, where you disable lazy loading for just that page. And if the option breaks more than it gains, as in the case I described, turn it off.
Step 6: White screen, critical error or a problem after an update
When the site does not load at all, it is no longer a matter of an optimization setting, and you need to see the error itself.
If the white screen appears when you clear the cache, according to the plugin’s documentation it can be a PHP memory shortage. The server error log will then show a line like Fatal error: Allowed memory size of ... bytes exhausted. This is the same phenomenon explained in the guide on WordPress memory limit exceeded, which also covers how to raise the limit. Sometimes the same problem is shown to visitors as a 500 error, which has its own diagnosis path. If you see the critical error message on your site, WordPress emails the site admin a Recovery Mode link, through which you can log in to the admin area with the faulty plugin paused just for you. To see the errors yourself, add these lines to wp-config.php, before the line /* That's all, stop editing! Happy publishing. */:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );The errors will be written to the file wp-content/debug.log. WordPress does not recommend leaving this on in a live site, so when you finish, set the values back to false.
If the problem is memory, raise the PHP limit or contact your hosting provider. If you have no access to the admin area at all, rename the wp-content/plugins folder over FTP or in the file manager, for example to plugins.hold. This deactivates all plugins without deleting their settings. Once you are in the admin area, rename the folder back to plugins and activate the plugins one by one. And if the problem started right after an update, the Tools tab has a Reinstall Version button that rolls back to the previous major version.
When to stop and call an expert
If instead of a broken page you get a 503 Service Unavailable, there is a separate diagnosis guide for that. And there are situations where it is better to stop: you have no backup, the problem affects a shopping cart or a form that brings you customers, the site is broken even with all the options turned off, or the debug.log shows errors you do not understand. A wrong exclusion can leave the site slow, and a wrong switch-off can leave it broken without you noticing. If you went through the steps and something still does not work, I handle this: I find the culprit setting and leave you with a fast, working site.
Frequently asked questions
How do I know if WP Rocket is breaking my site or something else is?
Add ?nowprocket to the end of the page URL. If the page is fine that way, the plugin’s optimizations are to blame. If it is broken either way, the problem is somewhere else.
Which settings are on by default?
According to the documentation, on first activation these are on: Minify CSS files and Minify JavaScript files, a Cache Lifespan of 10 hours, Preload Cache, Preload Links and Heartbeat Control set to Reduce Activity.
How do I clear the cache?
In Settings > WP Rocket, on the Dashboard tab, click Clear and preload cache. You can also do it from the plugin’s menu in the top admin bar, and for a single page through the Clear this cache link in the pages list.
Do I need to deactivate the plugin when something breaks?
In most cases, no. The documentation recommends finding the problematic option and excluding what is affected, or turning it off only on the affected pages. Turning it off completely is only right when the problem is on most of the site.
Why are carousel slides showing up blank?
One possible cause is LazyLoad for CSS background images. Turn it off, clear the cache and check. If that solved it, you can exclude the images or leave the option off.
How do I go back to an earlier version after an update broke something?
In the Tools tab there is a Reinstall Version button that installs the previous major version. Before you do, it is worth downloading your settings with the Download Settings button.