Mastering WP Rocket for Optimal WordPress Performance

Why Optimize WordPress Site Speed?

When it comes to user experience, speed is crucial. A consumer study found that the stress from mobile speed delays is similar to watching a horror movie or solving math problems, and it’s even worse than waiting in line at a retail store checkout.

Speed is key to success, more details at web.dev. For instance:

• Pinterest reduced perceived wait times by 40%, directly increasing search engine traffic and sign-ups by 15%.
• COOK cut average page load time by 850 milliseconds, boosting conversions by 7%, reducing bounce rate by 7%, and increasing pages viewed per visitor by 10%.

Slow speeds can also affect how Google and other crawlers index your site, leading to slow or missed updates. It can also cause mobile usability tests to fail.

WordPress plugins vary in quality, and without optimization, site speed might be slow. WP Rocket is the top-rated WordPress caching plugin, offering noticeable speed improvements, ease of use, and great compatibility.

WP Rocket is highly effective for optimization and has many powerful features. One plugin can replace three others (heartbeat control, database optimization, CDN integration, auto-generate video thumbnails, etc.), making it highly recommended.

WP Rocket doesn’t have a free version and costs $49 per year on the official website. You can download the Chinese version from our site.

Points to Note

WordPress has many plugins, some with overlapping features. Only one plugin should be used for each feature to avoid conflicts. For example, WP Rocket’s “Remove Unused CSS” conflicts with Perfmatters’ “Remove Unused CSS”; only one should be used.

Note: The following settings don’t account for conflicts with other plugins. Check the compatibility settings at the end of this article for more details.

WP Rocket Settings

1. Cache

1.1 Separate Mobile Cache

Not recommended. Enabling it creates separate cache files for each mobile page, increasing database size and server load. Most sites are responsive, so desktop and mobile content (HTML, images, CSS, JS, fonts) are usually the same, allowing mobile to use desktop cache.

1.2 User Cache

Generally not recommended. WP Rocket doesn’t cache logged-in content by default. Enabling this creates dedicated cache files for each logged-in user, increasing server load.

1.3 Cache Lifespan

Set to 24 hours. If “Preload Cache” is enabled, cache is rebuilt after this period. Most sites don’t update frequently, so 24 hours helps reduce server load. Enable this if your site has many registered users and member-only content.

Enable mobile cache for the following themes:

• Woodmart theme – for separate mobile/desktop menus
• Newspaper theme – when optional mobile theme is enabled
• Avada theme – using different backgrounds or mobile categories (hardcoded)

Tip: Checking if Cache is Working Check for cache files in wp-content/cache/wp-rocket/your-domain.com/. If the folder is empty, try the “Clear and Preload Cache” option from the top bar menu.

2. File Optimization

These are WP Rocket’s most important features for boosting site speed.

2.1 Minify CSS Files

Recommended. Removes spaces and comments to reduce file size. If using a CDN like Cloudflare with built-in minify functions, enable it on the CDN and disable WP Rocket’s to reduce server load.

2.2 Combine CSS Files

Not recommended for beginners, experts can try. In the past (http/1), fewer files improved speed. Modern sites use http/2, loading multiple resources faster, so combining CSS doesn’t impact speed much. Efficient CSS combines instructions into as few elements as possible and reduces DOM tree nodes for faster rendering.

Some bloggers recommend combining CSS for small sites as it may offer a slight speed boost. Combined CSS files are smaller, rendering faster. However, combining can cause issues and isn’t compatible with “Remove Unused CSS” or “Preload CSS.”

2.3 Optimize CSS Delivery

Crucial. Greatly boosts speed and removes “Remove Render-Blocking Resources” warnings from Google PageSpeed. Choose “Remove Unused CSS.” This prioritizes critical CSS for initial content and defers loading non-essential CSS, improving FCP, LCP, and TTI.

Unused CSS loads when not needed by plugins or themes. Developers queue stylesheets only when needed, but extra styles often get added, slowing down WordPress sites and triggering render-blocking warnings.

Prioritizing critical CSS and deferring non-essential CSS significantly reduces load times and improves page display speed.

2.4 Remove Unused CSS

Offers the biggest speed boost but has the lowest compatibility. If it causes issues, switch to “Async CSS.”

2.5 Async CSS

Great speed boost with better compatibility. Used widely with minimal issues. If first screen content flickers or loads slowly, check troubleshooting steps.

3. JavaScript

3.1 Minify JS Files

Like minifying CSS, recommended. If using a CDN with minify functions, enable them on the CDN and disable WP Rocket’s to reduce server load.

3.2 Combine JavaScript Files

Like combining CSS, if “Delay JavaScript Execution” is enabled, this option is disabled.

3.3 Async JavaScript

Recommended. Boosts speed and removes “Remove Render-Blocking Resources” warnings from Google PageSpeed. Moves JS to the header and allows HTML parsing while downloading JS, then executes JS before continuing to load HTML.

3.4 Delay JavaScript Execution

Recommended. Boosts speed and removes “Remove Render-Blocking Resources” warnings. Delays JS loading until user interaction, improving Google Lighthouse scores. Offers better speed boost than async loading but slightly lower compatibility.

Tip: If using Cloudflare, turn off “Rocket Loader” under “Speed” > “Optimization” settings to avoid site errors.

4. Media

4.1 Lazy Load Recommended. Delays loading images/videos until they enter or near the viewport, speeding up page load times. Enable for images, CSS background images, frames, and videos. Replace YouTube frames with preview thumbnails for best results.

4.2 Lazy Load Images and Videos Reduces initial page load time, weight, and system resource use. Improves performance, especially on mobile devices with slower connections. More details at web.dev.

4.3 Enable for CSS Background Images Delays loading background images. Enable this feature, but exclude top banner background images.

4.4 Replace YouTube Iframes with Preview Thumbnails WP Rocket automatically generates thumbnails for YouTube videos, loading only the thumbnail initially and speeding up page load.

5. Preloading

5.1 Enable Preload Cache Recommended. Preloads page content into the browser, speeding up other pages when visitors navigate. WP Rocket 3.12.0 improves preloading but increases CPU load significantly, potentially causing issues on small servers.

5.2 Prefetch Links Downloads linked pages when the mouse hovers over links, making pages load faster when clicked. Slight speed boost but increases server and bandwidth load. Only enable if your server and bandwidth can handle it.

5.3 DNS Prefetch Prepares DNS for external resources (Google Fonts, YouTube videos, etc.) to slightly improve load times by pre-resolving DNS connections.

5.4 Preload Fonts Speeds up font loading by preloading fonts referenced in CSS, improving load times and perceived performance. Works only with locally hosted fonts.

6. Miscellaneous

Content updates or product changes automatically clear the cache, no manual clearing needed. Refresh the cache after plugin updates or removals.

6.1 When to Clear Cache Manually:

• Creating 301 or 410 redirects
• Styling changes in CSS files with active CSS minification or merging
• Activating, deactivating, or updating plugins that display frontend content
• Excluding files from lazy loading, async loading, or CSS delivery optimization
• Changes outside WordPress editor via (s)FTP/SSH, server, external proxy, or CDN

6.2 Cloudflare Settings

If using Cloudflare, disable “Bot Fight Mode” under Security > Bot to avoid “reduce JavaScript execution time” and “avoid long main thread tasks” warnings. This script adds CPU load and lowers PageSpeed Insights scores, impacting performance.

6.3 Display Issues

Problems with icons, sliders, sections, or missing styles are likely CSS issues. Disable “Optimize CSS Delivery” or exclude problematic CSS files.

6.4 Functionality Issues

JavaScript controls most functions. Disable “Delay JavaScript Execution” under “File Optimization” if functions break, then refresh. If problems persist, disable “Async JavaScript” and exclude problematic JS files.