WPRocket is a great optimization plugin and I do highly recommend it. However, it does have a couple bugs and there are features that are simply not needed because the Total theme already is optimized. This guide will show you how to modify certain settings so that your site can work beautifully with WPRocket and Total.
Do NOT Combine Your CSS & JS Files
First or all make sure settings used to combine CSS and JS files are disabled. Those are old protocols that are not recommended for modern sites and can actually slow down your site!
Exclude CSS & JS from Minify
There is no need to minify the theme’s CSS and JS files because they already are minified. Excluding the theme’s CSS and JS files will prevent WPRocket from running unneeded processes and storing duplicate versions of the theme’s files on the server.
Exclude Total CSS from Minify
To exclude the theme’s CSS add the following under the Excluded CSS Files field:
/wp-content/themes/Total/(.*).css
/wp-content/plugins/total-theme-core/(.*).css
Exclude Total JS from Minify
To exclude the theme’s JS add the following under the Exclude JS Files field:
/wp-content/themes/Total/(.*).js
/wp-content/plugins/total-theme-core/(.*).js
Exclude Total from JavaScript Deferred
The Total theme and Total Theme Core plugins are already optimized to load scripts in the most optimal way. If a script can be deferred the theme uses core WP methods to load it in the site head with the defer attribute. Otherwise, the theme will load the script at the bottom of the body element after the page has rendered.
There is no need for WPRocket to make any changes in the way the theme’s scripts are loaded. So I recommend adding the following under the Exclude JavaScript Files field:
/wp-content/themes/Total/(.*).js
/wp-content/plugins/total-theme-core/(.*).js
Exclude the Mobile Menu Breakpoint CSS files from Unused CSS
WPRocket has a known bug where the unused CSS function will incorrectly insert CSS that is inside a file that contains a media attribute intended to load at certain breakpoints. What end up happening is the CSS runs always and will cause your mobile menu to not work and the header menu will remain visible always instead of hiding at smaller screen sizes.
Under the Remove Unused CSS tab add the following to the CSS safelist field:
wpex-mobile-menu-breakpoint-max
wpex-mobile-menu-breakpoint-min
Disable Delay JavaScript Execution
I personally recommend keeping this setting disabled. Delaying JS execution can minimally speed up site rendering (usually without a real difference in noticeable speed) but it often causes display or usability issues. For a better site experience it’s generally best to keep this disabled.
If you want to keep this setting enabled I would recommend at least excluding the theme’s core script:
