+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: WebPagetest (/forumdisplay.php?fid=7)
+--- Forum: General Discussion (/forumdisplay.php?fid=25)
+--- Thread: How to Identify non-render blocking (async) css using javascript (/showthread.php?tid=15388)
How to Identify non-render blocking (async) css using javascript - rasam25 - 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