Asset Clean Up CSS render blocking?

@zacher I’m glad you like the plugin and I’ll be even happier if you will use it in the long term as more useful features to further boost the page speed score will come up ??

Now, regarding the render-blocking CSS, what actually happens with optimized Asset CleanUp files (this includes, minified, combined or altered in any way) is that they remain loaded in the same state that they were before, meaning that if the CSS was render-blocking, then even if the file is optimized, it’s still render-blocking, but now it’s not loading from its original location, but from the caching directory which is managed by Asset CleanUp.

Let me give you a few examples, to make it even clearer for everyone reading this:

Scanario #1: Your targeted page (e.g. the homepage, most common one) loads 10 render-blocking CSS stylesheets from various plugins and the themes, having a total of 200 KB. You activate a feature such as minify CSS. The plugin will scan the files, minify them, and load them from the caching directory. The total size of the files is now 120 KB (after modification) which is great as 80KB were stripped from the total page size. However, although the CSS files are smaller now, they are still render-blocking as they were used to be before when they were loading from their original location. Even if they now load from the caching one, they have the same render-blocking state.

Scanario #2: Your targeted page has 10 CSS files that are required to be loaded (e.g. in this instance, all of them are useful and none should be unloaded). However, you want to have the number of HTTP requests reduced from 10 to 1 or 2 (the plugin will calculate that accordingly, but for sure there should be fewer files loaded). The page is now loading 2 HTTP requests from the caching directory (minus eight). Although it’s an improvement, the files combined stylesheets are still render-blocking.

I know, you have the impression that the plugin itself made them render-blocking, but in fact, they were always like that. You can test the page appending /?wpacu_no_load which will test the page in Google PageSpeed Insights as if Asset CleanUp is fully deactivated (for debugging purposes).

So, in order to have them non-render blocking, you either have to unload the useless ones and thus by not having some of the “fat”, there will be fewer render-blocking CSS files ?? To make most of the CSS (even all) non-render blocking, you can use some of the following features that belong to the Pro version:

1) Preload (Async) -> this is recommended to the files that are not needed to load immediately for the above the fold to be shown (avoiding a flash of unstyled content) – it has to be done carefully via trial and error (using “Test Mode”) if you’re new to this, not a developer and you want to make sure nothing will be messed up
2) Moving them CSS to the BODY (this is recommended only for CSS that is needed much later during the page load or after certain actions are taken, for example, the CSS of a modal box that is shown when certain links are clicked on the page)
3) Implementing Critical CSS, which will make all the CSS to be non-render blocking: https://assetcleanup.com/docs/?p=608

If you already use WP Rocket which is a known page caching plugin, they have a feature called “Optimize CSS Delivery” that will implement critical CSS (it could be easier for you as you don’t need to edit the theme via custom coding). However, all the CSS will still load in the end (even though it’s in an async way) and if you can strip some of the “fat” by unloading useless CSS through Asset CleanUp, in the end, it will be even better: fewer CSS loaded overall ??

I hope it helps (please check the documentation of the plugin here as well: https://assetcleanup.com/docs/).

Dear Gabe. Thank you, for a prompt and comprehensive response. Indeed I do use Rocket cache and I am in the early days of learning how to use dev console to identify and then unload unused files. Found learning the chrome dev console coverage a bit opaque!

So, for my situation and others reading perhaps (correct me if I am wrong) I should:

1. Unload unused files with Asset Clean Up Pro (can also check in dev console)
2. Preconnect/Preload those resources that remain (async CSS that is below the fold?)
3. Compress CSS into one file and use rocket CPCSS
4. Use Rocket to optimize the now slimmer CSS delivery (async load)

Which naturally leads me to what is possible with part-utilised CSS files?

And thats before I consider FOUC. It goes on and on! Thanks again.

Heading over to the docs!

@zacher the order of the optimization is the right one, however, note that if you enable “Optimize CSS Delivery” in WP Rocket (which is #4 in your list), you don’t need to preload (Async) CSS files from #2 because WP Rocket applies the same preloading to the CSS files after critical CSS is implemented. So, in short, try to do it by skipping #2 and it should all be good.

PS: Just make sure that if you enable compress CSS files in WP Rocket, don’t do the same with Asset CleanUp Pro. This should be detected automatically, but if it isn’t for any reason, it’s good for you to be aware of it as it’s not ideal to use the same feature from two plugins as extra resources are used for the same purpose.