What if a single plugin fixes all Core Web Vitals issues on your site and Makes your site faster like Rocket. Yes, WP rocket can fix your all CWV errors if you configure it properly.
We Offer Website Speed Optimization Service!
Feel your website needs Page Speed Optimization? Do not panic. We will fix it for you. A fast-loading website to boost your website traffic, sales, and revenue..
As Google announced that Core Web Vitals become Google ranking factors. To beat your competitors and to get a higher SERP ranking, you should optimize our website for Core Web Vitals.
We will configure WP Rocket to fix Core Web Vitals errors on a blog called bloggingguidez.com. Now, website speed is very low and has lots of errors. We will see the results practically after configuring WP Rocket.
So in this article, we will do a detailed review of how to configure WP Rocket to fix the Website’s Core Web Vitals errors to make your website run like a rocket.
WP Rocket is the Best WordPress Cache Plugin?
In the last few years, I have had the opportunity to test many WordPress caching plugins, and I can definitely say that WP Rocket is the best.
This is not to say that other plugins (like WP Super Cache, W3 Total Cache, or Litespeed) are bad plugins, but they also good.
WP Rocket is not just a caching plugin, it also combines other features to improve web loading. These include optimizing the delivery of static content, optimizing the database, or integrating with other tools like Cloudflare.
Okay, it is not a free plugin, but considering all the content it contains, its price is very low. Really worth it.
In addition, in general, the configuration of WP Rocket is simpler than the rest of the WordPress cache plugins.
WP Rocket is the caching plugin that I used on this website and I am satisfied with its results.
WP Rocket Configuration to fix Core Web Vitals Errors
So let’s configure WP Rocket to fix Core Web Vitals errors. We will setup only necessary settings.
Let’s get started…
1. Cache
We will click on the CACHE tab in the WP Rocket administrator, and we will access the option where various aspects of the cache operation can be configured. As we have seen before, by default, once the plugin is activated, the cache will already be activated.
Let’s review the different parameters that we will find here.
In Mobile Caching, we have enabled caching for mobile devices. It is important to activate this parameter. Otherwise, the pages loaded from the phone will not load from the cache, so it will slow down.
You should only leave it disabled when the web is not responding, which means it does not fit the available size of the browser window. The vast majority of WordPress themes will already respond.
Here we also have the parameter Save files separately for mobile devices. Generates a separate cache file for each page based on device type.
This should only be activated if our WordPress presents a different process when loading from a mobile phone. Usually, this does not happen Since the themes generally used are already mobile-friendly, it is not recommended to enable this option.
In “User cache”, we will see the box “Enable the cache for users connected to WordPress”. After activating this option, a cache will be generated for the specific content of registered users.
Once this parameter is activated, we must be careful and test it because it can generate errors. If your website does not have private content, it is better to disable it.
Please note that if this parameter is disabled and we are logged into WordPress admin, the cache will not be applied when the web interface is opened in another browser tab. For these situations, you can use other browsers or incognito mode.
In the “Cache lifetime”, we can indicate the time that the cache of each page will be applied to the generation of a new file.
If our page is new and has little content, we recommend that you set a higher value (a few days).
This way, the cache will be more efficient. On the contrary, if the content of our website is modified regularly, it is best to set it to a value of fewer than 10 hours or less.
Remember that when we modify any WP Rocket configuration option, we must press the “Save changes” button.
Finally, we should have a setup in the Cache section like this:
2. File Optimization
In the “File Optimization” tab of WP Rocket, we can configure all aspects of static file delivery (such as CSS or JavaScript). With these options, we can fix Eliminate render-blocking resources issue.
Let’s look at the “CSS files” section first.
In the “CSS files” section, we can optimize the provision of style sheets with various configuration parameters.
The option “Minify CSS files” removes spaces, comments, and excessive line changes, so these files are small and load faster. The improvement is not much, but it can be enabled since there is no danger of something going wrong.
The option “Combine CSS files” will gather all the CSS files that we will use for the plugins, themes, etc. only in one. This reduces the number of requests to the server, which generally makes the total page load time slightly less.
Sometimes, activating this parameter can cause errors in the web design. If you activate it later, you will have to test the home page of your website in an incognito window, to be sure that the cache is working. You will even see that when you try to activate the parameter, a confirmation is requested. If you have any problem, you’d better leave it disabled.
Next, we have “Exclude CSS files”. We can use this to avoid including those CSS files that caused us problems by enabling “Combine CSS files”.
Knowing which files are is difficult, although a few tricks can be used. For example, if you find that the theme itself is causing the layout problems, you can exclude the theme’s CSS by adding code like the following: /wp-content/themes/THEME_NAME/(.*).css and change THEME_NAME TO YOU ARE USING AT THAT MOMENT IN your WordPress.
If the problem is caused by the styles of a plugin, you can do the same by adding: /wp-content/plugins/NAME-PLUGIN/(.*).css.
Finally, we have the parameter, “Optimize CSS delivery”. If you enable this option, part of the CSS styles called CSS Critical Path will be loaded at the beginning and the rest will remain at the end. This usually doesn’t cause any problems and improves the Core Web Vitals Scores on Core Web Vitals tools.
Note that enabling this feature sometimes has a somewhat strange effect on loading, causing the web to initially appear without a theme, and after a moment (usually less than a second) everything displays correctly. If this is the case and you don’t want to do this, disable the parameter.
If you enable “Optimize CSS delivery”, you will see an alternate critical path box below where you can paste a path to the file where the basic CSS will be loaded. This can be generated using external tools, I recommend using it because it will fix your Core Web Vitals issue like remove Unused CSS and eliminate Render-blocking Resources.
We will review the “JavaScript Files” section. The configuration is very similar to what is available for CSS files.
The Minimize JavaScript Files option removes comments and extra blanks from files. It does not represent a risk for the operation, so I recommend having it activated.
The Combine JavaScript Files parameter joins all the files that are loaded into one. This is the most sensitive setting that could cause problems once activated.
For example, it can cause pop-up windows not to load or image galleries not to work.
With this in mind, we now see 2 fields to exclude JavaScript from the merge: Inline JavaScript excluded and Exclude JavaScript files.
In the first case, we can exclude the JavaScript code that is loaded head-on in the HTML, and in the second we can exclude the JS files that load JavaScript code.
If an error occurs after turning on file merge, you can use the first two boxes to exclude files.
Next, we have “Load JavaScript Deferred” we can choose to delay the loading of JavaScript files. With it, we will ensure that the upload of these files is completed at the end of the body of the network so that the upload of visible content will not be delayed. I suggest you try to activate it because it can speed up.
Last is Delay JavaScript Execution, Turn it on and it improves performance by delaying the loading of JavaScript files until user interaction (e.g. scroll, click).
Finally, we should have a setup in the File Optimization section like this:
3. Media
This section will solve your Core Web Vitals issues like Serve images in next-gen formats and properly size images.
We start with LazyLoad to configure this part of the Media.
When you load a web page in our browser, normally the entire page is not displayed in the window, but only part of it. We have to scroll down and see the rest. If there are images in the invisible part, they will still load. That way, it loads images that we can’t see and may not even see if we change the page without scrolling.
When activating the Enable parameter for images, the images that are not in the visible part of the browser are not initially loaded but are loaded when we scroll and get to them. This means a saving in the data downloaded the first time the page is loaded, or what is the same, a shorter overall load time.
This effect does not always apply. For example, images uploaded as backgrounds or rotating image galleries will not use lazy loading. I recommend enabling it but give it a try later as it can sometimes cause images to not load at the correct size.
Next, we have the Enable For Iframes And Videos option, which will apply a lazy load to items loaded from iframes, such as YouTube videos or other types of items loaded from an external web. I also recommend enabling it.
If you enable the previous parameter, another will appear with the option to Replace The Youtube Iframe With An Image In The Preview. Leave it checked as this way the YouTube videos you have embedded on the web will have less impact on WordPress loading speed.
Next, we have “Add missing image dimensions” under the “image dimensions section”. I also recommend enabling it. It will fix your one core Web Vitals issue called Properly Size images.
Finally, we have the WebP Compatibility section. WebP is an image format that can achieve high compression rates with low-quality loss. The webP image format is a next-gen image format. To enable this option, you need to activate the Imagify plugin first and then Enable this option. It will fix Serve images in next-gen formats Core Web Vitals issue.
By enabling Enable WebP caching, WP Rocket will be responsible for serving these supported browsers. Keep it Enable.
Finally, we should have a setup in the Media section like this:
4. Preload
By default, the WP Rocket cache is generated as follows: when a visitor visits a WordPress page without a cache, it will load as usual and the cache will be generated at this point. This way, the next user who visits the page will already see the cached version of the page.
The same happens when the cache file expires or we clear the cache manually.
If we also enable the feature Enable Cache Preload Through Site Map, WP Rocket will use our WordPress web map to identify the pages that need to be reviewed. This will be more efficient.
By activating the above option, a new Yoast Seo XML Sitemap or maybe rank math depends on which SEO plugin you are using will be displayed for the sitemap generated by the Yoast SEO plugin to be used directly. Of course, you need to have this plugin for that, which is highly recommended.
Next, we have Link Preloading. It is recommended to enable Link preloading as this will make the cache more efficient, especially on websites with few visits.
Next, we have Preload Fonts. Here’s a detailed WP rocket’s guide regarding Preload Fonts. This option will help you to fix Eliminate render-blocking issues.
Finally, we should have a setup in the Preload section like this:
5. Database
In this part of the WP Rocket setup, various optimizations will be applied to our WordPress database. This can be important because a very heavy or poorly optimized database can significantly reduce the load.
You should enable the following options that show in the below-given image:
6. Image Optimization
Upon entering the “Image Optimization” section of WP Rocket, we will see that this is not an operation performed directly by you but will be operated through the additional Imagify plugin. Since the plugin is independent, it will not be repeated here.
Imagify is a paid service that varies the number depending on the number of images to be optimized.
There are free alternatives. For one thing, you can optimize images with a Photoshop editor.
We also have a variety of WordPress plugins that do the homework for image optimization, but most are paid for. As a free alternative, I recommend Optimizer.io which, at the time of writing, is free and works great.
These tools optimize image quality to reduce weight and thus increase speed. This is because the images are usually of very high quality, so a lower quality cannot be seen with the naked eye.
This Image Optimization section will help you to Fix some Core Web Vitals Issues like Serve images in next-gen formats and properly size images.
What Improvements Are Obtained With WP Rocket?
Now it’s time to check the result that we obtained by using WP Rocket. Before using WP Rocket, in bloggingguidez.com were lots of Core Web Vitals errors like Eliminate render-blocking Resources, Serve Next-gen image formats, etc.
Let’s check the results:
Conclusion
WP Rocket is a plugin designed to improve WordPress loading in all aspects. To do this, it is not limited to including a caching system like other plugins, but also integrates other tools that can be improved in other ways.
Improvements shown in Google’s PageSpeed recommendations include the following:
- With its caching system, server response time is reduced.
- Since CSS and JS delivery can be optimized, rendering-blocking resources are removed.
- With your Lazyload system, you can postpone loading images that are not displayed on the screen
- You can choose to reduce the delivery of CSS and JS.
You just need to use the PageSpeed tool to see the results before and after configuring WP Rocket.
So we learned how you can configure WP Rocket to fix Core Web Vitals issues. If you are still facing problems and need someone’s help, then don’t worry.
We have a professional developers’ team that will fix all types of CWV (Core Web Vitals) errors significantly for our clients for the maximum Website Speed and Performance. If you want Superior Website Speed then Check Our Affordable Pricing, so we can start Optimising your website.
If you have any questions, don’t hesitate to do comment, we will help you.
