My WP Rocket cache plugin guide for best settings!
Do you already have or plan to buy WP Rocket and want to make sure you have the best settings to improve your WordPress site performance? Then look no further than my handy guide. Simple steps, configurations, and explanations for this fantastic performance plugin!
WP Rocket – background
Who is WP Rocket is why are they so popular?
WP Rocket very quickly became the most popular plugin around 2-3 years ago (2016) because they were the first to bring a full-featured and easy-to-use caching plugin to the masses. Before WP Rocket, everyone was using (and suffering with) W3 Total Cache aka w3tc…which if you haven’t already known, is one of the most poorly-designed plugins ever. Tons of granular options that don’t make sense to the average user and more often than not either broke your site or made it run even slower than before. Using w3tc felt like trying to defuse a time-bomb.
It’s no wonder at all that when WP Rocket came out, it was rapidly accepted and adored by the masses. WP Rocket featured beautiful UI with very few options (all accommodated by helpful descriptions in plain English), and most importantly—it worked right away! With just a 1 or 2 clicks, your site was instantly sped up and nothing broke! Oh what a joy it was to use and so worth the premium price! (FYI: at the time, WP Rocket cost $40/year which was unheard of since most cache plugins were either free or had a small lifetime price.)
Well times have changed since then. Many new cache plugins have come on the market, also easy to use, and boasting tons of features that WP Rocket didn’t have. There’s a massive battle over market share now and while WP Rocket still has a strong following, they are doing some catch-up in terms of copying features from other plugins.
While WP Rocket is still very easy to use, it’s no longer the ultra-simple 1-click solution that it used to be. Never to fear, I’ll walk you through every setting (there’s only like 20) and tell you what I would personally recommend. Let’s get to it!
QUICK Setup Guide
- Cache > Mobile Cache – enable caching for mobile devices BUT NOT for separate cache files UNLESS you have AMP or some kind of mobile-specific layout mechanism.
- Cache > Cache Lifespan – if you have a smaller site
- File Optimization – check “Combine Google Fonts files”, uncheck everything else.
- Media > LazyLoad > Enable for images – I don’t recommend this! I hate lazyload.
- Media > LazyLoad > Enable LazyLoad for iframes/videos – enable if you have any Youtube embeds NOT at the top fo the page. Can also check the “Replace Youtube iframe with preview image” option to speed up those pages further.
- Media > Emoji – disable if you don’t use emojis much (your browser probably supports them anyway).
- Media > Embeds – can disable if you don’t use it.
- Preload > Sitemap Preloading –
- Advanced Rules > Never Cache URL(s) – I highly recommend to never cache any pages with contact forms, carts, checkouts, or account pages. List them here.
- CDN – enter in your CDN info if you have one. If you only have Cloudflare, skip this.
- Add-ons – if you have Varnish or Cloudflare, go here and enable the add-ons and configure them.
Detailed Setup Guide
- Mobile Cache > Enable caching for mobile devices – CHECKED.
- Mobile Cache > Separate cache files for mobile devices – usually UNCHECKED unless you have AMP or some kind of mobile-specific layout mechanism.
- User Cache > Enable caching for logged-in WordPress users – disabled is safest. It’s a hassle if you don’t understand the implications and/or don’t have a strong server. It’s only useful if you have users logging in often. It’s less troublesome if you have very few users and very pages.
- Cache Lifespan > Specify time after which the global cache is cleared – default of 10 hours is safe. Going less eats up more server resources but is totally OK if you have very few pages (10-20). I like to pick 24 hours but you have to make sure to exclude any pages with contact forms or “nonces” from caching.
- Basic Settings > Minify HTML – unchecked. I don’t bother unless you have very few pages and/or powerful server. Cloudflare can do it at DNS level anyway.
- Basic Settings > Combine Google Fonts files – checked.
- Basic Settings > Remove query strings from static resources – check if you don’t change your design option.
- CSS Files > Minify CSS files – unchecked. I don’t bother unless you have very few pages and/or powerful server. Cloudflare can do it at DNS level anyway.
- CSS Files > Combine CSS files – unchecked. Usually causes problems (especially on sites with many plugins). Also, I hate combining CSS or JS.
- CSS Files > Optimize CSS delivery – unchecked! This is WP Rocket’s “critical CSS function” which I don’t recommend because I believe some CSS should be render-blocking.
- LazyLoad > Enable for images – unchecked. I hate lazyload.
- LazyLoad > Enable for iframes and videos – enable if you have any Youtube embeds NOT at the top fo the page.
- LazyLoad > Replace Youtube iframe with preview image – enable this option to further speed up pages with Youtube embeds or iframes.
- Emoji > Disable Emoji – disable if you don’t use emojis much (your browser probably supports them anyway).
- Embeds > Disable WordPress embeds – can disable if you don’t use it. It removes one tiny JS request.
- Sitemap Preloading > Activate sitemap-based cache preloading – not necessary unless you want to preload in a specific order or only specific pages. To use it, simply check the box and enter the XML sitemaps to preload.
- Preload bot > Manual – check it. It enables option to preload manually. Good to use after any site updates.
- Preload bot > Automatic – usually checked! But I don’t recommend it for sites with over 1k pages (especially if you update daily), and also not necessary if your site has decent traffic (over 100k/month).
- Prefetch DNS Requests > URLs to prefetch – preloads DNS for external domains, so they load faster when you click on URLs to them or when your site loads external assets coming from them. Don’t know what to put? Simply open your site in Chrome Incognito > Inspect > Sources…now type all the external domain sources that you see. All the google analytics and font calls, social media stuff, chat service, CDN, etc.
- Never Cache URL(s) – exclude specific URLs here from caching. I typically exclude anything with forms or dynamic data (live game scores, stocks) or user-specific data (like shopping carts).
- Never Cache Cookies – can exclude certain pages or users from caching if they enter using a cookie. Useful for certain purposes
- Never Cache User Agents – useful for excluding certain devices, browsers, or software from seeing cached pages.
- Always Purge URL(s) – can specify extra URLs to purge automatically, in case they don’t already do so.
- Cache Query String(s) – useful for caching certain query strings that don’t actually present different content to users.
I don’t mess with anything here. The features are self-explanatory. Don’t do anything if you don’t know how they affect your site!
- Enable Content Delivery Network – check if you’re using CDN. (Do not check this if you’re only using Cloudflare!)
- CDN CNAME(s) – put in your CDN CNAME and what type of files it’s used for (usually “all files”). I do think it’s cool though that you can use multiple CDN’s for different types of files.
- Exclude files from CDN – I never use it, but the option might be handy sometime.
- Varnish – enable if using Varnish.
- Cloudflare – enable and configure if using Cloudflare. I enter only the Global API key, account email, and domain. I don’t mess with the other settings like “Development mode”, “Optimal settings”, or “Relative protocol”….leave them alone!
- Export settings – download your settings here if you want. I never bother to save since it takes only 2 minutes to configure.
- Import settings – import settings here.
- Rollback – very useful in case your site breaks because of a WP Rocket plugin update.
- WP Rocket cache comment not showing in HTML source – either WPR isn’t working or maybe you enabled Cloudflare’s feature which strips out HTML comments.
- Delayed CSS issues (FOUC or FOUT) – don’t combine CSS or optimize CSS delivery!
- Broken visuals or functions – try not combining CSS or JS. Or you can use my diagnostic steps for excluding problematic CSS/JS below.
- Contact forms not working – if you can’t get the contact forms to work, the easiest fix is to exclude the page entirely. Another idea is to make sure you exclude the contact form CSS/JS from combining. (I also recommend not to use Contact Form 7.)
- WSOD or error 500 – it’s unfortunate but not every plugin is compatible with others. You can restore your site by deleting the WP Rocket section in htaccess, delete the “advanced-cache.php” and “object-cache.php” files in the “wp-content” directory. You can also increase your WP memory limits.
- Admin area showing incorrectly – this can be due to caching logged-in users.
How to find and exclude problematic CSS/JS from combining:
- Isolation Method #1 – leave COMBINE CSS or JS enabled, open up the site in Chrome > Developer Tools > Network (tab), and reload the page. Click the little red error circle to see which CSS/JS are missing. Exclude them from merging and see if things work.
- Isolation Method #2 – disable COMBINE CSS or JS (or even caching altogether), and scan your site in Pingdom. Scroll down to the waterfall and sort the loaded items by file-type (neatly displaying all CSS/JS). Now go back to Swift settings and merge scripts/styles again but manually exclude whichever CSS/JS you think is causing the issue. (Hint: whatever’s breaking is probably related to the problem. Did a certain plugin or theme function stop working? Try disabling those CSS/JS.) Yes, it will take a lot of trial and error. It could be anywhere; maybe a plugin, maybe a theme.
There’s a lot I’m not spelling out because this is very technical and should be handled by advanced users. If you’re having this much issue with merging CSS/JS, you shouldn’t be doing it. It’s nobody’s fault…not yours, not the cache plugin, not your other plugins/themes. (Sure you can try another CSS/JS merge plugin like Autoptimize and it might work for your current setup but then break another day.) I really really don’t recommend merging CSS/JS!
Need Expert Help?
I’ve tried my best to offer detailed advice for everyone and WP Rocket is pretty darn simple enough as it is. But there will always be sites that need special configuration. Still have problems? Contact one of the WP Rocket support channels mentioned below.
- Free help is available on the WP Rocket Users Facebook group (fastest response, official support team and myself are on there), or WP Rocket website ticket (great option and more privacy for paid users).
- More explanations about features can be found on official WP Rocket documentation.
- If you need help but still insist on doing things on your own, please respect your level and avoid messing with settings that you don’t understand.
If you would like paid help or even just a free look at your site, don’t hesitate to contact me. (I configure WP Rocket on dozens of sites every month.)
- Buy WP Rocket (my affiliate link)
Take care and hope you enjoy WP Rocket! 😀
Thank you for the guide! This is really helpful.
Do you have any updated guide with the Latest Settings?
I would be careful with using the removed unused CSS beta feature in WP Rocket without first testing it on a staging site first.
Absolutely. Ya gotta test before using that and realistically, you just can’t rely on automated tools for that. Or at least if you do, then you have to know how to manually exclude/include for which selectors.