How to Identify non-render blocking (async) css using javascript

WebPageTest General Discussion
1

Hi

I want to track render Blocking & non-blocking CSS using javascript on every pageview on my site

CSS is treated as a render blocking resource but there are async CSS loading approaches such as
Using media tag -

Using alternate -

OR loading CSS in body

I am using async/defer tag to identify non-blocking js, but for CSS I am not able to figure out as my script will execute after onLoad event & will check No of blocking CSS, till the time media/rel attribute value is changed

how webpagetest identify it