WP Rocket 3.11 -launched a new removal of unused CSS

In WP Rocket, we are committed to always making our products stronger and simpler. We hope to provide our Rocketeers with the best plug -in ever to improve performance and simplicity -and will never stop improving it.

We also know which optimization can affect your website performance and which optimization is difficult to solve. Deleting unused CSS is one of them. Unused CSS will greatly affect loading time and key performance indicators, including maximum content drawing and first content drawing. By deleting or reducing CSS, you will have the opportunity to significantly improve your PageSpeed \u200b\u200bInsights score and make your website faster.

This is the reason why WP Rocket 3.11 focuses on the new Remove Unused CSS function, which will help you achieve performance goals more easily.

Continue reading and understanding what the improvement function means to your performance results. You will understand how WP Rocket 3.11 will bring extra improvement to your website speed -and more!

New features of WP Rocket 3.11

WP Rocket 3.11 Follow the Remove Unused CSS transformation from the perspective of availability, performance and compatibility. The new Remove University CSS is still in the test stage, but we already have its schedule -read the end of the article to learn more.

When ing our new main version, you will benefit from the following aspects:

Better usability

-remove CSS has asynchronous methods to prevent service stop when optimizing CSS delivery. Therefore, you will find something slightly different in the UI.
• 
  Better performance

—— This new version has made significant changes to the way we process pre -load font function when we delete the unused CSS. Whether you have used Remove Unused CSS or not before, you should see a positive impact on scores!

Better compatibility

-If you are worried about potential deletionExcept for unused CSS errors and how long it takes to repair, then this is for you.
• You can watch our videos or jump to the next part to understand more information about these changes and how to use them to optimize the performance of your website.

Better better What is available means

WP Rocket 3.11 comes with the Remove Unused CSS, which has been rebuilt from scratch. Why? Because empathy and humility are our two core values \u200b\u200b-we insist on them.

Since we use WP Rocket 3.9 to launch Remove Unused CSS, we have not been able to get rid of the Beta mode. We are not satisfied with this function itself and their working methods. The availability is not good, and the service is often interrupted. Therefore, we decided to rebuild this function and switch from synchronization to asynchronous methods. The asynchronous mode will call the cache page, the API calls and the CSS used after 60 seconds.

This method conversion has changed the rules of the game, two reasons:

You will benefit from better availability.

In other words, when WP Rocket tries to generate CSS used, you will not be stuck again. You will generate USED CSS for 100 seconds every 60 seconds.

1. The asynchronous method provides the possibility for many new enhancements we can’t think of when using the synchronization method . We will now be able to process new powerful functions while processing the use of CSS, which depends on API calls. Perform the new Remove University as a glimpse of the future of WP Rocket!

The switching of the method also affects the presentation of the CSS optimization process in the user interface.

Before WP Rocket 3.10, the Remove Unused CSS option will show you the progress of the CSS process: 删除未使用的CSS – WP Rocket 3.10

在CSS 过程中，在Before the CSS process is fully completed, it is impossible to track any potential improvement in PageSpeed \u200b\u200bInsights. In addition, due to the overload of the server, CSS optimization may take up to several hours but still cannot work properly. These are key issues, which not only hinders customers to improve performance, but also not worthy of our products. This is why we work hard to solve these problems.

First, asynchronous methods and new server infrastructure will prevent overload and significantly reduce problems facing past. After processing the homepage (counting 90 seconds), the CSS optimization process will be completed in batches on your remaining page -once every 60 seconds. This means that you don’t have to wait until this process is fully completed to measure your performance improvement. Every 60 seconds, you will benefit from continuous CSS optimization, and you will immediately see its reflection in the PageSpeed \u200b\u200bInsights review.

The reason why this change is more direct than ever before is that you can at WP Rocket 3.1111 The countdown chronograph found. After the deleted CSS option is enabled, you will find a timer on the top of the page, indicating how long it takes to process your homepage. Delete the unused CSS counter

After the homepage is completed, you will receive a new new new CSS process on the entire site. Message:

Delete the unused CSS -updated information about the process

If you have not enabled the cache load, you will see To a message, it is recommended that you activate the option.

Like the previous versions, when you select \”Active Pre -load\” and \”Activating Cache Pre -load of site Maps\” options, you can avoid waiting for users to access the page to generate CSS used.

预加载缓存– WP Rocket[123 ] We strongly recommend using Remove Unused CSS and cache pre -load at the same time, because you will get two related benefits:

You will significantly reduce the CSS size.

We tested several most popular pages builders. We enabled the newly deleted unused CSS function and tracked improvement. It can be seen that the savings of CSS are huge and will have an impact on the overall performance:

2. Page builder used with woocommerce [123 ]

Before CSS (kb)

After CSS (kb)

海狸生成器

87

-88%

[123 ]

古腾堡

820

1,262

303

CSS saves percentage		Element 924	113 -88%[123 ]
733
554 64	-88%		[123 ] Visual composer
115 -86%		Diwei
-76%		saving CSS is not just for it. We can see how this enhancement can bring better performance results.
	We used Elementor and Astra to build a test site. We activated WP Rocket and enabled Lazyload. We performed the initial PageSpeed \u200b\u200bInsights test and scored 67 points.		PageSpeed \u200b\u200bInsight Score – WP Rocket Activation + LAZyload

Then, we run another test after enabling the delayed JS function. The overall performance level has been improved a lot, but the score is not green, and some LightHouse indicators are not:

PageSpeed \u200b\u200bInsight Score -delayed JS activation, deleted unused CSS [ [ [ [ [ 123]