Find the best settings for your site
So, you’ve activated WP Rocket. And now you’re wondering, “How do I get the best results for my site?”
Every site has a different theme, a different set of plugins, and different content. So the best settings will vary from site to site. In this article you'll learn the safest way to experiment with the most commonly used WP Rocket settings.
The goal is always to make your site faster. And activating more options doesn’t always result in more speed. So don’t worry if you’re not able to turn everything on.
To check if your site is faster, you should use a tool that tests load times. Please see our video about that.
It’s a good idea to take some benchmark speed tests before you begin configuration, then again afterwards.
Best practices for configuration
When testing options in WP Rocket, please use the following process:
- Activate options one-at-a-time, not everything at once
- After each option that you activate, check your site in a browser window where you are not logged in to WordPress. An incognito/private window works well. By doing this you will be able to see immediately if a particular option causes any issue.
- Check a few types of pages on your site. If anything doesn’t look right, don’t panic! Disable the last option you activated and your site will return to normal.
Did you know?
After you activate an option, there’s no need to clear the cache. We’ll take care of that for you.
Getting started with configuration
Media > LazyLoad
We recommend activating LazyLoad, because it helps reduce the negative performance impact of images, by loading them only as the visitor scrolls down the page and actually needs to see them. You can read more about this on our blog.
Cache > Mobile
If you have a responsive theme, we also recommend enabling Mobile cache to apply all optimizations for mobile users as well.
File Optimization > Minify/Combine files for CSS/JS
Minifying your CSS and JavaScript files to remove whitespace and comments is a best practice to help reduce their file size. It might improve your “performance grade”, but it does not always have much of an impact on your actual load time.
The Combine CSS files option takes all the CSS files on your site and combines them into a single file. So if you had 10 CSS files before, you’ll now have 1.
Combine JS will combine all your JavaScript files, including the inline scripts, then load the combined file at the bottom of your page, so it doesn't block the rendering of the page.
Now, combining files may improve your score, but it may not improve the actual speed. That’s especially true if your site uses HTTP/2. So, it’s really important to check the speed with and without the combine options to find the right configuration. If you’re not sure whether your site uses HTTP/2 you can use an online tool to check, or ask your host. It’s also possible that your CDN supports HTTP/2—even if your own server does not.
File Optimization > Load CSS Asynchronously
This is an advanced option, and it may not be appropriate for every site. It really depends on how your site is built. When you activate this option, our external tool will visit each type of page on your site and generate the Critical Path CSS. This helps the perceived load time of your site.
More info
File Optimization > Remove Unused CSS
This is another advanced feature with a huge impact. It really depends on how your site is built. After you've activated this option, WP Rocket's tool will start generating the Used CSS needed to render your website. The goal is to reduce the size of CSS and pages and to reduce the main thread work. Remove Unused CSS is the recommended option over Load CSS Asynchronously.
More info
File Optimization > Load JavaScript Deferred
Deferring JavaScript ensures that it won't block your page as it's being rendered. After activating this option, make sure all the interactive elements of your site—like your slider or menu—are working properly.
More info
File Optimization > Delay JavaScript Execution
This is an advanced option. It helps improve your PageSpeed score and speed up the initial loading of your page. The Delay JavaScript execution feature delays the loading of all JavaScript files and inline scripts until there's a user interaction such as moving the mouse, touching the screen, scrolling and others.
More info
If you have problems after activating any option, you might be able to resolve it by simply excluding certain files.