WP Rocket Premium WordPress Plugin – In order for search engines to give your site on the first page of search results, you need pages to open in 2 seconds or faster.
This requires good hosting, good software, technical order on the site and optimized images. The caching plugin will do the rest. If you meet these conditions and install a free caching plugin, you will get 60-80 points on the Google test for the mobile version, and 80-90 points for the desktop version.
The problem with free plugins is that they don’t cache the mobile version, and they don’t delay loading scripts. Therefore, you will need either a paid plugin or one or more free plugins that can be difficult to set up.
WP Rocket is a paid plugin that has 3 big pros:
- Easy setup
- Mobile version caching
- Loading JS scripts after loading the main content
Check website speed
Search engines require pages to open in 2 seconds or less and score high in speed tests:
- Google PageSpeed Insights – https://pagespeed.web.dev/
- Pingdom Website Speed Test – https://tools.pingdom.com/
- GTmetrix – https://gtmetrix.com/
- WebPageTest – https://www.webpagetest.org /
- IsItWP – https://www.isitwp.com/free-website-speed-test-tool-for-wordpress/
Test your site to compare changes before and after using WP Rocket.
Setting up WP Rocket
Control Panel
The WP Rocket Control Panel contains information about the type of license and its validity period.
I tried several caching plugins , none of them gave such a good result with such a minimum amount of effort to achieve this result as WP Rocket.
The WP Rocket plugin has become a must-have plugin for every site, like SEO , security and optimization plugins .
Here you can connect RocketCDN – WP Rocket’s own CDN service for a fee.
In addition to RocketCDN, you can connect other CDN services, including paid or free CloudFlare.
Cache
All mandatory types of caching, such as browser caching, GZIP, databases, and so on, are enabled and configured (compare with the caching setting in W3 Total Cache).
You have 4 settings to make:
Enable caching for mobile devices −Turn on. This setting enables caching for mobile visitors. WP Rocket only considers phones/smartphones as “mobile devices”.
Split Files for Mobile Devices −Turn onorSwitch off, depending on your theme. The plugin documentation says that this setting should only be enabled if you have a dedicated theme or plugin for the mobile version (most likely you don’t have such a theme or plugin).
If you have such a theme or plugin activated, WP Rocket will automatically enable this feature and make it greyed out, i.e. uneditable.
When this setting is enabled, WP Rocket serves visitors on mobile devices with a separate cache, not the one it serves visitors on tablets and desktops.
Although the documentation says that for regular WordPress themes this setting should be turned off, on my Blocksy and Kadence themes , mobile pages get 10-15 points more with this setting than without it.
Try testing pages with the option enabled and disabled, leave the best option.
Cache authorized visitors −Switch off. This setting creates a separate cache for authorized visitors. Although this setting is needed in order to create a separate cache for authorized visitors, there are sometimes problems with it.
If you have a membership or an online store, then visitors can see each other’s cached content when authorizing on the site, in the closed parts of the site, in the Cart, on the Checkout page or in the admin panel.
If your visitors are complaining about these pages, disable caching of logged in users.
The cache lifetime is 10 hours. This specifies the lifetime of the cache, after which it becomes obsolete and is reset. If you have “ Preload ” enabled (enabled by default), then after clearing the obsolete cache, a new one will be created, you don’t need to do anything.
Files
This section contains settings for CSS and JS files. If after applying the settings you see problems on the site, then disable the settings one by one to find the cause.
Compress CSS Styles and Compress JavaScript Files -Turn on. These settings remove comments, spaces, empty lines and other unnecessary information from code in CSS and JS files.
This is a safe setting and should not break the site.
After you enable CSS and JS minification, the following settings will appear:
Merge CSS files and Merge JavaScript files -Switch off.
The point of these settings is to combine multiple CSS and multiple JS files into one CSS file and one JS file that will be downloaded in 2 requests instead of 20. This will save time on generating a large number of requests and speed up page loading.
This is a good idea, but in practice, concatenating files breaks the site more often than it should, because the scripts don’t always load in the correct order.
In addition, with the advent of HTTP / 2, this approach lost its meaning, because in this version of the protocol all requests and downloads occur in parallel, unlike version 1.1, where requests occurred sequentially.
Check that your hosting service supports HTTP/2 (most likely it does) and leave these settings disabled.
This is the most problematic setting and doesn’t make sense with HTTP/2.
Exclude CSS files and Exclude JavaScript files – If minification or merging of files causes problems, in these fields you can specify which files should be excluded from minification or merging.
- WP Rocket Documentation – Troubleshooting CSS Minification/Merge Issues
- WP Rocket Documentation – How to find the correct JavaScript file to exclude from minification
CSS Delivery Optimization −Turn on. This setting finds the minimum required CSS styles to render the site’s pages, and helps resolve the Google PageSpeed warning “ Eliminate render-blocking resources ”.
After you enable this setting, you need to select one of two options: ” Purge unused CSS ” or ” Load CSS asynchronously “.
It is recommended to enable ” Remove unused CSS “, this will resolve the Google PageSpeed ” Remove unused CSS ” warning.
This option will remove unused CSS from the site’s pages, so go through the pages to make sure everything renders correctly.
If you see that some elements on the pages are not displayed correctly, add these rules to the exceptions in the ” CSS Safe List ” field .
If adding styles to the exclusion list doesn’t help, then use the ” Load CSS asynchronously ” option. This is the safer option.
This setting will determine the minimum necessary styles for the correct display of pages, and will postpone all other styles until after the main content is loaded.
Asynchronous JavaScript loading -Turn on. This setup is similar to the previous one, but with JS. It moves script loading to the footer, and helps address the Google PageSpeed recommendation “ Eliminate render-blocking resources ”.
Usually *.js are heavy files that require resources for their processing, so postponing them significantly reduces the First Input Delay and Total Blocking Time parameters in Core Web Vitals.
Examples of such scripts are Google and Yandex analytics, Google and Yandex advertising, online chat , Facebook and VK Pixel, Gravatar, YouTube and VK video, social media buttons, and so on.
If, after moving to the footer, some script causes problems, you can add it to the exceptions in the Excluded JavaScript files field.
- WP Rocket Documentation – How to Exclude JavaScript from Asynchronous Loading
Postpone JavaScript loading −Turn on. This setting delays the loading of JS files and scripts on the page until the user performs one of these actions: mouse movement, finger tap, scroll, wheel scroll, or button press.
With this tweak, you will improve the First Input Delay and Largest Contentful Paint settings in the Core Web Vitals test. In addition to them, you will decide these Google recommendations:
- Remove unused JavaScript
- Minimize Main thread work
- Reduce JavaScript Execution time
- total blocking time
- Time to Interactive
- First contentful paint
If you enable this setting along with Merge JavaScript files , merge js files will be automatically disabled so that scripts are loaded in the correct order and do not break the site.