Deferring css is not as simple as using a plugin, or I mean, you can do it but it won’t look nice.
There is an option on FVM to load the google fonts and font awesome CSS async, because we know that those can load separately.
When you async css, stuff will load out of order in an inconsistent manner.
Sometimes they load properly in order, refresh and it’s out of order.
When css loads out of order, styles that should come later and overwrite older code (very common on child themes for example) will not work as intended.
If you load css async, you have to make sure that you only have 1 css file generated, or that you have files which can load in any order.
Furthermore, while CSS is not yet loaded, you will experience a FOUC effect, especially on slow connections. It’s not pretty, unless you also have a critical path code inlined in the header, which can also be different for every page.
A couple plugins like autoptimize, can integrate with https://criticalcss.com/ for generating the critical path, however I have extensively tested this and it doesn’t produce good enough results for the majority of sites I worked with (I work on a few thousand sites so I have a large pool to test stuff).
I thought of integrating it, but it’s just not stable enough and neither does it create the perfect results that I expect, meaning it’s not good enough to be included on FVM.
If you hire a good developer, he will be able to async FVM CSS and generate propper critical path for your site manually… (emphasis on good developer).
However, nowadays the critical path is hardly ever needed for pagespeed insights, like in previous api versions.
When they say defer unused css, they mean to delete unused css, which should not be done on wordpress, because you never know which code may be needed in the future.
The speed tool is for all types of sites, but wordpress in its nature, has some restriction on what you should do, and what you should ignore.
I have no problem reaching a score of at least 90+ without going into critical path css, although I do usually move the css to the footer and hide the content until it finishes loading the css file… but note that this is only doable, when the time to first byte is slow.
FVM has options to Async CSS on the dev tab (look for it) in the options, but it’s there as a tool for developers only. If you want to use it, go ahead… but I would advise against it, if you are not a developer or at least, an advanced user (in which case, you would probably not be asking).
FVM is geared towards advanced users and developers, because it has more options than most other plugins… but each site, may require different settings and sometimes, auxiliary code or plugins to unlock its full potential.
I wish there was only a button to push and work for everyone, but unfortunately it’s impossible with the almost unlimited universe of themes and plugins combination for wordpress… so for advanced stuff, I recommend a developer to take over.
