06-01-2018, 10:08 PM
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 -
<link rel="stylesheet" href="mystyles.css" media="nope!" onload="this.media='all'">
Using alternate -
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
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
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 -
<link rel="stylesheet" href="mystyles.css" media="nope!" onload="this.media='all'">
Using alternate -
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
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