![]() |
How to Identify non-render blocking (async) css using javascript - Printable Version +- 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 |